Added a message to search when no items match (#1413)

* Added a message to search when no items match Signed-off-by: Vamshi Reddy <[email protected]> * fixing formatting Signed-off-by: Vamshi Reddy <[email protected]> --------- Signed-off-by: Vamshi Reddy <[email protected]>
fermyon · Nov 13, 2024 · 67b4113 · 67b4113
1 parent 3196441
commit 67b4113
Showing 1 changed file with 50 additions and 13 deletions.
diff --git a/spin-up-hub/src/components/ContentListing.vue b/spin-up-hub/src/components/ContentListing.vue
@@ -3,6 +3,8 @@ import Card from "./Card.vue"
 export default {
     data() {
         return {
+            noResultsMessage: '',
+            isSearching: false,
         }
     },
     components: { Card },
@@ -20,8 +22,11 @@ export default {
             return this.$store.state.searchTerm
         },
         contentItems() {
-            let data = this.$store.state.contentItems
+            let data = this.$store.state.contentItems || []
+            this.noResultsMessage = ''
+
             if (this.searchTerm) {
+                this.isSearching = true;
                 let updatedQuery = this.searchTerm
                     .split(" ")
                     .map(word => word + '^2 ' + word + '*')
@@ -36,34 +41,53 @@ export default {
                     matches.push(data.find(docs => k.ref == docs.id))
                 })
                 data = matches
+            } else {
+                this.isSearching = false;
+                if (data.length === 0) {
+                    this.noResultsMessage = "No items available."
+                }
             }
+
             let contentFilterLength = this.filteredContentTypes.length
-            let langaugeFilterLength = this.filteredLanguages.length
-            if (contentFilterLength + langaugeFilterLength === 0) { return data }
+            let languageFilterLength = this.filteredLanguages.length
+
+            if (contentFilterLength + languageFilterLength === 0) {
+                if (data.length === 0 && this.isSearching) {
+                    this.noResultsMessage = "No items matched your search."
+                }
+                return data;
+            }
+
             if (contentFilterLength === 0) {
                 return data.filter(k => { return this.filteredLanguages.includes(k.language) })
             }
             if (langaugeFilterLength === 0) {
                 return data.filter(k => { return this.filteredContentTypes.includes(k.category) })
+            } else {
+                data = data.filter(k =>
+                    this.filteredContentTypes.includes(k.category) &&
+                    this.filteredLanguages.includes(k.language)
+                )
+            }
+
+            if (data.length === 0 && this.isSearching) {
+                this.noResultsMessage = "No items matched your search 👀"
             }
-            console.log(data.filter(k => {
-                return this.filteredContentTypes.includes(k.category) && this.filteredLanguages.includes(k.language)
-            }))
-            return data.filter(k => {
-                return this.filteredContentTypes.includes(k.category) && this.filteredLanguages.includes(k.language)
-            })
+
+            return data
         }
     }
 }
-
 </script>
 
+
 <template>
     <div class="content-listing column is-four-fifths-desktop is-full-touch">
         <transition-group class="card-groups columns is-0 is-mobile is-multiline" tag="div"  name="card-list" appear>
             <Card v-for="item in contentItems" :item="item" :key="item.title"></Card>
         </transition-group>
-        </div>
+        <div v-if="isSearching && noResultsMessage" class="no-results-message">{{ noResultsMessage }}</div>
+    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -79,8 +103,15 @@ export default {
     position: relative;
 }
 
-@media screen and (max-width:1023px) {
-
+.no-results-message {
+    color: #3f4f99;
+    font-size: 1.5em; 
+    text-align: center;
+    width: 100%;
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .card-list-enter-active,
@@ -102,4 +133,10 @@ export default {
 .card-list-move {
     transition: transform 0.5s;
 }
+
+.dark-theme {
+    .no-results-message {
+        color: #e7d3f2;
+    }
+}
 </style>