Invoice & Clients sorting

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

@@ -44,8 +44,13 @@
 				<ToolbarGroup>
 					<PopoverWrapper>
 						<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
-						<PopoverItem name="desktop-sorting">
-							<OptionGroup>
+						<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>
@@ -113,6 +118,10 @@
 		data() {
 			return {
 				query: '',
+				filter: {
+					sort: 'DESC',
+					field: undefined
+				}
 			}
 		},
 		watch: {
@@ -121,6 +130,24 @@
 			}
 		},
 		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/components/FilesView/Option.vue

@@ -36,6 +36,7 @@
             <box-icon v-if="icon === 'box'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <clock-icon v-if="icon === 'clock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <send-icon v-if="icon === 'send'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <dollar-sign-icon v-if="icon === 'dollar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
         </div>
         <div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
             {{ title }}
@@ -49,6 +50,7 @@
 <script>
 import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import {
+	DollarSignIcon,
 	UserPlusIcon,
 	FilePlusIcon,
 	SendIcon,
@@ -95,6 +97,7 @@ import {
             'icon'
         ],
         components: {
+			DollarSignIcon,
 			UserPlusIcon,
 			FilePlusIcon,
 			SendIcon,

resources/js/oasis-helpers.js

@@ -1,10 +1,26 @@
 import i18n from '@/i18n/index'
 import {debounce} from 'lodash'
 import {events} from './bus'
+import store from "./store";
 
 const OasisHelpers = {
 	install(Vue) {
 
+		Vue.prototype.$getInvoiceDataByLocation = function () {
+
+			let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location
+				? store.getters.currentFolder.location
+				: undefined
+
+			let actions = {
+				'regular-invoice': 'getRegularInvoices',
+				'advance-invoice': 'getAdvanceInvoices',
+				'clients': 'getClients',
+			}
+
+			this.$store.dispatch(actions[currentLocation])
+		}
+
 		Vue.prototype.$shareInvoice = function (entry) {
 			events.$emit('popup:open', {
 				name: 'share-invoice',

resources/js/store/modules/oasisInvoices

@@ -2,7 +2,12 @@ import {events} from '@/bus'
 import axios from "axios"
 import Vue from "vue"
 
-const defaultState = {}
+const defaultState = {
+	invoiceSorting: {
+		sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
+		field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
+	},
+}
 
 const actions = {
 	getRegularInvoices: ({commit, getters}) => {
@@ -15,7 +20,7 @@ const actions = {
 		})
 
 		axios
-			.get('/api/oasis/invoices/regular')
+			.get('/api/oasis/invoices/regular' + getters.invoiceSorting.URI)
 			.then(response => {
 				commit('LOADING_STATE', {loading: false, data: response.data})
 			})
@@ -36,7 +41,7 @@ const actions = {
 		})
 
 		axios
-			.get('/api/oasis/invoices/advance')
+			.get('/api/oasis/invoices/advance' + getters.invoiceSorting.URI)
 			.then(response => {
 				commit('LOADING_STATE', {loading: false, data: response.data})
 			})
@@ -57,7 +62,7 @@ const actions = {
 		})
 
 		axios
-			.get('/api/oasis/clients')
+			.get('/api/oasis/clients' + getters.invoiceSorting.URI)
 			.then(response => {
 				commit('LOADING_STATE', {loading: false, data: response.data})
 			})
@@ -97,17 +102,20 @@ const actions = {
 			})
 			.catch(() => Vue.prototype.$isSomethingWrong())
 	},
-	deleteClient: ({commit, getters}, payload) => {
-		//
-	},
-	sendInvoice: ({commit, getters}, payload) => {
-		//
+}
+
+const mutations = {
+	UPDATE_INVOICE_SORTING(state) {
+		state.invoiceSorting.field = JSON.parse(localStorage.getItem('sorting-invoices')).field
+		state.invoiceSorting.sort = JSON.parse(localStorage.getItem('sorting-invoices')).sort
 	},
 }
 
-const mutations = {}
-
-const getters = {}
+const getters = {
+	invoiceSorting: (state) => {
+		return {sorting: state.invoiceSorting, URI: '?sort=' + state.invoiceSorting.field + '&direction=' + state.invoiceSorting.sort}
+	},
+}
 
 export default {
 	state: defaultState,