Bind url query to ressources filters

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>

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}` : '')
       )
     },
   },

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>