Implemented: filters support in the mobile view, added support to clo…

…se popovers after action completion
hotwax · Nov 22, 2023 · 07635ce · 07635ce
1 parent 9713bcf
commit 07635ce
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 16 deletions.
diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
@@ -69,7 +69,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,17 +109,17 @@ 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()) {
+      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) {
+      if(this.location?.locationSeqId) {
         this.updateFacilityLocation()
       } else {
         this.addFacilityLocation()
@@ -136,7 +136,8 @@ export default defineComponent({
 
         if(!hasError(resp)) {
           showToast(translate('Facility location created successfully'))
-          this.closeModal('success');
+          this.closeModal();
+          await this.store.dispatch('facility/fetchFacilityLocations')
         } else {
           throw resp.data
         }
@@ -157,7 +158,8 @@ export default defineComponent({
 
         if(!hasError(resp)) {
           showToast(translate('Facility location updated successfully'))
-          this.closeModal('success');
+          this.closeModal();
+          await this.store.dispatch('facility/fetchFacilityLocations')
         } else {
           throw resp.data
         }
@@ -168,9 +170,12 @@ export default defineComponent({
     },
   },
   setup() {
+    const store = useStore();
+
     return {
       closeOutline,
       saveOutline,
+      store,
       translate
     };
   },

diff --git a/src/components/Filters.vue b/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>
diff --git a/src/components/LocationDetailsPopover.vue b/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')
         } else {
           throw resp.data
         }
       } catch(err) {
         showToast(translate('Failed to remove facility location'))
         logger.error('Failed to remove facility location', err)
       }
+      popoverController.dismiss();
     }
   },
   setup() {

diff --git a/src/locales/en.json b/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",

diff --git a/src/theme/variables.css b/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);

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
@@ -1,13 +1,20 @@
 <template>
   <ion-page>
+    <Filters content-id="filter-content" />
+
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button slot="start" default-href="/" />
         <ion-title>{{ translate("Find Facilities") }}</ion-title>
+        <ion-buttons slot="end" class="mobile-only">
+          <ion-menu-button menu="end">
+            <ion-icon :icon="filterOutline" />
+          </ion-menu-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content id="filter-content">
       <div class="find">
         <section class="search">
           <ion-searchbar :placeholder="translate('Search facilities')" v-model="query.queryString" @keyup.enter="updateQuery()" />
@@ -92,6 +99,7 @@
 <script lang="ts">
 import {
   IonBackButton,
+  IonButtons,
   IonChip,
   IonContent,
   IonHeader,
@@ -101,6 +109,7 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonMenuButton,
   IonPage,
   IonSearchbar,
   IonSelect,
@@ -112,6 +121,7 @@ import {
 import { defineComponent } from 'vue';
 import {
   businessOutline,
+  filterOutline,
   globeOutline,
   lockClosedOutline,
   lockOpenOutline,
@@ -126,11 +136,14 @@ import { hasError } from '@/adapter';
 import { FacilityService } from '@/services/FacilityService'
 import { showToast } from '@/utils';
 import logger from '@/logger';
+import Filters from '@/components/Filters.vue'
 
 export default defineComponent({
   name: 'FindFacilities',
   components: {
+    Filters,
     IonBackButton,
+    IonButtons,
     IonChip,
     IonContent,
     IonHeader,
@@ -140,6 +153,7 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
+    IonMenuButton,
     IonPage,
     IonSearchbar,
     IonSelect,
@@ -230,6 +244,7 @@ export default defineComponent({
 
     return {
       businessOutline,
+      filterOutline,
       globeOutline,
       lockClosedOutline,
       lockOpenOutline,