ressources.vue

<template>
  <SearchContainer
    ref="searchContainer"
    :title="$t('ressources.title')"
    :results="results"
    :search-placeholder="$t('ressources.searchPlaceholder')"
    :search-function="searchFunction"
    :get-query-url="getQueryUrl"
  >
    <RessourcesSubmitModal slot="search" />

    <template #items="{ items }">
      <RessourcesCategoriesFilter
        :categories="categories"
        :selected-categories="selectedCategories"
        @select="selectedCategories = $event"
      />

      <section class="mt-8">
        <transition-group name="list" class="flex flex-wrap">
          <RessourcesItem
            v-for="item in items"
            :key="item.path"
            :item="item"
            @select-category="selectedCategories = $event"
          />
        </transition-group>
      </section>
    </template>
  </SearchContainer>
</template>

<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: defaultSelected } })
      .sortBy('featured', 'asc')
      .fetch()

    return {
      results,
    }
  },
  data() {
    const allCategories = categories.ressources.map((cat) => cat.title)
    return {
      categories: allCategories,
      selectedCategories: [defaultSelected], // allCategories,
    }
  },
  watch: {
    selectedCategories() {
      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')
        .search(query)
        .where({ categories: { $containsAny: this.selectedCategories } })
        .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>