From 2ebad4eca8ef8d54aab9e9028a98c724b1a78f30 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Fri, 18 Jun 2021 05:15:33 +0200
Subject: [PATCH] Bind url query to ressources filters
---
components/layout/LayoutFooter.vue | 7 ++++--
components/search/SearchContainer.vue | 14 ++++++++---
pages/ressources.vue | 34 +++++++++++++++++++++++++--
3 files changed, 48 insertions(+), 7 deletions(-)
diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue
index 23d402d8..6f4ee5b6 100644
--- a/components/layout/LayoutFooter.vue
+++ b/components/layout/LayoutFooter.vue
@@ -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>
diff --git a/components/search/SearchContainer.vue b/components/search/SearchContainer.vue
index 14553019..59d3a605 100644
--- a/components/search/SearchContainer.vue
+++ b/components/search/SearchContainer.vue
@@ -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}` : '')
)
},
},
diff --git a/pages/ressources.vue b/pages/ressources.vue
index 7bd56e90..1766caa3 100644
--- a/pages/ressources.vue
+++ b/pages/ressources.vue
@@ -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>
--
GitLab