Add loader.Improve fetch response handling

COmanage · Mar 13, 2024 · 7b67a56 · 7b67a56
1 parent 365de7a
commit 7b67a56
Showing 1 changed file with 14 additions and 16 deletions.
diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -25,6 +25,7 @@
  */
 
 import { camelize } from '../utils/helpers.js';
+import MiniLoader from "../common/mini-loader.js";
 
 export default {
   props: {
@@ -33,7 +34,8 @@ export default {
   },
   inject: ['txt', 'api', 'app'],
   components: {
-    AutoComplete : primevue.autocomplete
+    AutoComplete : primevue.autocomplete,
+    MiniLoader
   },
   data() {
     return {
@@ -43,7 +45,6 @@ export default {
       identifierType: {},
       emailType: {},
       loading: false,
-      error: null
     }
   },
   methods: {
@@ -87,7 +88,6 @@ export default {
     },
     async searchPeople(event) {
       this.loading = true;
-      this.error = null;
       this.emailType = this.calculateTypeValue(this.app.types, this.app.cosettings, 'mail')
       this.identifierType = this.calculateTypeValue(this.app.types, this.app.cosettings, 'identifier')
 
@@ -98,8 +98,6 @@ export default {
         `&name=${event.query}` +
         `&limit=10`
 
-      // todo: The backend need to verify the settings. Else through bad request exception
-
       // AJAX Request
       const request = new Request(`${this.api.searchPeople}&${queryParams}`, {
         headers: new Headers({
@@ -109,16 +107,16 @@ export default {
         method: "GET"
       });
 
-      const resp = await fetch(request);
+      const resp = await (fetch(request).catch(error => this.$refs.handleNetworkError()));
 
-      if (resp.ok) {
-        this.rawData = await resp.json();
-        // I am pushing the new data instead of replacing since we want to implement
-        // progressive loading
-        this.people = this.parseResponse(this.rawData)
-      } else {
-        this.error = resp;
+      if(!resp.ok) {
+        this.$refs.handleError(resp)
+        this.loading = false;
+        return;
       }
+
+      this.rawData = await resp.json();
+      this.people = this.parseResponse(this.rawData)
       this.loading = false;
     },
     parseResponse(data) {
@@ -136,7 +134,6 @@ export default {
 
       // todo: Add fetch more data at the end of the options list
       return data?.People?.map((item) => {
-        debugger
        return {
          "value": item.id,
          "label": `${item?.primary_name?.given} ${item?.primary_name?.family}`,
@@ -155,7 +152,9 @@ export default {
     }
   },
   template: `
-    <label :for="this.inputId">{{ this.txt['autocomplete.people.label'] }}</label>
+    <label class="mr-2" :for="this.inputId">{{ this.txt['autocomplete.people.label'] }}</label>
+    <MiniLoader :isLoading="loading"
+                classes="d-inline ms-1"/>
     <AutoComplete 
       v-model="person"
       @complete="searchPeople"
@@ -166,7 +165,6 @@ export default {
       optionLabel="label"
       :minLength="this.options.minLength"
       :placeholder="this.txt['autocomplete.people.placeholder']"
-      :loading="loading"
       :delay="500"
       forceSelection
       @item-select="setPerson">