nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 08:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Invoice empty page

Browse Source
This commit is contained in:
Peter Papp
2021-05-05 17:51:59 +02:00
parent 599b238ab4
commit 070a3aaba4
8 changed files with 250 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
resources/js/Oasis/Invoices/components/EmptyInvoicePage.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div class="empty-page" v-if="isLoading || isEmpty">
<div class="empty-state">
<!--Base invoice browser empty message-->
<div class="text-content" v-if="$isThisLocation(['regular-invoice', 'advance-invoice']) && !isLoading">
<h1 class="title">
Create Your First Invoice
</h1>
<p class="description">
It's very easy, just click on the button below.
</p>
<ButtonBase @click.native="createInvoice" button-style="theme" class="button">
{{ buttonTitle }}
</ButtonBase>
</div>
<div class="text-content" v-if="$isThisLocation('clients') && !isLoading">
<h1 class="title">
Create Your First Client
</h1>
<p class="description">
It's very easy, just click on the button below.
</p>
<ButtonBase @click.native="createClient" button-style="theme" class="button">
Create Client
</ButtonBase>
</div>
<!--Spinner-->
<div class="text-content" v-if="isLoading">
<Spinner />
</div>
</div>
</div>
</template>
<script>
import ButtonBase from '@/components/FilesView/ButtonBase'
import Spinner from '@/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
export default {
name: 'EmptyFilePage',
props: [
'title',
'description',
],
components: {
ButtonBase,
Spinner,
},
computed: {
...mapGetters([
'currentFolder',
'isLoading',
'entries',
]),
isEmpty() {
return this.entries && this.entries.length == 0
},
buttonTitle() {
return this.$isThisLocation('regular-invoice') ? 'Create Regular Invoice' : 'Create Advance Invoice'
}
},
methods: {
createInvoice() {
this.$router.push({name: 'CreateInvoice', query: {type: this.currentFolder.location}})
},
createClient() {
this.$router.push({name: 'CreateClient'})
}
}
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.empty-page {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin-top: 20px;
display: flex;
align-items: center;
.empty-state {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
}
.text-content {
text-align: center;
margin: 30px 0;
.title {
@include font-size(20);
color: $text;
font-weight: 700;
margin: 0;
}
.description {
@include font-size(13);
color: $text-muted;
margin-bottom: 20px;
display: block;
}
.button {
margin-left: auto;
margin-right: auto;
}
}
@media (prefers-color-scheme: dark) {
.text-content {
.title {
color: $dark_mode_text_primary;
}
.description {
color: $dark_mode_text_secondary;
}
}
}
</style>

6
resources/js/Oasis/Invoices/components/InvoiceBrowser.vue
View File

@@ -44,7 +44,7 @@
</div>
<!--Show empty page if folder is empty-->
<EmptyFilePage v-if="! isSearching" />
<EmptyInvoicePage v-if="! isSearching" />
<!--Show empty page if no search results-->
<EmptyMessage
@@ -64,9 +64,9 @@
<script>
import InvoiceActionsMobile from '@/Oasis/Invoices/components/InvoiceActionsMobile'
import InvoiceInfoSidebar from '@/Oasis/Invoices/components/InvoiceInfoSidebar'
import EmptyInvoicePage from '@/Oasis/Invoices/components/EmptyInvoicePage'
import InvoiceItem from '@/Oasis/Invoices/components/InvoiceItem'
import ClientItem from '@/Oasis/Invoices/components/ClientItem'
import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
import MobileToolbar from '@/components/FilesView/MobileToolbar'
import EmptyMessage from '@/components/FilesView/EmptyMessage'
import SearchBar from '@/components/FilesView/SearchBar'
@@ -78,7 +78,7 @@
components: {
InvoiceActionsMobile,
InvoiceInfoSidebar,
EmptyFilePage,
EmptyInvoicePage,
MobileToolbar,
EmptyMessage,
InvoiceItem,

19
resources/js/Oasis/Invoices/components/InvoiceContextMenu.vue
View File

@@ -7,7 +7,7 @@
<Option @click.native="editItem" title="Edit Invoice" icon="rename" />
<Option @click.native="" title="Send Invoice" icon="send" />
<Option @click.native="goToCompany" title="Go to Company" icon="user" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="deleteInvoice" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
@@ -20,7 +20,7 @@
<div v-show="isClient" class="menu-options" id="menu-list">
<OptionGroup class="menu-option-group">
<Option @click.native="goToCompany" title="Edit" icon="rename" />
<Option @click.native="deleteItem" title="Delete" icon="trash" />
<Option @click.native="deleteClient" title="Delete" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="goToCompany" title="Go to Profile" icon="user" />
@@ -75,7 +75,7 @@ export default {
},
methods: {
goToCompany() {
this.$router.push({name: 'ClientDetail', params: {id: this.item.client_id}})
this.$router.push({name: 'ClientDetail', params: {id: this.item.client_id ?? this.item.id}})
events.$emit('file-preview:hide')
@@ -98,7 +98,7 @@ export default {
editItem() {
this.$router.push({name: 'EditInvoice', params: {id: this.item.id}})
},
deleteItem() {
deleteInvoice() {
events.$emit('confirm:open', {
title: `Are you sure you want to delete invoice number ${this.item.invoice_number}?`,
message: 'Your invoice will be permanently deleted.',
@@ -108,6 +108,17 @@ export default {
operation: 'delete-invoice'
}
})
},
deleteClient() {
events.$emit('confirm:open', {
title: `Are you sure you want to delete client ${this.item.name}?`,
message: 'Your client will be permanently deleted.',
buttonColor: 'danger-solid',
action: {
id: this.item.id,
operation: 'delete-client'
}
})
},
closeAndResetContextMenu() {
// Close context menu

32
resources/js/Oasis/Invoices/components/InvoiceDesktopToolbar.vue
View File

@@ -36,8 +36,8 @@
<!--Invoice Controls-->
<ToolbarGroup v-if="! $isMobile()">
<ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="send" :action="$t('actions.share')" />
<ToolbarButton @click.native="editInvoice" :class="{'is-inactive': canActiveInView }" source="rename" :action="$t('actions.share')" />
<ToolbarButton @click.native="deleteInvoice" :class="{'is-inactive': canActiveInView }" source="trash" :action="$t('actions.delete')" />
<ToolbarButton @click.native="editItem" :class="{'is-inactive': canActiveInView }" source="rename" :action="$t('actions.share')" />
<ToolbarButton @click.native="deleteItem" :class="{'is-inactive': canActiveInView }" source="trash" :action="$t('actions.delete')" />
</ToolbarGroup>
<!--View Controls-->
@@ -100,6 +100,7 @@
let locations = [
'regular-invoice',
'advance-invoice',
'clients',
]
return !this.$isThisLocation(locations) || this.clipboard.length === 0
},
@@ -127,8 +128,9 @@
createCreateMenu() {
events.$emit('popover:open', 'desktop-create-invoices')
},
deleteInvoice() {
if (this.clipboard.length > 0) {
deleteItem() {
if (this.$isThisLocation(['regular-invoice', 'advance-invoice']) && this.clipboard.length > 0) {
events.$emit('confirm:open', {
title: `Are you sure you want to delete invoice number ${this.clipboard[0].invoice_number}?`,
@@ -140,12 +142,30 @@
}
})
}
if (this.$isThisLocation('clients') && this.clipboard.length > 0) {
events.$emit('confirm:open', {
title: `Are you sure you want to delete client ${this.clipboard[0].name}?`,
message: 'Your client will be permanently deleted.',
buttonColor: 'danger-solid',
action: {
id: this.clipboard[0].id,
operation: 'delete-client'
}
})
}
},
shareInvoice() {
alert('Send Invoice')
},
editInvoice() {
this.$router.push({name: 'EditInvoice', params: {id: this.clipboard[0].id}})
editItem() {
if (this.$isThisLocation(['regular-invoice', 'advance-invoice'])) {
this.$router.push({name: 'EditInvoice', params: {id: this.clipboard[0].id}})
}
if (this.$isThisLocation('clients')) {
this.$router.push({name: 'ClientDetail', params: {id: this.clipboard[0].id}})
}
},
},
}