Implemented: single picker selection feature for packed orders (#284)

src/components/EditPickerModal.vue

@@ -9,33 +9,29 @@
       <ion-title>{{ translate("Edit pickers") }}</ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content class="ion-padding">
     <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findPickers()" />
-    <ion-row>
-      <ion-chip v-for="picker in selectedPickers" :key="picker.id">
-        <ion-label>{{ picker.name }}</ion-label>
-        <ion-icon :icon="closeCircle" @click="updateSelectedPickers(picker.id)" />
-      </ion-chip>
-    </ion-row>
 
     <ion-list>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
       <div class="ion-padding" v-if="!pickers.length">
         {{ 'No picker found' }}
       </div>
       <div v-else>
-        <ion-item v-for="(picker, index) in pickers" :key="index" @click="updateSelectedPickers(picker.id)">
-          <ion-label>
-            {{ picker.name }}
-            <p>{{ picker.externalId ? picker.externalId : picker.id }}</p>
-          </ion-label>
-          <ion-checkbox :checked="isPickerSelected(picker.id)"/>
-        </ion-item>
+        <ion-radio-group :value="selectedPicker.id">
+          <ion-item v-for="(picker, index) in pickers" :key="index" @click="updateSelectedPickers(picker.id)">
+            <ion-label>
+              {{ picker.name }}
+              <p>{{ picker.externalId ? picker.externalId : picker.id }}</p>
+            </ion-label>
+            <ion-radio slot="end" :value="picker.id" ></ion-radio>
+          </ion-item>
+        </ion-radio-group>
       </div>
     </ion-list>
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button :disabled="arePickersNotSelected()" @click="confirmSave()">
+      <ion-fab-button :disabled="isPickerChanged()" @click="confirmSave()">
         <ion-icon :icon="saveOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -46,8 +42,6 @@
 import { 
   IonButtons,
   IonButton,
-  IonCheckbox,
-  IonChip,
   IonContent,
   IonHeader,
   IonIcon,
@@ -59,7 +53,8 @@ import {
   IonItem,
   IonList,
   IonListHeader,
-  IonRow,
+  IonRadio,
+  IonRadioGroup,
   IonSearchbar,
   modalController,
   alertController
@@ -78,8 +73,6 @@ export default defineComponent({
   components: { 
     IonButtons,
     IonButton,
-    IonCheckbox,
-    IonChip,
     IonContent,
     IonHeader,
     IonIcon,
@@ -91,35 +84,27 @@ export default defineComponent({
     IonItem,
     IonList,
     IonListHeader,
-    IonRow,
+    IonRadio,
+    IonRadioGroup,
     IonSearchbar,
   },
   data () {
     return {
-      selectedPickers: [] as any,
+      selectedPicker: {} as any,
       queryString: '',
       pickers: [] as any,
       editedPicklist: {} as any,
-      selectedPickerIds: this.order.pickerIds
+      selectedPickerId: this.order.pickerIds[0]
     }
   },
   async mounted() {
     await this.findPickers()
-    this.selectAlreadyAssociatedPickers()
+    this.getAlreadyAssignedPicker()
   },
-  props: ['order', 'part', 'facilityId' ],
+  props: ['order'],
   methods: {
-    isPickerSelected(id: string) {
-      return this.selectedPickers.some((picker: any) => picker.id == id)
-    },
     updateSelectedPickers(id: string) {
-      const picker = this.isPickerSelected(id)
-      if (picker) {
-        // if picker is already selected then removing that picker from the list on click
-        this.selectedPickers = this.selectedPickers.filter((picker: any) => picker.id != id)
-      } else {
-        this.selectedPickers.push(this.pickers.find((picker: any) => picker.id == id))
-      }
+      this.selectedPicker = this.pickers.find((picker: any) => picker.id == id)
     },
     async findPickers(pickerIds?: Array<any>) {
       let inputFields = {}
@@ -197,34 +182,16 @@ export default defineComponent({
       return alert.present();
     },
     async resetPicker() {
-      console.log(this.order);
-      
-      // remove the 'System Generated' entry through filtering based on ID
-      let pickersNameArray = [] as any;
-      const pickerIds = this.selectedPickers.map((picker: any) => {
-        if (picker.id) {
-          pickersNameArray.push(picker.name.split(' ')[0])
-        }
-        return picker.id
-      }).filter((id: any) => id)
-      console.log(this.order.picklistId);
-      
+      const pickerIds = this.selectedPicker.id
+      // Api call to remove already selected picker and assign new picker
       try {
         const resp = await UtilService.resetPicker({
           pickerIds,
           picklistId: this.order.picklistId
         });
-        console.log( 'resp', resp);
-        
+
         if (resp.status === 200 && !hasError(resp)) {
           showToast(translate("Pickers successfully replaced in the picklist with the new selections."))
-          // editedPicklist will be passed through modal to in-progress page for manually
-          // upading the UI due to solr issue
-          // this.editedPicklist = {
-          //   ...this.selectedPicklist,
-          //   pickerIds,
-          //   pickersName: pickersNameArray.join(', ')
-          // }
         } else {
           throw resp.data
         }
@@ -233,22 +200,14 @@ export default defineComponent({
         console.error('Something went wrong, could not edit picker(s)')
       }
     },
-    arePickersNotSelected() {
-      // disable the save button if only 'System Generated' entry is there
-      // or if no pickers are selected
-      return (this.selectedPickers.length === 1
-        && !this.selectedPickers[0].id)
-        || (!this.selectedPickers.length)
-    },
     closeModal() {
-      modalController.dismiss({
-        dismissed: true,
-        editedPicklist: this.editedPicklist
-      });
+      modalController.dismiss({ selectedPicker: this.selectedPicker });
+    },
+    getAlreadyAssignedPicker() {
+      this.selectedPicker = this.pickers.find((picker: any) => this.selectedPickerId === picker.id)
     },
-    selectAlreadyAssociatedPickers() {
-      // for default selection of pickers already associated with the picklist
-      this.selectedPickers = this.pickers.filter((picker: any) => this.selectedPickerIds.includes(picker.id))
+    isPickerChanged() {
+      return this.selectedPicker.id === this.selectedPickerId
     }
   },
   setup() {

src/locales/en.json

@@ -124,6 +124,8 @@
   "Reject Order": "Reject Order",
   "Reject Order Item": "Reject Order Item",
   "Reason": "Reason",
+  "Replace current pickers with new selection?": "Replace current pickers with new selection?",
+  "Replace pickers": "Replace pickers",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
   "Resend ready for pickup email": "Resend ready for pickup email",

src/locales/es.json

@@ -31,6 +31,7 @@
   "Delivery method": "Método de entrega",
   "Dismiss": "Descartar",
   "eCom Store": "Tienda electrónica",
+  "Edit pickers": "Edit pickers",
   "Email sent successfully": "Correo enviado satisfactoriamente",
   "Enable tracking": "Habilitar seguimiento",
   "Facility": "Instalación",
@@ -122,6 +123,8 @@
   "Reject Order": "Rechazar pedido",
   "Reject Order Item": "Reject Order Item",
   "Reason": "Razón",
+  "Replace current pickers with new selection?": "Replace current pickers with new selection?",
+  "Replace pickers": "Replace pickers",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
   "Resend ready for pickup email": "Reenviar correo electrónico de listo para recoger",

src/locales/ja.json

@@ -31,6 +31,7 @@
   "Delivery method": "配送方法",
   "Dismiss": "却下",
   "eCom Store": "ECストア",
+  "Edit pickers": "Edit pickers",
   "Email sent successfully": "メールの送信が完了しました。",
   "Enable tracking": "追跡を有効",
   "Facility": "拠点",
@@ -122,6 +123,8 @@
   "Reject Order": "注文を拒否",
   "Reject Order Item": "Reject Order Item",
   "Reason": "理由",
+  "Replace current pickers with new selection?": "Replace current pickers with new selection?",
+  "Replace pickers": "Replace pickers",
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
   "Resend ready for pickup email": "受取準備完了メールの再送",

src/views/OrderDetail.vue

@@ -70,7 +70,7 @@
             <ion-label>
               {{ order.pickers ? translate("Picked by", { pickers: order.pickers }) : translate("No picker assigned.") }}
             </ion-label>
-            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE)" fill="outline" @click="editPicker(order, order.part, currentFacility.facilityId)">
+            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE)" fill="outline" @click="editPicker(order)">
               {{ translate("Change") }}
             </ion-button>
           </ion-item>
@@ -222,13 +222,22 @@ export default defineComponent({
       });
       return assignPickerModal.present();
     },
-    async editPicker(order: any, part: any, facilityId: any) {
+    async editPicker(order: any) {
       const editPickerModal = await modalController.create({
         component: EditPickerModal,
-        componentProps: { order, part, facilityId }
+        componentProps: { order }
       });
-      return editPickerModal.present();
 
+      editPickerModal.onDidDismiss().then((result) => {
+        if(result.data?.selectedPicker){
+          const selectedPicker = result.data.selectedPicker
+          this.order.pickers = selectedPicker.name
+          this.order.pickerIds = [selectedPicker.id]
+          this.store.dispatch('order/updateCurrent', { order: this.order })
+        }
+      })
+
+      return editPickerModal.present();
     },
     async deliverShipment(order: any) {
       await this.store.dispatch('order/deliverShipment', order)