Merge pull request #38 from k2maan/improvements

Fixed: flickering on sell online status and capacity change by updating the state instead of refetching the facilities
hotwax · Nov 30, 2023 · cc4fa50 · cc4fa50
2 parents 19a2cc7 + 15c6566
commit cc4fa50
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/store/modules/facility/actions.ts b/src/store/modules/facility/actions.ts
@@ -6,8 +6,6 @@ import { FacilityService } from '@/services/FacilityService'
 import { hasError } from '@/adapter'
 import * as types from './mutation-types'
 import logger from '@/logger'
-import { showToast } from '@/utils'
-import { translate } from '@hotwax/dxp-components'
 
 const actions: ActionTree<FacilityState, RootState> = {
   async fetchFacilitiesAdditionalInformation({ commit, state }, payload = { viewIndex: 0 }) {
@@ -117,6 +115,10 @@ const actions: ActionTree<FacilityState, RootState> = {
     }
   },
 
+  updateFacilities({ commit }, facilities) {
+    commit(types.FACILITY_LIST_UPDATED, { facilities, total: facilities.length })
+  },
+
   async fetchFacilityAdditionalInformation({ commit, state }) {
     const facility = JSON.parse(JSON.stringify(state.current))
 

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
@@ -239,7 +239,6 @@ export default defineComponent({
       // Note: here result.data returns 0 in some cases that's why it is compared with 'undefined'.
       if(result.data != undefined && result.data !== facility.maximumOrderLimit) {
         await this.updateFacility(result.data, facility)
-        await this.fetchFacilities()
       }
     },
     async updateFacility(maximumOrderLimit: number | string, facility: any) {
@@ -251,8 +250,16 @@ export default defineComponent({
           maximumOrderLimit
         })
 
-        if(!hasError(resp)) {
-          facility.maximumOrderLimit = maximumOrderLimit === "" ? null : maximumOrderLimit
+        if (!hasError(resp)) {
+          // updating the facilities state instead of refetching
+          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((fac: any) => {
+            if (facility.facilityId === fac.facilityId) {
+              fac.maximumOrderLimit = maximumOrderLimit === "" ? null : maximumOrderLimit
+              fac.orderLimitType = fac.maximumOrderLimit === null ? 'unlimited' : (fac.maximumOrderLimit === 0 ? 'no-capacity' : 'custom')
+            }
+            return fac
+          })
+          this.store.dispatch('facility/updateFacilities', updatedFacilities)
           showToast(translate('Fulfillment capacity updated successfully for ', { facilityName: facility.facilityName }))
         } else {
           throw resp.data
@@ -281,8 +288,15 @@ export default defineComponent({
         }
 
         if (!hasError(resp)) {
+          // updating the facilities state instead of refetching
+          const updatedFacilities = JSON.parse(JSON.stringify(this.facilities)).map((fac: any) => {
+            if (facility.facilityId === fac.facilityId) {
+              fac.sellOnline = !facility.sellOnline
+            }
+            return fac
+          })
+          this.store.dispatch('facility/updateFacilities', updatedFacilities)
           showToast(translate('Fulfillment setting updated successfully'))
-          await this.fetchFacilities();
         } else {
           throw resp.data
         }