From f6e41dc8485c52597b6b5a2c783d5400e1449ca1 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Tue, 20 Aug 2024 18:09:12 +0530
Subject: [PATCH] Improved: UI when displaying selected facilities on the
 completed page filter(#420)

---
 src/components/Filters.vue | 34 ++++++++++++++--------------------
 src/locales/en.json        |  1 +
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/Filters.vue b/src/components/Filters.vue
index 8e6be2d9..7e5daf04 100644
--- a/src/components/Filters.vue
+++ b/src/components/Filters.vue
@@ -22,13 +22,17 @@
           <ion-checkbox :value="query.noFacility" @ionChange="updateQuery('noFacility', $event.detail.checked)">{{ translate("No facility") }}</ion-checkbox>
         </ion-item>
 
-        <ion-item button v-if="showAdditionalFilters().selectedFacilities">
-          <ion-icon slot="start" :icon="removeCircleOutline"/>
-          <ion-label>{{ getSelectedFacilities() }}</ion-label>
-          <ion-button color="danger" v-if="query.facilityIds.length" fill="clear" slot="end" @click="updateQuery('facilityIds', [])">
-            <ion-icon slot="icon-only" :icon="closeOutline"/>
-          </ion-button>
-        </ion-item>
+        <template v-if="showAdditionalFilters().selectedFacilities">
+          <ion-item v-for="facilityId in query.facilityIds" :key="facilityId">
+            <ion-label>{{ getFacilityName(facilityId) }}</ion-label>
+            <ion-button color="danger" v-if="query.facilityIds.length" fill="clear" slot="end" @click="updateQuery('facilityIds', query.facilityIds.filter((id: string) => id !== facilityId))">
+              <ion-icon slot="icon-only" :icon="closeCircleOutline"/>
+            </ion-button>
+          </ion-item>
+          <ion-item v-show="!query.facilityIds.length">
+            <ion-label>{{ translate("All facilities selected") }}</ion-label>
+          </ion-item>
+        </template>
 
         <ion-item-divider v-if="showAdditionalFilters().date">
           <ion-label>{{ translate("Date") }}</ion-label>
@@ -133,7 +137,7 @@ import {
   IonToolbar
 } from "@ionic/vue";
 import { computed, ref } from "vue";
-import { closeOutline, removeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline } from "ionicons/icons";
+import { closeCircleOutline, businessOutline, gitBranchOutline, gitPullRequestOutline, locateOutline } from "ionicons/icons";
 import { translate } from '@/i18n'
 import store from "@/store";
 import router from "@/router";
@@ -159,18 +163,8 @@ async function updateQuery(key: string, value: any) {
   await store.dispatch("count/updateQuery", { key, value })
 }
 
-function getSelectedFacilities() {
-  let value = query.value.facilityIds
-
-  // Initially when adding a filter no value is selected thus returning "All facilities selected" as default value
-  if(!value.length) {
-    return "All facilities selected";
-  }
-  return facilities.value.map((facility: any) => {
-    if(value?.includes(facility.facilityId)) {
-      return facility.facilityName || facility.facilityId
-    }
-  }).filter((facility: any) => facility).join(", ")
+function getFacilityName(facilityId: string) {
+  return facilities.value.find((facility: any) => facility.facilityId === facilityId)?.facilityName || facilityId
 }
 
 function getSelectedValue() {
diff --git a/src/locales/en.json b/src/locales/en.json
index cfe216df..90265baf 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -7,6 +7,7 @@
   "Accepted by user": "Accepted by user",
   "After": "After",
   "All": "All",
+  "All facilities selected": "All facilities selected",
   "All of the item(s) are accepted": "All of the item(s) are accepted",
   "Add product": "Add product",
   "Add to count": "Add to count",