@datagouv/components-next 1.0.2-dev.231 → 1.0.2-dev.232

package/src/components/TabularExplorer/TabularActiveFilters.vue

@@ -1,79 +1,119 @@
 <template>
   <div
-    v-if="activeFilters.length > 0 || sort"
-    class="flex flex-wrap items-center gap-1.5"
+    v-if="activeFilters.length > 0 || sort || globalSearch"
+    class="flex items-center justify-between gap-2"
   >
-    <!-- Sort chip -->
-    <span
-      v-if="sort"
-      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
-    >
-      <component
-        :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
-        class="size-3.5"
-        aria-hidden="true"
-      />
-      <span class="font-medium">{{ sort.column }}</span>
-      <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
-      <button
-        :aria-label="t('Supprimer le tri')"
-        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
-        @click="sort = null"
+    <div class="flex min-w-0 flex-wrap items-center gap-1.5">
+      <!-- Sort chip -->
+      <span
+        v-if="sort"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
       >
-        <RiCloseLine
+        <component
+          :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
           class="size-3.5"
           aria-hidden="true"
         />
-      </button>
-    </span>
+        <span class="font-medium">{{ sort.column }}</span>
+        <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
+        <button
+          :aria-label="t('Supprimer le tri')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="sort = null"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
 
-    <!-- Filter chips -->
-    <span
-      v-for="af in activeFilters"
-      :key="af.column"
-      :data-testid="`active-filter-${af.column}`"
-      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
-    >
-      <component
-        :is="getColumnDisplay(af.column).icon"
-        class="size-3.5"
-        aria-hidden="true"
-      />
-      <span class="font-medium">{{ af.column }}</span>
-      <span>{{ af.label }}</span>
-      <button
-        :aria-label="t('Supprimer ce filtre')"
-        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
-        @click="removeFilter(af.column)"
+      <!-- Global search chip -->
+      <span
+        v-if="globalSearch"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
       >
-        <RiCloseLine
+        <RiSearchLine
           class="size-3.5"
           aria-hidden="true"
         />
-      </button>
-    </span>
+        <span class="font-medium">{{ t('Toutes les colonnes') }}</span>
+        <span>{{ t('contient') }} "{{ globalSearch }}"</span>
+        <button
+          :aria-label="t('Supprimer la recherche')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="globalSearch = ''"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
 
-    <!-- Clear all -->
-    <BrandedButton
-      v-if="withClear"
-      color="tertiary"
-      size="2xs"
-      :icon="RiCloseLine"
-      @click="clearAllFilters(); sort = null"
-    >
-      {{ t('Tout effacer') }}
-    </BrandedButton>
+      <!-- Filter chips -->
+      <span
+        v-for="af in activeFilters"
+        :key="af.column"
+        :data-testid="`active-filter-${af.column}`"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+      >
+        <component
+          :is="getColumnDisplay(af.column).icon"
+          class="size-3.5"
+          aria-hidden="true"
+        />
+        <span class="font-medium">{{ af.column }}</span>
+        <span>{{ af.label }}</span>
+        <button
+          :aria-label="t('Supprimer ce filtre')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="removeFilter(af.column)"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
+    </div>
+
+    <div class="flex shrink-0 items-center gap-1">
+      <!-- A sort alone narrows nothing: the file would be the whole resource, which
+           the resource's own download already gives. And with no matching row, the
+           API answers an empty file, without even the header. -->
+      <BrandedButton
+        v-if="(activeFilters.length > 0 || globalSearch) && tableData?.meta.total"
+        color="tertiary"
+        size="2xs"
+        :icon="RiDownloadLine"
+        :href="filteredDownloadUrl"
+      >
+        {{ t('Télécharger les données filtrées') }}
+      </BrandedButton>
+      <!-- Clear all -->
+      <BrandedButton
+        v-if="withClear"
+        color="tertiary"
+        size="2xs"
+        :icon="RiCloseLine"
+        @click="clearAllFilters(); sort = null"
+      >
+        {{ t('Tout effacer') }}
+      </BrandedButton>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { RiArrowDownLine, RiArrowUpLine, RiCloseLine } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiCloseLine, RiDownloadLine, RiSearchLine } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useTabularContext } from './useTabularContext'
 
+// Framing (borders, padding) belongs to the call site, like the toolbar's.
 defineProps<{ withClear?: boolean }>()
 
 const { t } = useTranslation()
-const { activeFilters, sort, removeFilter, clearAllFilters, getColumnDisplay } = useTabularContext()
+const { tableData, activeFilters, sort, globalSearch, removeFilter, clearAllFilters, getColumnDisplay, filteredDownloadUrl } = useTabularContext()
 </script>

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -8,11 +8,16 @@
 
     <!-- Same skeleton as the Suspense fallback above us: in both cases the slot isn't
          rendered yet, so its toolbar is a placeholder too. -->
-    <TabularSkeleton v-else-if="previewLoading" />
+    <TabularSkeleton
+      v-else-if="previewLoading"
+      :search-input
+    />
 
     <!-- Loaded: the consumer composes the parts (toolbar, table, mobile sheet) from
-         the provided context, so it controls the framing and layout. -->
-    <template v-else-if="tableData && profileData">
+         the provided context, so it controls the framing and layout. Once loaded, it
+         stays: a failed search or filter only empties the rows, so the controls that
+         caused it remain there to undo it. -->
+    <template v-else-if="(tableData || loadedOnce) && profileData">
       <slot />
     </template>
   </div>
@@ -32,15 +37,11 @@ import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters, DateFi
 import { provideTabularContext, type ActiveFilter } from './useTabularContext'
 import { useColumnMetadata } from './useColumnMetadata'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   resourceId: string
-  // When set, searches across multiple columns using the Tabular API's or(...)
-  // parameter. Text and categorical columns get a __contains filter; number
-  // columns get a __exact filter (since __contains is not supported for numbers
-  // by the API). Year, date and boolean columns are excluded.
-  // Note: combined via AND with any existing column-specific `contains` filters,
-  // so it acts as an additional narrowing constraint, not a replacement.
-  globalSearch?: string
+  // Whether the toolbar shows its search field. A page with a search of its own
+  // hides it and drives the search through `v-model:global-search` instead.
+  searchInput?: boolean
   // Filters seeded on mount, e.g. { 'Administration': { contains: 'Ministère' } }.
   // The explorer owns them afterwards: later changes to this prop are ignored,
   // so pass a fresh instance (or remount) to reset them.
@@ -49,7 +50,18 @@ const props = defineProps<{
   // Same ownership rule as `initialFilters`: the explorer owns it afterwards,
   // and the user can drop it from the active-sort chip.
   initialSort?: SortConfig
-}>()
+}>(), {
+  searchInput: true,
+})
+
+// Searches across multiple columns using the Tabular API's or(...) parameter. Text
+// and categorical columns get a __contains filter; number columns get a __exact
+// filter (since __contains is not supported for numbers by the API). Year, date and
+// boolean columns are excluded.
+// Combined via AND with any column-specific `contains` filter, so it acts as an
+// additional narrowing constraint, not a replacement.
+// Owned here like the filters; a parent binds it to drive or keep it.
+const globalSearch = defineModel<string>('globalSearch', { default: '' })
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
@@ -85,8 +97,10 @@ const filters = ref<Record<string, ColumnFilters>>({ ...props.initialFilters })
 
 const PAGE_SIZE = 50
 
-const dataQuery = computed(() => {
-  const q: Record<string, string | number> = { page: 1, page_size: PAGE_SIZE }
+// What the table shows (sort, filters, search), apart from its pagination: the
+// filtered download sends the very same params, so the file can't drift from the table.
+const tableQuery = computed(() => {
+  const q: Record<string, string | number> = {}
   if (sort.value) {
     q[`${sort.value.column}__sort`] = sort.value.direction
   }
@@ -116,21 +130,28 @@ const dataQuery = computed(() => {
       Object.assign(q, buildDateFilterParams(col, filter.date))
     }
   }
-  if (props.globalSearch && profileData.value?.profile) {
-    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+  if (globalSearch.value && profileData.value?.profile) {
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, globalSearch.value)
     q.or = '(' + conditions.join(',') + ')'
   }
   return q
 })
 
+const dataQuery = computed(() => ({ page: 1, page_size: PAGE_SIZE, ...tableQuery.value }))
+
 const { data: tableData, error, status: dataStatus } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
+// A failed request clears `tableData`: telling a resource that can't be previewed
+// from a search or filter the API rejects needs to know whether it ever loaded.
+const loadedOnce = ref(!!tableData.value)
+
 // The component renders nothing useful until the profile is available
 // (allColumns is derived from it). Surface a clear loading / error state
 // so we don't end up with an empty table + a spinner running forever.
 const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
-const previewError = computed(() => error.value || profileError.value)
-const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
+const previewError = computed(() => profileError.value || (!loadedOnce.value && error.value))
+const queryFailed = computed(() => loadedOnce.value && !!error.value)
+const previewLoading = computed(() => !previewError.value && (profileLoading.value || (!tableData.value && !loadedOnce.value)))
 // A search / filter / sort change refetches while the previous rows stay on
 // screen: without a signal, the table looks unchanged for several seconds.
 const isRefreshing = computed(() => dataStatus.value === 'pending' && !previewLoading.value)
@@ -145,10 +166,15 @@ const generation = ref(0)
 watch(() => tableData.value, (data) => {
   generation.value++
   if (data) {
+    loadedOnce.value = true
     allRows.value = [...data.data]
     currentPage.value = 1
     hasMore.value = data.data.length < data.meta.total
   }
+  else if (queryFailed.value) {
+    allRows.value = []
+    hasMore.value = false
+  }
 }, { immediate: true })
 
 async function loadNextPage() {
@@ -275,8 +301,18 @@ function removeFilter(column: string) {
   filters.value = rest
 }
 
+// The Tabular API's CSV export takes the params of the data endpoint and ignores the
+// pagination: the file holds every filtered row, not just the pages loaded on screen.
+// All the columns, not only the displayed ones: the API splits `columns` on every
+// comma, so a column whose name holds one can't be requested by name.
+const filteredDownloadUrl = computed(() => {
+  const params = new URLSearchParams(Object.entries(tableQuery.value).map(([key, value]) => [key, String(value)]))
+  return `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/csv/?${params}`
+})
+
 function clearAllFilters() {
   filters.value = {}
+  globalSearch.value = ''
 }
 
 function hasFilterForColumn(col: string): boolean {
@@ -300,6 +336,10 @@ provideTabularContext({
   activeFilters,
   removeFilter,
   clearAllFilters,
+  globalSearch,
+  searchInput: computed(() => props.searchInput),
+  queryFailed,
+  filteredDownloadUrl,
   hasFilterForColumn,
   allColumns,
   visibleColumns,

package/src/components/TabularExplorer/TabularSearchInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <label class="flex h-8 w-[clamp(160px,22vw,220px)] min-w-0 shrink-0 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
+    <RiSearchLine
+      class="size-3.5 shrink-0 text-gray-medium"
+      aria-hidden="true"
+    />
+    <input
+      v-model="text"
+      type="search"
+      class="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-gray-medium [&::-webkit-search-cancel-button]:appearance-none"
+      :aria-label="t('Rechercher une valeur')"
+      :placeholder="t('Rechercher une valeur')"
+    >
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { RiSearchLine } from '@remixicon/vue'
+import { useComponentsConfig } from '../../config'
+import { useDebouncedRef } from '../../composables/useDebouncedRef'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const { globalSearch } = useTabularContext()
+
+// Only typing is debounced: each settled value is a request to the Tabular API.
+const text = ref(globalSearch.value)
+const { debounced } = useDebouncedRef(text, config.searchDebounce ?? 300)
+watch(debounced, (value) => {
+  globalSearch.value = value.trim()
+})
+
+// Cleared from elsewhere (its chip, "Tout effacer"): the field follows.
+watch(globalSearch, (value) => {
+  if (value !== text.value.trim()) text.value = value
+})
+</script>

package/src/components/TabularExplorer/TabularSkeleton.vue

@@ -1,9 +1,13 @@
 <template>
-  <!-- Toolbar row — mirrors TabularToolbar: the mobile filter button on the left (it
-       only shows below md), and the columns menu (h-6 button, which drives the row
-       height) plus the rows info on the right. The active-filters area stays empty
-       until the user filters, so nothing stands in for it. -->
+  <!-- Toolbar row — mirrors TabularToolbar: the search field and the mobile filter
+       button (it only shows below md) on the left, the columns menu plus the rows info
+       on the right. The active-filters line stays empty until the user filters, so
+       nothing stands in for it. -->
   <div class="animate-pulse-placeholder flex shrink-0 items-center gap-2 border-b border-gray-default p-2">
+    <div
+      v-if="searchInput"
+      class="h-8 w-[clamp(160px,22vw,220px)] shrink-0 rounded bg-gray-200"
+    />
     <div class="h-6 w-24 rounded bg-gray-200 md:hidden" />
     <div class="flex flex-1 items-center justify-end gap-4">
       <div class="h-6 w-24 rounded bg-gray-200" />
@@ -83,10 +87,14 @@
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
 
-defineProps<{
+withDefaults(defineProps<{
   // Fill the available height (fullscreen) instead of the default capped height.
   fill?: boolean
-}>()
+  // Same as the explorer's: whether the toolbar has its search field.
+  searchInput?: boolean
+}>(), {
+  searchInput: true,
+})
 
 const { t } = useTranslation()
 </script>

package/src/components/TabularExplorer/TabularTable.vue

@@ -113,11 +113,12 @@
               class="py-16 text-center"
             >
               <div class="flex flex-col items-center gap-2">
-                <RiSearchLine
+                <component
+                  :is="queryFailed ? RiErrorWarningLine : RiSearchLine"
                   class="size-8 text-gray-low"
                   aria-hidden="true"
                 />
-                <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
+                <span class="text-sm text-gray-low">{{ emptyMessage }}</span>
               </div>
             </td>
           </tr>
@@ -175,11 +176,12 @@
         class="py-16 text-center"
       >
         <div class="flex flex-col items-center gap-2">
-          <RiSearchLine
+          <component
+            :is="queryFailed ? RiErrorWarningLine : RiSearchLine"
             class="size-8 text-gray-low"
             aria-hidden="true"
           />
-          <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
+          <span class="text-sm text-gray-low">{{ emptyMessage }}</span>
         </div>
       </div>
       <div
@@ -256,7 +258,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useElementSize, useScroll } from '@vueuse/core'
-import { RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiSearchLine } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiErrorWarningLine, RiSearchLine } from '@remixicon/vue'
 import AppLink from '../AppLink.vue'
 import BrandedButton from '../BrandedButton.vue'
 import InfiniteLoader from '../InfiniteLoader.vue'
@@ -300,8 +302,13 @@ const {
   getColumnDisplay,
   getNullPercent,
   getBooleanCounts,
+  queryFailed,
 } = useTabularContext()
 
+const emptyMessage = computed(() => queryFailed.value
+  ? t('Les données n\'ont pas pu être chargées avec cette recherche ou ces filtres.')
+  : t('Aucun résultat trouvé.'))
+
 function getRowHref(row: TabularRow): string | undefined {
   return props.rowHref?.href(row)
 }

package/src/components/TabularExplorer/TabularToolbar.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="flex items-center gap-2">
     <div class="flex min-w-0 flex-1 items-center gap-1.5">
+      <TabularSearchInput v-if="searchInput" />
       <TabularMobileFilterButton class="md:hidden" />
-      <div class="hidden md:block">
-        <TabularActiveFilters with-clear />
-      </div>
     </div>
     <div class="flex shrink-0 items-center gap-4">
       <TabularColumnsMenu />
@@ -14,12 +12,17 @@
 </template>
 
 <script setup lang="ts">
-import TabularActiveFilters from './TabularActiveFilters.vue'
 import TabularColumnsMenu from './TabularColumnsMenu.vue'
 import TabularMobileFilterButton from './TabularMobileFilterButton.vue'
 import TabularRowsInfo from './TabularRowsInfo.vue'
+import TabularSearchInput from './TabularSearchInput.vue'
+import { useTabularContext } from './useTabularContext'
 
 // Framing (borders, padding, spacing) belongs to the call site: this toolbar sits in a
 // bordered panel in the resource viewer and in the page flow on the standalone explore
 // pages. Single root element, so the caller's `class` merges onto it.
+// The active filters are not in here: they get a line of their own, placed by the
+// call site under the toolbar (<TabularActiveFilters>).
+
+const { searchInput } = useTabularContext()
 </script>

package/src/components/TabularExplorer/useTabularContext.ts

@@ -42,7 +42,17 @@ export type TabularContext = {
   filters: Ref<Record<string, ColumnFilters>>
   activeFilters: ComputedRef<ActiveFilter[]>
   removeFilter: (column: string) => void
+  // Also empties the global search.
   clearAllFilters: () => void
+
+  // Global search across all columns, and whether the toolbar shows its field
+  globalSearch: Ref<string>
+  searchInput: ComputedRef<boolean>
+  // The last request was rejected after a first successful load: the controls stay,
+  // the rows are replaced by the error.
+  queryFailed: ComputedRef<boolean>
+  // CSV export of the rows matching the filters and search
+  filteredDownloadUrl: ComputedRef<string>
   hasFilterForColumn: (col: string) => boolean
 
   // Columns visibility

package/src/composables/useResourceCapabilities.ts

@@ -82,6 +82,10 @@ export function useResourceCapabilities(
     return 'unavailable'
   })
 
+  // Whether opening the resource shows its content (a preview or a map), not just
+  // its metadata.
+  const hasPreview = computed(() => previewKind.value !== 'unavailable' || !!hasPmtiles.value || ogcWms.value)
+
   const tabsOptions = computed(() => {
     const r = toValue(resource)
     const options = []
@@ -122,6 +126,7 @@ export function useResourceCapabilities(
 
   return {
     previewKind,
+    hasPreview,
     hasTabularData,
     hasPmtiles,
     hasPmtilesError,

package/src/main.ts

@@ -109,6 +109,7 @@ import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
 import Listbox from './components/Form/Listbox.vue'
 import InfiniteLoader from './components/InfiniteLoader.vue'
+import TabularActiveFilters from './components/TabularExplorer/TabularActiveFilters.vue'
 import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import TabularMobileFilters from './components/TabularExplorer/TabularMobileFilters.vue'
 import TabularTable from './components/TabularExplorer/TabularTable.vue'
@@ -422,6 +423,7 @@ export {
   SelectGroup,
   Listbox,
   InfiniteLoader,
+  TabularActiveFilters,
   TabularExplorer,
   TabularMobileFilters,
   TabularTable,