Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a message to search when no items match #1412

Closed
wants to merge 2 commits into from
Closed

Added a message to search when no items match #1412

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54498ba
Added a message to search when no items match
VamshiReddy02 Nov 5, 2024
4156a6e
Added a message to search when no items match
VamshiReddy02 Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 57 additions & 26 deletions spin-up-hub/src/components/ContentListing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,30 @@ import Card from "./Card.vue"
export default {
data() {
return {
}
},
noResultsMessage: '',
isSearching: false,
}
},
components: { Card },
computed: {
filteredContentTypes() {
return this.$store.state.contentFilters
},
},
filteredLanguages() {
return this.$store.state.languageFilters
},
},
searchIndex() {
return this.$store.state.searchIndex
},
},
searchTerm() {
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 + '*')
Expand All @@ -32,38 +37,57 @@ export default {
result.map(k => {
if (k.score < 5) {
return
}
}
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) })
}
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)
})
}
} 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 👀"
}

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>
Expand All @@ -79,8 +103,15 @@ export default {
position: relative;
}

@media screen and (max-width:1023px) {

.no-results-message {
color: #e7d3f2;
font-size: 1.5em;
text-align: center;
width: 100%;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
}

.card-list-enter-active,
Expand All @@ -102,4 +133,4 @@ export default {
.card-list-move {
transition: transform 0.5s;
}
</style>
</style>
Loading