From b2c2a2e821f06bcfb10680fdf175f9ef6080048e Mon Sep 17 00:00:00 2001
From: Thomas Chopitea <tomchop@gmail.com>
Date: Sat, 14 Sep 2024 17:12:14 +0900
Subject: [PATCH] Add loading indicators (#211)

---
 src/components/DirectNeighbors.vue |  2 ++
 src/components/EntitySelector.vue  |  9 ++++-----
 src/components/ObjectList.vue      | 25 +++++++++++++++++--------
 src/views/TagsAdmin.vue            |  7 ++++++-
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/DirectNeighbors.vue b/src/components/DirectNeighbors.vue
index 19025b65..43d5ce4f 100644
--- a/src/components/DirectNeighbors.vue
+++ b/src/components/DirectNeighbors.vue
@@ -45,6 +45,8 @@
       :sort-by="sortBy"
       :search="searchFilter"
       hover
+      :loading="loading"
+      loading-text="Loading data..."
     >
       <!-- <tr> -->
       <template v-slot:item.direction="{ item }">
diff --git a/src/components/EntitySelector.vue b/src/components/EntitySelector.vue
index 1bcc1f95..11492bb5 100644
--- a/src/components/EntitySelector.vue
+++ b/src/components/EntitySelector.vue
@@ -15,7 +15,7 @@
   >
     <template v-slot:no-data>
       <v-list-item>
-        <v-list-item-title>Start typing...</v-list-item-title>
+        <v-list-item-title>No entities found...</v-list-item-title>
       </v-list-item>
     </template>
     <template v-slot:chip="{ props, item }">
@@ -85,12 +85,11 @@ export default {
       selectedEntity: null
     };
   },
+  mounted() {
+    this.loadObjects("");
+  },
   methods: {
     async loadObjects(searchQuery: String = "") {
-      if (searchQuery.length == 0) {
-        this.items = [];
-        return;
-      }
       const params = { query: { name: searchQuery }, count: 20 };
       const entities = (await axios.post("/api/v2/entities/search", params)).data.entities;
       const indicators = (await axios.post("/api/v2/indicators/search", params)).data.indicators;
diff --git a/src/components/ObjectList.vue b/src/components/ObjectList.vue
index 9d9685a9..d058f759 100644
--- a/src/components/ObjectList.vue
+++ b/src/components/ObjectList.vue
@@ -18,6 +18,8 @@
       :item-value="item => item.id"
       hover
       :sort-by="sortBy"
+      :loading="loading"
+      loading-text="Loading data..."
     >
       <template v-slot:item.name="{ item }">
         <span class="short-links">
@@ -121,7 +123,8 @@ export default {
       page: 1,
       perPage: 20,
       total: 0,
-      sortBy: [{ key: "name", order: "asc" }]
+      sortBy: [{ key: "name", order: "asc" }],
+      loading: true
     };
   },
   methods: {
@@ -167,6 +170,7 @@ export default {
       itemsPerPage: number;
       sortBy: Array<{ key: string; order: string }>;
     }) {
+      this.loading = true;
       let params = {
         page: page - 1,
         count: itemsPerPage === -1 ? 0 : itemsPerPage,
@@ -177,13 +181,18 @@ export default {
       if (this.searchSubtype != "") {
         params["type"] = this.searchSubtype;
       }
-      axios.post(`/api/v2/${this.searchType}/search`, params).then(response => {
-        this.items = response.data[this.searchType];
-        if (response.data.total != this.total) {
-          this.total = response.data.total;
-          this.$emit("totalUpdated", this.total);
-        }
-      });
+      axios
+        .post(`/api/v2/${this.searchType}/search`, params)
+        .then(response => {
+          this.items = response.data[this.searchType];
+          if (response.data.total != this.total) {
+            this.total = response.data.total;
+            this.$emit("totalUpdated", this.total);
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     }
   }
 };
diff --git a/src/views/TagsAdmin.vue b/src/views/TagsAdmin.vue
index 8a500052..4431d00f 100644
--- a/src/views/TagsAdmin.vue
+++ b/src/views/TagsAdmin.vue
@@ -9,6 +9,8 @@
       density="compact"
       :search="tagFilterDebounced"
       @update:options="searchTags"
+      :loading="loading"
+      loading-text="Loading tags..."
     >
       <template v-slot:item.name="{ item }">
         <v-chip color="primary" @click="selectTag(item)" density="compact">{{ item.name }}</v-chip>
@@ -141,6 +143,7 @@ export default {
   },
   methods: {
     searchTags({ page, itemsPerPage, sortBy }) {
+      this.loading = true;
       axios
         .post(`/api/v2/tags/search`, { name: this.tagFilter, page: page - 1, count: itemsPerPage })
         .then(response => {
@@ -150,7 +153,9 @@ export default {
         .catch(error => {
           return console.log(error);
         })
-        .finally(() => {});
+        .finally(() => {
+          this.loading = false;
+        });
     },
     selectTag(selectedTag) {
       this.selectedTag = selectedTag;