feat: add new filters and facets to global search (#913)

Related to datagouv/data.gouv.fr#1432

Follow up of #907

Replace #847

---------

Co-authored-by: maudetes <maudet.estelle@gmail.com>

Author: ThibaudDauce

datagouv-components/src/components/BouncingDots.vue

@@ -1,10 +1,21 @@
 <template>
-  <span class="inline-flex gap-0.5">
+  <span class="inline-flex gap-0.5 items-end h-2">
     <span
       v-for="i in 3"
       :key="i"
-      class="w-1 h-1 bg-current rounded-full animate-bounce"
-      :style="{ animationDelay: `${(i - 1) * 150}ms` }"
+      class="w-1 h-1 bg-current rounded-full animate-[bounce-dot_0.6s_ease-in-out_infinite]"
+      :style="`animation-delay: ${(i - 1) * 100}ms !important`"
     />
   </span>
 </template>
+
+<style>
+@keyframes bounce-dot {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+</style>

datagouv-components/src/components/Form/AccessTypeSelect.vue

@@ -1,8 +1,8 @@
 <template>
-  <fieldset class="flex flex-col gap-2">
+  <fieldset class="flex flex-col gap-2 min-w-0">
     <legend
       v-if="legend"
-      class="font-bold text-sm leading-6 text-gray-900 mb-2 uppercase"
+      class="fr-label mb-2"
     >
       {{ legend }}
     </legend>

datagouv-components/src/components/RadioGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     class="flex items-center gap-2 p-1 rounded cursor-pointer transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500"
-    :class="isSelected ? 'bg-gray-200' : 'hover:bg-gray-100'"
+    :class="selectedClass"
   >
     <input
       type="radio"
@@ -16,12 +16,13 @@
       v-if="icon"
       class="w-4 h-4"
     />
-    <span class="text-sm flex-1">
+    <span class="text-sm flex-1 min-w-0">
       <slot />
     </span>
     <span
       v-if="loading || count !== undefined"
-      class="bg-gray-200 text-gray-600 text-xs font-bold px-1 py-0.5 rounded"
+      class="text-xs font-bold px-1 py-0.5 rounded"
+      :class="isSelected && highlighted ? 'bg-white/20 text-white' : 'bg-gray-200 text-gray-600'"
     >
       <BouncingDots v-if="loading" />
       <template v-else>{{ formattedCount }}</template>
@@ -40,6 +41,7 @@ type Props = {
   count?: number
   loading?: boolean
   icon?: Component
+  highlighted?: boolean
 }
 
 const props = defineProps<Props>()
@@ -49,6 +51,12 @@ const { locale } = useTranslation()
 
 const isSelected = computed(() => group?.modelValue.value === props.value)
 
+const selectedClass = computed(() => {
+  if (!isSelected.value) return 'hover:bg-gray-100'
+  if (props.highlighted) return 'bg-blue-800 text-white'
+  return 'bg-gray-200'
+})
+
 const formattedCount = computed(() => {
   if (props.count === undefined) return ''
   return new Intl.NumberFormat(locale, { notation: 'compact' }).format(props.count)

datagouv-components/src/components/RadioInput.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex flex-col">
+  <!-- [&_.fr-input-group]:!mb-0 disables DSFR margin-bottom since we use gap for spacing -->
+  <div class="flex flex-col gap-4 [&_.fr-input-group]:!mb-0">
     <slot
       :is-enabled="isBasicFilter"
       :get-order="getBasicOrder"
@@ -19,7 +20,7 @@
       />
       {{ t('Filtres avancés') }}
     </DisclosureButton>
-    <DisclosurePanel class="flex flex-col mt-4">
+    <DisclosurePanel class="flex flex-col gap-4 mt-4 [&_.fr-input-group]:!mb-0">
       <slot
         :is-enabled="isAdvancedFilter"
         :get-order="getAdvancedOrder"

datagouv-components/src/components/Search/BasicAndAdvancedFilters.vue

@@ -0,0 +1,37 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t(`Modalités d'accès`)"
+    :all-label="t('Toutes')"
+    :facets="facets"
+    :loading="loading"
+    name="access_type"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'open', label: t('Téléchargement libre') },
+  { value: 'open_with_account', label: t('Ouvert sous condition') },
+  { value: 'restricted', label: t('Accessible sous habilitation') },
+]
+</script>

datagouv-components/src/components/Search/Filter/AccessTypeFilter.vue

@@ -0,0 +1,40 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Label de donnée')"
+    :all-label="t('Tous')"
+    :facets="facets"
+    :loading="loading"
+    name="badge"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FacetItem } from '../../../types/search'
+import { useFetch } from '../../../functions/api'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const { data: badgesRecord } = await useFetch<Record<string, string>>('/api/1/datasets/badges/', { lazy: true })
+
+const options = computed(() => {
+  if (!badgesRecord.value) return []
+  return Object.entries(badgesRecord.value).map(([value, label]) => ({ value, label }))
+})
+</script>

datagouv-components/src/components/Search/Filter/DatasetBadgeFilter.vue

@@ -0,0 +1,77 @@
+<template>
+  <RadioGroup
+    :model-value="modelValue ?? ''"
+    :name="name"
+    :legend="label"
+    @update:model-value="emit('update:modelValue', $event === '' ? undefined : $event)"
+  >
+    <RadioInput
+      value=""
+      :count="totalCount"
+      :loading="loading"
+    >
+      {{ allLabel }}
+    </RadioInput>
+    <RadioInput
+      v-for="option in options"
+      :key="option.value"
+      :value="option.value"
+      :count="getCount(option.value)"
+      :loading="loading"
+      :highlighted="props.highlightActive && !!props.modelValue"
+    >
+      <span class="flex items-center gap-1 min-w-0 overflow-hidden">
+        <span
+          class="shrink min-w-0 truncate"
+          :title="option.label"
+        >{{ option.label }}</span>
+        <span
+          v-if="option.description"
+          class="flex-1 basis-0 min-w-0 text-gray-400 text-xs truncate"
+        >
+          {{ option.description }}
+        </span>
+      </span>
+    </RadioInput>
+  </RadioGroup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FacetItem } from '../../../types/search'
+import RadioGroup from '../../RadioGroup.vue'
+import RadioInput from '../../RadioInput.vue'
+
+export interface FilterOption {
+  value: string
+  label: string
+  description?: string
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string | undefined
+  options: FilterOption[]
+  label: string
+  name: string
+  allLabel?: string
+  facets?: FacetItem[]
+  loading?: boolean
+  highlightActive?: boolean
+}>(), {
+  allLabel: 'Tous',
+  loading: false,
+  highlightActive: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+function getCount(value: string): number | undefined {
+  if (!props.facets) return undefined
+  const facet = props.facets.find(f => f.name === value)
+  return facet?.count ?? 0
+}
+
+const totalCount = computed(() => getCount('all'))
+</script>

datagouv-components/src/components/Search/Filter/FilterButtonGroup.vue

@@ -0,0 +1,39 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Format de données')"
+    :all-label="t('Tous')"
+    :facets="facets"
+    :loading="loading"
+    name="format_family"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'tabular', label: t('Tabulaires'), description: 'csv, xls, xlsx, ods, parquet...' },
+  { value: 'machine_readable', label: t('Structurées'), description: 'json, rdf, xml, sql...' },
+  { value: 'geographical', label: t('Géographiques'), description: 'geojson, shp, kml...' },
+  { value: 'documents', label: t('Documents'), description: 'pdf, doc, docx, md, txt, html...' },
+  { value: 'other', label: t('Autre') },
+]
+</script>

datagouv-components/src/components/Search/Filter/FormatFamilyFilter.vue

@@ -0,0 +1,37 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Date de mise à jour')"
+    :all-label="t('Toutes')"
+    :facets="facets"
+    :loading="loading"
+    name="last_update_range"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+const options = [
+  { value: 'last_30_days', label: t('Les 30 derniers jours') },
+  { value: 'last_12_months', label: t('Les 12 derniers mois') },
+  { value: 'last_3_years', label: t('Les 3 dernières années') },
+]
+</script>