Invoice wrapper

This commit is contained in:
Peter Papp
2021-04-22 08:29:00 +02:00
parent 4b0e4da013
commit 5b70066900
8 changed files with 241 additions and 28 deletions
@@ -13,7 +13,7 @@
import {events} from '@/bus'
export default {
name: 'FilesView',
name: 'ContentInvoiceView',
components: {
InvoiceDesktopToolbar,
InvoiceContextMenu,
@@ -0,0 +1,92 @@
<template>
<div id="application-wrapper">
<!--File preview window-->
<FilePreview />
<InvoiceMobileMenu />
<ClientMobileMenu />
<InvoiceCreateMenu />
<InvoiceFilterMobile />
<InvoiceSortingMobile />
<!--Navigations-->
<MobileNavigation />
<SidebarNavigation />
<router-view :class="{'is-scaled-down': isScaledDown}" />
</div>
</template>
<script>
import InvoiceSortingMobile from '@/Oasis/Modules/Invoices/components/InvoiceSortingMobile'
import InvoiceFilterMobile from '@/Oasis/Modules/Invoices/components/InvoiceFilterMobile'
import InvoiceMobileMenu from '@/Oasis/Modules/Invoices/components/InvoiceMobileMenu'
import ClientMobileMenu from '@/Oasis/Modules/Invoices/components/ClientMobileMenu'
import InvoiceCreateMenu from '@/Oasis/Modules/Invoices/components/InvoiceCreateMenu'
import {UsersIcon, FileTextIcon, ClockIcon} from 'vue-feather-icons'
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
import MobileNavigation from '@/components/Others/MobileNavigation'
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
import FilePreview from '@/components/FilesView/FilePreview'
import ContentGroup from '@/components/Sidebar/ContentGroup'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'Settings',
computed: {
...mapGetters([
'config'
]),
},
components: {
InvoiceSortingMobile,
InvoiceFilterMobile,
InvoiceCreateMenu,
InvoiceMobileMenu,
SidebarNavigation,
ClientMobileMenu,
MobileNavigation,
ContentSidebar,
FileTextIcon,
ContentGroup,
FilePreview,
UsersIcon,
ClockIcon,
},
data() {
return {
isScaledDown: false,
}
},
methods: {
goTo(location) {
let routes = {
'invoices': 'getInvoices',
'advance-invoices': 'getAdvanceInvoices',
'clients': 'getClients',
}
this.$store.dispatch(routes[location])
}
},
mounted() {
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
}
}
</script>
<style lang="scss">
@import '@assets/vuefilemanager/_mixins';
@media only screen and (max-width: 690px) {
.is-scaled-down {
@include transform(scale(0.95));
}
}
</style>
@@ -1,18 +1,6 @@
<template>
<section id="viewport">
<!--File preview window-->
<FilePreview />
<InvoiceMobileMenu />
<InvoiceCreateMenu />
<InvoiceFilterMobile />
<InvoiceSortingMobile />
<!--Navigations-->
<MobileNavigation />
<SidebarNavigation />
<!--Sidebar navigation-->
<ContentSidebar>
<ContentGroup title="Invoices" class="navigator menu-list-wrapper vertical">
@@ -45,14 +33,16 @@
</ContentGroup>
</ContentSidebar>
<router-view :class="{'is-scaled-down': isScaledDown}" />
<ContentInvoiceView />
</section>
</template>
<script>
import ContentInvoiceView from '@/Oasis/Modules/Invoices/ContentInvoiceView'
import InvoiceSortingMobile from '@/Oasis/Modules/Invoices/components/InvoiceSortingMobile'
import InvoiceFilterMobile from '@/Oasis/Modules/Invoices/components/InvoiceFilterMobile'
import InvoiceMobileMenu from '@/Oasis/Modules/Invoices/components/InvoiceMobileMenu'
import ClientMobileMenu from '@/Oasis/Modules/Invoices/components/ClientMobileMenu'
import InvoiceCreateMenu from '@/Oasis/Modules/Invoices/components/InvoiceCreateMenu'
import {UsersIcon, FileTextIcon, ClockIcon} from 'vue-feather-icons'
@@ -72,11 +62,13 @@
]),
},
components: {
ContentInvoiceView,
InvoiceSortingMobile,
InvoiceFilterMobile,
InvoiceCreateMenu,
InvoiceMobileMenu,
SidebarNavigation,
ClientMobileMenu,
MobileNavigation,
ContentSidebar,
FileTextIcon,
@@ -78,7 +78,7 @@ export default {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
events.$emit('mobile-menu:show', 'invoice-menu')
events.$emit('mobile-menu:show', 'client-menu')
},
clickedItem(e) {
if (!this.$isMobile()) {
@@ -0,0 +1,65 @@
<template>
<MenuMobile name="client-menu">
<TitlePreview
v-if="clipboard[0]"
class="headline"
:avatar="clipboard[0].avatar"
:title="clipboard[0].name"
:subtitle="clipboard[0].email"
/>
<MenuMobileGroup>
<OptionGroup class="menu-option-group">
<Option @click.native="" title="Edit" icon="rename" />
<Option @click.native="deleteItem" title="Delete" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
</OptionGroup>
</MenuMobileGroup>
</MenuMobile>
</template>
<script>
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
import TitlePreview from '@/components/FilesView/TitlePreview'
import ThumbnailItem from '@/components/Others/ThumbnailItem'
import OptionGroup from '@/components/FilesView/OptionGroup'
import MenuMobile from '@/components/Mobile/MenuMobile'
import Option from '@/components/FilesView/Option'
import {mapGetters} from 'vuex'
export default {
name: 'FileMenuMobile',
components: {
MenuMobileGroup,
ThumbnailItem,
TitlePreview,
OptionGroup,
MenuMobile,
Option,
},
computed: {
...mapGetters([
'clipboard',
'user',
]),
},
data() {
return {
isVisible: false,
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.headline {
padding: 20px 20px 10px;
margin-bottom: 0;
}
</style>