Improved: modal loading state & empty state conditions , added clearS…

…earch function(228)
hotwax · Sep 10, 2024 · aa1679e · aa1679e
1 parent efd1d07
commit aa1679e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/src/components/DxpFacilitySwitcher.vue b/src/components/DxpFacilitySwitcher.vue
@@ -13,16 +13,16 @@
         {{ currentFacility.facilityName }}
         <p>{{ currentFacility.facilityId }}</p>
       </ion-label>
-      <ion-button id="select-facility-modal" slot="end" fill="outline" color="dark">Change</ion-button>
+      <ion-button id="open-facility-modal" slot="end" fill="outline" color="dark">Change</ion-button>
     </ion-item>
   </ion-card>
   <!-- Using inline modal(as recommended by ionic), also using it inline as the component inside modal is not getting mounted when using modalController -->
-  <ion-modal ref="facilityModal" trigger="select-facility-modal" @didPresent="" @didDismiss="">
+  <ion-modal ref="facilityModal" trigger="open-facility-modal" @didPresent="loadFacilities()" @didDismiss="clearSearch()">
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
           <ion-button @click="closeModal">
-            <ion-icon :icon="closeOutline" />
+            <ion-icon :icon="closeOutline"/>
           </ion-button>
         </ion-buttons>
         <ion-title>{{ $t("Select Facility") }}</ion-title>
@@ -32,17 +32,20 @@
       <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search facilities')" v-model="queryString" @keyup.enter="queryString = $event.target.value; findFacility()" @keydown="preventSpecialCharacters($event)"/>
     </ion-toolbar>
     <ion-content>
-      <div>
-        <ion-radio-group v-model="selectedFacilityId">
+      <ion-radio-group v-model="selectedFacilityId">
+        <ion-list>
           <!-- Loading state -->
           <div class="empty-state" v-if="isLoading">
             <ion-item lines="none">
               <ion-spinner color="secondary" name="crescent" slot="start" />
               {{ $t("Fetching facilities") }}
             </ion-item>
           </div>
-
-          <ion-list v-if="filteredFacilities.length ">
+          <!-- Empty state -->
+          <div class="empty-state" v-else-if="filteredFacilities.length === 0">
+            <p>{{ $t("No facilities found") }}</p>
+          </div>
+          <div v-else>
             <ion-item v-for="facility in filteredFacilities" :key="facility.facilityId">
               <ion-radio label-placement="end" justify="start" :value="facility.facilityId">
                 <ion-label>
@@ -51,13 +54,9 @@
                 </ion-label>
               </ion-radio>
             </ion-item>
-          </ion-list>
-          <!-- Empty state -->
-          <div class="empty-state" v-else>
-            <p>{{ $t("No facilities found") }}</p>
           </div>
-        </ion-radio-group>
-      </div>
+        </ion-list>
+      </ion-radio-group>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button :disabled="selectedFacilityId === currentFacility.facilityId" @click="setFacility">
@@ -103,8 +102,8 @@ const currentFacility = computed(() => userStore.getCurrentFacility)
 
 const facilityModal = ref()
 const queryString = ref('')
-const isLoading = ref(false);
-const filteredFacilities = ref(facilities.value)
+const isLoading = ref(true);
+const filteredFacilities = ref([])
 const selectedFacilityId = ref(currentFacility.value.facilityId)
 
 const emit = defineEmits(["updateFacility"])
@@ -113,6 +112,11 @@ const closeModal = () => {
   facilityModal.value.$el.dismiss(null, 'cancel');
 }
 
+function loadFacilities() {
+  filteredFacilities.value = facilities.value;
+  isLoading.value = false;
+}
+
 const findFacility = () => {
   isLoading.value = true
   const searchedString = queryString.value.toLowerCase();
@@ -141,6 +145,12 @@ function setFacility() {
   emit('updateFacility', selectedFacility.facilityId);
   closeModal();
 }
+
+function clearSearch() {
+  queryString.value = ''
+  filteredFacilities.value = []
+  isLoading.value = true
+}
 </script>
 
 <style scoped>

diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -1,5 +1,3 @@
-declare const process: any;
-
 import { defineStore } from "pinia";
 import { DateTime } from 'luxon'
 
@@ -17,9 +15,8 @@ export const useAuthStore = defineStore('userAuth', {
     getToken: (state) => state.token,
     getOms: (state) => state.oms,
     getBaseUrl: (state) => {
-      let baseURL = process.env.VUE_APP_BASE_URL;
-      if (!baseURL) baseURL = state.oms;
-      return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
+      let baseURL = state.oms
+      return baseURL.startsWith('http') ? baseURL.includes('/api') ? baseURL : `${baseURL}/api/` : `https://${baseURL}.hotwax.io/api/`;
     },
     isAuthenticated: (state) => {
       let isTokenExpired = false

diff --git a/src/store/user.ts b/src/store/user.ts
@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
-import { appContext, i18n, translate, userContext, useAuthStore } from "../../src";
-import { hasError } from "@hotwax/oms-api";
+import { i18n, translate, userContext, useAuthStore } from "../../src";
 import { DateTime } from "luxon";
 import { showToast } from "src/utils";
 import { facilityContext } from "../index";