Fixed: mutation names, added filters for mobile view, enabled keyboard accessbility on location form and fixed filters on the find page

src/components/AddLocationModal.vue

@@ -11,39 +11,43 @@
   </ion-header>
 
   <ion-content>
-    <ion-item>
-      <ion-label>{{ translate("Type") }}</ion-label>
-      <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="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="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="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="translate('level')" v-model="locationInfo.levelId"/>
-    </ion-item>
-    <ion-item>
-      <ion-label>{{ translate("Sequence") }}</ion-label>
-      <ion-input :placeholder="translate('sequence')" v-model="locationInfo.positionId"/>
-    </ion-item>
-  </ion-content>
+    <form @keyup.enter="saveFacilityLocation">
+      <!-- Using stop for enter key as when using keyboard for opening the select we need to use enter and the same key submits the form
+      so to prevent form submission on using enter key on select used stop -->
+      <ion-item @keyup.enter.stop>
+        <ion-label>{{ translate("Type") }}</ion-label>
+        <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="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="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="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="translate('level')" v-model="locationInfo.levelId"/>
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ translate("Sequence") }}</ion-label>
+        <ion-input :placeholder="translate('sequence')" v-model="locationInfo.positionId"/>
+      </ion-item>
 
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button @click="saveFacilityLocation">
-      <ion-icon :icon="saveOutline" />
-    </ion-fab-button>
-  </ion-fab>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="saveFacilityLocation" @keyup.enter.stop>
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </form>
+  </ion-content>
 </template>
 
 <script lang="ts">
@@ -69,7 +73,7 @@ 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 { mapGetters, useStore } from 'vuex'
 import { hasError } from "@/adapter";
 import { showToast } from "@/utils";
 import logger from "@/logger";
@@ -109,21 +113,24 @@ export default defineComponent({
     })
   },
   methods: {
-    closeModal(result?: string) {
-      modalController.dismiss({ result });
+    closeModal() {
+      modalController.dismiss();
     },
-    saveFacilityLocation() {
-      if(!this.locationInfo.aisleId?.trim() || !this.locationInfo.areaId?.trim() || !this.locationInfo.positionId?.trim() || !this.locationInfo.sectionId?.trim() || !this.locationInfo.levelId?.trim()) {
+    async saveFacilityLocation() {
+      if(!this.locationInfo.aisleId?.trim() || !this.locationInfo.areaId?.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()
+      if(this.location?.locationSeqId) {
+        await this.updateFacilityLocation()
       } else {
-        this.addFacilityLocation()
+        await this.addFacilityLocation()
       }
+
+      // fetching facility locations after updating/creating a location
+      await this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.current.facilityId })
     },
     async addFacilityLocation() {
       const params = {
@@ -136,7 +143,7 @@ export default defineComponent({
 
         if(!hasError(resp)) {
           showToast(translate('Facility location created successfully'))
-          this.closeModal('success');
+          this.closeModal();
         } else {
           throw resp.data
         }
@@ -157,7 +164,7 @@ export default defineComponent({
 
         if(!hasError(resp)) {
           showToast(translate('Facility location updated successfully'))
-          this.closeModal('success');
+          this.closeModal();
         } else {
           throw resp.data
         }
@@ -168,9 +175,12 @@ export default defineComponent({
     },
   },
   setup() {
+    const store = useStore();
+
     return {
       closeOutline,
       saveOutline,
+      store,
       translate
     };
   },

src/components/Filters.vue

@@ -0,0 +1,94 @@
+<template>
+  <ion-menu type="overlay" side="end">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ translate("Filters") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item lines="none">
+          <ion-icon :icon="globeOutline" slot="start" />
+          <ion-label>{{ translate("Product Store") }}</ion-label>
+          <ion-select interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
+            <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+            <ion-select-option :value="productStore.productStoreId" :key="index" v-for="(productStore, index) in productStores">{{ productStore.storeName }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-icon :icon="businessOutline" slot="start" />
+          <ion-label>{{ translate("Type") }}</ion-label>
+          <ion-select interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
+            <ion-select-option value="">{{ translate("All") }}</ion-select-option>
+            <ion-select-option :value="facilityType.facilityTypeId" :key="index" v-for="(facilityType, index) in facilityTypes">{{ facilityType.description }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonMenu,
+  IonTitle,
+  IonToolbar,
+  IonSelect,
+  IonSelectOption,
+  menuController
+} from '@ionic/vue'
+import { businessOutline, globeOutline } from 'ionicons/icons'
+import { defineComponent } from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: 'Filters',
+  components: {
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonMenu,
+    IonTitle,
+    IonToolbar,
+    IonSelect,
+    IonSelectOption
+  },
+  computed: {
+    ...mapGetters({
+      query: "facility/getQuery",
+      facilityTypes: "util/getFacilityTypes",
+      productStores: "util/getProductStores"
+    })
+  },
+  methods: {
+    closeMenu() {
+      menuController.close()
+    },
+    async updateQuery() {
+      await this.store.dispatch('facility/updateQuery', this.query)
+      this.closeMenu();
+    },
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      businessOutline,
+      globeOutline,
+      store,
+      translate
+    };    
+  }
+})
+</script>

src/components/LocationDetailsPopover.vue

@@ -53,10 +53,8 @@ export default defineComponent({
 
       addLocationModal.present()
 
-      addLocationModal.onDidDismiss().then((result: any) => {
-        if(result.data?.result) {
-          popoverController.dismiss();
-        }
+      addLocationModal.onDidDismiss().then(() => {
+        popoverController.dismiss();
       })
     },
     async removeLocation() {
@@ -69,15 +67,16 @@ export default defineComponent({
         const resp = await FacilityService.deleteFacilityLocation(params)
 
         if(!hasError(resp)) {
-          this.store.dispatch('facility/fetchFacilityLocation')
-          popoverController.dismiss();
+          showToast(translate('Facility location removed successfully'))
+          await this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.current.facilityId })
         } else {
           throw resp.data
         }
       } catch(err) {
         showToast(translate('Failed to remove facility location'))
         logger.error('Failed to remove facility location', err)
       }
+      popoverController.dismiss();
     }
   },
   setup() {

src/locales/en.json

@@ -25,34 +25,42 @@
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Closing Time": "Closing Time",
   "Configure the order fulfillment capacity of your facility.": "Configure the order fulfillment capacity of your facility.",
+  "Consumed Order Limit": "Consumed Order Limit",
   "Custom": "Custom",
   "Custom fulfillment capacity": "Custom fulfillment capacity",
   "Custom mapping": "Custom mapping",
   "Country": "Country",
   "Days to ship": "Days to ship",
   "days to ship": "days to ship",
+  "Default days to ship updated successfully": "Default days to ship updated successfully",
   "Dismiss": "Dismiss",
+  "Filters": "Filters",
   "Edit": "Edit",
   "Edit location": "Edit location",
   "External mappings": "External mappings",
   "Facilities": "Facilities",
   "Facility details": "Facility details",
   "Facility ID": "Facility ID",
   "Facility location created successfully": "Facility location created successfully",
+  "Facility location removed successfully": "Facility location removed 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 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",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
   "Friday": "Friday",
   "Fulfillment Capacity": "Fulfillment Capacity",
   "Fulfillment capacity updated successfully for ": "Fulfillment capacity updated successfully for {facilityName}",
   "Fulfillment Settings": "Fulfillment Settings",
+  "Fulfillment setting updated successfully": "Fulfillment setting updated successfully",
   "Generate": "Generate",
   "Generate shipping labels": "Generate shipping labels",
   "Go to Launchpad": "Go to Launchpad",
@@ -83,9 +91,10 @@
   "Netsuite": "Netsuite",
   "No Capacity": "No Capacity",
   "No capacity": "No capacity",
+  "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 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 records found": "No records found",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
   "OMS instance": "OMS instance",

src/store/modules/facility/actions.ts

@@ -56,9 +56,7 @@ const actions: ActionTree<FacilityState, RootState> = {
         facilities = resp.data.docs
         total = resp.data.count
 
-        // make api calls in parallel
-        const facilitiesGroupInformation = await FacilityService.fetchFacilityGroupInformation(facilities.map((facility: any) => facility.facilityId))
-        const facilitiesOrderCount = await FacilityService.fetchFacilitiesOrderCount(facilities.map((facility: any) => facility.facilityId))
+        const [facilitiesGroupInformation, facilitiesOrderCount] = await Promise.all([FacilityService.fetchFacilityGroupInformation(facilities.map((facility: any) => facility.facilityId)), FacilityService.fetchFacilitiesOrderCount(facilities.map((facility: any) => facility.facilityId))])
 
         facilities.map((facility: any) => {
           const fulfillmentOrderLimit = facility.maximumOrderLimit
@@ -186,7 +184,7 @@ const actions: ActionTree<FacilityState, RootState> = {
       const resp = await FacilityService.fetchFacilityLocations(params)
 
       if(!hasError(resp) && resp.data.count > 0) {
-        commit(types.FACILITY_CURRENT_LOCATION_UPDATED, resp.data.docs)
+        commit(types.FACILITY_LOCATIONS_UPDATED, resp.data.docs)
       } else {
         throw resp.data
       }

src/store/modules/facility/mutation-types.ts

@@ -2,4 +2,4 @@ export const SN_FACILITY = 'facility'
 export const FACILITY_LIST_UPDATED = SN_FACILITY + '/LIST_UPDATED'
 export const FACILITY_QUERY_UPDATED = SN_FACILITY + '/QUERY_UPDATED'
 export const FACILITY_CURRENT_UPDATED = SN_FACILITY + '/CURRENT_UPDATED'
-export const FACILITY_CURRENT_LOCATION_UPDATED = SN_FACILITY + '/CURRENT_LOCATION_UPDATED'
+export const FACILITY_LOCATIONS_UPDATED = SN_FACILITY + '/LOCATIONS_UPDATED'

src/store/modules/facility/mutations.ts

@@ -13,7 +13,7 @@ const mutations: MutationTree <FacilityState> = {
   [types.FACILITY_CURRENT_UPDATED](state, payload) {
     state.current = payload
   },
-  [types.FACILITY_CURRENT_LOCATION_UPDATED](state, payload) {
+  [types.FACILITY_LOCATIONS_UPDATED](state, payload) {
     state.current.locations = payload
   }
 }

src/theme/variables.css

@@ -326,7 +326,7 @@ hr {
 
 .list-item {
   --columns-mobile: 2;
-  --columns-tablet: 5;
+  --columns-tablet: 4;
   --columns-desktop: 7;
   --col-calc: var(--columns-mobile);
   --implicit-columns: calc(var(--col-calc) - 1);