Implemented: picker changing functionality for orders in packed tab (#284)

src/components/EditPickerModal.vue

@@ -0,0 +1,217 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="close" />
+        </ion-button>
+      </ion-buttons>
+      <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-list>
+      <ion-list-header>{{ translate("Staff") }}</ion-list-header>
+      <div class="ion-padding" v-if="!availablePickers.length">
+        {{ translate("No picker found") }}
+      </div>
+      <div v-else>
+        <ion-radio-group :value="selectedPicker.id">
+          <ion-item v-for="(picker, index) in availablePickers" :key="index" @click="updateSelectedPicker(picker.id)">
+            <ion-label>
+              {{ picker.name }}
+              <p>{{ 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="isPickerAlreadySelected()" @click="confirmSave()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonFab,
+  IonFabButton,
+  IonTitle,
+  IonToolbar,
+  IonLabel,
+  IonItem,
+  IonList,
+  IonListHeader,
+  IonRadio,
+  IonRadioGroup,
+  IonSearchbar,
+  alertController,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { close, saveOutline } from "ionicons/icons";
+import { useStore } from "vuex";
+import { showToast } from '@/utils';
+import { hasError } from '@/adapter'
+import { translate } from '@hotwax/dxp-components'
+import { UtilService } from "@/services/UtilService";
+import { PicklistService } from "@/services/PicklistService";
+
+export default defineComponent({
+  name: "EditPickersModal",
+  components: { 
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonFab,
+    IonFabButton,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonTitle,
+    IonToolbar,
+    IonRadio,
+    IonRadioGroup,
+    IonSearchbar
+  },
+  data () {
+    return {
+      availablePickers: [] as any,
+      queryString: '',
+      selectedPicker: {} as any,
+      selectedPickerId: this.order.pickerIds[0]
+    }
+  },
+  async mounted() {
+    await this.findPickers()
+    this.getAlreadyAssignedPicker()
+  },
+  props: ['order'],
+  methods: {
+    updateSelectedPicker(id: string) {
+      this.selectedPicker = this.availablePickers.find((picker: any) => picker.id == id)
+    },
+    async findPickers() {
+      let inputFields = {}
+      this.availablePickers = []
+
+      if (this.queryString.length > 0) {
+        inputFields = {
+          firstName_value: this.queryString,
+          firstName_op: 'contains',
+          firstName_ic: 'Y',
+          firstName_grp: '1',
+          lastName_value: this.queryString,
+          lastName_op: 'contains',
+          lastName_ic: 'Y',
+          lastName_grp: '2',
+          partyId_value: this.queryString,
+          partyId_op: 'contains',
+          partyId_ic: 'Y',
+          partyId_grp: '3',
+        }
+      }
+
+      const payload = {
+        inputFields: {
+          ...inputFields,
+          roleTypeIdTo: 'WAREHOUSE_PICKER'
+        },
+        viewSize: 50,
+        entityName: 'PartyRelationshipAndDetail',
+        noConditionFind: 'Y',
+        orderBy: "firstName ASC",
+        filterByDate: "Y",
+        distinct: "Y",
+        fieldList: ["firstName", "lastName", "partyId"]
+      }
+
+      try {
+        const resp = await PicklistService.getAvailablePickers(payload);
+        if (resp.status === 200 && !hasError(resp)) {
+          this.availablePickers = resp.data.docs.map((picker: any) => ({
+            name: picker.firstName + ' ' + picker.lastName,
+            id: picker.partyId
+          }))
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        console.error('Failed to fetch the pickers information or there are no pickers available', err)
+      }
+    },
+    async confirmSave() {
+      const message = translate("Replace current pickers with new selection?");
+      const alert = await alertController.create({
+        header: translate("Replace pickers"),
+        message,
+        buttons: [
+          {
+            text: translate("Cancel"),
+          },
+          {
+            text: translate("Replace"),
+            handler: () => {
+              this.resetPicker().then(() => {
+                this.closeModal()
+              })
+            }
+          }
+        ],
+      });
+      return alert.present();
+    },
+    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
+        });
+
+        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.'))
+        console.error('Something went wrong, could not edit picker')
+      }
+    },
+    closeModal() {
+      modalController.dismiss({ selectedPicker: this.selectedPicker });
+    },
+    getAlreadyAssignedPicker() {
+      this.selectedPicker = this.availablePickers.find((picker: any) => this.selectedPickerId === picker.id)
+    },
+    isPickerAlreadySelected() {
+      return this.selectedPicker.id === this.selectedPickerId
+    }
+  },
+  setup() {
+    const store = useStore();
+    return {
+      close,
+      saveOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>

src/locales/en.json

@@ -31,6 +31,7 @@
   "Delivery method": "Delivery method",
   "Dismiss": "Dismiss",
   "eCom Store": "eCom Store",
+  "Edit pickers": "Edit pickers",
   "Email sent successfully": "Email sent successfully",
   "Enable tracking": "Enable tracking",
   "Facility": "Facility",
@@ -111,6 +112,7 @@
   "pending approval": "pending approval",
   "Picked by": "Picked by { pickers }",
   "Pick up location": "Pick up location",
+  "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
   "pieces in stock": "pieces in stock",
   "Product details": "Product details",
   "Product not found": "Product not found",
@@ -123,6 +125,9 @@
   "Reject Order": "Reject Order",
   "Reject Order Item": "Reject Order Item",
   "Reason": "Reason",
+  "Replace": "Replace",
+  "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",
@@ -149,6 +154,7 @@
   "Size": "Size",
   "Sizes": "Sizes",
   "Something went wrong": "Something went wrong",
+  "Something went wrong, could not edit picker.": "Something went wrong, could not edit picker.",
   "Something went wrong. Picklist can not be created.": "Something went wrong. Picklist can not be created.",
   "Something went wrong while sending the email.": "Something went wrong while sending the email.",
   "Something went wrong while login. Please contact administrator": "Something went wrong while login. Please contact administrator.",

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",
@@ -110,6 +111,7 @@
   "pending approval": "pendiente de aprobación",
   "Picked by": "Picked by { pickers }",
   "Pick up location": "Ubicación de recogida",
+  "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
   "pieces in stock": "pieces in stock",
   "Product details": "Detalles del producto",
   "Product not found": "Producto no encontrado",
@@ -122,6 +124,9 @@
   "Reject Order": "Rechazar pedido",
   "Reject Order Item": "Reject Order Item",
   "Reason": "Razón",
+  "Replace": "Replace",
+  "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",
@@ -148,6 +153,7 @@
   "Size": "Tamaño",
   "Sizes": "Tamaños",
   "Something went wrong": "Algo salió mal",
+  "Something went wrong, could not edit picker.": "Something went wrong, could not edit picker.",
   "Something went wrong. Picklist can not be created.": "Algo salió mal. No se puede crear la lista de recolección.",
   "Something went wrong while sending the email.": "Algo salió mal al enviar el correo electrónico.",
   "Something went wrong while login. Please contact administrator": "Algo salió mal al iniciar sesión. Por favor, contacta al administrador.",

src/locales/ja.json

@@ -31,6 +31,7 @@
   "Delivery method": "配送方法",
   "Dismiss": "却下",
   "eCom Store": "ECストア",
+  "Edit pickers": "Edit pickers",
   "Email sent successfully": "メールの送信が完了しました。",
   "Enable tracking": "追跡を有効",
   "Facility": "拠点",
@@ -110,6 +111,7 @@
   "pending approval": "承認待ち",
   "Picked by": "Picked by { pickers }",
   "Pick up location": "受取場所",
+  "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
   "pieces in stock": "pieces in stock",
   "Product details": "商品詳細",
   "Product not found": "商品が見つかりません",
@@ -122,6 +124,9 @@
   "Reject Order": "注文を拒否",
   "Reject Order Item": "Reject Order Item",
   "Reason": "理由",
+  "Replace": "Replace",
+  "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": "受取準備完了メールの再送",
@@ -148,6 +153,7 @@
   "Size": "サイズ",
   "Sizes": "サイズ",
   "Something went wrong": "エラーが発生しました",
+  "Something went wrong, could not edit picker.": "Something went wrong, could not edit picker.",
   "Something went wrong. Picklist can not be created.": "何か問題が発生しました",
   "Something went wrong while sending the email.": "メールの送信中に何か問題が発生しました",
   "Something went wrong while login. Please contact administrator": "ログイン中に何らかの問題が発生しました。管理者に確認してください。",

src/services/UtilService.ts

@@ -25,8 +25,17 @@ const fetchStatusDesc = async (query: any): Promise <any>  => {
   });
 }
 
+const resetPicker = async (payload: any): Promise<any> => {
+  return api({
+    url: "/service/resetPicker",
+    method: "post",
+    data: payload
+  })
+}
+
 export const UtilService = {
   fetchPaymentMethodTypeDesc,
   fetchRejectReasons,
-  fetchStatusDesc
+  fetchStatusDesc,
+  resetPicker
 }

src/store/modules/order/actions.ts

@@ -181,7 +181,12 @@
             pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
               names.push(picker.split('/')[1]);
               return names;
-            }, [])).join(', ') : ""
+            }, [])).join(', ') : "",
+            pickerIds: orderItem.pickers ? (orderItem.pickers.reduce((ids: any, picker: string) => {
+              ids.push(picker.split('/')[0]);
+              return ids;
+            }, [])) : "",
+            picklistId: orderItem.picklistId
           }
         })
 
@@ -261,7 +266,12 @@
             pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
               names.push(picker.split('/')[1]);
               return names;
-            }, [])).join(', ') : ""
+            }, [])).join(', ') : "",
+            pickerIds: orderItem.pickers ? (orderItem.pickers.reduce((ids: any, picker: string) => {
+              ids.push(picker.split('/')[0]);
+              return ids;
+            }, [])) : "",
+            picklistId: orderItem.picklistId 
           }
         })
         this.dispatch('product/getProductInformation', { orders });
@@ -398,7 +408,7 @@
     return resp;
   },
 
   async packDeliveryItems ({ commit }, shipmentId) {
     const params = {
       shipmentId: shipmentId,
       statusId: 'SHIPMENT_PACKED'
@@ -510,7 +520,7 @@
     }).catch(err => err);
   },
 
   async rejectOrderItems ({ commit }, order) {
     const payload = {
       'orderId': order.orderId
     }