ressources.vue

<template>
  <SearchContainer
    ref="searchContainer"
    :title="$t('ressources.title')"
    :results="results"
    :search-placeholder="$t('ressources.searchPlaceholder')"
    :search-function="searchFunction"
  >
    <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'

export default {
  name: 'RessourcesPage',
  async asyncData({ $content }) {
    const results = await $content('ressources')
      .sortBy('createdAt', 'desc')
      .fetch()

    return {
      results,
    }
  },
  data() {
    const allCategories = categories.ressources.map((cat) => cat.title)
    return {
      categories: allCategories,
      selectedCategories: allCategories,
    }
  },
  watch: {
    selectedCategories() {
      this.$refs.searchContainer.search(true)
    },
  },
  methods: {
    async searchFunction(query) {
      return await this.$content('ressources')
        .search(query)
        .where({ categories: { $containsAny: this.selectedCategories } })
        .fetch()
    },
  },
}
</script>