From dff6f352a4ab3249868798c53b3769c13e2077b8 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 15:26:54 +0530
Subject: [PATCH 1/5] Implemented: support to display searchbar and product
 store filters on the groups page and added support to filter groups on the
 basis of product store(#99)

---
 src/locales/en.json                       |  1 +
 src/services/RoutingService.ts            |  2 +-
 src/store/modules/orderRouting/actions.ts |  5 +-
 src/theme/variables.css                   | 52 ++++++++++++
 src/views/BrokeringRuns.vue               | 96 +++++++++++++++--------
 5 files changed, 122 insertions(+), 34 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 5980a8c..4f38fd9 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/services/RoutingService.ts b/src/services/RoutingService.ts
index 6fb7be9..e8ac61e 100644
--- a/src/services/RoutingService.ts
+++ b/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
   });
 }
 
diff --git a/src/store/modules/orderRouting/actions.ts b/src/store/modules/orderRouting/actions.ts
index 2f134f0..50631e1 100644
--- a/src/store/modules/orderRouting/actions.ts
+++ b/src/store/modules/orderRouting/actions.ts
@@ -8,12 +8,15 @@ import logger from "@/logger"
 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);
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 7b79dcc..d5920af 100644
--- a/src/theme/variables.css
+++ b/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);
diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
index 6bcd2bb..15c285e 100644
--- a/src/views/BrokeringRuns.vue
+++ b/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')" />
+        </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="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>
+              <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,6 +82,9 @@ 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)
 
 onIonViewWillEnter(async () => {
@@ -108,6 +129,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`)
 }

From 0e1766dc779ee766d1b8581ae5c74f16628da4d7 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 16:37:45 +0530
Subject: [PATCH 2/5] Implemented: support to fetch the shippingMethods and
 facilityGroups on the basis of group productStore(#99)

---
 src/store/RootState.ts            |  2 ++
 src/store/modules/user/actions.ts |  2 ++
 src/store/modules/util/actions.ts | 15 ++++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/store/RootState.ts b/src/store/RootState.ts
index cf8d84e..81f89b0 100644
--- a/src/store/RootState.ts
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 2c63016..824f53e 100644
--- a/src/store/modules/user/actions.ts
+++ b/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/udpateFacillityGroups", {})
   }
 }
 
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index ecc6762..dede16f 100644
--- a/src/store/modules/util/actions.ts
+++ b/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 udpateFacillityGroups({ commit }) {
+    commit(types.UTIL_FACILITY_GROUP_UPDATED, {})
   }
 }
 

From 7d55ca9974d0e2623b503f4ffd7694f4006b7adc Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 17:27:47 +0530
Subject: [PATCH 3/5] Implemented: support to enable search on groupName(#99)

---
 src/views/BrokeringRuns.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
index 15c285e..db8a0fe 100644
--- a/src/views/BrokeringRuns.vue
+++ b/src/views/BrokeringRuns.vue
@@ -16,7 +16,7 @@
     <ion-content>
       <div class="find">
         <section class="search">
-          <ion-searchbar :placeholder="translate('Search groups')" />
+          <ion-searchbar :placeholder="translate('Search groups')" v-model="queryString" @keyup.enter="filterGroups()" />
         </section>
 
         <aside class="filters">
@@ -36,9 +36,9 @@
             {{ translate("Fetching groups") }}
           </ion-item>
         </main>
-        <main v-else-if="groups.length">
+        <main v-else-if="brokeringGroups.length">
           <section>
-            <ion-card class="pointer" v-for="group in groups" :key="group.routingGroupId" @click="redirect(group)">
+            <ion-card class="pointer" v-for="group in brokeringGroups" :key="group.routingGroupId" @click="redirect(group)">
               <ion-card-header>
                 <ion-card-title>
                   {{ group.groupName }}
@@ -86,14 +86,23 @@ 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"),

From 1a7d473930904e8a3831bfd787158a34ad4eab63 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 17:30:57 +0530
Subject: [PATCH 4/5] Fixed: typo in action name(#99)

---
 src/store/modules/user/actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 824f53e..2781dc4 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -84,7 +84,7 @@ const actions: ActionTree<UserState, RootState> = {
     }
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, productStore);
     this.dispatch("util/updateShippingMethods", {})
-    this.dispatch("util/udpateFacillityGroups", {})
+    this.dispatch("util/updateFacillityGroups", {})
   }
 }
 

From cf2f6d7f8be28fbc3226e0272b617393183b0907 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 15 Feb 2024 18:19:41 +0530
Subject: [PATCH 5/5] Implemented: support to display the storeName from group
 level instead of the one selected in current context(#99)

---
 src/components/RoutingHistoryModal.vue | 7 +++++--
 src/store/modules/util/actions.ts      | 2 +-
 src/views/BrokeringRoute.vue           | 5 ++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/RoutingHistoryModal.vue b/src/components/RoutingHistoryModal.vue
index a054b5e..98c5e80 100644
--- a/src/components/RoutingHistoryModal.vue
+++ b/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();
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index dede16f..f58b2d9 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -173,7 +173,7 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_SHIPPING_METHOD_UPDATED, {})
   },
 
-  async udpateFacillityGroups({ commit }) {
+  async updateFacillityGroups({ commit }) {
     commit(types.UTIL_FACILITY_GROUP_UPDATED, {})
   }
 }
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index ed2e882..4492436 100644
--- a/src/views/BrokeringRoute.vue
+++ b/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
   }