Merge pull request #301 from hotwax/#283_facility_and_security_group_…

…search Improved: Added empty state for Facilities search and Security group search modal (#283).
hotwax · Nov 7, 2024 · ac65063 · ac65063
2 parents f44d44f + b681071
commit ac65063
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/components/SelectFacilityModal.vue b/src/components/SelectFacilityModal.vue
@@ -12,29 +12,34 @@
 
   <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 filteredFacilities" :key="facility.facilityId">
-        <ion-checkbox :checked="isSelected(facility.facilityId)" @ionChange="toggleFacilitySelection(facility)">
-          <ion-label>
-            {{ facility.facilityName || facility.facilityId }}
-            <p>{{ facility.facilityId }}</p>
-          </ion-label>
-        </ion-checkbox>
-      </ion-item>
-    </ion-list>
-
-    <ion-list v-else>
-      <ion-radio-group :value="selectedFacilities[0]?.facilityId" @ionChange="updateSelectedFacility($event)">
+    <template v-if="filteredFacilities.length">
+      <ion-list v-if="!isFacilityLogin">
         <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
-          <ion-radio :value="facility.facilityId">
+          <ion-checkbox :checked="isSelected(facility.facilityId)" @ionChange="toggleFacilitySelection(facility)">
             <ion-label>
               {{ facility.facilityName || facility.facilityId }}
               <p>{{ facility.facilityId }}</p>
             </ion-label>
-          </ion-radio>
+          </ion-checkbox>
         </ion-item>
-      </ion-radio-group>
-    </ion-list>
+      </ion-list>
+
+      <ion-list v-else>
+        <ion-radio-group :value="selectedFacilities[0]?.facilityId" @ionChange="updateSelectedFacility($event)">
+          <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
+            <ion-radio :value="facility.facilityId">
+              <ion-label>
+                {{ facility.facilityName || facility.facilityId }}
+                <p>{{ facility.facilityId }}</p>
+              </ion-label>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </template>
+    <div v-else class="empty-state">
+      <p>{{ translate("No facilities found") }}</p>
+    </div>
 
     <ion-fab @click="saveFacilities()" vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>

diff --git a/src/components/SelectSecurityGroupModal.vue b/src/components/SelectSecurityGroupModal.vue
@@ -12,6 +12,7 @@
 
     <ion-content>
       <ion-searchbar :placeholder="translate('Search security groups')" v-model="queryString" @keyup.enter="search()"/>
+      <template v-if="fileteredSecurityGroups.length">
       <ion-list>
         <ion-item v-for="securityGroup in fileteredSecurityGroups" :key="securityGroup.groupId">
           <ion-checkbox :checked="isSelected(securityGroup.groupId)" @ionChange="toggleSecurityGroupSelection(securityGroup)">
@@ -22,6 +23,10 @@
           </ion-checkbox>
         </ion-item>
       </ion-list>
+      </template>
+      <div v-else class="empty-state">
+        <p>{{ translate("No security groups found") }}</p>
+      </div>
 
       <ion-fab @click="saveSecurityGroups()" vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -126,10 +126,12 @@
   "Name is required.": "Name is required.",
   "New password": "New password",
   "No": "No",
+  "No facilities found": "No facilities found",
   "No permissions associated": "No permissions associated",
   "No permissions have been linked to this group yet. Permissions for a group cannot be downloaded.": "No permissions have been linked to this group yet. Permissions for a group cannot be downloaded.",
   "No product stores found": "No product stores found",
   "No record found": "No record found",
+  "No security groups found": "No security groups found",
   "No users found": "No users found",
   "No time zone found": "No time zone found",
   "None": "None",