Improved: Added support to search security groups and facilities in the respective modals (#283).

src/components/SelectFacilityModal.vue

@@ -11,8 +11,9 @@
   </ion-header>
 
   <ion-content>
+    <ion-searchbar :placeholder="translate('Search facilities')" v-model="queryString" @keyup.enter="search()"/>
     <ion-list v-if="!isFacilityLogin">
-      <ion-item v-for="facility in facilities" :key="facility.facilityId">
+      <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
         <ion-checkbox :checked="isSelected(facility.facilityId)" @ionChange="toggleFacilitySelection(facility)">
           <ion-label>
             {{ facility.facilityName || facility.facilityId }}
@@ -24,7 +25,7 @@
 
     <ion-list v-else>
       <ion-radio-group :value="selectedFacilities[0]?.facilityId" @ionChange="updateSelectedFacility($event)">
-        <ion-item v-for="facility in facilities" :key="facility.facilityId">
+        <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
           <ion-radio :value="facility.facilityId">
             <ion-label>
               {{ facility.facilityName || facility.facilityId }}
@@ -58,6 +59,7 @@ import {
   IonList,
   IonRadio,
   IonRadioGroup,
+  IonSearchbar,
   IonTitle,
   IonToolbar,
   modalController
@@ -83,12 +85,15 @@ export default defineComponent({
     IonList,
     IonRadio,
     IonRadioGroup,
+    IonSearchbar,
     IonTitle,
     IonToolbar,
   },
   props: ["selectedFacilities", "isFacilityLogin"],
   data() {
     return {
+      queryString: '',
+      filteredFacilities: [] as any,
       selectedFacilityValues: JSON.parse(JSON.stringify(this.selectedFacilities)),
     }
   },
@@ -99,11 +104,15 @@ export default defineComponent({
   },
   async mounted() {
     await this.store.dispatch('util/fetchFacilities');
+    this.filteredFacilities = this.facilities
   },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true });
     },
+    search() {
+      this.filteredFacilities = this.facilities.filter((facility: any) => (facility.facilityId.toLowerCase().includes(this.queryString.toLowerCase())) || (facility.facilityName && facility.facilityName.toLowerCase().includes(this.queryString.toLowerCase())))
+    },
     saveFacilities() {
       // taking out the difference of selected facilities and the originally
       // user associated facilities for adding and removing facilities

src/components/SelectSecurityGroupModal.vue

@@ -11,8 +11,9 @@
     </ion-header>
 
     <ion-content>
+      <ion-searchbar :placeholder="translate('Search security groups')" v-model="queryString" @keyup.enter="search()"/>
       <ion-list>
-        <ion-item v-for="securityGroup in securityGroups" :key="securityGroup.groupId">
+        <ion-item v-for="securityGroup in fileteredSecurityGroups" :key="securityGroup.groupId">
           <ion-checkbox :checked="isSelected(securityGroup.groupId)" @ionChange="toggleSecurityGroupSelection(securityGroup)">
             <ion-label>
               {{ securityGroup.groupName || securityGroup.groupId }}
@@ -43,9 +44,10 @@
     IonItem,
     IonLabel,
     IonList,
+    IonSearchbar,
     IonTitle,
     IonToolbar,
-    modalController
+    modalController,
   } from "@ionic/vue";
   import { defineComponent } from "vue";
   import { closeOutline, saveOutline } from "ionicons/icons";
@@ -66,12 +68,15 @@
       IonItem,
       IonLabel,
       IonList,
+      IonSearchbar,
       IonTitle,
       IonToolbar,
     },
     props: ["selectedSecurityGroups"],
     data() {
       return {
+        queryString: '',
+        fileteredSecurityGroups: [] as any,
         selectedSecurityGroupValues: JSON.parse(JSON.stringify(this.selectedSecurityGroups)),
       }
     },
@@ -80,10 +85,16 @@
         securityGroups: 'util/getSecurityGroups'
       })
     },
+    async mounted() {
+      this.fileteredSecurityGroups = this.securityGroups
+    },
     methods: {
       closeModal() {
         modalController.dismiss({ dismissed: true});
       },
+      search() {
+        this.fileteredSecurityGroups = this.securityGroups.filter((securityGroup: any) => (securityGroup.groupId.toLowerCase().includes(this.queryString.toLowerCase())) || (securityGroup.groupName && securityGroup.groupName.toLowerCase().includes(this.queryString.toLowerCase())))
+      },
       saveSecurityGroups() {
         const securityGroupsToCreate = this.selectedSecurityGroupValues.filter((selectedGroup: any) => !this.selectedSecurityGroups.some((group: any) => group.groupId === selectedGroup.groupId))
         const securityGroupsToRemove = this.selectedSecurityGroups.filter((group: any) => !this.selectedSecurityGroupValues.some((selectedGroup: any) => group.groupId === selectedGroup.groupId))

src/locales/en.json

@@ -166,7 +166,9 @@
   "Reset password": "Reset password",
   "Role removed successfully.": "Role removed successfully.",
   "Role(s) updated successfully.": "Role(s) updated successfully.",
+  "Search facilities": "Search facilities",
   "Search permissions": "Search permissions",
+  "Search security groups": "Search security groups",
   "Security Group": "Security Group", 
   "Security Groups": "Security Groups", 
   "Security group updated successfully.": "Security group updated successfully.",