Improved: product filters fetching, searching and infinite scrolling …

…logic (#360)

src/components/AddProductFiltersModal.vue

@@ -22,8 +22,14 @@
       </ion-chip>
     </ion-row>
 
-    <ion-list v-if="facetOptions.length">
-      <ion-item v-for="option in facetOptions" :key="option.id"  @click="!isAlreadyApplied(option.id) ? updateSelectedValues(option.id) : null">
+    <div class="empty-state" v-if="isLoading">
+      <ion-item lines="none">
+        <ion-spinner name="crescent" slot="start" />
+        {{ translate("Fetching filters") }}
+      </ion-item>
+    </div>
+    <ion-list v-else-if="filteredOptions.length">
+      <ion-item v-for="option in filteredOptions" :key="option.id"  @click="!isAlreadyApplied(option.id) ? updateSelectedValues(option.id) : null">
         <ion-label v-if="isAlreadyApplied(option.id)">{{ option.label }}</ion-label>
         <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="selectedValues.includes(option.id)">
           {{ option.label }}
@@ -70,76 +76,71 @@ import {
   IonNote,
   IonRow,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController
 } from "@ionic/vue";
 import { closeOutline, saveOutline } from 'ionicons/icons';
 import { useStore } from "vuex";
-import { UtilService } from "@/services/UtilService";
 import { translate } from '@hotwax/dxp-components';
-import { hasError } from "@/utils";
 
 const queryString = ref('');
-const facetOptions = ref([]) as any;
 const isScrollable = ref(true);
 const selectedValues = ref([]) as any;
+const isLoading = ref(false);
+const filteredOptions = ref([]) as any;
+
+const pageSize = process.env.VUE_APP_VIEW_SIZE;
+const currentPage = ref(0);
 
 const props = defineProps(["label", "facetToSelect", "searchfield", "type"]);
 const store = useStore();
 
 const appliedFilters = computed(() => store.getters["util/getAppliedFilters"]);
+const facetOptions = computed(() => store.getters["util/getFacetOptions"]);
 
-onMounted(() => {
+onMounted(async() => {
+  isLoading.value = true;
+  await store.dispatch("util/fetchProductFilters", { facetToSelect: props.facetToSelect, searchfield: props.searchfield })
+  getFilters();
   selectedValues.value = JSON.parse(JSON.stringify(appliedFilters.value[props.type][props.searchfield]))
+  isLoading.value = false;
 })
 
 function closeModal() {
   modalController.dismiss({ dismissed: true });
 }
 
 function search() {
+  isScrollable.value = true;
+  currentPage.value = 0;
+  filteredOptions.value = []
+
   getFilters();
 }
 
-async function getFilters(vSize?: any, vIndex?: any) {
-  const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
-  const viewIndex = vIndex ? vIndex : 0;
-  
-  const payload = {
-    facetToSelect: props.facetToSelect,
-    docType: 'PRODUCT',
-    coreName: 'enterpriseSearch',
-    searchfield: props.searchfield,
-    jsonQuery: '{"query":"*:*","filter":["docType:PRODUCT"]}',
-    noConditionFind: 'N',
-    limit: viewSize,
-    q: queryString.value,
-    term: queryString.value,
-    offset: viewSize * viewIndex,
+async function loadMoreFilters(event: any){
+  getFilters().then(() => {
+    event.target.complete();
+  })
+}
+
+async function getFilters() {
+  let options = facetOptions.value
+  if(queryString.value) {
+    options = facetOptions.value.filter((option: any) => option.label.toLowerCase().includes(queryString.value.toLowerCase()))
   }
 
-  const resp = await UtilService.fetchFacets(payload);
-  if(!hasError(resp)) {
-    const results = resp.data.facetResponse.response
-    facetOptions.value = viewIndex === 0 ? results : [...facetOptions.value , ...results];
-    isScrollable.value = (facetOptions.value.length % process.env.VUE_APP_VIEW_SIZE) === 0;
+  const nextPageItems = options.slice(currentPage.value * pageSize, (currentPage.value + 1) * pageSize);
+  filteredOptions.value = filteredOptions.value.concat(nextPageItems);
+  currentPage.value += 1;
 
-  } else {
-    facetOptions.value = [];
+  if(filteredOptions.value.length >= facetOptions.value.length) {
     isScrollable.value = false;
   }
 }
 
-async function loadMoreFilters(event: any){
-  getFilters(
-    undefined,
-    Math.ceil(facetOptions.value.length / process.env.VUE_APP_VIEW_SIZE).toString() 
-  ).then(() => {
-    event.target.complete();
-  })
-}
-
 function updateSelectedValues(value: string) {
   selectedValues.value.includes(value) ? selectedValues.value.splice(selectedValues.value.indexOf(value), 1) : selectedValues.value.push(value);
 }

src/store/modules/util/UtilState.ts

@@ -6,4 +6,5 @@ export default interface UtilState {
   selectedSegment: any;
   pickupGroups: any;
   pickupGroupFacilities: any;
+  facetOptions: any;
 }

src/store/modules/util/actions.ts

@@ -178,6 +178,37 @@ const actions: ActionTree<UtilState, RootState> = {
     return pickupGroupFacilities;
   },
 
+  async fetchProductFilters({ commit }, params) {
+    let filters = [], total = 0;
+
+    const payload = {
+      facetToSelect: params.facetToSelect,
+      docType: 'PRODUCT',
+      coreName: 'enterpriseSearch',
+      searchfield: params.searchfield,
+      jsonQuery: '{"query":"*:*","filter":["docType:PRODUCT"]}',
+      noConditionFind: 'N',
+      limit: -1,
+      q: "",
+      term: "",
+      offset: 0,
+    }
+
+    try {
+      const resp = await UtilService.fetchFacets(payload);
+      if(!hasError(resp)) {
+        filters = resp.data.facetResponse.response
+        total = filters.length
+      } else {
+        throw resp.data;
+      }
+    } catch(error: any) {
+      logger.error(error);
+    }
+
+    commit(types.UTIL_FACET_OPTIONS_UPDATED, filters);
+  },
+
   async updatePickupGroupFacilities({ commit }, payload) {
     commit(types.UTIL_PICKUP_GROUP_FACILITIES , payload);
   },

src/store/modules/util/getters.ts

@@ -27,6 +27,9 @@ const getters: GetterTree<UtilState, RootState> = {
   getPickupGroupFacilities(state) {
     return state.pickupGroupFacilities
   },
+  getFacetOptions(state) {
+    return state.facetOptions
+  }
 }
 
 export default getters;

src/store/modules/util/index.ts

@@ -26,7 +26,8 @@ const utilModule: Module<UtilState, RootState> = {
     },
     selectedSegment: "",
     pickupGroups: [],
-    pickupGroupFacilities: {}
+    pickupGroupFacilities: {},
+    facetOptions: []
   },
   getters,
   actions,

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

@@ -7,4 +7,5 @@ export const UTIL_FACILITY_GROUPS_UPDATED = SN_UTIL + '/FACILITY_GROUPS_UPDATED'
 export const UTIL_FACILITY_LIST_UPDATED = SN_UTIL + '/FACILITY_LIST_UPDATED'
 export const UTIL_SELECTED_SEGMENT_UPDATED = SN_UTIL + '/SELECTED_SEGMENT_UPDATED'
 export const UTIL_PICKUP_GROUPS_UPDATED = SN_UTIL + '/PICKUP_GROUPS_UPDATED'
-export const UTIL_PICKUP_GROUP_FACILITIES = SN_UTIL + '/PICKUP_GROUP_FACILITIES_UPDATED'
+export const UTIL_PICKUP_GROUP_FACILITIES = SN_UTIL + '/PICKUP_GROUP_FACILITIES_UPDATED'
+export const UTIL_FACET_OPTIONS_UPDATED = SN_UTIL + '/FACET_OPTIONS_UPDATED'

src/store/modules/util/mutations.ts

@@ -50,5 +50,8 @@ const mutations: MutationTree <UtilState> = {
   [types.UTIL_PICKUP_GROUP_FACILITIES](state, payload) {
     state.pickupGroupFacilities = payload
   },
+  [types.UTIL_FACET_OPTIONS_UPDATED](state, payload) {
+    state.facetOptions = payload
+  },
 }
 export default mutations;