Implemented: pagination component from the dxp-components on count details page in admin screen (#657)

package.json

@@ -18,7 +18,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
-    "@hotwax/dxp-components": "^1.14.0",
+    "@hotwax/dxp-components": "^1.17.0",
     "@hotwax/oms-api": "^1.14.0",
     "@ionic/core": "^7.8.6",
     "@ionic/vue": "^7.8.6",

src/store/modules/count/CountState.ts

@@ -19,4 +19,5 @@ export default interface CountState {
   defaultRecountUpdateBehaviour: String;
   cachedUnmatchProducts: any;
   closedCycleCountsTotal: any;
+  cycleCountItemsCount: number;
 }

src/store/modules/count/actions.ts

@@ -259,11 +259,29 @@
     commit(types.COUNT_ITEMS_UPDATED, { itemList: payload })
   },
 
+  async fetchCycleCountItemsCount ({ commit }, inventoryCountImportId) {
+    let total = 0;
+    try {
+      const resp = await CountService.fetchCycleCountItemsCount({
+        inventoryCountImportId: inventoryCountImportId,
+      })
+
+      if(!hasError(resp)) {
+        total = resp.data.count
+      } else {
+        throw resp
+      }
+    } catch(error: any) {
+      logger.error(error);
+    }
+    commit(types.COUNT_ITEMS_COUNT_TOTAL_UPDATED, total)
+  },
+
   async clearCycleCountItems ({ commit }) {
     commit(types.COUNT_ITEMS_UPDATED, [])
   },
 
   async fetchCycleCountImportSystemMessages({commit} ,payload) {
     let systemMessages;
     try {
       const twentyFourHoursEarlier = DateTime.now().minus({ hours: 24 });

src/store/modules/count/getters.ts

@@ -35,6 +35,9 @@ const getters: GetterTree<CountState, RootState> = {
   },
   getClosedCycleCountsTotal(state) {
     return state.closedCycleCountsTotal
+  },
+  getCycleCountItemsCount(state) {
+    return state.cycleCountItemsCount
   }
 };
 

src/store/modules/count/index.ts

@@ -30,7 +30,8 @@ const countModule: Module<CountState, RootState> = {
     cycleCountItems: {},
     defaultRecountUpdateBehaviour: "add",
     cachedUnmatchProducts: {},
-    closedCycleCountsTotal: ""
+    closedCycleCountsTotal: "",
+    cycleCountItemsCount: 0
   },
   getters,
   actions,

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

@@ -7,4 +7,5 @@ export const COUNT_UPDATED = SN_COUNT + '/UPDATED'
 export const COUNT_ITEMS_UPDATED = SN_COUNT + '/ITEMS_UPDATED'
 export const COUNT_IMPORT_SYSTEM_MESSAGES_UPDATED = SN_COUNT + 'IMPORT_SYSTEM_MESSAGES_UPDATED'
 export const COUNT_CACHED_UNMATCH_PRODUCTS_UPDATED = SN_COUNT + 'CACHED_UNMATCHED_PRODUCTS_UPDATED'
-export const COUNT_CLOSED_CYCLE_COUNTS_TOTAL_UPDATED = SN_COUNT + 'CLOSED_CYCLE_COUNTS_TOTAL_UPDATED'
+export const COUNT_CLOSED_CYCLE_COUNTS_TOTAL_UPDATED = SN_COUNT + 'CLOSED_CYCLE_COUNTS_TOTAL_UPDATED'
+export const COUNT_ITEMS_COUNT_TOTAL_UPDATED = SN_COUNT + 'ITEMS_COUNT_TOTAL_UPDATED'

src/store/modules/count/mutations.ts

@@ -44,6 +44,9 @@ const mutations: MutationTree <CountState> = {
   },
   [types.COUNT_CLOSED_CYCLE_COUNTS_TOTAL_UPDATED] (state, payload) {
     state.closedCycleCountsTotal = payload
+  },
+  [types.COUNT_ITEMS_COUNT_TOTAL_UPDATED] (state, payload) {
+    state.cycleCountItemsCount = payload
   }
 
 }	

src/views/AssignedDetail.vue

@@ -60,10 +60,11 @@
                 <ion-label>{{ translate("Progress") }}</ion-label>
                 <ion-label slot="end">{{ getProgress() }}</ion-label>
               </ion-item>
-              <ion-item>
+              <!-- Todo: need backend api for fetching variance on page load -->
+              <!-- <ion-item>
                 <ion-label>{{ translate("Variance") }}</ion-label>
                 <ion-label slot="end">{{ getVarianceInformation() }}</ion-label>
-              </ion-item>
+              </ion-item> -->
             </ion-list>
           </div>
         </div>
@@ -129,6 +130,14 @@
       </template>
     </ion-content>
 
+    <ion-footer v-if="currentCycleCount.inventoryCountImportId && totalCountItems">
+      <ion-toolbar>
+        <ion-buttons>
+          <DxpPagination :itemsPerPage="pageSize" :totalItems="totalCountItems" @updatePageIndex="updatePageIndex" />
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-footer>
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed" v-if="currentCycleCount.inventoryCountImportId">
       <ion-fab-button @click="updateCountStatus">
         <ion-icon :icon="lockClosedOutline" />
@@ -141,7 +150,7 @@
 import { computed, defineProps, nextTick, ref } from "vue";
 import { translate } from '@/i18n'
 import { addOutline, calendarClearOutline, businessOutline, personCircleOutline, ellipsisVerticalOutline, lockClosedOutline } from "ionicons/icons";
-import { IonBackButton, IonButton, IonButtons, IonChip, IonContent, IonDatetime, IonModal, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPage, IonThumbnail, IonTitle, IonToolbar, modalController, onIonViewWillEnter, popoverController, onIonViewWillLeave } from "@ionic/vue";
+import { IonBackButton, IonButton, IonButtons, IonChip, IonContent, IonDatetime, IonModal, IonFab, IonFabButton, IonFooter, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPage, IonThumbnail, IonTitle, IonToolbar, modalController, onIonViewWillEnter, popoverController, onIonViewWillLeave } from "@ionic/vue";
 import AssignedCountPopover from "@/components/AssignedCountPopover.vue"
 import store from "@/store"
 import logger from "@/logger"
@@ -152,6 +161,7 @@
 import router from "@/router";
 import Image from "@/components/Image.vue"
 import { DateTime } from "luxon";
+import { DxpPagination } from "@hotwax/dxp-components";
 
 const props = defineProps({
   inventoryCountImportId: String
@@ -160,12 +170,15 @@
 const cycleCountStats = computed(() => (id: string) => store.getters["count/getCycleCountStats"](id))
 const getProduct = computed(() => (id: string) => store.getters["product/getProduct"](id))
 const productStoreSettings = computed(() => store.getters["user/getProductStoreSettings"])
+const totalCountItems = computed(() => store.getters["count/getCycleCountItemsCount"])
 
 const dateTimeModalOpen = ref(false)
 const currentCycleCount = ref({}) as any
 const countNameRef = ref()
 let isCountNameUpdating = ref(false)
 let countName = ref("")
+const pageSize = process.env.VUE_APP_VIEW_SIZE ? JSON.parse(process.env.VUE_APP_VIEW_SIZE) : 20;
+let pageIndex = 0;
 
 async function addProductToCount(productId: any) {
   if(!productId) {
@@ -187,8 +200,8 @@
 
     if(!hasError(resp)) {
       showToast(translate("Added product to count"))
-      // TODO: Fetching all the items again as in the current add api we do not get all the information required to be displayed on UI
-      await fetchCountItems();
+      pageIndex = 0
+      await Promise.allSettled([fetchCountItems(), store.dispatch("count/fetchCycleCountItemsCount", props.inventoryCountImportId), store.dispatch("count/fetchCycleCountStats", [props.inventoryCountImportId])])
     }
   } catch(err) {
     logger.error("Failed to add product to count", err)
@@ -213,7 +226,7 @@
       }
 
       countName.value = resp.data.countImportName
-      await fetchCountItems();
+      await Promise.allSettled([fetchCountItems(), store.dispatch("count/fetchCycleCountItemsCount", props.inventoryCountImportId), store.dispatch("count/fetchCycleCountStats", [props.inventoryCountImportId])])
     }
   } catch(err) {
     logger.error()
@@ -226,20 +239,16 @@
   emitter.off("addProductToCount", addProductToCount)
 })
 
-async function fetchCountItems() {
-  store.dispatch("count/fetchCycleCountStats", [props.inventoryCountImportId])
-  let items = [] as any, resp, pageIndex = 0;
+async function fetchCountItems(index?: any) {
+  let items = [] as any;
 
   try {
-    do {
-      resp = await CountService.fetchCycleCountItems({ inventoryCountImportId : props?.inventoryCountImportId, pageSize: 100, pageIndex })
-      if(!hasError(resp) && resp.data?.itemList?.length) {
-        items = items.concat(resp.data.itemList)
-        pageIndex++;
-      } else {
-        throw resp.data;
-      }
-    } while(resp.data.itemList?.length >= 100)
+    const resp = await CountService.fetchCycleCountItems({ inventoryCountImportId : props?.inventoryCountImportId, pageSize, pageIndex: index ? index : 0 })
+    if(!hasError(resp) && resp.data?.itemList?.length) {
+      items = resp.data.itemList
+    } else {
+      throw resp.data;
+    }
   } catch(err) {
     logger.error(err)
   }
@@ -250,6 +259,11 @@
   store.dispatch("product/fetchProducts", { productIds: [...new Set(items.map((item: any) => item.productId))] })
 }
 
+function updatePageIndex(index: any) {
+  pageIndex = index;
+  fetchCountItems(index);
+}
+
 async function editCountName() {
   isCountNameUpdating.value = !isCountNameUpdating.value;
   // Waiting for DOM updations before focus inside the text-area, as it is conditionally rendered in the DOM
@@ -328,7 +342,7 @@
   await addProductModal.present();
 }
 
 function getVarianceInformation() {
   let totalItemsQuantityCount = 0, totalItemsExpectedCount = 0
 
   currentCycleCount.value.items?.map((item: any) => {