- Invoice sorting refactored

- Frontend build

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

@@ -10,7 +10,7 @@
                 {{ $t('create') }}
             </MobileActionButton>
             <MobileActionButton @click.native="showViewOptions" icon="th-list">
-                {{ $t('preview_sorting.preview_sorting_button') }}
+                {{ $t('in.button_sorting') }}
             </MobileActionButton>
         </div>
     </div>

resources/js/Oasis/Invoices/components/InvoiceDesktopToolbar.vue

@@ -45,15 +45,7 @@
 					<PopoverWrapper>
 						<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
 						<PopoverItem name="desktop-sorting" side="left">
-							<OptionGroup v-if="$isThisLocation(['regular-invoice', 'advance-invoice'])">
-								<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
-								<Option @click.native.stop="sort('total_net')" :title="$t('in.sort_by_net')" icon="dollar" />
-								<Option @click.native.stop="sort('invoice_number')" :title="$t('in.sort_by_invoice_number')" icon="file-text" />
-							</OptionGroup>
-							<OptionGroup v-if="$isThisLocation('clients')">
-								<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
-								<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
-							</OptionGroup>
+							<InvoiceSortingOptions />
 						</PopoverItem>
 					</PopoverWrapper>
                     <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
@@ -64,7 +56,7 @@
 </template>
 
 <script>
-	import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
+	import InvoiceSortingOptions from '@/Oasis/Invoices/components/InvoiceSortingOptions'
 	import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
 	import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
 	import ToolbarWrapper from '@/components/Desktop/ToolbarWrapper'
@@ -80,7 +72,7 @@
 	export default {
 		name: 'InvoiceDesktopToolbar',
 		components: {
-			FileSortingOptions,
+			InvoiceSortingOptions,
 			MoreHorizontalIcon,
 			ChevronLeftIcon,
 			ToolbarWrapper,
@@ -118,10 +110,6 @@
 		data() {
 			return {
 				query: '',
-				filter: {
-					sort: 'DESC',
-					field: undefined
-				}
 			}
 		},
 		watch: {
@@ -130,24 +118,6 @@
 			}
 		},
 		methods: {
-			sort(field) {
-				this.filter.field = field
-
-				// Set sorting direction
-				if (this.filter.sort === 'DESC')
-					this.filter.sort = 'ASC'
-				else if (this.filter.sort === 'ASC')
-					this.filter.sort = 'DESC'
-
-				// Save to localStorage sorting options
-				localStorage.setItem('sorting-invoices', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))
-
-				// Update sorting state in vuex
-				this.$store.commit('UPDATE_INVOICE_SORTING')
-
-				// Get data using the application location
-				this.$getInvoiceDataByLocation()
-			},
 			createInvoice(type) {
 				this.$router.push({name: 'CreateInvoice', query: {type: type}})
 			},

resources/js/Oasis/Invoices/components/InvoiceSortingMobile.vue

@@ -1,36 +1,23 @@
 <template>
     <MenuMobile name="invoice-sorting">
         <MenuMobileGroup>
-            <OptionGroup>
-				<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
-				<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
-            </OptionGroup>
+			<InvoiceSortingOptions />
         </MenuMobileGroup>
     </MenuMobile>
 </template>
 
 <script>
+import InvoiceSortingOptions from '@/Oasis/Invoices/components/InvoiceSortingOptions'
 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: 'InvoiceSortingMobile',
     components: {
+		InvoiceSortingOptions,
         MenuMobileGroup,
-        OptionGroup,
         MenuMobile,
         Option,
     },
-    computed: {
-        ...mapGetters([
-            'homeDirectory'
-        ]),
-    },
-    methods: {
-
-    }
 }
 </script>

resources/js/Oasis/Invoices/components/InvoiceSortingOptions.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+		<OptionGroup v-if="$isThisLocation(['regular-invoice', 'advance-invoice'])">
+			<Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+			<Option @click.native.stop="sort('total_net')" :arrow="arrowForTotalNetField" :title="$t('in.sort_by_net')" icon="dollar" />
+			<Option @click.native.stop="sort('invoice_number')" :arrow="arrowForInvoiceNumberField" :title="$t('in.sort_by_invoice_number')" icon="file-text" />
+		</OptionGroup>
+		<OptionGroup v-if="$isThisLocation('clients')">
+			<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+			<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+		</OptionGroup>
+    </div>
+</template>
+
+<script>
+
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import Option from '@/components/FilesView/Option'
+import { ArrowUpIcon } from 'vue-feather-icons'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'InvoiceSortingOptions',
+    components: {
+        OptionGroup,
+        ArrowUpIcon,
+        Option,
+    },
+    computed: {
+		arrowForCreatedAtField() {
+			if (this.filter.field !== 'created_at')
+				return undefined
+
+			return this.filter.sort === 'DESC' ? 'up' : 'down'
+		},
+		arrowForTotalNetField() {
+			if (this.filter.field !== 'total_net')
+				return undefined
+
+			return this.filter.sort === 'DESC' ? 'up' : 'down'
+		},
+		arrowForInvoiceNumberField() {
+			if (this.filter.field !== 'invoice_number')
+				return undefined
+
+			return this.filter.sort === 'DESC' ? 'up' : 'down'
+		},
+    },
+    data() {
+        return {
+            filter: {
+                sort: 'DESC',
+                field: 'created_at'
+            }
+        }
+    },
+    methods: {
+		sort(field) {
+			this.filter.field = field
+
+			// Set sorting direction
+			if (this.filter.sort === 'DESC')
+				this.filter.sort = 'ASC'
+			else if (this.filter.sort === 'ASC')
+				this.filter.sort = 'DESC'
+
+			// Save to localStorage sorting options
+			localStorage.setItem('sorting-invoices', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))
+
+			// Update sorting state in vuex
+			this.$store.commit('UPDATE_INVOICE_SORTING')
+
+			// Get data using the application location
+			this.$getInvoiceDataByLocation()
+		},
+    },
+    mounted() {
+        let sorting = JSON.parse(localStorage.getItem('sorting-invoices'))
+
+        // Set default sorting if in not setup in LocalStorage
+        this.filter.sort = sorting ? sorting.sort : 'DESC'
+        this.filter.field = sorting ? sorting.field : 'created_at'
+    }
+}
+</script>