From 1833cf4773184c11044e763e20f817dc8ac3de12 Mon Sep 17 00:00:00 2001
From: Ravi Lodhi <ravi.lodhi@hotwaxsystems.com>
Date: Wed, 7 Aug 2024 15:08:25 +0530
Subject: [PATCH 1/4] Improved: Added a separate page for managing facility
 group's facilities (#293).

---
 src/locales/en.json            |  12 +
 src/router/index.ts            |   8 +
 src/views/FindGroups.vue       |  18 +-
 src/views/ManageFacilities.vue | 403 +++++++++++++++++++++++++++++++++
 4 files changed, 437 insertions(+), 4 deletions(-)
 create mode 100644 src/views/ManageFacilities.vue

diff --git a/src/locales/en.json b/src/locales/en.json
index 40efd962..837ffb50 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -90,12 +90,14 @@
   "Facilities": "Facilities",
   "Facilities:": "Facilities: {count}",
   "Facilities associated to group successfully.": "Facilities associated to group successfully.",
+  "Facilities order has been changed. Click save button to update them.": "Facilities order has been changed. Click save button to update them.",
   "Facility": "Facility",
   "Facility address created successfully.": "Facility address created successfully.",
   "Facility address updated successfully.": "Facility address updated successfully.",
   "Facility created successfully.": "Facility created successfully.",
   "Facility configurations created successfully.": "Facility configurations created successfully.",
   "Facility contact updated successfully.": "Facility contact updated successfully.",
+  "Facility deselected. Click the save button to remove it from the group.": "Facility deselected. Click the save button to remove it from the group.",
   "Facility details": "Facility details",
   "Facility External ID": "Facility External ID",
   "Facility external ID updated.": "Facility external ID updated.",
@@ -114,6 +116,7 @@
   "Facility name is required.": "Facility name is required.",
   "Facility Management": "Facility Management",
   "Facility renamed successfully.": "Facility renamed successfully.",
+  "Facility selected. Click the save button to add it to the group.": "Facility selected. Click the save button to add it to the group.",
   "Facility SubType": "Facility SubType",
   "Facility Type": "Facility Type",
   "Facility zipcode": "Facility zipcode",
@@ -165,6 +168,7 @@
   "Failed to update sell inventory online setting": "Failed to update sell inventory online setting",
   "Failed to update shopify mapping": "Failed to update shopify mapping",
   "Failed to update some fulfillment settings.": "Failed to update some fulfillment settings.",
+  "Failed to update some member facilities.": "Failed to update some member facilities.",
   "Failed to update some product stores": "Failed to update some product stores",
   "Failed to update some role(s).": "Failed to update some role(s).",
   "Failed to send password reset email.": "Failed to send password reset email.",
@@ -188,6 +192,7 @@
   "group description": "group description",
   "Group description updated.": "Group description updated.",
   "Identification": "Identification",
+  "Include all": "Include all",
   "Internal ID": "Internal ID",
   "Internal ID cannot be more than 20 characters.": "Internal ID cannot be more than 20 characters.",
   "Internal locations": "Internal locations",
@@ -212,9 +217,12 @@
   "Login failed": "Login failed",
   "Logout": "Logout",
   "Longitude": "Longitude",
+  "Manage Facilities": "Manage Facilities",
+  "Manage sequence": "Manage sequence",
   "Mapping ID": "Mapping ID",
   "Mapping Name": "Mapping Name",
   "Map facility to an external system": "Map facility to an external system",
+  "Member facilities updated successfully.": "Member facilities updated successfully.",
   "Monday": "Monday",
   "Name": "Name",
   "Netsuite": "Netsuite",
@@ -223,9 +231,11 @@
   "New parking created successfully.": "New parking created successfully.",
   "Next brokering": "Next brokering",
   "No archived parkings to show.": "No archived parkings to show.",
+  "No associated facilties found.": "No associated facilties found.",
   "No Capacity": "No Capacity",
   "No capacity": "No capacity",
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.",
+  "No facilities available to select": "No facilities available to select",
   "No facilities found": "No facilities found",
   "No facility found": "No facility found",
   "No fulfillment capacity": "No fulfillment capacity",
@@ -296,6 +306,7 @@
   "Rename parking": "Rename parking", 
   "Reset": "Reset",
   "Reset password email": "Reset password email",
+  "Results": "Results",
   "Retail Store login": "Retail Store login",
   "Retail Store logins": "Retail Store logins",
   "Role": "Role",
@@ -361,6 +372,7 @@
   "Thursday": "Thursday",
   "Time zone updated successfully": "Time zone updated successfully",
   "Timezone": "Timezone",
+  "Total facilities selected for group": "Total {total} facilities selected for group {facilityGroupName}",
   "Tuesday": "Tuesday",
   "Type": "Type",
   "Unable to find the latitude and longitude for the entered zip code.": "Unable to find the latitude and longitude for the entered zip code.",
diff --git a/src/router/index.ts b/src/router/index.ts
index 42c29428..89508be1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,7 @@ import CreateFacility from '@/views/CreateFacility.vue';
 import AddFacilityAddress from '@/views/AddFacilityAddress.vue';
 import AddFacilityConfig from '@/views/AddFacilityConfig.vue';
 import Tabs from '@/components/Tabs.vue'
+import ManageFacilities from '@/views/ManageFacilities.vue';
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -99,6 +100,13 @@ const routes: Array<RouteRecordRaw> = [
     component: AddFacilityConfig,
     props: true,
     beforeEnter: authGuard
+  },
+  {
+    path: '/manage-facilities/:facilityGroupId',
+    name: 'Manage Facilities',
+    component: ManageFacilities,
+    props: true,
+    beforeEnter: authGuard,
   }
 ]
 
diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index 774dc1e0..8a2f6195 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -47,9 +47,15 @@
             <ion-item :lines="group.description ? 'inset' : 'none'">
               <ion-icon :icon="businessOutline" slot="start"/>
               <ion-label>{{ translate('Facilities') }}</ion-label>
-              <ion-chip outline slot="end" @click="openGroupActionsPopover($event, group)">
+              
+              <ion-label slot="end">{{ group.facilityCount }}</ion-label>
+              <ion-button @click="manageFacilities(group)" fill="clear" color="medium" slot="end">
+                <ion-icon :icon="pencilOutline" slot="icon-only"/>
+              </ion-button>
+
+              <!--<ion-chip outline slot="end" @click="openGroupActionsPopover($event, group)">
                 {{ group.facilityCount }}
-              </ion-chip>
+              </ion-chip>-->
             </ion-item>
             <ion-item v-if="group.description" lines="none">
               <ion-label>{{ group.description }}</ion-label>
@@ -108,7 +114,7 @@ import {
   popoverController,
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { ellipsisVerticalOutline, addOutline, bagHandleOutline, businessOutline } from 'ionicons/icons';
+import { ellipsisVerticalOutline, addOutline, bagHandleOutline, businessOutline, pencilOutline } from 'ionicons/icons';
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex';
 import { translate } from '@hotwax/dxp-components'
@@ -161,10 +167,10 @@ export default defineComponent({
     })
   },
   async mounted() {
-    await this.fetchGroups();
     await this.store.dispatch('util/fetchFacilityGroupTypes')
   },
   async ionViewWillEnter() {
+    await this.fetchGroups();
     this.isScrollingEnabled = false;
   },
   methods: {
@@ -251,6 +257,9 @@ export default defineComponent({
         }
       }
     },
+    manageFacilities(facilityGroup: any) {
+      this.$router.push({ path: `/manage-facilities/${facilityGroup.facilityGroupId}`})
+    },
     async openGroupActionsPopover(event: Event, group: any) {
       const groupActionsPopover = await popoverController.create({
         component: GroupActionsPopover,
@@ -319,6 +328,7 @@ export default defineComponent({
       businessOutline,
       customSort,
       ellipsisVerticalOutline,
+      pencilOutline,
       router,
       store,
       translate
diff --git a/src/views/ManageFacilities.vue b/src/views/ManageFacilities.vue
new file mode 100644
index 00000000..6f0a4c9c
--- /dev/null
+++ b/src/views/ManageFacilities.vue
@@ -0,0 +1,403 @@
+<template>
+    <ion-page>
+      <ion-header :translucent="true">
+        <ion-toolbar>
+          <ion-back-button default-href="/tabs/find-groups" slot="start" />
+          <ion-title>{{ translate("Manage Facilities") }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+  
+      <ion-content>
+        <div class="find">
+          <section class="search">
+            <ion-searchbar :placeholder="translate('Search facilities')" v-model="queryString" @ionInput="getFilteredFacilities()"/>
+            <ion-list>
+              <ion-list-header>
+                <ion-label>{{ translate('Results') }} : {{ filteredFacilities?.length }}</ion-label>
+                <ion-button fill="clear" @click="selectAll" :disabled="!filteredFacilities.length">
+                  {{ translate('Include all') }}
+                  <ion-icon :icon="arrowForwardOutline"/>
+                </ion-button>
+              </ion-list-header>
+              <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
+                <ion-label >
+                  <p>{{ facility.facilityId }}</p>
+                  {{ facility.facilityName }}
+                </ion-label>
+                <ion-button slot="end" fill="clear" color="success" @click="selectFacility(facility)">
+                  <ion-icon :icon="addCircleOutline" slot="icon-only"/>
+                </ion-button>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label v-if="!filteredFacilities.length">{{ translate('No facilities available to select') }}</ion-label>
+              </ion-item>
+            </ion-list>
+          </section>
+  
+          <main>
+            <h3 class="ion-margin-start">{{ translate('Total facilities selected for group', {total: selectedFacilities.length, facilityGroupName: currentFacilityGroup.facilityGroupName ? currentFacilityGroup.facilityGroupName : facilityGroupId}) }}</h3>
+            <ion-list v-if="selectedFacilities.length">
+              <ion-list-header>
+                <ion-label>{{ translate('Manage sequence') }}</ion-label>
+              </ion-list-header>
+              <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
+                <ion-item v-for="facility in selectedFacilities" :key="facility.facilityId">
+                  <ion-button slot="start" fill="clear" color="danger" @click="removeFacility(facility)">
+                    <ion-icon :icon="removeCircleOutline" slot="icon-only"/>
+                  </ion-button>
+                  <ion-label>
+                    <p>{{ facility.facilityId }}</p>
+                    {{ facility.facilityName }}
+                  </ion-label>
+                  <ion-reorder slot="end"/>
+                </ion-item>
+              </ion-reorder-group>
+            </ion-list> 
+          </main>
+        </div>
+        
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button :disabled="!isFacilityMembersModified" @click="save()">
+            <ion-icon :icon="saveOutline" />
+          </ion-fab-button>
+        </ion-fab>
+      </ion-content>
+    </ion-page>
+  </template>
+  
+  <script lang="ts">
+  import {
+    IonBackButton,
+    IonButton,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonPage,
+    IonReorder,
+    IonReorderGroup,
+    IonSearchbar,
+    IonTitle,
+    IonToolbar,
+    alertController
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { addCircleOutline, arrowForwardOutline, removeCircleOutline, saveOutline } from 'ionicons/icons';
+  import { useRouter } from 'vue-router';
+  import { useStore } from 'vuex';
+  import { translate } from '@hotwax/dxp-components'
+  import { showToast } from '@/utils';
+  import { FacilityService } from '@/services/FacilityService';
+  import { hasError } from '@/adapter';
+  import logger from '@/logger';
+  import { DateTime } from "luxon";
+  
+  export default defineComponent({
+    name: 'FindGroups',
+    components: {
+      IonBackButton,
+      IonButton,
+      IonContent,
+      IonFab,
+      IonFabButton,
+      IonHeader,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonList,
+      IonListHeader,
+      IonPage,
+      IonReorder,
+      IonReorderGroup,
+      IonSearchbar,
+      IonTitle,
+      IonToolbar
+    },
+    data() {
+      return {
+        queryString: '',
+        facilities: [],
+        filteredFacilities: [] as any,
+        memberFacilities: [] as any,
+        selectedFacilities: [] as any,
+        toast: null as any,
+        currentFacilityGroup: {} as any,
+        isFacilityMembersModified: false
+      }
+    },
+    props: ['facilityGroupId'],
+    async mounted() {
+      await Promise.all([this.fetchFacilities(), this.fetchFacilityGroup()])
+      await this.fetchMemberFacilities();
+      await this.getFilteredFacilities();
+    },
+    methods: {
+      async beforeRouteLeave() {
+        if(!this.toast) return
+
+        let canLeave = false;
+        const alert = await alertController.create({
+          header: translate("Leave page"),
+          message: translate("Any edits made on this page will be lost."),
+          buttons: [
+            {
+              text: translate("STAY"),
+              handler: () => {
+                canLeave = false;
+              },
+            },
+            {
+              text: translate("LEAVE"),
+              handler: () => {
+                canLeave = true;
+                this.toast.dismiss()
+              },
+            },
+          ],
+        });
+
+        alert.present()
+        await alert.onDidDismiss()
+        return canLeave
+      },
+      getFilteredFacilities() {
+        let nonMemberFacilities = this.facilities ? this.facilities : [] as any;
+        const selectedFacilityIds = this.selectedFacilities ? new Set(this.selectedFacilities.map((facility:any) => facility.facilityId)) as any : [];
+        nonMemberFacilities = this.facilities.filter((facility:any) => !selectedFacilityIds.has(facility.facilityId));
+        if (this.queryString) {
+          nonMemberFacilities = nonMemberFacilities.filter((facility: any) => (facility.facilityId.toLowerCase().includes(this.queryString.toLowerCase())) || (facility.facilityName && facility.facilityName.toLowerCase().includes(this.queryString.toLowerCase())))
+        }
+        this.filteredFacilities = nonMemberFacilities;
+        return nonMemberFacilities;
+      },
+      async fetchFacilityGroup() {
+        const params = {
+          "inputFields": {
+            "facilityGroupId": this.facilityGroupId
+          },
+          entityName: "FacilityGroup",
+          noConditionFind: 'Y',
+          fieldList: ["facilityGroupId", "facilityGroupTypeId", "facilityGroupName", "description"],
+          viewSize: 1
+        }
+
+        try {
+          const resp = await FacilityService.fetchFacilityGroups(params);
+
+          if (!hasError(resp) && resp.data?.docs?.length > 0) {
+            this.currentFacilityGroup = resp.data.docs[0];
+          } else {
+            throw resp.data
+          }
+        } catch(err) {
+          logger.error('Failed to fetch facility group', err)
+        }
+      },
+      async fetchFacilities() {
+        this.facilities = []
+        let viewIndex = 0, resp
+
+        try {
+          do {
+            resp = await FacilityService.fetchFacilities({
+              "entityName": "Facility",
+              "fieldList": ["facilityId", "facilityName"],
+              "viewIndex": viewIndex,
+              "viewSize": 250,
+              "distinct": "Y",
+              "noConditionFind": "Y"
+            }) as any;
+
+            if (!hasError(resp) && resp.data.count) {
+              this.facilities = this.facilities.concat(resp.data.docs)
+              viewIndex++;
+            } else {
+              throw resp.data;
+            }
+          }
+          while (resp.data.docs.length >= 250);
+        } catch (error) {
+          logger.error(error);
+        }
+      },
+      async fetchMemberFacilities() {
+        this.memberFacilities = []
+        let viewIndex = 0, resp
+
+        try {
+          let facilityDetail = this.facilities?.reduce((facilityInfo: any, facility: any) => {
+            facilityInfo[facility.facilityId] = facility;
+            return facilityInfo;
+          }, {});
+
+          do {
+            resp = await FacilityService.fetchAssociatedFacilitiesToGroup({
+              "inputFields": {
+                "facilityGroupId": this.facilityGroupId
+              },
+              "viewIndex": viewIndex,
+              "viewSize": 250,
+              "entityName": 'FacilityGroupAndMember',
+              "noConditionFind": "Y",
+              "filterByDate": 'Y',
+              "fieldList": ["facilityGroupId", 'facilityId', 'fromDate', 'sequenceNum'],
+              "orderBy" : "sequenceNum",
+
+            }) as any;
+
+            if (!hasError(resp) && resp.data.count) {
+              const currentMemberFacilities = resp.data.docs.map((memberFacility:any) => {
+                let facility = facilityDetail[memberFacility.facilityId];
+                if (facility) {
+                  memberFacility.facilityName = facility.facilityName;
+                }
+                return memberFacility;
+              });
+              this.memberFacilities = this.memberFacilities.concat(currentMemberFacilities)
+              viewIndex++;
+            } else {
+              throw resp.data;
+            }
+          }
+          while (resp.data.docs.length >= 250);
+          this.selectedFacilities = JSON.parse(JSON.stringify(this.memberFacilities))
+        } catch (error) {
+          logger.error(error);
+        }
+      },
+      selectFacility(facility: any) {
+        let sequenceNum = 1;
+        if (this.selectedFacilities && this.selectedFacilities.length > 0) {
+          sequenceNum = this.selectedFacilities?.[this.selectedFacilities?.length - 1].sequenceNum
+        }
+        sequenceNum = sequenceNum ? sequenceNum + 1 : 1;
+        this.selectedFacilities = [...this.selectedFacilities, {...facility, sequenceNum}]
+        this.getFilteredFacilities();
+        this.isFacilityMembersModified = true;
+        showToast(translate("Facility selected. Click the save button to add it to the group."))
+      },
+      selectAll() {
+        let sequenceNum = 1;
+        if (this.selectedFacilities && this.selectedFacilities.length > 0) {
+          sequenceNum = this.selectedFacilities?.[this.selectedFacilities?.length - 1].sequenceNum
+        }
+        sequenceNum = sequenceNum ? sequenceNum + 1 : 1;
+
+        const facilitiesWithSequences = this.filteredFacilities.map((facility: any, index: any) => {
+          facility.sequenceNum = sequenceNum + index;
+          return facility;
+        });
+        
+        this.selectedFacilities = [...this.selectedFacilities, ...facilitiesWithSequences]
+        this.getFilteredFacilities();
+        this.isFacilityMembersModified = true;
+        showToast(translate("Facility selected. Click the save button to add it to the group."))
+      },
+      async removeFacility(facility: any) {
+        this.selectedFacilities = this.selectedFacilities.filter((selectedFacility: any) => selectedFacility.facilityId !== facility.facilityId);
+        this.getFilteredFacilities();
+        this.isFacilityMembersModified = true;
+        showToast(translate("Facility deselected. Click the save button to remove it from the group."))
+      },
+      async save () {
+        const facilitiesToAdd = this.selectedFacilities.filter((facility: any) => !facility.fromDate)
+        const selectedFacilityIds = this.selectedFacilities ? new Set(this.selectedFacilities.map((facility:any) => facility.facilityId)) as any : [];
+        const facilitiesToRemove = this.memberFacilities.filter((facility: any) => !selectedFacilityIds.has(facility.facilityId))
+        
+        const removeResponses = await Promise.allSettled(facilitiesToRemove
+          .map(async (facility: any) => await FacilityService.updateFacilityToGroup({
+            "facilityId": facility.facilityId,
+            "facilityGroupId": facility.facilityGroupId,
+            "fromDate": facility.fromDate,
+            "thruDate": DateTime.now().toMillis()
+          }))
+        )
+
+        const addResponses = await Promise.allSettled(facilitiesToAdd
+          .map(async (facility: any) => await FacilityService.addFacilityToGroup({
+            "facilityId": facility.facilityId,
+            "facilityGroupId": this.facilityGroupId,
+            "sequenceNum": facility.sequenceNum
+          }))
+        )
+
+        const facilityIdsToAdd = facilitiesToAdd ? new Set(facilitiesToAdd.map((facility:any) => facility.facilityId)) as any : [];
+        const existingFacilityMembers = this.selectedFacilities.filter((facility:any) => !facilityIdsToAdd.has(facility.facilityId))
+        const diffMemberFacilitySequencing = existingFacilityMembers.filter((facility: any) => this.memberFacilities.some((memberFacility: any) => memberFacility.facilityId === facility.facilityId && memberFacility.sequenceNum !== facility.sequenceNum))
+        const sequenceUpdateResponses = await Promise.allSettled(diffMemberFacilitySequencing.map(async (memberFacility: any) => {
+          await FacilityService.updateFacilityToGroup({
+            "facilityId": memberFacility.facilityId,
+            "facilityGroupId": memberFacility.facilityGroupId,
+            "fromDate": memberFacility.fromDate,
+            "sequenceNum": memberFacility.sequenceNum
+          });
+        }))
+
+        const hasFailedResponse = [...removeResponses, ...addResponses, ...sequenceUpdateResponses].some((response: any) => response.status === 'rejected')
+        if (hasFailedResponse) {
+          showToast(translate("Failed to update some member facilities."))
+        } else {
+          showToast(translate("Member facilities updated successfully."))
+        }
+        this.fetchMemberFacilities();
+        this.isFacilityMembersModified = false;
+        this.$router.push({ path: `/tabs/find-groups` })
+      },
+      async doReorder(event: CustomEvent) {
+        const previousSeq = JSON.parse(JSON.stringify(this.selectedFacilities))
+
+        // returns the updated sequence after reordering
+        const updatedSeq = event.detail.complete(JSON.parse(JSON.stringify(this.selectedFacilities)));
+
+        let diffSeq = this.findMemberFacilitySequenceDiff(previousSeq, updatedSeq)
+
+        const updatedSeqenceNum = previousSeq.map((memberFacility: any) => memberFacility.sequenceNum)
+        Object.keys(diffSeq).map((key: any) => {
+          diffSeq[key].sequenceNum = updatedSeqenceNum[key]
+        })
+
+        diffSeq = Object.keys(diffSeq).map((key) => diffSeq[key])
+        this.selectedFacilities = updatedSeq
+
+        if (diffSeq.length && !this.toast) {
+          this.isFacilityMembersModified = true;
+          showToast(translate("Facilities order has been changed. Click save button to update them."))
+        }
+      },
+      findMemberFacilitySequenceDiff(previousSeq: any, updatedSeq: any) {
+        const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
+          if (updatedSeq[key].facilityId === previousSeq[key].facilityId && updatedSeq[key].sequenceNum === previousSeq[key].sequenceNum) return diff
+          return {
+            ...diff,
+            [key]: updatedSeq[key]
+          }
+        }, {})
+        return diffSeq;
+      },
+    },
+    setup() {
+      const router = useRouter();
+      const store = useStore();
+  
+      return {
+        addCircleOutline,
+        arrowForwardOutline,
+        removeCircleOutline,
+        saveOutline,
+        router,
+        store,
+        translate
+      };
+    }
+  });
+  </script>
+  <style scoped>
+  ion-content {
+    --padding-bottom: 80px;
+  }
+  </style>
\ No newline at end of file

From 6b2454d52fd4f16c40db313935cb301fdc75b978 Mon Sep 17 00:00:00 2001
From: Ravi Lodhi <ravi.lodhi@hotwaxsystems.com>
Date: Wed, 7 Aug 2024 15:24:42 +0530
Subject: [PATCH 2/4] Improved: Removed the 'add facility to group' modal and
 the 'group actions' popover. These became unused after the new page to manage
 group facilities is introduced.

---
 src/components/AddFacilityToGroupModal.vue | 243 ---------------------
 src/components/GroupActionsPopover.vue     |  78 -------
 src/views/FindGroups.vue                   |  11 -
 3 files changed, 332 deletions(-)
 delete mode 100644 src/components/AddFacilityToGroupModal.vue
 delete mode 100644 src/components/GroupActionsPopover.vue

diff --git a/src/components/AddFacilityToGroupModal.vue b/src/components/AddFacilityToGroupModal.vue
deleted file mode 100644
index 9cd42109..00000000
--- a/src/components/AddFacilityToGroupModal.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<template>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-button @click="closeModal">
-          <ion-icon slot="icon-only" :icon="close" />
-        </ion-button>
-      </ion-buttons>
-      <ion-title>{{ translate("Select facilities") }}</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <ion-content class="ion-padding">
-    <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; fetchFacilities()" />
-    <ion-chip outline>
-      {{ translate("Facilities:", { count: selectedFacilityValues.length }) }}
-    </ion-chip>
-
-    <ion-list>
-      <div class="ion-padding" v-if="!facilities.length">
-        {{ translate("No facility found") }}
-      </div>
-      <div v-else>
-        <ion-item v-for="(facility, index) in facilities" :key="index" @click="updateSelectedFacilities(facility.facilityId)" lines="none">
-          <ion-checkbox :checked="isFacilitySelected(facility.facilityId)">
-            <ion-label>
-              {{ facility.facilityName }}
-              <p>{{ facility.facilityId }}</p>
-            </ion-label>
-          </ion-checkbox>
-        </ion-item>
-      </div>
-    </ion-list>
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button :disabled="!areFacilitiesUpdated()" @click="confirmSave()">
-        <ion-icon :icon="saveOutline" />
-      </ion-fab-button>
-    </ion-fab>
-  </ion-content>
-</template>
-
-<script lang="ts">
-import {
-  IonButton,
-  IonButtons,
-  IonCheckbox,
-  IonChip,
-  IonContent,
-  IonFab,
-  IonFabButton,
-  IonHeader,
-  IonIcon,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonSearchbar,
-  IonTitle,
-  IonToolbar,
-  modalController
-} from "@ionic/vue";
-import { defineComponent } from "vue";
-import { close, closeCircle, saveOutline } from "ionicons/icons";
-import { useStore } from "vuex";
-import { hasError } from "@/adapter";
-import logger from "@/logger"
-import { translate } from '@hotwax/dxp-components'
-import { FacilityService } from "@/services/FacilityService";
-import { DateTime } from "luxon";
-import { showToast } from "@/utils";
-
-export default defineComponent({
-  name: "AddFacilityToGroupModal",
-  components: {
-    IonButtons,
-    IonButton,
-    IonCheckbox,
-    IonChip,
-    IonContent,
-    IonFab,
-    IonFabButton,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonSearchbar,
-    IonTitle,
-    IonToolbar,
-  },
-  data() {
-    return {
-      queryString: '',
-      facilities: [] as any,
-      selectedFacilities: [] as any,
-      selectedFacilityValues: [] as any
-    }
-  },
-  props: ['facilityGroupId'],
-  mounted() {
-    Promise.all([this.fetchFacilities(), this.fetchAssociatedFacilities()])
-  },
-  methods: {
-    closeModal() {
-      modalController.dismiss()
-    },
-    async fetchFacilities() {
-      this.facilities = []
-      let filters = {} as any;
-
-      if(this.queryString) {
-        filters["facilityId_value"] = this.queryString
-        filters["facilityId_op"] = "contains"
-        filters["facilityId_ic"] = "Y"
-        filters["facilityId_grp"] = "1"
-        filters["facilityName_value"] = this.queryString
-        filters["facilityName_op"] = "contains"
-        filters["facilityName_ic"] = "Y"
-        filters["facilityName_grp"] = "1"
-        filters["grp_op_1"] = "OR"
-      }
-
-      const params = {
-        "inputFields": {
-          ...filters
-        },
-        "entityName": "Facility",
-        "noConditionFind": "Y",
-        "distinct": "Y",
-        "fieldList": ["facilityId", "facilityName"],
-        // By default we show only 20 facilities, others get rendered on search query.
-        "viewSize": 20
-      }
-
-      try {
-        const resp = await FacilityService.fetchFacilities(params)
-
-        if (!hasError(resp) && resp.data.count) {
-          this.facilities = resp.data.docs
-        } else {
-          throw resp.data
-        }
-      } catch (error) {
-        logger.error(error)
-      }
-    },
-    async fetchAssociatedFacilities() {
-      try {
-        const resp = await FacilityService.fetchAssociatedFacilitiesToGroup({
-          "inputFields": {
-            "facilityGroupId": this.facilityGroupId
-          },
-          "viewSize": 250, // maximum view size
-          "entityName": 'FacilityGroupAndMember',
-          "noConditionFind": "Y",
-          "filterByDate": 'Y',
-          "fieldList": ['facilityId', 'fromDate']
-        })
-
-        if(!hasError(resp)) {
-          this.selectedFacilities = resp.data.docs
-          this.selectedFacilityValues = JSON.parse(JSON.stringify(resp.data.docs))
-        } else {
-          throw resp.data
-        }
-      } catch(err) {
-        logger.error(err)
-      }
-    },
-    updateSelectedFacilities(id: string) {
-      const facility = this.isFacilitySelected(id)
-
-      if (facility) {
-        // if facility is already selected then removing that facility from the list on click
-        this.selectedFacilityValues = this.selectedFacilityValues.filter((facility: any) => facility.facilityId !== id)
-      } else {
-        this.selectedFacilityValues.push(this.facilities.find((facility: any) => facility.facilityId == id))
-      }
-    },
-    isFacilitySelected(facilityId: any) {
-      return this.selectedFacilityValues.some((facility: any) => facility.facilityId === facilityId)
-    },
-    async confirmSave() {
-      const facilitiesToAdd = this.selectedFacilityValues.filter((selectedFacility: any) => !this.selectedFacilities.some((facility: any) => facility.facilityId === selectedFacility.facilityId))
-      const facilitiesToRemove = this.selectedFacilities.filter((facility: any) => !this.selectedFacilityValues.some((selectedFacility: any) => facility.facilityId === selectedFacility.facilityId))
-
-      const removeResponses = await Promise.allSettled(facilitiesToRemove
-        .map(async (facility: any) => await FacilityService.updateFacilityToGroup({
-          "facilityId": facility.facilityId,
-          "facilityGroupId": this.facilityGroupId,
-          "fromDate": facility.fromDate,
-          "thruDate": DateTime.now().toMillis()
-        }))
-      )
-
-      const addResponses = await Promise.allSettled(facilitiesToAdd
-        .map(async (facility: any) => await FacilityService.addFacilityToGroup({
-          "facilityId": facility.facilityId,
-          "facilityGroupId": this.facilityGroupId
-        }))
-      )
-
-      const hasFailedResponse = [...removeResponses, ...addResponses].some((response: any) => response.status === 'rejected')
-      if (hasFailedResponse) {
-        showToast(translate("Failed to associate some facilites to group."))
-      } else {
-        showToast(translate("Facilities associated to group successfully."))
-      }
-      this.fetchGroups()
-      modalController.dismiss()
-    },
-    async fetchGroups(vSize?: any, vIndex?: any) {
-      const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
-      const viewIndex = vIndex ? vIndex : 0;
-      const payload = {
-        viewSize,
-        viewIndex
-      };
-      await this.store.dispatch('facility/fetchFacilityGroups', payload)
-    },
-    areFacilitiesUpdated() {
-      if(this.selectedFacilities.length !== this.selectedFacilityValues.length) return true;
-
-      return this.selectedFacilityValues.some((selectedFacility: any) => !this.selectedFacilities.find((facility: any) => facility.facilityId === selectedFacility.facilityId))
-    }
-  },
-  setup() {
-    const store = useStore();
-    return {
-      close,
-      saveOutline,
-      closeCircle,
-      store,
-      translate
-    };
-  }
-});
-</script>
-
-<style scoped>
-ion-content {
-  --padding-bottom: 80px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/GroupActionsPopover.vue b/src/components/GroupActionsPopover.vue
deleted file mode 100644
index c3fa54e3..00000000
--- a/src/components/GroupActionsPopover.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <ion-content>
-    <ion-list>
-      <ion-list-header>
-        {{ group.facilityGroupName }}
-      </ion-list-header>
-      <ion-item button @click="viewFacilities(group.facilityGroupId)">
-        {{ translate("View facilities") }}
-        <ion-icon :icon="openOutline" color="primary" slot="end" />
-      </ion-item>
-      <ion-item button lines="none" @click="openAddFacilityToGroupsModal(group.facilityGroupId)">
-        {{ translate("Quick edit") }}
-      </ion-item>
-    </ion-list>
-  </ion-content>
-</template>
-  
-<script lang="ts">
-import {
-  IonContent,
-  IonIcon,
-  IonItem,
-  IonList,
-  IonListHeader,
-  modalController,
-  popoverController
-} from "@ionic/vue";
-import { defineComponent } from "vue";
-import { translate } from '@hotwax/dxp-components'
-import { mapGetters, useStore } from "vuex";
-import { openOutline } from 'ionicons/icons'
-import AddFacilityToGroupsModal from '@/components/AddFacilityToGroupModal.vue'
-
-export default defineComponent({
-  name: "GroupActionsPopover",
-  components: {
-    IonContent,
-    IonIcon,
-    IonItem,
-    IonList,
-    IonListHeader
-  },
-  computed: {
-    ...mapGetters({
-      groups: 'facility/getFacilityGroups',
-      facilityQuery: "facility/getFacilityQuery",
-    })
-  },
-  props: ['group'],
-  methods: {
-    async viewFacilities(facilityGroupId: string) {
-      await this.store.dispatch('facility/updateFacilityQuery', { ...this.facilityQuery, facilityGroupId })
-      this.$router.push({ path: `/tabs/find-facilities` })
-      popoverController.dismiss()
-    },
-    async openAddFacilityToGroupsModal(facilityGroupId: any) {
-      const modal = await modalController.create({
-        component: AddFacilityToGroupsModal,
-        componentProps: { facilityGroupId }
-      })
-
-      modal.onDidDismiss().then(() =>{
-        popoverController.dismiss()
-      })
-      modal.present()
-    },
-  },
-  setup() {
-    const store = useStore();
-
-    return {
-      openOutline,
-      store,
-      translate
-    }
-  },
-});
-</script>
\ No newline at end of file
diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index 8a2f6195..6dc7dd9e 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -125,7 +125,6 @@ import { FacilityService } from '@/services/FacilityService';
 import { hasError } from '@/adapter';
 import logger from '@/logger';
 import emitter from '@/event-bus';
-import GroupActionsPopover from '@/components/GroupActionsPopover.vue';
 import AddProductStoreToGroupModal from '@/components/AddProductStoreToGroupModal.vue';
 
 export default defineComponent({
@@ -260,16 +259,6 @@ export default defineComponent({
     manageFacilities(facilityGroup: any) {
       this.$router.push({ path: `/manage-facilities/${facilityGroup.facilityGroupId}`})
     },
-    async openGroupActionsPopover(event: Event, group: any) {
-      const groupActionsPopover = await popoverController.create({
-        component: GroupActionsPopover,
-        event,
-        showBackdrop: false,
-        componentProps: { group }
-      });
-
-      groupActionsPopover.present();
-    },
     getAssociatedFacilityGroupIds(facilityGroupTypeId: any) {
       const associatedfacilityGroupIds = [] as any
 

From 906beda573bca63b303fe4bde1b28e05a3e4f80f Mon Sep 17 00:00:00 2001
From: Ravi Lodhi <ravi.lodhi@hotwaxsystems.com>
Date: Wed, 7 Aug 2024 15:27:01 +0530
Subject: [PATCH 3/4] Improved: Removed code used to open modal (#293).

---
 src/views/FindGroups.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index 6dc7dd9e..d674c84b 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -52,10 +52,6 @@
               <ion-button @click="manageFacilities(group)" fill="clear" color="medium" slot="end">
                 <ion-icon :icon="pencilOutline" slot="icon-only"/>
               </ion-button>
-
-              <!--<ion-chip outline slot="end" @click="openGroupActionsPopover($event, group)">
-                {{ group.facilityCount }}
-              </ion-chip>-->
             </ion-item>
             <ion-item v-if="group.description" lines="none">
               <ion-label>{{ group.description }}</ion-label>

From 8ea309795642ff5c3976ffe38c4197eee95c6b15 Mon Sep 17 00:00:00 2001
From: Ravi Lodhi <ravi.lodhi@hotwaxsystems.com>
Date: Thu, 8 Aug 2024 10:45:50 +0530
Subject: [PATCH 4/4] Improved: Added border syles for vertical divider (#293).

---
 src/views/ManageFacilities.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/ManageFacilities.vue b/src/views/ManageFacilities.vue
index 6f0a4c9c..6a0e05b0 100644
--- a/src/views/ManageFacilities.vue
+++ b/src/views/ManageFacilities.vue
@@ -9,7 +9,7 @@
   
       <ion-content>
         <div class="find">
-          <section class="search">
+          <section class="ion-padding-end search">
             <ion-searchbar :placeholder="translate('Search facilities')" v-model="queryString" @ionInput="getFilteredFacilities()"/>
             <ion-list>
               <ion-list-header>
@@ -400,4 +400,7 @@
   ion-content {
     --padding-bottom: 80px;
   }
+  .search {
+    border-right: 1px solid lightgray;
+  }
   </style>
\ No newline at end of file