Implemented: Added sorting options for "Due Date" and "Count Name" wi…

…thin Filters (#531)
hotwax · Dec 16, 2024 · ec3f98d · ec3f98d
1 parent 08a0a23
commit ec3f98d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/src/components/Filters.vue b/src/components/Filters.vue
@@ -22,6 +22,16 @@
           <ion-checkbox :value="query.noFacility" @ionChange="updateQuery('noFacility', $event.detail.checked)">{{ translate("No facility") }}</ion-checkbox>
         </ion-item>
 
+        <ion-item lines="none">
+          <ion-icon slot="start" :icon="swapVerticalOutline" />
+          <ion-select :label="translate('Sort by')" :value="query.sortBy" @ionChange="updateQuery('sortBy', $event.detail.value)" interface="popover">
+            <ion-select-option value="dueDate desc">{{ translate("Due date - Newest to oldest") }}</ion-select-option>
+            <ion-select-option value="dueDate asc">{{ translate("Due date - Oldest to newest") }}</ion-select-option>
+            <ion-select-option value="countImportName asc">{{ translate("Name - A to Z") }}</ion-select-option>
+            <ion-select-option value="countImportName desc">{{ translate("Name - Z to A") }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+
         <template v-if="showAdditionalFilters().selectedFacilities">
           <ion-item v-for="facilityId in query.facilityIds" :key="facilityId">
             <ion-label>{{ getFacilityName(facilityId) }}</ion-label>
@@ -137,7 +147,7 @@ import {
   IonToolbar
 } from "@ionic/vue";
 import { computed, ref } from "vue";
-import { closeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline } from "ionicons/icons";
+import { closeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline, swapVerticalOutline } from "ionicons/icons";
 import { translate } from '@/i18n'
 import store from "@/store";
 import router from "@/router";

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -67,6 +67,8 @@
   "Current on hand": "Current on hand",
   "Defaults to 'Draft'": "Defaults to 'Draft'",
   "Due date": "Due date",
+  "Due date - Newest to oldest": "Due date - Newest to oldest",
+  "Due date - Oldest to newest": "Due date - Oldest to newest",
   "Date": "Date",
   "Discard": "Discard",
   "Discard re-count": "Discard re-count",
@@ -152,6 +154,8 @@
   "Make sure you've reviewed the products and their counts before uploading them for review": "Make sure you've reviewed the products and their counts before uploading them for review",
   "Map all required fields": "Map all required fields",
   "Mapping name": "Mapping name",
+  "Name - A to Z": "Name - A to Z",
+  "Name - Z to A": "Name - Z to A",
   "New Count": "New Count",
   "New mapping": "New mapping",
   "No cycle counts found": "No cycle counts found",
@@ -260,6 +264,7 @@
   "Something went wrong": "Something went wrong",
   "Something went wrong, please try again": "Something went wrong, please try again",
   "Something went wrong while login. Please contact administrator": "Something went wrong while login. Please contact administrator.",
+  "Sort by": "Sort by",
   "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",
   "Status": "Status",
   "STAY": "STAY",

diff --git a/src/store/modules/count/CountState.ts b/src/store/modules/count/CountState.ts
@@ -5,7 +5,8 @@ export default interface CountState {
   query: {
     facilityIds: Array<string>,
     noFacility: boolean,
-    queryString: any
+    queryString: any,
+    sortBy: any
   },
   stats: any;
   cycleCounts: any;

diff --git a/src/store/modules/count/actions.ts b/src/store/modules/count/actions.ts
@@ -17,6 +17,8 @@ const actions: ActionTree<CountState, RootState> = {
     const params = {
       ...payload,
     }
+    // TODO: Currently, the search functionality works only on the count name. Once the API supports searching across 
+    // multiple fields, we should include the count ID in the search parameters.
     if(state.query.queryString.length) {
       params["countImportName"] = state.query.queryString
       params["countImportName_op"] = "contains"
@@ -36,6 +38,10 @@ const actions: ActionTree<CountState, RootState> = {
       }
     }
 
+    if(state.query.sortBy) {
+      params["orderByField"] = state.query.sortBy
+    }
+
     try {
       const resp = await CountService.fetchCycleCounts(params);
       if(!hasError(resp) && resp.data.length > 0) {

diff --git a/src/store/modules/count/index.ts b/src/store/modules/count/index.ts
@@ -14,7 +14,8 @@ const countModule: Module<CountState, RootState> = {
     query: {
       facilityIds: [],
       noFacility: false,
-      queryString: ''
+      queryString: '',
+      sortBy: 'dueDate desc'
     },
     stats: {},
     cycleCountImportSystemMessages:[],

diff --git a/src/store/modules/count/mutations.ts b/src/store/modules/count/mutations.ts
@@ -15,7 +15,8 @@ const mutations: MutationTree <CountState> = {
     state.query = {
       facilityIds: [],
       noFacility: false,
-      queryString: ''
+      queryString: '',
+      sortBy: ''
     }
   },
   [types.COUNT_STATS_UPDATED](state, payload) {