Show search result count in badge

radiantearth · Aug 17, 2023 · a602de4 · a602de4
1 parent 2dd68a0
commit a602de4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/components/Catalogs.vue b/src/components/Catalogs.vue
@@ -2,10 +2,7 @@
   <section class="catalogs mb-4">
     <header>
       <h2 class="title mr-2">{{ title }}</h2>
-      <b-badge v-if="isComplete" pill variant="secondary" class="mr-4">
-        <template v-if="catalogs.length !== catalogView.length">{{ catalogView.length }}/{{ catalogs.length }}</template>
-        <template v-else>{{ catalogs.length }}</template>
-      </b-badge>
+      <b-badge v-if="catalogCount !== null" pill variant="secondary" class="mr-4">{{ catalogCount }}</b-badge>
       <ViewButtons class="mr-2" v-model="view" />
       <SortButtons v-if="isComplete && catalogs.length > 1" v-model="sort" />
     </header>
@@ -67,6 +64,10 @@ export default {
     pagination: {
       type: Object,
       default: () => ({})
+    },
+    count: {
+      type: Number,
+      default: null
     }
   },
   data() {
@@ -78,6 +79,18 @@ export default {
   computed: {
     ...mapState(['cardViewSort', 'uiLanguage']),
     ...mapGetters(['getStac']),
+    catalogCount() {
+      if (this.catalogs.length !== this.catalogView.length) {
+        return this.catalogView.length + '/' + this.catalogs.length;
+      }
+      else if (this.count !== null) {
+        return this.count;
+      }
+      else if (this.isComplete) {
+        return this.catalogs.length;
+      }
+      return null;
+    },
     title() {
       if (this.collectionsOnly) {
         return this.$tc('stacCollection', this.catalogs.length );

diff --git a/src/components/Items.vue b/src/components/Items.vue
@@ -2,7 +2,7 @@
   <section class="items mb-4">
     <header>
       <h2 class="title mr-2">{{ $tc('stacItem', items.length ) }}</h2>
-      <b-badge v-if="!api && items.length > 0" pill variant="secondary" class="mr-4">{{ items.length }}</b-badge>
+      <b-badge v-if="itemCount !== null" pill variant="secondary" class="mr-4">{{ itemCount }}</b-badge>
       <SortButtons v-if="!api && items.length > 1" v-model="sort" />
     </header>
 
@@ -92,6 +92,10 @@ export default {
     chunkSize: {
       type: Number,
       default: 90
+    },
+    count: {
+      type: Number,
+      default: null
     }
   },
   data() {
@@ -103,6 +107,15 @@ export default {
   },
   computed: {
     ...mapState(['cardViewSort', 'uiLanguage']),
+    itemCount() {
+      if (this.count !== null) {
+        return this.count;
+      }
+      else if (!this.api && this.items.length > 0) {
+        return this.items.length;
+      }
+      return null;
+    },
     hasMore() {
       return this.items.length > this.shownItems;
     },

diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -31,6 +31,7 @@
           <Catalogs
             v-if="isCollectionSearch" :catalogs="results" collectionsOnly
             :pagination="pagination" :loading="loading" @paginate="loadResults"
+            :count="totalCount"
           >
             <template #catalogFooter="slot">
               <b-button-group v-if="canSearchItems || canFilterItems(slot.data)" vertical size="sm">
@@ -47,6 +48,7 @@
             v-else
             :stac="stac" :items="results" :api="true" :allowFilter="false"
             :pagination="pagination" :loading="loading" @paginate="loadResults"
+            :count="totalCount"
           />
         </template>
       </b-col>
@@ -109,6 +111,12 @@ export default {
     selectedCollectionCount() {
       return Utils.size(this.selectedCollections);
     },
+    totalCount() {
+      if (typeof this.data.numberMatched === 'number') {
+        return this.data.numberMatched;
+      }
+      return null;
+    },
     stac() {
       if (this.parent instanceof STAC) {
         return this.parent;