Skip to content
Snippets Groups Projects
Commit 2ebad4ec authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

Bind url query to ressources filters

parent a71b5f05
No related branches found
No related tags found
No related merge requests found
......@@ -21,7 +21,7 @@
class="flex"
>
<template #button="{ onClick }">
<t-button @click="onClick" class="w-full lg:w-max">
<t-button class="w-full lg:w-max" @click="onClick">
<fa icon="heart"></fa><span class="ml-2">Je participe !</span>
</t-button>
</template>
......@@ -59,7 +59,10 @@
<li v-for="category in categories" :key="category.title">
<nuxt-link
class="hover:underline"
:to="`/ressources?cat=${category.title}`"
:to="{
path: 'ressources',
query: { filters: category.title },
}"
>
{{ category.title }}
</nuxt-link>
......
......@@ -108,6 +108,14 @@ export default {
type: Function,
required: true,
},
getQueryUrl: {
type: Function,
default(q) {
return new URLSearchParams({
q,
})
},
},
},
data() {
return {
......@@ -136,10 +144,8 @@ export default {
methods: {
async search(force) {
const query = this.query.trim()
let queryUrl = null
if (query.length || force) {
queryUrl = encodeURIComponent(query)
const results = await this.searchFunction(this.query)
if (results.length) {
......@@ -154,10 +160,12 @@ export default {
this.hasNoResult = false
}
// Replace url with query string
const queryUrl = this.getQueryUrl(query).toString()
history.replaceState(
{},
null,
this.$route.path + (queryUrl ? `?q=${queryUrl}` : '')
this.$route.path + (queryUrl.length ? `?${queryUrl}` : '')
)
},
},
......
......@@ -5,6 +5,7 @@
:results="results"
:search-placeholder="$t('ressources.searchPlaceholder')"
:search-function="searchFunction"
:get-query-url="getQueryUrl"
>
<RessourcesSubmitModal slot="search" />
......@@ -32,11 +33,13 @@
<script>
import categories from '~/static/settings/categories.json'
const defaultSelected = 'Mises en avant'
export default {
name: 'RessourcesPage',
async asyncData({ $content }) {
const results = await $content('ressources')
.where({ categories: { $containsAny: 'Mises en avant' } })
.where({ categories: { $containsAny: defaultSelected } })
.sortBy('featured', 'asc')
.fetch()
......@@ -48,7 +51,7 @@ export default {
const allCategories = categories.ressources.map((cat) => cat.title)
return {
categories: allCategories,
selectedCategories: ['Mises en avant'], // allCategories,
selectedCategories: [defaultSelected], // allCategories,
}
},
watch: {
......@@ -56,6 +59,14 @@ export default {
this.$refs.searchContainer.search(true)
},
},
mounted() {
// Get url params
const query = this.$route.query
if (query.filters)
this.selectedCategories = Array.isArray(query.filters)
? query.filters
: [query.filters]
},
methods: {
async searchFunction(query) {
return await this.$content('ressources')
......@@ -64,6 +75,25 @@ export default {
.sortBy('title', 'asc')
.fetch()
},
getQueryUrl(query) {
const params = new URLSearchParams()
if (query.length) params.set('q', query)
if (this.selectedCategories.length === 1) {
if (this.selectedCategories[0] !== defaultSelected) {
params.set('filters', this.selectedCategories[0])
}
} else if (this.selectedCategories.length > 1) {
if (this.selectedCategories.length === this.categories.length) {
params.set('filters', 'all')
} else {
this.selectedCategories.forEach((cat) =>
params.append('filters', cat)
)
}
}
return params
},
},
}
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment