Implemented: Added support for the edit picker on the details page of Open and Packed orders (#493)

src/components/EditPickerModal.vue

@@ -22,7 +22,7 @@
       <div class="empty-state" v-else-if="!availablePickers.length">{{ translate('No picker found') }}</div>
 
       <div v-else>
-        <ion-radio-group :value="selectedPicker.id">
+        <ion-radio-group :value="selectedPicker?.id">
           <ion-item v-for="(picker, index) in availablePickers" :key="index" @click="updateSelectedPicker(picker.id)">
             <ion-radio :value="picker.id">
               <ion-label>
@@ -90,7 +90,7 @@ import { PicklistService } from "@/services/PicklistService";
 import logger from "@/logger";
 
 export default defineComponent({
-  name: "EditPickersModal",
+  name: "EditPickerModal",
   components: { 
     IonButton,
     IonButtons,
@@ -155,6 +155,8 @@ export default defineComponent({
         ).toString()
       ).then(async () => {
         await event.target.complete();
+        // Retrieve already assigned picker if not already selected
+        if(!this.selectedPicker) this.getAlreadyAssignedPicker();
       });
     },
     async searchPicker() {
@@ -220,10 +222,15 @@ export default defineComponent({
           },
           {
             text: translate("Replace"),
-            handler: () => {
-              this.resetPicker().then(() => {
+            handler: async () => {
+              try { 
+                await this.resetPicker()
                 this.closeModal({ selectedPicker: this.selectedPicker })
-              })
+              } catch(err) {
+                showToast(translate('Something went wrong, could not edit picker.'))
+                logger.error('Something went wrong, could not edit picker', err)
+                this.closeModal();
+              }
             }
           }
         ],
@@ -233,20 +240,15 @@ export default defineComponent({
     async resetPicker() {
       const pickerId = this.selectedPicker.id
       // Api call to remove already selected picker and assign new picker
-      try {
-        const resp = await UtilService.resetPicker({
-          pickerIds: pickerId,
-          picklistId: this.order.picklistId
-        });
+      const resp = await UtilService.resetPicker({
+        pickerIds: pickerId,
+        picklistId: this.order.picklistId
+      });
 
-        if (resp.status === 200 && !hasError(resp)) {
-          showToast(translate("Pickers successfully replaced in the picklist with the new selections."))
-        } else {
-          throw resp.data
-        }
-      } catch (err) {
-        showToast(translate('Something went wrong, could not edit picker.'))
-        logger.error('Something went wrong, could not edit picker')
+      if(resp.status === 200 && !hasError(resp)) {
+        showToast(translate("Pickers successfully replaced in the picklist with the new selections."))
+      } else {
+        throw resp.data
       }
     },
     closeModal(payload = {}) {

src/views/OrderDetailUpdated.vue

@@ -53,6 +53,10 @@
               <h1>{{ order.orderName }}</h1>
               <p>{{ order.orderId }}</p>
             </ion-label>
+            <ion-chip :disabled="!hasPermission(Actions.APP_ORDER_UPDATE)" v-if="order.pickers && (orderType === 'open' || orderType === 'packed') && getBopisProductStoreSettings('ENABLE_TRACKING')" outline slot="end" @click="editPicker(order)">
+              <ion-icon :icon="personOutline"/>
+              <ion-label>{{ order.pickers }}</ion-label>
+            </ion-chip>
           </ion-item>
 
            <!-- Order Status -->
@@ -363,6 +367,7 @@ import {
   informationCircleOutline,
   locateOutline,
   mailOutline,
+  personOutline,
   printOutline,
   pulseOutline,
   sendOutline,
@@ -385,6 +390,7 @@ import { useRouter } from 'vue-router'
 import { Actions, hasPermission } from '@/authorization'
 import OrderItemRejHistoryModal from '@/components/OrderItemRejHistoryModal.vue';
 import AssignPickerModal from "@/views/AssignPickerModal.vue";
+import EditPickerModal from "@/components/EditPickerModal.vue";
 import { copyToClipboard, formatCurrency, getColorByDesc, getFeature, showToast } from '@/utils'
 import { DateTime } from "luxon";
 import { api, hasError } from '@/adapter';
@@ -475,15 +481,35 @@ export default defineComponent({
 
       assignPickerModal.onDidDismiss().then(async(result: any) => {
         if(result.data.selectedPicker) {
-          this.pickers = result.data.picker
+          const selectedPicker = result.data.picker
+          this.pickers = selectedPicker
           this.picklistDate = DateTime.now().toMillis()
+          this.order.pickers = selectedPicker.name
+          this.order.pickerIds = [selectedPicker.id]
           await this.store.dispatch('order/packShipGroupItems', { order, part, facilityId, selectedPicker: result.data.selectedPicker })
           this.prepareOrderTimeline();
         }
       })
 
       return assignPickerModal.present();
     },
+    async editPicker(order: any) {
+      const editPickerModal = await modalController.create({
+        component: EditPickerModal,
+        componentProps: { order }
+      });
+
+      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 })
+          this.prepareOrderTimeline();
+        }
+      })
+      return editPickerModal.present();
+    },
     async deliverShipment(order: any) {
       const pickup = order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
       const header = pickup ? translate("Handover") : translate("Ship");
@@ -1305,6 +1331,7 @@ export default defineComponent({
       isKit,
       listOutline,
       locateOutline,
+      personOutline,
       personAddOutline,
       printOutline,
       productIdentificationPref,