Invoice create menu

resources/js/Oasis/Modules/Invoices/components/InvoiceActionsMobile.vue

@@ -0,0 +1,128 @@
+<template>
+    <div id="mobile-actions-wrapper">
+
+        <!--Base location-->
+        <div class="mobile-actions">
+            <MobileActionButton @click.native="showLocations" icon="filter">
+                {{ $route.meta.title }}
+            </MobileActionButton>
+            <MobileActionButton @click.native="createButton" icon="file-plus">
+                Create
+            </MobileActionButton>
+            <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
+                {{ $t('preview_sorting.preview_sorting_button') }}
+            </MobileActionButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import UploadProgress from '@/components/FilesView/UploadProgress'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'FileActionsMobile',
+        components: {
+            MobileActionButtonUpload,
+            MobileActionButton,
+            UploadProgress,
+        },
+        computed: {
+            ...mapGetters([
+                //
+            ]),
+        },
+        data() {
+            return {
+                isSelectMode: false,
+            }
+        },
+        methods: {
+            showLocations() {
+                events.$emit('mobile-menu:show', 'invoice-filter')
+            },
+			createButton() {
+                events.$emit('mobile-menu:show', 'invoice-create')
+            },
+			showViewOptions() {
+				events.$emit('mobile-menu:show', 'file-sorting')
+			},
+
+
+            selectAll() {
+                this.$store.commit('ADD_ALL_ITEMS_TO_CLIPBOARD')
+            },
+            deselectAll() {
+                this.$store.commit('CLIPBOARD_CLEAR')
+            },
+            enableMultiSelectMode() {
+                this.isSelectMode = true
+
+                events.$emit('mobileSelecting:start')
+            },
+            disableMultiSelectMode() {
+                this.isSelectMode = false
+
+                events.$emit('mobileSelecting:stop')
+            },
+        },
+        mounted() {
+            events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_mixins';
+
+    .button-enter-active,
+    .button-leave-active {
+        transition: all 250ms;
+    }
+
+    .button-enter {
+        opacity: 0;
+        transform: translateY(-50%);
+    }
+
+    .button-leave-to {
+        opacity: 0;
+        transform: translateY(50%);
+    }
+
+    .button-leave-active {
+        position: absolute;
+    }
+
+    #mobile-actions-wrapper {
+        display: none;
+        background: white;
+        position: sticky;
+        top: 35px;
+        z-index: 3;
+    }
+
+    .mobile-actions {
+        white-space: nowrap;
+        overflow-x: auto;
+        margin: 0 -15px;
+        padding: 10px 0 10px 15px;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #mobile-actions-wrapper {
+            display: block;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        #mobile-actions-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>

resources/js/Oasis/Modules/Invoices/components/InvoiceBrowser.vue

@@ -15,7 +15,7 @@
             <SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
 
 			<!--Mobile Actions-->
-            <FileActionsMobile />
+            <InvoiceActionsMobile />
 
 			<!--Item previews list-->
             <div class="file-list-wrapper">
@@ -53,12 +53,12 @@
 </template>
 
 <script>
+    import InvoiceActionsMobile from '@/Oasis/Modules/Invoices/components/InvoiceActionsMobile'
 	import InvoiceInfoSidebar from '@/Oasis/Modules/Invoices/components/InvoiceInfoSidebar'
-    import FileActionsMobile from '@/components/FilesView/FileActionsMobile'
-	import MobileToolbar from '@/components/FilesView/MobileToolbar'
-	import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
-	import EmptyMessage from '@/components/FilesView/EmptyMessage'
 	import InvoiceItem from '@/Oasis/Modules/Invoices/components/InvoiceItem'
+	import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
+	import MobileToolbar from '@/components/FilesView/MobileToolbar'
+	import EmptyMessage from '@/components/FilesView/EmptyMessage'
 	import SearchBar from '@/components/FilesView/SearchBar'
 	import {mapGetters} from 'vuex'
 	import {events} from '@/bus'
@@ -66,7 +66,7 @@
 	export default {
 		name: 'FilesContainer',
 		components: {
-			FileActionsMobile,
+			InvoiceActionsMobile,
 			EmptyFilePage,
 			MobileToolbar,
 			InvoiceItem,

resources/js/Oasis/Modules/Invoices/components/InvoiceCreateMenu.vue

@@ -0,0 +1,64 @@
+<template>
+    <MenuMobile name="invoice-create">
+        <MenuMobileGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('invoices')" title="New Invoice" icon="file-plus" is-hover-disabled="true" />
+                <Option @click.native="showLocation('advance-invoices')" title="New Advance Invoices" icon="file-plus" is-hover-disabled="true" />
+            </OptionGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('clients')" title="New Client" icon="user-plus" is-hover-disabled="true" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+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: 'InvoiceFilterMobile',
+    components: {
+        MenuMobileGroup,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'homeDirectory'
+        ]),
+    },
+    methods: {
+		showLocation(location) {
+
+		},
+        flushBrowseHistory() {
+            this.$store.commit('FLUSH_FOLDER_HISTORY')
+        },
+        goToFiles() {
+            this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            this.flushBrowseHistory()
+        },
+        goToLatest() {
+            this.$store.dispatch('getLatest')
+            this.flushBrowseHistory()
+        },
+        goToTrash() {
+            this.$store.dispatch('getTrash')
+            this.flushBrowseHistory()
+        },
+        goToShared() {
+            this.$store.dispatch('getShared', [{back: false, init: false}])
+            this.flushBrowseHistory()
+        },
+        goToParticipantUploads() {
+            this.$store.dispatch('getParticipantUploads')
+            this.flushBrowseHistory()
+        }
+    }
+}
+</script>

resources/js/Oasis/Modules/Invoices/components/InvoiceFilterMobile.vue

@@ -0,0 +1,64 @@
+<template>
+    <MenuMobile name="invoice-filter">
+        <MenuMobileGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('invoices')" title="Invoices" icon="file-text" is-hover-disabled="true" />
+                <Option @click.native="showLocation('advance-invoices')" title="Advance Invoices" icon="clock" is-hover-disabled="true" />
+            </OptionGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('clients')" title="Clients" icon="users" is-hover-disabled="true" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+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: 'InvoiceFilterMobile',
+    components: {
+        MenuMobileGroup,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'homeDirectory'
+        ]),
+    },
+    methods: {
+		showLocation(location) {
+
+		},
+        flushBrowseHistory() {
+            this.$store.commit('FLUSH_FOLDER_HISTORY')
+        },
+        goToFiles() {
+            this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            this.flushBrowseHistory()
+        },
+        goToLatest() {
+            this.$store.dispatch('getLatest')
+            this.flushBrowseHistory()
+        },
+        goToTrash() {
+            this.$store.dispatch('getTrash')
+            this.flushBrowseHistory()
+        },
+        goToShared() {
+            this.$store.dispatch('getShared', [{back: false, init: false}])
+            this.flushBrowseHistory()
+        },
+        goToParticipantUploads() {
+            this.$store.dispatch('getParticipantUploads')
+            this.flushBrowseHistory()
+        }
+    }
+}
+</script>