style: improve filters style and add title based on active filters

components/CategoryChips.vue

@@ -0,0 +1,31 @@
+<template>
+  <span>
+    <v-chip
+      v-for="category in categories"
+      :key="category.id"
+      :to="{ name: 'blog', query: { category: category.id }}"
+      outlined
+      exact
+    >
+      <v-icon
+        dense
+        left>
+        {{ category.icon }}
+      </v-icon>
+      {{ $t(`categories.${category.id}`) }}
+    </v-chip>
+  </span>
+</template>
+
+<script>
+import { categories } from '@/utils/data'
+
+export default {
+  name: 'CategoryChips',
+  data () {
+    return {
+      categories
+    }
+  }
+}
+</script>

components/FiltersSearch.vue

@@ -0,0 +1,114 @@
+<template>
+  <b-card
+    class="mb-10"
+    fluid
+    style="padding-bottom: 0px !important">
+    <v-expansion-panels flat>
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          <span class="text-body-1">Recherche par filtres</span>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-row>
+            <v-col
+              class="text-center"
+              cols="12">
+              <v-chip
+                v-if="showAllButton"
+                :to="{ name: 'blog' }"
+                exact
+                outlined
+              >
+                <v-icon
+                  dense
+                  left>
+                  {{ mdiTextBoxMultipleOutline }}
+                </v-icon>
+                Toutes les publications
+              </v-chip>
+            </v-col>
+            <v-col
+              class="text-center"
+              cols="12">
+              <p v-if="!showTypes && authors.length === 0" class="text-center text-subtitle-1">Thématique principale</p>
+              <CategoryChips/>
+            </v-col>
+            <template v-if="showTypes">
+              <v-divider/>
+              <v-col
+                class="text-center"
+                cols="12">
+                <p class="text-subtitle-1">Type de contenu</p>
+                <v-chip
+                  v-for="type in types"
+                  :key="type.id"
+                  :to="{ name: 'blog', query: { type: type.id }}"
+                  outlined
+                  exact
+                >
+                  <v-icon
+                    dense
+                    left>
+                    {{ type.icon }}
+                  </v-icon>
+                  {{ $t(`types.${type.id}`) }}
+                </v-chip>
+              </v-col>
+            </template>
+            <template v-if="authors.length > 0">
+              <v-divider/>
+              <v-col
+                class="text-center"
+                cols="12">
+                <p class="text-subtitle-1">Auteur</p>
+                <v-chip
+                  v-for="author in authors"
+                  :key="author.username"
+                  :to="{ name: 'blog', query: { author: author.username }}"
+                  outlined
+                  exact
+                >
+                  <v-avatar
+                    left>
+                    <v-img :src="author.picture"></v-img>
+                  </v-avatar>
+                  {{ author.displayname }}
+                </v-chip>
+              </v-col>
+            </template>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </b-card>
+</template>
+
+<script>
+import { mdiTextBoxMultipleOutline } from '@mdi/js'
+import { categories, types } from '@/utils/data'
+
+export default {
+  name: 'FiltersSearch',
+  props: {
+    showAllButton: {
+      type: Boolean,
+      default: false
+    },
+    showTypes: {
+      type: Boolean,
+      default: false
+    },
+    authors: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      categories,
+      types,
+      mdiTextBoxMultipleOutline
+    }
+  }
+}
+</script>

pages/article/_id.vue

@@ -125,13 +125,17 @@
                 <h2 class="headline mb-2 text--text">
                   {{ $t('publication.published') }}
                 </h2>
-                <v-chip v-if="type">
+                <v-chip
+                  v-if="type"
+                  outlined>
                   <v-icon left>
                     {{ type.icon }}
                   </v-icon>
                   {{ $t(`types.${type.id}`) }}
                 </v-chip>
-                <v-chip v-if="category">
+                <v-chip
+                  v-if="category"
+                  outlined>
                   <v-icon left>
                     {{ category.icon }}
                   </v-icon>
@@ -140,6 +144,7 @@
                 <v-chip
                   v-for="label in publication.labels"
                   :key="label"
+                  outlined
                 >
                   {{ label }}
                 </v-chip>
@@ -167,7 +172,7 @@
                       <h3 class="headline darker--text">
                         {{ $t('publication.categories') }}
                       </h3>
-                      <categories-chips />
+                      <category-chips />
                     </b-card>
                   </v-col>
                 </v-row>

pages/blog.vue

@@ -8,7 +8,7 @@
     <b-top-banner
       :icon="head.icon"
       :src="head.image"
-      :title="head.title"
+      :title="computedTitle"
       tall
     />
     <v-container class="page-body">
@@ -27,7 +27,7 @@
             :prepend-inner-icon="mdiMagnify"
             type="search"
           />
-          <categories-chips
+          <filters-search
             show-all-button
             :authors="authors"
             class="pb-10"
@@ -215,6 +215,23 @@ export default {
         if (this.search && !v.title.toLowerCase().includes(this.search.toLowerCase())) { return false }
         return true
       })
+    },
+    computedTitle () {
+      if (this.params.category) {
+        const title = `categories.${this.params.category}`
+        return `Catégorie ‒ ${this.$t(title)}`
+      }
+
+      if (this.params.type) {
+        const title = `types.${this.params.type}`
+        return `Type ‒ ${this.$t(title)}`
+      }
+
+      if (this.params.author) {
+        const author = this.authors.find(a => a.slug === this.params.author)
+        return `Auteur ‒ ${author.displayname}`
+      }
+      return 'Toutes les publications'
     }
   },
   watch: {
@@ -260,6 +277,11 @@ export default {
       params = { ...params, type: typeId }
     }
 
+    const authorId = this.$route.query.author
+    if (authorId) {
+      params = { ...params, author: authorId }
+    }
+
     this.params = params
 
     const search = this.$route.query.search