Merge pull request #19 from amansinghbais/facilities/#12

Implemented: support to add, remove and display parties associated to a facility in staff sement (#12)

src/components/AddStaffMemberModal.vue

@@ -10,21 +10,34 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content>
-    <ion-item>
-      <ion-label>{{ translate("Party Id") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-input placeholder="party id"/>
-    </ion-item>
-    <ion-item>
-      <ion-label>{{ translate("Role") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-select interface="popover" :placeholder="translate('Select')" value="fulfillment">
-        <ion-select-option value="fulfillment">{{ "Fulfillment" }}</ion-select-option>
-      </ion-select>
-    </ion-item>
+  <ion-content class="ion-padding">
+    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; findParties()"/>
+    <ion-row>
+      <ion-chip v-for="party in selectedPartyValues" :key="party.partyId">
+        <ion-label>{{ party.fullName }}</ion-label>
+        <ion-icon :icon="closeCircle" @click="removeSelectedParty(party.partyId)" />
+      </ion-chip>
+    </ion-row>
+
+    <ion-list>
+      <ion-list-header>{{ translate("Staff") }}</ion-list-header>
+      <div class="ion-padding" v-if="!parties.length">{{ translate("No party found") }}</div>
+      <div v-else>
+        <ion-item v-for="(party, index) in parties" :key="index">
+          <ion-label>
+            {{ party.fullName }}
+            <p>{{ party.partyId }}</p>
+          </ion-label>
+          <ion-select interface="popover" :placeholder="translate('Select')" :value="getPartyRoleTypeId(party.partyId)" @ion-change="updateSelectedParties($event, party.partyId)" required>
+            <ion-select-option v-for="(description, roleTypeId) in partyRoles" :key='roleTypeId' :value="roleTypeId">{{ description }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </div>
+    </ion-list>
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button>
+    <ion-fab-button @click="saveParties">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -34,55 +47,205 @@
 import {
   IonButton,
   IonButtons,
+  IonChip,
   IonContent,
   IonFab,
   IonFabButton,
   IonHeader,
   IonIcon,
-  IonInput,
   IonItem,
   IonLabel,
+  IonList,
+  IonListHeader,
+  IonRow,
+  IonSearchbar,
   IonSelect,
   IonSelectOption,
-  IonText,
   IonTitle,
   IonToolbar,
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline, saveOutline } from "ionicons/icons";
+import { closeCircle, closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
+import { FacilityService } from "@/services/FacilityService";
+import { hasError } from "@/adapter";
+import logger from "@/logger";
+import { mapGetters, useStore } from "vuex";
+import { showToast } from "@/utils";
+import { DateTime } from "luxon";
 
 export default defineComponent({
   name: "AddStaffMemberModal",
   components: {
     IonButton,
     IonButtons,
+    IonChip,
     IonContent,
     IonFab,
     IonFabButton,
     IonHeader,
     IonIcon,
-    IonInput,
     IonItem,
     IonLabel,
+    IonList,
+    IonListHeader,
+    IonRow,
+    IonSearchbar,
     IonSelect,
     IonSelectOption,
-    IonText,
     IonTitle,
     IonToolbar
   },
+  props: ['facilityId', 'selectedParties'],
+  data() {
+    return {
+      parties: [],
+      queryString: '',
+      selectedPartyValues: JSON.parse(JSON.stringify(this.selectedParties))
+    }
+  },
+  computed: {
+    ...mapGetters({
+      partyRoles: 'util/getPartyRoles',
+    })
+  },
   methods: {
-    closeModal() {
+    async closeModal() {
       modalController.dismiss()
+    },
+    async findParties() {
+      this.parties = []
+      let inputFields = {}
+      if(this.queryString.length > 0) {
+        inputFields = {
+          groupName_value: this.queryString,
+          groupName_op: 'contains',
+          groupName_ic: 'Y',
+          groupName_grp: '1',
+          firstName_value: this.queryString,
+          firstName_op: 'contains',
+          firstName_ic: 'Y',
+          firstName_grp: '2',
+          lastName_value: this.queryString,
+          lastName_op: 'contains',
+          lastName_ic: 'Y',
+          lastName_grp: '3'
+        }
+      }
+
+      const payload = {
+        inputFields,
+        viewSize: 10,
+        entityName: 'PartyRoleAndPartyDetail',
+        noConditionFind: 'Y',
+        distinct: 'Y',
+        orderBy: "firstName ASC",
+        fieldList: ['firstName', 'groupName', 'lastName', 'partyId']
+      }
+
+      try {
+        const resp = await FacilityService.getPartyRoleAndPartyDetails(payload)
+        if(!hasError(resp)) {
+          let parties = resp.data.docs
+
+          parties.map((party: any) => {
+            party.fullName = party.groupName ? party.groupName : `${party.firstName} ${party.lastName}`
+          })
+          this.parties = parties
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    },
+    removeSelectedParty(partyId: string) {
+      this.selectedPartyValues = this.selectedPartyValues.filter((party: any) => party.partyId !== partyId)
+    },
+    async saveParties() {
+      const partiesToAdd = this.selectedPartyValues.filter((selectedParty: any) => !this.selectedParties.some((party: any) => party.partyId === selectedParty.partyId && party.roleTypeId === selectedParty.roleTypeId))
+      const partiesToRemove = this.selectedParties.filter((party: any) => !this.selectedPartyValues.some((selectedParty: any) => party.partyId === selectedParty.partyId))
+      const partiesRoleChanged = this.selectedParties.filter((party: any) => this.selectedPartyValues.some((selectedParty: any) => selectedParty.partyId === party.partyId && selectedParty.roleTypeId !== party.roleTypeId))
+      partiesRoleChanged.map((party: any) => partiesToRemove.push(party))
+
+      if(!(partiesToAdd.length > 0 || partiesToRemove.length > 0)) {
+        showToast(translate("Please update atleast one party role."))
+        return;
+      }
+
+      const removeResponses = await Promise.allSettled(partiesToRemove
+        .map(async (party: any) => await FacilityService.removePartyFromFacility({
+          facilityId: this.facilityId,
+          fromDate: party.fromDate,
+          thruDate: DateTime.now().toMillis(),
+          partyId: party.partyId,
+          roleTypeId: party.roleTypeId
+        }))
+      )
+
+      const addResponses = await Promise.allSettled(partiesToAdd
+        .map(async (party: any) => await FacilityService.addPartyToFacility({
+          facilityId: this.facilityId,
+          partyId: party.partyId,
+          roleTypeId: party.roleTypeId
+        }))
+      )
+
+      const hasFailedResponse = [...removeResponses, ...addResponses].some((response: any) => response.status === 'rejected')
+      if (hasFailedResponse) {
+        showToast(translate("Failed to update some role(s)."))
+      } else {
+        showToast(translate("Role(s) updated successfully."))
+      }
+
+      // refetching parties with updated roles
+      await this.store.dispatch('facility/getFacilityParties', { facilityId: this.facilityId })
+      modalController.dismiss()
+    },
+    updateSelectedParties(event: CustomEvent, selectedPartyId: string) {
+      let party = {} as any
+      const selectedRoleTypeId = event.detail.value
+
+      party = this.getParty(selectedPartyId)
+      if(party?.partyId) {
+        party = this.selectedPartyValues.find((party: any) => party.partyId === selectedPartyId)
+        this.selectedPartyValues = this.selectedPartyValues.filter((party: any) => party.partyId !== selectedPartyId)
+
+        if(selectedRoleTypeId) {
+          this.selectedPartyValues.push({...party, roleTypeId: selectedRoleTypeId})
+        }
+      } else {
+        party = this.parties.find((party: any) => party.partyId === selectedPartyId)
+        this.selectedPartyValues.push({...party, roleTypeId: selectedRoleTypeId})
+      }
+    },
+    getParty(partyId: string) {
+      return this.selectedPartyValues.find((party: any) => party.partyId === partyId)
+    },
+    getPartyRoleTypeId(partyId: string) {
+      return this.getParty(partyId) ? this.getParty(partyId).roleTypeId : ''
     }
   },
+  async mounted() {
+    await this.findParties()
+  },
   setup() {
+    const store = useStore()
+
     return {
+      closeCircle,
       closeOutline,
       saveOutline,
+      store,
       translate
     };
   },
 });
-</script>
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>

src/locales/en.json

@@ -50,10 +50,12 @@
   "Failed to fetch facility information": "Failed to fetch facility information",
   "Failed to find the facility locations": "Failed to find the facility locations",
   "Failed to remove facility location": "Failed to remove facility location",
+  "Failed to remove party from facility.": "Failed to remove party from facility.",
   "Failed to update default days to ship": "Failed to update default days to ship",
   "Failed to update facility location": "Failed to update facility location",
   "Failed to update fulfillment capacity for ": "Failed to update fulfillment capacity for {facilityName}",
   "Failed to update fulfillment setting": "Failed to update fulfillment setting",
+  "Failed to update some role(s).": "Failed to update some role(s).",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
   "Friday": "Friday",
@@ -94,6 +96,7 @@
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.",
   "No facilities found": "No facilities found",
   "No fulfillment capacity": "No fulfillment capacity",
+  "No party found": "No party found",
   "No records found": "No records found",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
@@ -106,6 +109,8 @@
   "orders in fulfillment queue": "{orderCount} orders in fulfillment queue",
   "Parking": "Parking",
   "Party Id": "Party Id",
+  "Party successfully removed from facility.": "Party successfully removed from facility.",
+  "Please update atleast one party role.": "Please update atleast one party role.",
   "party id": "party id",
   "Password": "Password",
   "Please contact the administrator.": "Please contact the administrator.",
@@ -119,6 +124,7 @@
   "Remove location": "Remove location",
   "Role": "Role",
   "role": "role",
+  "Role(s) updated successfully.": "Role(s) updated successfully.",
   "Saturday": "Saturday",
   "Save": "Save",
   "Section": "Section",

src/services/FacilityService.ts

@@ -92,6 +92,22 @@ const fetchFacilitiesOrderCount = async(facilityIds: Array<string>): Promise<any
   return facilitiesOrderCount;
 }
 
+const getFacilityParties = async(payload: any): Promise <any> => {
+  return api({
+    url: "performFind",
+    method: "post",
+    data: payload
+  });
+}
+
+const getPartyRoleAndPartyDetails = async(payload: any): Promise <any> => {
+  return api({
+    url: "performFind",
+    method: "post",
+    data: payload
+  });
+}
+
 const fetchFacilityOrderCounts = async(facilityId: string): Promise<any> => {
   let facilityOrderCounts = {}, resp: any;
   try {
@@ -126,6 +142,22 @@ const fetchFacilityOrderCounts = async(facilityId: string): Promise<any> => {
   return facilityOrderCounts;
 }
 
+const addPartyToFacility = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/addPartyToFacility",
+    method: "post",
+    data: payload
+  });
+}
+
+const removePartyFromFacility = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/removePartyFromFacility",
+    method: "post",
+    data: payload
+  });
+}
+
 const updateFacility = async (payload: any): Promise<any> => {
   return api({
     url: "service/updateFacility",
@@ -183,14 +215,18 @@ const updateFacilityToGroup = async (payload: any): Promise<any> => {
 }
 
 export const FacilityService = {
-  createFacilityLocation,
-  deleteFacilityLocation,
-  fetchFacilityLocations,
   addFacilityToGroup,
-  fetchFacilityGroupInformation,
-  fetchFacilityOrderCounts,
+  addPartyToFacility,
+  deleteFacilityLocation,
+  createFacilityLocation,
   fetchFacilitiesOrderCount,
   fetchFacilities,
+  fetchFacilityGroupInformation,
+  fetchFacilityLocations,
+  fetchFacilityOrderCounts,
+  getFacilityParties,
+  getPartyRoleAndPartyDetails,
+  removePartyFromFacility,
   updateFacility,
   updateFacilityLocation,
   updateFacilityToGroup

src/services/UtilService.ts

@@ -18,6 +18,14 @@ const fetchProductStores = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchPartyRoles = async (payload: any): Promise<any> => {
+  return api({
+    url: 'performFind',
+    method: 'POST',
+    data: payload,
+    cache: true
+  })
+}
 const fetchLocationTypes = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
@@ -30,6 +38,7 @@ const fetchLocationTypes = async (payload: any): Promise<any> => {
 export const UtilService = {
   fetchFacilityTypes,
   fetchLocationTypes,
+  fetchPartyRoles,
   fetchProductStores
 }