Implemented: support to display searchbar and product store filters on the groups page and filter groups(#99)

src/components/RoutingHistoryModal.vue

@@ -18,7 +18,7 @@
           <p>{{ groupName }}</p>
         </ion-label>
         <ion-label slot="end">
-          {{ currentEComStore.productStoreId }}
+          {{ productStoreName }}
         </ion-label>
       </ion-item>
       <div class="empty-state" v-if="!routingHistory.length">
@@ -72,7 +72,10 @@ defineProps({
   }
 })
 
-const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+const userProfile = computed(() => store.getters["user/getUserProfile"])
+const currentRoutingGroup: any = computed(() => store.getters["orderRouting/getCurrentRoutingGroup"])
+
+const productStoreName = computed(() => userProfile.value.stores.find((store: any) => store.productStoreId === currentRoutingGroup.value.productStoreId)?.storeName || currentRoutingGroup.value.productStoreId)
 
 function closeModal() {
   modalController.dismiss();

src/locales/en.json

@@ -120,6 +120,7 @@
   "Schedule": "Schedule",
   "Schedule disabled": "Schedule disabled",
   "Scheduler": "Scheduler",
+  "Search groups": "Search groups",
   "Search time zones": "Search time zones",
   "Select": "Select",
   "Select filter to apply": "Select filter to apply",

src/services/RoutingService.ts

@@ -4,7 +4,7 @@ const fetchRoutingGroups = async (payload: any): Promise<any> => {
   return api({
     url: "groups", 
     method: "GET",
-    query: payload
+    params: payload
   });
 }
 

src/store/RootState.ts

@@ -1,6 +1,8 @@
+import OrderRoutingState from "./modules/orderRouting/OrderRoutingState";
 import UtilState from "./modules/util/UtilState";
 
 export default interface RootState {
   user: any;
   util: UtilState;
+  orderRouting: OrderRoutingState;
 }

src/store/modules/orderRouting/actions.ts

@@ -8,12 +8,15 @@
 import { DateTime } from "luxon"
 import emitter from "@/event-bus"
 import { translate } from "@/i18n"
+import store from "@/store"
 
 const actions: ActionTree<OrderRoutingState, RootState> = {
   async fetchOrderRoutingGroups({ commit }) {
     let routingGroups = [] as any;
     // filter groups on the basis of productStoreId
-    const payload = {}
+    const payload = {
+      productStoreId: store.state.user.currentEComStore.productStoreId
+    }
 
     try {
       const resp = await OrderRoutingService.fetchRoutingGroups(payload);
@@ -200,7 +203,7 @@
     commit(types.ORDER_ROUTING_HISTORY_UPDATED, routingHistory)
   },
 
   async deleteRoutingFilters({ dispatch }, payload) {
     let hasAllFiltersDeletedSuccessfully = true;
     try {
       // As discussed, we can't make parallel api calls, hence using for loop to make api calls
@@ -220,7 +223,7 @@
     return hasAllFiltersDeletedSuccessfully
   },
 
   async updateRouting({ dispatch }, payload) {
     let orderRoutingId = ''
     try {
       const resp = await OrderRoutingService.updateRouting(payload)
@@ -267,7 +270,7 @@
     return routingRuleId;
   },
 
   async deleteRuleConditions({ dispatch }, payload) {
     // TODO: check if we can call request in parallel for delete operation
     let hasAllConditionsDeletedSuccessfully = true;
     try {
@@ -287,7 +290,7 @@
     return hasAllConditionsDeletedSuccessfully
   },
 
   async deleteRuleActions({ dispatch }, payload) {
     // TODO: check if we can call request in parallel for delete operation
     let hasAllActionsDeletedSuccessfully = true;
     try {
@@ -350,7 +353,7 @@
     return JSON.parse(JSON.stringify(rulesInformation[routingRuleId]))
   },
 
   async updateRule({ dispatch }, payload) {
     let routingRuleId = ''
     try {
       const resp = await OrderRoutingService.updateRule(payload)

src/store/modules/user/actions.ts

@@ -83,6 +83,8 @@ const actions: ActionTree<UserState, RootState> = {
       productStore = (state.current as any).stores.find((store: any) => store.productStoreId === payload.productStoreId);
     }
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, productStore);
+    this.dispatch("util/updateShippingMethods", {})
+    this.dispatch("util/updateFacillityGroups", {})
   }
 }
 

src/store/modules/util/actions.ts

@@ -67,13 +67,14 @@ const actions: ActionTree<UtilState, RootState> = {
   async fetchShippingMethods({ commit, state }) {
     let shippingMethods = JSON.parse(JSON.stringify(state.shippingMethods))
 
-    // Do not fetch shipping methods if aleady available
+    // Do not fetch shipping methods if already available
     if(Object.keys(shippingMethods).length) {
       return;
     }
 
+    // Fetching shipping methods for productStore of the currentGroup
     const payload = {
-      productStoreId: store.state.user.currentEComStore.productStoreId
+      productStoreId: store.state.orderRouting.currentGroup.productStoreId
     }
 
     try {
@@ -101,7 +102,7 @@ const actions: ActionTree<UtilState, RootState> = {
     }
 
     const payload = {
-      productStoreId: store.state.user.currentEComStore.productStoreId,
+      productStoreId: store.state.orderRouting.currentGroup.productStoreId,
       facilityGroupTypeId: "BROKERING_GROUP"
     }
 
@@ -166,6 +167,14 @@ const actions: ActionTree<UtilState, RootState> = {
 
   async clearUtilState({ commit }) {
     commit(types.UTIL_CLEARED)
+  },
+
+  async updateShippingMethods({ commit }) {
+    commit(types.UTIL_SHIPPING_METHOD_UPDATED, {})
+  },
+
+  async updateFacillityGroups({ commit }) {
+    commit(types.UTIL_FACILITY_GROUP_UPDATED, {})
   }
 }
 

src/theme/variables.css

@@ -266,6 +266,58 @@ http://ionicframework.com/docs/theming/ */
   cursor: pointer;
 }
 
+.desktop-only {
+  display: none;
+}
+
+.mobile-only {
+  display: unset;
+}
+
+.find {
+  display: grid;
+  grid-template-areas: "search"
+                       "main";
+}
+
+.find > .filters{
+  display: none;
+}
+
+.find > main {
+  grid-area: main;
+}
+
+.filters {
+  grid-area: filters;
+}
+
+.search {
+  grid-area: search;
+}
+
+@media (min-width: 991px) {
+  .find {
+    grid: "search  main" min-content
+          "filters main" 1fr
+          / 375px;
+    column-gap: var(--spacer-2xl);
+    margin: var(--spacer-lg);
+  }
+
+  .filters {
+    margin-top: var(--spacer-lg);
+  }
+
+  .filters {
+    margin-top: var(--spacer-lg);
+  }
+
+  .find > .filters{
+    display: unset;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   ion-chip > ion-icon {
     color: var(--ion-color-dark);

src/views/BrokeringRoute.vue

@@ -175,7 +175,6 @@ let orderRoutings = ref([]) as any
 let groupHistory = ref([]) as any
 
 const currentRoutingGroup: any = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
-const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
 const isOmsConnectionExist = computed(() => store.getters["util/isOmsConnectionExist"])
 const getStatusDesc = computed(() => (id: string) => store.getters["util/getStatusDesc"](id))
 const routingHistory = computed(() => store.getters["orderRouting/getRoutingHistory"])
@@ -447,7 +446,7 @@ function getArchivedOrderRoutings() {
 async function updateGroupDescription() {
   // Do not update description, if the desc is unchanged, and we do not have routingGroupId, and description is left empty
   if(props.routingGroupId && currentRoutingGroup.value.description !== description.value) {
-    const routingGroupId = await updateRoutingGroup({ routingGroupId: props.routingGroupId, productStoreId: currentEComStore.value.productStoreId, description: description.value })
+    const routingGroupId = await updateRoutingGroup({ routingGroupId: props.routingGroupId, productStoreId: currentRoutingGroup.value.productStoreId, description: description.value })
     if(routingGroupId) {
       await store.dispatch("orderRouting/setCurrentGroup", { ...currentRoutingGroup.value, description: description.value })
     }
@@ -576,7 +575,7 @@ async function saveRoutingGroup() {
 
   const payload = {
     routingGroupId: props.routingGroupId,
-    productStoreId: currentEComStore.value.productStoreId,
+    productStoreId: currentRoutingGroup.value.productStoreId,
     routings
   }
 

src/views/BrokeringRuns.vue

@@ -14,48 +14,66 @@
     </ion-header>
 
     <ion-content>
-      <main v-if="isLoading">
-        <ion-item lines="none">
-          <ion-spinner name="crescent" slot="start" />
-          {{ translate("Fetching groups") }}
-        </ion-item>
-      </main>
-      <main v-else-if="groups.length">
-        <section>
-          <ion-card class="pointer" v-for="group in groups" :key="group.routingGroupId" @click="redirect(group)">
-            <ion-card-header>
-              <ion-card-title>
-                {{ group.groupName }}
-              </ion-card-title>
-            </ion-card-header>
-            <ion-item>
-              {{ group.description }}
-            </ion-item>
-            <ion-item>
-              <ion-label>{{ group.frequency ? group.frequency : "-" }}</ion-label>
-              <ion-label slot="end">{{ group.runTime ? group.runTime : "-" }}</ion-label>
-            </ion-item>
-            <ion-item>
-              {{ getDateAndTime(group.createdDate) }}
-            </ion-item>
+      <div class="find">
+        <section class="search">
+          <ion-searchbar :placeholder="translate('Search groups')" v-model="queryString" @keyup.enter="filterGroups()" />
+        </section>
+
+        <aside class="filters">
+          <ion-list-header>{{ "Product Stores" }}</ion-list-header>
+          <ion-list>
             <ion-item lines="none">
-              {{ getDateAndTime(group.lastUpdatedStamp) }}
+              <ion-radio-group :value="currentEComStore.productStoreId" @ionChange="setEComStore($event)">
+                <ion-radio v-for="store in (userProfile ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId">{{ store.storeName }}</ion-radio>
+              </ion-radio-group>
             </ion-item>
-          </ion-card>
-        </section>
-      </main>
-      <main v-else>
-        {{ translate("No runs scheduled") }}
-      </main>
+          </ion-list>
+        </aside>
+
+        <main v-if="isLoading">
+          <ion-item lines="none">
+            <ion-spinner name="crescent" slot="start" />
+            {{ translate("Fetching groups") }}
+          </ion-item>
+        </main>
+        <main v-else-if="brokeringGroups.length">
+          <section>
+            <ion-card class="pointer" v-for="group in brokeringGroups" :key="group.routingGroupId" @click="redirect(group)">
+              <ion-card-header>
+                <ion-card-title>
+                  {{ group.groupName }}
+                </ion-card-title>
+              </ion-card-header>
+              <ion-item>
+                {{ group.description }}
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ group.frequency ? group.frequency : "-" }}</ion-label>
+                <ion-label slot="end">{{ group.runTime ? group.runTime : "-" }}</ion-label>
+              </ion-item>
+              <ion-item>
+                {{ getDateAndTime(group.createdDate) }}
+              </ion-item>
+              <ion-item lines="none">
+                {{ getDateAndTime(group.lastUpdatedStamp) }}
+              </ion-item>
+            </ion-card>
+          </section>
+        </main>
+        <main v-else>
+          {{ translate("No runs scheduled") }}
+        </main>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
+import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import { Group } from "@/types";
 import { getDateAndTime, showToast } from "@/utils";
-import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonRadioGroup, IonRadio, IonSearchbar, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
 import { addOutline } from "ionicons/icons"
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -64,15 +82,27 @@ import { useStore } from "vuex";
 const store = useStore()
 const router = useRouter()
 const groups = computed(() => store.getters["orderRouting/getRoutingGroups"])
+const userProfile = computed(() => store.getters["user/getUserProfile"])
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+
 let isLoading = ref(false)
+let queryString = ref("")
+let brokeringGroups = ref([]) as any
 
 onIonViewWillEnter(async () => {
   isLoading.value = true
   await store.dispatch("orderRouting/fetchOrderRoutingGroups");
   isLoading.value = false
+  brokeringGroups.value = JSON.parse(JSON.stringify(groups.value))
   store.dispatch("util/fetchEnums", { parentTypeId: "ORDER_ROUTING" })
 })
 
+function filterGroups() {
+  // Before filtering the groups, reassinging it with state, if we have searched for a specific character and then updates the search string then we need to again filter on all the groups and not on the previously searched results
+  brokeringGroups.value = JSON.parse(JSON.stringify(groups.value))
+  brokeringGroups.value = brokeringGroups.value.filter((group: any) => group.groupName.toLowerCase().includes(queryString.value.toLowerCase()))
+}
+
 async function addNewRun() {
   const newRunAlert = await alertController.create({
     header: translate("New Run"),
@@ -108,6 +138,17 @@ async function addNewRun() {
   return newRunAlert.present();
 }
 
+async function setEComStore(event: CustomEvent) {
+  emitter.emit("presentLoader")
+  if(userProfile.value?.stores) {
+    await store.dispatch("user/setEcomStore", {
+      "productStoreId": event.detail.value
+    })
+    await store.dispatch("orderRouting/fetchOrderRoutingGroups");
+  }
+  emitter.emit("dismissLoader")
+}
+
 async function redirect(group: Group) {
   router.push(`brokering/${group.routingGroupId}/routes`)
 }