Implemented: support to create, update and remove location from facility(#18)

src/components/AddLocationModal.vue

@@ -13,35 +13,34 @@
   <ion-content>
     <ion-item>
       <ion-label>{{ translate("Type") }}</ion-label>
-      <ion-select interface="popover" :placeholder="translate('Select')" value="bulk" required>
-        <ion-select-option>{{ "pick/primary" }}</ion-select-option>
-        <ion-select-option>{{ "bulk" }}</ion-select-option>
+      <ion-select interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
+        <ion-select-option v-for="(description, type) in locationTypes" :key="type" :value="type">{{ description }}</ion-select-option>
       </ion-select>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-input placeholder="area"/>
+      <ion-input :placeholder="translate('area')" v-model="locationInfo.areaId"/>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-input placeholder="aisle" />
+      <ion-input :placeholder="translate('aisle')" v-model="locationInfo.aisleId"/>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-input placeholder="section"/>
+      <ion-input :placeholder="translate('section')" v-model="locationInfo.sectionId"/>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
-      <ion-input placeholder="level"/>
+      <ion-input :placeholder="translate('level')" v-model="locationInfo.levelId"/>
     </ion-item>
     <ion-item>
       <ion-label>{{ translate("Sequence") }}</ion-label>
-      <ion-input placeholder="sequence"/>
+      <ion-input :placeholder="translate('sequence')" v-model="locationInfo.positionId"/>
     </ion-item>
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button>
+    <ion-fab-button @click="saveFacilityLocation">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -69,6 +68,11 @@ import {
 import { defineComponent } from "vue";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
+import { FacilityService } from "@/services/FacilityService";
+import { mapGetters } from 'vuex'
+import { hasError } from "@/adapter";
+import { showToast } from "@/utils";
+import logger from "@/logger";
 
 export default defineComponent({
   name: "AddLocationModal",
@@ -89,11 +93,80 @@ export default defineComponent({
     IonTitle,
     IonToolbar
   },
-  methods: {
-    closeModal() {
-      modalController.dismiss()
+  props: ["location"],
+  data() {
+    return {
+      locationInfo: {} as any
     }
   },
+  mounted() {
+    this.locationInfo = this.location ? JSON.parse(JSON.stringify(this.location)) : {}
+  },
+  computed: {
+    ...mapGetters({
+      current: 'facility/getCurrent',
+      locationTypes: 'util/getLocationTypes'
+    })
+  },
+  methods: {
+    closeModal(result?: string) {
+      modalController.dismiss({ result });
+    },
+    saveFacilityLocation() {
+      if(!this.locationInfo.aisleId?.trim() || !this.locationInfo.areaId?.trim() || !this.locationInfo.positionId?.trim() || !this.locationInfo.sectionId?.trim() || !this.locationInfo.levelId?.trim()) {
+        showToast(translate('Please fill all the required fields'))
+        return;
+      }
+
+      // checking for locationSeqId as when adding new facility we won't be having locationSeqId
+      if(this.location.locationSeqId) {
+        this.updateFacilityLocation()
+      } else {
+        this.addFacilityLocation()
+      }
+    },
+    async addFacilityLocation() {
+      const params = {
+        facilityId: this.current.facilityId,
+        ...this.locationInfo
+      }
+
+      try {
+        const resp = await FacilityService.createFacilityLocation(params)
+
+        if(!hasError(resp)) {
+          showToast(translate('Facility location created successfully'))
+          this.closeModal('success');
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate('Failed to create facility location'))
+        logger.error('Failed to create facility location', err)
+      }
+    },
+
+    async updateFacilityLocation() {
+      const params = {
+        facilityId: this.current.facilityId,
+        ...this.locationInfo
+      }
+
+      try {
+        const resp = await FacilityService.updateFacilityLocation(params)
+
+        if(!hasError(resp)) {
+          showToast(translate('Facility location updated successfully'))
+          this.closeModal('success');
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate('Failed to update facility location'))
+        logger.error('Failed to update facility location', err)
+      }
+    },
+  },
   setup() {
     return {
       closeOutline,

src/components/LocationDetailsPopover.vue

@@ -5,7 +5,7 @@
       <ion-item button @click="addLocationModal">
         {{ translate("Edit location") }}
       </ion-item>
-      <ion-item button lines="none">
+      <ion-item button lines="none" @click="removeLocation">
         {{ translate("Remove location") }}
       </ion-item>
     </ion-list>
@@ -18,11 +18,17 @@ import {
   IonItem,
   IonList,
   IonListHeader,
-  modalController
+  modalController,
+popoverController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { translate } from "@hotwax/dxp-components";
 import AddLocationModal from "./AddLocationModal.vue";
+import { mapGetters, useStore } from "vuex";
+import { FacilityService } from "@/services/FacilityService";
+import { hasError } from "@/adapter";
+import { showToast } from "@/utils";
+import logger from "@/logger";
 
 export default defineComponent({
   name: "LocationDetailsPopover",
@@ -32,17 +38,53 @@ export default defineComponent({
     IonList,
     IonListHeader
   },
+  computed: {
+    ...mapGetters({
+      current: 'facility/getCurrent'
+    })
+  },
+  props: ["location"],
   methods: {
     async addLocationModal() {
       const addLocationModal = await modalController.create({
-        component: AddLocationModal
+        component: AddLocationModal,
+        componentProps: { location: this.location }
       })
 
       addLocationModal.present()
+
+      addLocationModal.onDidDismiss().then((result: any) => {
+        if(result.data?.result) {
+          popoverController.dismiss();
+        }
+      })
+    },
+    async removeLocation() {
+      const params = {
+        facilityId: this.location.facilityId,
+        locationSeqId: this.location.locationSeqId
+      }
+
+      try {
+        const resp = await FacilityService.deleteFacilityLocation(params)
+
+        if(!hasError(resp)) {
+          this.store.dispatch('facility/fetchFacilityLocation')
+          popoverController.dismiss();
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate('Failed to remove facility location'))
+        logger.error('Failed to remove facility location', err)
+      }
     }
   },
   setup() {
+    const store = useStore();
+
     return {
+      store,
       translate
     };
   }

src/locales/en.json

@@ -7,14 +7,14 @@
   "Address": "Address",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
-  "aisle": "aisle",
   "Aisle": "Aisle",
+  "aisle": "aisle",
   "All": "All",
   "Allow pickup": "Allow pickup",
   "App": "App",
   "Apply": "Apply",
-  "area": "area",
   "Area": "Area",
+  "area": "area",
   "Back to Launchpad": "Back to Launchpad",
   "Built: ": "Built: { builtDateTime }",
   "Cancel": "Cancel",
@@ -40,9 +40,15 @@
   "Facility": "Facility",
   "Facility details": "Facility details",
   "Facility ID": "Facility ID",
+  "Facility location created successfully": "Facility location created successfully",
+  "Facility location updated successfully": "Facility location updated successfully",
   "Facility name": "Facility name",
   "Facility Management": "Facility Management",
+  "Failed to create facility location": "Failed to create facility location",
   "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 update facility location": "Failed to update facility location",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
   "Friday": "Friday",
@@ -59,8 +65,8 @@
   "Language": "Language",
   "Latitude": "Latitude",
   "Latitude & Longitude": "Latitude & Longitude",
-  "level": "level",
   "Level": "Level",
+  "level": "level",
   "Loading": "Loading",
   "Location": "Location",
   "Location details": "Location details",
@@ -92,23 +98,24 @@
   "orders allocated today": "{orderCount} orders allocated today",
   "orders in fulfillment queue": "{orderCount} orders in fulfillment queue",
   "Parking": "Parking",
-  "party id": "party id",
   "Party Id": "Party Id",
+  "party id": "party id",
   "Password": "Password",
   "Please contact the administrator.": "Please contact the administrator.",
+  "Please fill all the required fields": "Please fill all the required fields",
   "primary store": "primary store",
   "Product Store": "Product Store",
   "Product Stores": "Product Stores",
   "Reason:": "Reason:",
   "Reset": "Reset",
   "Remove": "Remove",
   "Remove location": "Remove location",
-  "role": "role",
   "Role": "Role",
+  "role": "role",
   "Saturday": "Saturday",
   "Save": "Save",
-  "section": "section",
   "Section": "Section",
+  "section": "section",
   "Select": "Select",
   "Search facilities": "Search facilities",
   "Search time zones": "Search time zones",
@@ -120,8 +127,8 @@
   "Select your preferred language.": "Select your preferred language.",
   "Sell Online": "Sell Online",
   "Sell Inventory Online": "Sell Inventory Online",
-  "sequence": "sequence",
   "Sequence": "Sequence",
+  "sequence": "sequence",
   "Settings": "Settings",
   "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.": "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.",
   "Shopify": "Shopify",
@@ -132,8 +139,8 @@
   "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.",
   "Staff": "Staff",
   "State": "State",
-  "Store": "Store",
   "store name": "store name",
+  "Store": "Store",
   "Sunday": "Sunday",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.": "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.",

src/services/FacilityService.ts

@@ -134,6 +134,14 @@ const updateFacility = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchFacilityLocations = async(payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "post",
+    data: payload
+  })
+}
+
 const addFacilityToGroup = async (payload: any): Promise<any> => {
   return api({
     url: "service/addFacilityToGroup",
@@ -142,6 +150,30 @@ const addFacilityToGroup = async (payload: any): Promise<any> => {
   })
 }
 
+const createFacilityLocation = async(payload: any): Promise<any> => {
+  return api({
+    url: "service/createFacilityLocation",
+    method: "post",
+    data: payload
+  })
+}
+
+const updateFacilityLocation = async(payload: any): Promise<any> => {
+  return api({
+    url: "service/updateFacilityLocation",
+    method: "post",
+    data: payload
+  })
+}
+
+const deleteFacilityLocation = async(payload: any): Promise<any> => {
+  return api({
+    url: "service/deleteFacilityLocation",
+    method: "post",
+    data: payload
+  })
+}
+
 const updateFacilityToGroup = async (payload: any): Promise<any> => {
   return api({
     url: "service/updateFacilityToGroup",
@@ -151,11 +183,15 @@ const updateFacilityToGroup = async (payload: any): Promise<any> => {
 }
 
 export const FacilityService = {
+  createFacilityLocation,
+  deleteFacilityLocation,
+  fetchFacilityLocations,
   addFacilityToGroup,
   fetchFacilityGroupInformation,
   fetchFacilityOrderCounts,
   fetchFacilitiesOrderCount,
   fetchFacilities,
   updateFacility,
+  updateFacilityLocation,
   updateFacilityToGroup
 }

src/services/UtilService.ts

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