Implemented: picker editing on in-progress orders page (#237)

src/components/EditPickersModal.vue

@@ -0,0 +1,264 @@
+<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>{{ $t("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="removePicker(picker.id)" />
+      </ion-chip>
+    </ion-row>
+
+    <ion-list>
+      <ion-list-header>{{ $t("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="selectPicker(picker.id)">
+          <ion-label>
+            {{ picker.name }}
+            <p>{{ picker.externalId ? picker.externalId : picker.id }}</p>
+          </ion-label>
+          <ion-checkbox :checked="isPickerSelected(picker.id)"/>
+        </ion-item>
+      </div>
+    </ion-list>
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="evaluateSelectedPickers()" @click="confirmSave()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { 
+  IonButtons,
+  IonButton,
+  IonCheckbox,
+  IonChip,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonFab,
+  IonFabButton,
+  IonTitle,
+  IonToolbar,
+  IonLabel,
+  IonItem,
+  IonList,
+  IonListHeader,
+  IonRow,
+  IonSearchbar,
+  modalController,
+alertController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { close, closeCircle, saveOutline } from "ionicons/icons";
+import { useStore } from "vuex";
+import { hasError, showToast } from '@/utils';
+import logger from "@/logger"
+import { UtilService } from "@/services/UtilService";
+import { translate } from "@/i18n";
+
+export default defineComponent({
+  name: "EditPickersModal",
+  components: { 
+    IonButtons,
+    IonButton,
+    IonCheckbox,
+    IonChip,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonFab,
+    IonFabButton,
+    IonTitle,
+    IonToolbar,
+    IonLabel,
+    IonItem,
+    IonList,
+    IonListHeader,
+    IonRow,
+    IonSearchbar,
+  },
+  data () {
+    return {
+      selectedPickers: [] as any,
+      queryString: '',
+      pickers: [] as any,
+      editedPicklist: {} as any
+    }
+  },
+  mounted() {
+    this.findPickers()
+  },
+  props: ['selectedPicklist'],
+  methods: {
+    isPickerSelected(id: string) {
+      return this.selectedPickers.some((picker: any) => picker.id == id)
+    },
+    selectPicker(id: string) {
+      const picker = this.selectedPickers.some((picker: any) => picker.id == 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))
+      }
+    },
+    removePicker(id: string) {
+      this.selectedPickers = this.selectedPickers.filter((picker: any) => picker.id != id)
+    },
+    async findPickers() {
+      let inputFields = {}
+      this.pickers = []
+
+      if (this.queryString.length > 0) {
+        inputFields = {
+          firstName_value: this.queryString,
+          firstName_op: 'contains',
+          firstName_ic: 'Y',
+          firstName_grp: '1',
+          externalId_value: this.queryString,
+          externalId_op: 'contains',
+          externalId_ic: 'Y',
+          externalId_grp: '2',
+          lastName_value: this.queryString,
+          lastName_op: 'contains',
+          lastName_ic: 'Y',
+          lastName_grp: '3',
+          partyId_value: this.queryString,
+          partyId_op: 'contains',
+          partyId_ic: 'Y',
+          partyId_grp: '4',
+        }
+      }
+
+      const payload = {
+        inputFields: {
+          ...inputFields,
+          roleTypeIdTo: 'WAREHOUSE_PICKER'
+        },
+        viewSize: 50,
+        entityName: 'PartyRelationshipAndDetail',
+        noConditionFind: 'Y',
+        orderBy: "firstName ASC",
+        filterByDate: "Y",
+        distinct: "Y",
+        fieldList: ["firstName", "lastName", "partyId", "externalId"]
+      }
+
+      try {
+        const resp = await UtilService.getAvailablePickers(payload);
+        if (resp.status === 200 && !hasError(resp)) {
+          this.pickers = resp.data.docs.map((picker: any) => ({
+            name: picker.firstName + ' ' + picker.lastName,
+            id: picker.partyId,
+            externalId: picker.externalId
+          }))
+          // for default selection of pickers already associated with the picklist
+          this.selectedPickers = this.pickers.filter((picker: any) => this.selectedPicklist.pickerIds.includes(picker.id))
+
+          // case for 'System Generated' picker
+          if (!this.selectedPickers.length) {
+            // as selectedPickers will be empty, we manually add the entry
+            this.selectedPickers = [{
+              name: this.selectedPicklist.pickersName,
+              id: null
+            }]
+          }
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error('Failed to fetch the pickers information or there are no pickers available', err)
+      }
+    },
+    async confirmSave() {
+      const message = this.$t("Are you sure you want to remove the current pickers from the picklist and replace them with new pickers?");
+      const alert = await alertController.create({
+        header: this.$t("Edit pickers"),
+        message,
+        buttons: [
+          {
+            text: this.$t("Cancel"),
+          },
+          {
+            text: this.$t("Replace"),
+            handler: () => {
+              this.save();
+            }
+          }
+        ],
+      });
+      return alert.present();
+    },
+    save() {
+      this.resetPicker().then(() => {
+        this.closeModal()
+      })
+    },
+    async resetPicker() {
+      // remove the 'System Generated' entry through filtering based on ID
+      const pickerIds = this.selectedPickers.map((picker: any) => picker.id).filter((id: any) => id !== null)
+      const pickersNameArray = this.selectedPickers.filter((picker: any) => pickerIds.includes(picker.id)).map((picker: any) => picker.name.split(' ')[0])
+
+      try {
+        const resp = await UtilService.resetPicker({
+          pickerIds,
+          picklistId: this.selectedPicklist.id
+        });
+        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
+        }
+      } catch (err) {
+        showToast(translate('Something went wrong, could not edit picker(s)'))
+        logger.error('Something went wrong, could not edit picker(s)')
+      }
+    },
+    evaluateSelectedPickers() {
+      // disable the save button if only 'System Generate' 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
+      });
+    },
+  },
+  setup() {
+    const store = useStore();
+    return {
+      close,
+      saveOutline,
+      closeCircle,
+      store
+    };
+  }
+});
+</script>

src/locales/en.json

@@ -1,5 +1,7 @@
 {
+  "All": "All",
   "App": "App",
+  "Are you sure you want to remove the current pickers from the picklist and replace them with new pickers?": "Are you sure you want to remove the current pickers from the picklist and replace them with new pickers?",
   "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "doesn't have any completed orders right now.": "{facilityName} doesn't have any completed orders right now.",
   "doesn't have any orders in progress right now.": "{facilityName} doesn't have any orders in progress right now.",
@@ -45,6 +47,8 @@
   "Download packed orders": "Download packed orders",
   "eCom Store": "eCom Store",
   "Edit packaging": "Edit packaging",
+  "Edit pickers": "Edit pickers",
+  "Edit Pickers": "Edit Pickers",
   "Email": "Email",
   "Enter key": "Enter key",
   "Enter mapping name": "Enter mapping name",
@@ -146,6 +150,8 @@
   "Packed Orders": "Packed Orders",
   "Password": "Password",
   "Phone Number": "Phone Number",
+  "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
+  "picklists": "{count} picklists",
   "Picklist created successfully": "Picklist created successfully",
   "Picklist Size": "Picklist Size",
   "pieces in stock": "pieces in stock",
@@ -172,6 +178,7 @@
   "Rejecting has been started. All in progress orders will be rejected shortly.": "Rejecting has been started. All in progress orders will be rejected shortly.",
   "Rejecting has been started. All outstanding orders will be rejected shortly.": "Rejecting has been started. All outstanding orders will be rejected shortly.",
   "Regenerate Shipping Label": "Regenerate Shipping Label",
+  "Replace": "Replace",
   "Report": "Report",
   "Report an issue": "Report an issue",
   "Result Size": "Result Size",
@@ -180,6 +187,7 @@
   "Save Changes": "Save Changes",
   "Saved mappings": "Saved mappings",
   "Saved Mappings": "Saved Mappings",
+  "Search": "Search",
   "Search time zones": "Search time zones",
   "Select": "Select",
   "Select all": "Select all",
@@ -212,6 +220,7 @@
   "Shipping labels": "Shipping labels",
   "Some of the mapping fields are missing in the CSV: ": "Some of the mapping fields are missing in the CSV: {missingFields}",
   "Something went wrong": "Something went wrong",
+  "Something went wrong, could not edit picker(s)": "Something went wrong, could not edit picker(s)",
   "Something went wrong while login. Please contact administrator.": "Something went wrong while login. Please contact administrator.",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Specify whether the store should fulfill online orders or not.": "Specify whether the store should fulfill online orders or not.",

src/locales/es.json

@@ -1,5 +1,7 @@
 {
+  "All": "All",
   "App": "App",
+  "Are you sure you want to remove the current pickers from the picklist and replace them with new pickers?": "Are you sure you want to remove the current pickers from the picklist and replace them with new pickers?",
   "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "doesn't have any completed orders right now.": "{facilityName} no tiene ningún pedido completado en este moment.",
   "doesn't have any orders in progress right now.": "{facilityName} no tiene ningún pedido en curso en este moment.",
@@ -45,6 +47,8 @@
   "Download packed orders": "Descargar pedidos empacados",
   "eCom Store": "Tienda eCom",
   "Edit packaging": "Editar empaque",
+  "Edit pickers": "Edit pickers",
+  "Edit Pickers": "Edit Pickers",
   "Email": "Email",
   "Enter key": "Ingresar clave",
   "Enter mapping name": "Enter mapping name",
@@ -146,6 +150,8 @@
   "Packed Orders": "Pedidos Empacados",
   "Password": "Contraseña",
   "Phone Number": "Phone Number",
+  "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
+  "picklists": "{count} picklists",
   "Picklist created successfully": "Lista de Selección creada exitosamente",
   "Picklist Size": "Tamaño de la Lista de Selección",
   "pieces in stock": "piezas en stock",
@@ -172,6 +178,8 @@
   "Reject outstanding orders": "Reject outstanding orders",
   "Rejecting has been started. All in progress orders will be rejected shortly.": "Rejecting has been started. All in progress orders will be rejected shortly.",
   "Rejecting has been started. All outstanding orders will be rejected shortly.": "Rejecting has been started. All outstanding orders will be rejected shortly.",
+  "Regenerate Shipping Label": "Regenerate Shipping Label",
+  "Replace": "Replace",
   "Report": "Reporte",
   "Report an issue": "Reportar un problema",
   "Result Size": "Tamaño del Resultado",
@@ -181,6 +189,7 @@
   "Save Changes": "Save Changes",
   "Saved mappings": "Saved mappings",
   "Saved Mappings": "Saved Mappings",
+  "Search": "Search",
   "Search time zones": "Buscar zonas horarias",
   "Select": "Seleccionar",
   "Select all": "Seleccionar todos",
@@ -213,6 +222,8 @@
   "Shipping labels": "Etiquetas de Envío",
   "Some of the mapping fields are missing in the CSV: ": "Some of the mapping fields are missing in the CSV: {missingFields}",
   "Something went wrong": "Algo salió mal",
+  "Something went wrong, could not edit picker(s)": "Something went wrong, could not edit picker(s)",
+  "Something went wrong while login. Please contact administrator.": "Something went wrong while login. Please contact administrator.",
   "Sorry, your username or password is incorrect. Please try again.": "Lo siento, tu nombre de usuario o contraseña es incorrecto. Por favor, inténtalo nuevamente.",
   "Specify whether the store should fulfill online orders or not.": "Specify whether the store should fulfill online orders or not.",
   "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",

src/services/UtilService.ts

@@ -304,6 +304,14 @@ const fetchShipmentBoxTypeDesc = async (query: any): Promise <any>  => {
   });
 }
 
+const resetPicker = async (payload: any): Promise<any> => {
+  return api({
+    url: "/service/resetPicker",
+    method: "post",
+    data: payload
+  })
+}
+
 export const UtilService = {
   createPicklist,
   fetchCarrierPartyIds,
@@ -320,5 +328,6 @@ export const UtilService = {
   fetchShipmentMethodTypeDesc,
   findShipmentPackages,
   fetchShipmentRouteSegmentInformation,
-  getAvailablePickers
+  getAvailablePickers,
+  resetPicker
 }