Merge pull request #183 from amansinghbais/picking/#171

Implemented: picklist sorting menu on the picklist details page (#171)
hotwax · Dec 11, 2023 · c8ae4fc · c8ae4fc
2 parents 23e29af + 1749d97
commit c8ae4fc
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 25 deletions.
diff --git a/.env.example b/.env.example
@@ -6,4 +6,5 @@ VUE_APP_BASE_URL=
 VUE_APP_PERMISSION_ID=
 VUE_APP_ALIAS={}
 VUE_APP_DEFAULT_LOG_LEVEL="error"
-VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
+VUE_APP_PICKLISTS_SORT_OPTIONS=[{"name": "Product name", "value": "productName"}, {"name": "Location ID", "value": "locationSeqId"}, {"name": "Bin ID", "value": "picklistBinId"}]
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -3,6 +3,7 @@
   "Authenticating": "Authenticating",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to {timeZoneId}?",
   "Back to Launchpad": "Back to Launchpad",
+  "Bin ID": "Bin ID",
   "Camera permission denied.": "Camera permission denied.",
   "Cancel": "Cancel",
   "Change": "Change",
@@ -23,6 +24,7 @@
   "Hide completed picklists": "Hide completed picklists",
   "In progress": "In progress",
   "Loading": "Loading",
+  "Location ID": "Location ID",
   "Login": "Login",
   "Login failed": "Login failed",
   "Logging in": "Logging in",
@@ -41,6 +43,7 @@
   "Picklists": "Picklists",
   "Please allow camera access in your settings": "Please allow camera access in your settings",
   "product barcode": "product barcode",
+  "Product name": "Product name",
   "Product not found": "Product not found",
   "Product not found in remaining items": "Product not found in remaining items",
   "Reason:": "Reason:",

diff --git a/src/views/Picklist-Detail.vue b/src/views/Picklist-Detail.vue
@@ -1,15 +1,37 @@
 <template>
   <ion-page>
+    <ion-menu side="end" content-id="main-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>{{ $t("Sort by") }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-radio-group :value="picklistItemSortBy" @ionChange="updateSortBy($event)">
+            <ion-item v-for="option in sortOptions" :key="option.value">
+              <ion-radio slot="start" :value="option.value"/>
+              <ion-label>{{ $t(option.name) }}</ion-label>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button default-href="/" slot="start" />
         <ion-title>{{ id }}</ion-title>
-        <ion-buttons v-if="picklist.statusId !== 'PICKLIST_COMPLETED'" slot="end">
-          <ion-button @click="selectAll" >{{ $t ("Select all") }}</ion-button>
+        <ion-buttons slot="end">
+          <ion-button @click="selectAll" v-if="picklist.statusId !== 'PICKLIST_COMPLETED'">{{ $t ("Select all") }}</ion-button>
+          <ion-menu-button>
+            <ion-icon :icon="swapVerticalOutline" />
+          </ion-menu-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
+    <ion-content id="main-content">
       <ion-item class="scanner">
         <ion-label>{{ $t("Scan") }}</ion-label>  
         <ion-input @ionFocus="selectSearchBarText($event)" :placeholder="$t('product barcode')" @keyup.enter="$event.target.value && selectProduct($event.target.value.trim()); $event.target.value = ''"/>
@@ -54,14 +76,19 @@ import {
   IonItemGroup,
   IonLabel,
   IonList,
+  IonMenu,
+  IonMenuButton,
   IonPage,
+  IonRadio,
+  IonRadioGroup,
   IonTitle,
   IonToolbar,
   alertController,
-  modalController
+  modalController,
+  menuController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { barcodeOutline, checkmarkDone } from 'ionicons/icons';
+import { barcodeOutline, checkmarkDone, swapVerticalOutline } from 'ionicons/icons';
 import PicklistDetailItem from '@/components/Picklist-detail-item.vue';
 import { mapGetters, useStore } from 'vuex';
 import { translate } from '@/i18n'
@@ -85,7 +112,11 @@ export default defineComponent({
     IonItemGroup, 
     IonLabel,
     IonList,
-    IonPage, 
+    IonMenu,
+    IonMenuButton,
+    IonPage,
+    IonRadio,
+    IonRadioGroup,
     IonTitle, 
     IonToolbar,
     PicklistDetailItem
@@ -99,13 +130,14 @@ export default defineComponent({
   data() {
     return {
       picklistGroup: [],
-      lastScannedId: ''
+      lastScannedId: '',
+      sortOptions: JSON.parse(process.env.VUE_APP_PICKLISTS_SORT_OPTIONS)
     }
   },
   props: ['id'],
   async mounted () {
     await this.store.dispatch('picklist/setCurrentPicklist', { id: this.id })
-    this.sortPickists()
+    this.sortPicklists()
   },
   methods: {
     async completePicklist() {
@@ -187,7 +219,7 @@ export default defineComponent({
         showToast(translate("Camera permission denied."));
       }
     },
-    sortPickists() {
+    sortPicklists() {
       // Sort picklist products based on the sorting parameter selected
       this.picklist.pickingItemList.sort((a, b) => a[this.picklistItemSortBy].localeCompare(b[this.picklistItemSortBy], { sensitivity: 'base' }));
       const data = this.picklist.pickingItemList.reduce((r, e) => {
@@ -198,6 +230,11 @@ export default defineComponent({
         return r;
       }, {});
       this.picklistGroup = Object.values(data);
+    },
+    async updateSortBy(event) {
+      await this.store.dispatch('user/updateSortBy', event.detail.value)
+      this.sortPicklists()
+      menuController.close()
     }
   },
   setup() {
@@ -212,6 +249,7 @@ export default defineComponent({
       barcodeOutline,
       checkmarkDone,
       store,
+      swapVerticalOutline,
       router
     }
   }

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -87,7 +87,7 @@
           <ion-item lines="none">
             <ion-label>{{ $t("Sort by") }}</ion-label>
             <ion-select interface="popover" :value="picklistItemSortBy" @ionChange="updateSortBy($event)">
-              <ion-select-option v-for="option in sortBy" :key="option.value" :value="option.value" >{{ option.name }}</ion-select-option>
+              <ion-select-option v-for="option in sortOptions" :key="option.value" :value="option.value" >{{ option.name }}</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-card>
@@ -133,20 +133,7 @@ export default defineComponent({
       baseURL: process.env.VUE_APP_BASE_URL,
       appInfo: (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any,
       appVersion: "",
-      sortBy: [
-        {
-          name: 'Product name',
-          value: 'productName'
-        },
-        {
-          name: 'Location ID',
-          value: 'locationSeqId'
-        },
-        {
-          name: 'Bin ID',
-          value: 'picklistBinId'
-        }
-      ]
+      sortOptions: JSON.parse(process.env.VUE_APP_PICKLISTS_SORT_OPTIONS)
     };
   },
   computed: {