From 67b4113b86395f170f8273875cebacefdf035e2e Mon Sep 17 00:00:00 2001
From: VamshiReddy02 <99033623+VamshiReddy02@users.noreply.github.com>
Date: Wed, 13 Nov 2024 18:26:09 +0530
Subject: [PATCH] Added a message to search when no items match (#1413)

* Added a message to search when no items match

Signed-off-by: Vamshi Reddy <vamshiproject02@gmail.com>

* fixing formatting

Signed-off-by: Vamshi Reddy <vamshiproject02@gmail.com>

---------

Signed-off-by: Vamshi Reddy <vamshiproject02@gmail.com>
---
 spin-up-hub/src/components/ContentListing.vue | 63 +++++++++++++++----
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/spin-up-hub/src/components/ContentListing.vue b/spin-up-hub/src/components/ContentListing.vue
index 390550c50..fbba9a6f4 100644
--- 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>
\ No newline at end of file