Implemented: picklist sorting on the picklist details page (hotwax#171)

src/components/PicklistSortMenu.vue

@@ -0,0 +1,90 @@
+<template>
+  <ion-menu type="overlay" side="end">
+    <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>
+            <ion-radio slot="start" value="productName"/>
+            <ion-label>{{ $t("Product name") }}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-radio slot="start" value="locationSeqId"/>
+            <ion-label>{{ $t("Location ID") }}</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-radio slot="start" value="picklistBinId"/>
+            <ion-label>{{ $t("Bin ID") }}</ion-label>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonMenu,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+  menuController
+} from '@ionic/vue'
+import { idCardOutline, toggleOutline } from 'ionicons/icons'
+import { defineComponent } from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { translate } from '@hotwax/dxp-components'
+import emitter from '@/event-bus';
+
+export default defineComponent({
+  name: 'FilterMenu',
+  components: {
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonMenu,
+    IonRadio,
+    IonRadioGroup,
+    IonTitle,
+    IonToolbar,
+  },
+  computed: {
+    ...mapGetters({
+      picklistItemSortBy: 'user/getPicklistItemSortBy'
+    })
+  },
+  methods: {
+    closeMenu() {
+      menuController.close()
+    },
+    async updateSortBy(event: CustomEvent) {
+      await this.store.dispatch('user/updateSortBy', event.detail.value)
+      emitter.emit('sortPicklists')
+      menuController.close()
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      idCardOutline,
+      store,
+      toggleOutline,
+      translate
+    };    
+  }
+})
+</script>

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:",

src/views/Picklist-Detail.vue

@@ -1,15 +1,20 @@
 <template>
   <ion-page>
+    <PicklistSortMenu content-id="main-content" />
+
     <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,20 +59,23 @@ import {
   IonItemGroup,
   IonLabel,
   IonList,
+  IonMenuButton,
   IonPage,
   IonTitle,
   IonToolbar,
   alertController,
   modalController
 } 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'
 import { showToast } from '@/utils';
 import Scanner from '@/components/Scanner'
 import { useRouter, onBeforeRouteLeave } from 'vue-router';
+import PicklistSortMenu from '@/components/PicklistSortMenu.vue';
+import emitter from '@/event-bus';
 
 export default defineComponent({
   name: 'PicklistDetail',
@@ -85,10 +93,12 @@ export default defineComponent({
     IonItemGroup, 
     IonLabel,
     IonList,
+    IonMenuButton,
     IonPage, 
     IonTitle, 
     IonToolbar,
-    PicklistDetailItem
+    PicklistDetailItem,
+    PicklistSortMenu
   },
   computed: {
     ...mapGetters({
@@ -105,7 +115,11 @@ export default defineComponent({
   props: ['id'],
   async mounted () {
     await this.store.dispatch('picklist/setCurrentPicklist', { id: this.id })
-    this.sortPickists()
+    this.sortPicklists()
+    emitter.on('sortPicklists', this.sortPicklists)
+  },
+  unmounted() {
+    emitter.off('sortPicklists', this.sortPicklists)
   },
   methods: {
     async completePicklist() {
@@ -187,7 +201,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) => {
@@ -212,6 +226,7 @@ export default defineComponent({
       barcodeOutline,
       checkmarkDone,
       store,
+      swapVerticalOutline,
       router
     }
   }