@datagouv/components-next 1.0.2-dev.19 → 1.0.2-dev.190

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="flex min-h-0 flex-1 flex-col">
+    <PreviewUnavailable v-if="previewError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+      <br>
+      <span class="text-xs break-words">{{ previewError }}</span>
+    </PreviewUnavailable>
+
+    <!-- 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" />
+
+    <!-- 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">
+      <slot />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ofetch } from 'ofetch'
+import { useFetch } from '../../functions/api'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
+import { hasFilterForColumn as _hasFilterForColumn, buildGlobalSearchConditions } from '../../functions/tabular'
+import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
+import TabularSkeleton from './TabularSkeleton.vue'
+import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters } from './types'
+import { provideTabularContext, type ActiveFilter } from './useTabularContext'
+import { useColumnMetadata } from './useColumnMetadata'
+
+const props = 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
+  // 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.
+  initialFilters?: Record<string, ColumnFilters>
+  // Sort seeded on mount, e.g. { column: 'Séance', direction: 'desc' }.
+  // Same ownership rule as `initialFilters`: the explorer owns it afterwards,
+  // and the user can drop it from the active-sort chip.
+  initialSort?: SortConfig
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const dataUrl = computed(() =>
+  `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
+)
+
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+// Fetched before the rows: `dataQuery` reads the column types to build the
+// global search, so the profile has to be resolved by the time it is evaluated.
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+const allColumns = computed(() => profileData.value?.profile?.header ?? [])
+
+// Column metadata (display type, label/icon, null ratio, boolean counts) — pure
+// derivations of the profile, extracted to keep this component focused on data
+// fetching, pagination and filter/column state.
+const {
+  columnTypesMap,
+  getColumnType,
+  getColumnProfile,
+  getColumnDisplay,
+  getNullPercent,
+  getBooleanCounts,
+} = useColumnMetadata(profileData, allColumns, t)
+
+// Sort & filter state
+const sort = ref<SortConfig | null>(props.initialSort ? { ...props.initialSort } : null)
+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 }
+  if (sort.value) {
+    q[`${sort.value.column}__sort`] = sort.value.direction
+  }
+  for (const [col, filter] of Object.entries(filters.value)) {
+    if (filter.in?.length) {
+      q[`${col}__in`] = filter.in.join(',')
+    }
+    if (filter.exact != null) {
+      q[`${col}__exact`] = filter.exact
+    }
+    if (Number.isFinite(filter.min)) {
+      q[`${col}__greater`] = filter.min!
+    }
+    if (Number.isFinite(filter.max)) {
+      q[`${col}__less`] = filter.max!
+    }
+    if (filter.contains) {
+      q[`${col}__contains`] = filter.contains
+    }
+    if (filter.null === 'only') {
+      q[`${col}__isnull`] = ''
+    }
+    else if (filter.null === 'exclude') {
+      q[`${col}__isnotnull`] = ''
+    }
+  }
+  if (props.globalSearch && profileData.value?.profile) {
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+    q.or = '(' + conditions.join(',') + ')'
+  }
+  return q
+})
+
+const { data: tableData, error, status: dataStatus } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
+
+// 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))
+// 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)
+
+// Infinite scroll state
+const allRows = ref<TabularRow[]>([])
+const currentPage = ref(1)
+const hasMore = ref(false)
+const loadingMore = ref(false)
+const generation = ref(0)
+
+watch(() => tableData.value, (data) => {
+  generation.value++
+  if (data) {
+    allRows.value = [...data.data]
+    currentPage.value = 1
+    hasMore.value = data.data.length < data.meta.total
+  }
+}, { immediate: true })
+
+async function loadNextPage() {
+  if (loadingMore.value || !hasMore.value || !tableData.value) return
+  loadingMore.value = true
+  const gen = generation.value
+  try {
+    const nextPage = currentPage.value + 1
+    const query = { ...dataQuery.value, page: nextPage }
+    const data = await ofetch<TabularDataResponse>(dataUrl.value, { params: query })
+    // Discard stale response if filters/sort changed during the fetch
+    if (gen !== generation.value) return
+    allRows.value = [...allRows.value, ...data.data]
+    currentPage.value = nextPage
+    hasMore.value = allRows.value.length < tableData.value.meta.total
+  }
+  finally {
+    loadingMore.value = false
+  }
+}
+
+const totalLines = computed(() => profileData.value?.profile?.total_lines ?? tableData.value?.meta.total ?? 0)
+
+const visibleColumns = ref(new Set(allColumns.value))
+
+watch(allColumns, (cols) => {
+  if (cols.length > 0 && visibleColumns.value.size === 0) {
+    visibleColumns.value = new Set(cols)
+  }
+})
+
+const displayedColumns = computed(() =>
+  allColumns.value.filter(col => visibleColumns.value.has(col)),
+)
+
+const hiddenCount = computed(() =>
+  allColumns.value.length - visibleColumns.value.size,
+)
+
+function toggleColumn(col: string) {
+  const next = new Set(visibleColumns.value)
+  if (next.has(col)) {
+    next.delete(col)
+  }
+  else {
+    next.add(col)
+  }
+  visibleColumns.value = next
+}
+
+function showAllColumns() {
+  visibleColumns.value = new Set(allColumns.value)
+}
+
+function hideAllColumns() {
+  visibleColumns.value = new Set()
+}
+
+function selectOnlyColumn(col: string) {
+  visibleColumns.value = new Set([col])
+}
+
+// Active filters
+const activeFilters = computed<ActiveFilter[]>(() => {
+  const result: ActiveFilter[] = []
+  for (const [col, filter] of Object.entries(filters.value)) {
+    const parts: string[] = []
+    if (filter.in?.length) {
+      parts.push(`= ${filter.in.join(', ')}`)
+    }
+    if (filter.exact != null) {
+      if (getColumnType(col) === 'boolean') {
+        parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+      }
+      else {
+        parts.push(`= ${filter.exact}`)
+      }
+    }
+    if (filter.contains) {
+      parts.push(`${t('contient')} "${filter.contains}"`)
+    }
+    if (filter.null === 'only') {
+      parts.push(t('null uniquement'))
+    }
+    else if (filter.null === 'exclude') {
+      parts.push(t('sans null'))
+    }
+    if (filter.min != null && filter.max != null) {
+      parts.push(`${filter.min} – ${filter.max}`)
+    }
+    else if (filter.min != null) {
+      parts.push(`≥ ${filter.min}`)
+    }
+    else if (filter.max != null) {
+      parts.push(`≤ ${filter.max}`)
+    }
+    if (parts.length) {
+      result.push({ column: col, label: parts.join(', ') })
+    }
+  }
+  return result
+})
+
+function removeFilter(column: string) {
+  const { [column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+function clearAllFilters() {
+  filters.value = {}
+}
+
+function hasFilterForColumn(col: string): boolean {
+  return _hasFilterForColumn(filters.value, col)
+}
+
+// Whether the mobile filter sheet is open (button lives in the toolbar).
+const mobileFilterOpen = ref(false)
+
+// Provide the shared state so child components (active filters, columns menu, rows
+// info, table…) can inject it instead of receiving a wall of props.
+provideTabularContext({
+  tableData,
+  totalLines,
+  allRows,
+  hasMore,
+  loadNextPage,
+  isRefreshing,
+  sort,
+  filters,
+  activeFilters,
+  removeFilter,
+  clearAllFilters,
+  hasFilterForColumn,
+  allColumns,
+  visibleColumns,
+  displayedColumns,
+  hiddenCount,
+  toggleColumn,
+  showAllColumns,
+  hideAllColumns,
+  selectOnlyColumn,
+  mobileFilterOpen,
+  columnTypesMap,
+  getColumnType,
+  getColumnProfile,
+  getColumnDisplay,
+  getNullPercent,
+  getBooleanCounts,
+})
+</script>

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <!-- Sort -->
+    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-black/10 text-xs">
+      <span class="text-gray-plain">{{ t('Trier') }}</span>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'asc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowUpLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('asc')"
+      >
+        {{ t('Croissant') }}
+      </BrandedButton>
+      <BrandedButton
+        :color="sort?.column === column && sort?.direction === 'desc' ? 'primary' : 'tertiary'"
+        size="2xs"
+        :icon="RiArrowDownLine"
+        keep-margins-even-without-borders
+        @click="toggleSort('desc')"
+      >
+        {{ t('Décroissant') }}
+      </BrandedButton>
+    </div>
+
+    <!-- Null filter with progress bar -->
+    <div
+      v-if="columnProfile && columnProfile.nb_missing_values > 0"
+      class="px-3 py-2 border-b border-black/10 space-y-1.5"
+    >
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-gray-plain whitespace-nowrap">
+          <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
+          null
+          <span class="text-gray-low">({{ nullPercent }})</span>
+        </span>
+        <ProgressBar
+          :value="columnProfile.nb_missing_values"
+          :max="totalLines"
+          bar-class="bg-gray-low"
+          class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
+        />
+      </div>
+      <div class="flex items-center justify-end gap-0.5">
+        <BrandedButton
+          :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('only')"
+        >
+          {{ t('seul.') }}
+        </BrandedButton>
+        <BrandedButton
+          :color="nullFilter === 'exclude' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('exclude')"
+        >
+          {{ t('exclure') }}
+        </BrandedButton>
+      </div>
+    </div>
+
+    <!-- Search (contains) or date filter -->
+    <div
+      v-if="columnType !== 'boolean'"
+      class="px-3 py-2 border-b border-black/10"
+    >
+      <div class="relative">
+        <component
+          :is="searchField.icon"
+          class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
+          aria-hidden="true"
+        />
+        <input
+          v-model="search"
+          :type="searchField.type"
+          class="w-full h-8 text-sm border border-transparent rounded-lg py-1 pl-8 pr-3 bg-[#f3f3f5] focus:outline-none focus:border-new-primary"
+          :placeholder="searchField.placeholder"
+        >
+      </div>
+    </div>
+
+    <!-- Categorical values -->
+    <div
+      v-if="columnType === 'categorical' && columnProfile?.tops && filteredTops.length"
+      class="max-h-56 overflow-auto p-1"
+    >
+      <button
+        v-for="top in filteredTops"
+        :key="top.value"
+        class="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer text-xs select-none"
+        :class="isValueSelected(top.value) && 'bg-gray-50'"
+        @click="toggleValue(top.value)"
+      >
+        <span
+          class="flex size-4 shrink-0 items-center justify-center rounded border"
+          :class="isValueSelected(top.value) ? 'border-new-primary bg-new-primary text-white' : 'border-gray-low'"
+        >
+          <RiCheckLine
+            v-if="isValueSelected(top.value)"
+            class="size-3"
+            aria-hidden="true"
+          />
+        </span>
+        <span class="flex-1 truncate text-left text-xs">
+          {{ top.value ?? 'null' }}
+        </span>
+        <span class="font-mono text-xs text-gray-low tabular-nums shrink-0">{{ top.count }}</span>
+      </button>
+    </div>
+
+    <!-- Boolean filter -->
+    <div
+      v-if="columnType === 'boolean'"
+      class="px-3 py-3 space-y-1.5"
+    >
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === true ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(true)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === true ? 'bg-new-success-light' : 'bg-new-success'"
+        />
+        <span class="flex-1 text-left">{{ t('Vrai') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === true ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.trueCount }}</span>
+      </button>
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === false ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(false)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === false ? 'bg-new-warning-light' : 'bg-new-error'"
+        />
+        <span class="flex-1 text-left">{{ t('Faux') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === false ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.falseCount }}</span>
+      </button>
+    </div>
+
+    <!-- Number range -->
+    <form
+      v-if="(columnType === 'number' || columnType === 'year') && columnProfile"
+      class="px-3 py-2 border-b border-black/10 space-y-2"
+      @submit.prevent="applyRange"
+    >
+      <div class="flex items-center gap-2 text-xs text-gray-plain">
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
+        <span class="text-gray-medium">—</span>
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <input
+          v-model.number="rangeMin"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMin)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+        <span class="text-gray-medium text-xs">–</span>
+        <input
+          v-model.number="rangeMax"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMax)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
+        <BrandedButton
+          color="tertiary"
+          size="2xs"
+          type="button"
+          keep-margins-even-without-borders
+          @click="clearRange"
+        >
+          {{ t('Effacer') }}
+        </BrandedButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import {
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiSearchLine,
+  RiCalendarLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ProgressBar from '../ProgressBar.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+const { formatNumber } = useFormatTabular()
+
+const search = ref('')
+
+// Numbers, years and dates are matched exactly (the API has no `contains` for
+// them), so the field offers the matching native picker instead of a text search.
+const searchField = computed(() => {
+  switch (props.columnType) {
+    case 'date': return { icon: RiCalendarLine, type: 'date', placeholder: '' }
+    case 'number':
+    case 'year': return { icon: RiSearchLine, type: 'number', placeholder: t('Rechercher...') }
+    default: return { icon: RiSearchLine, type: 'text', placeholder: t('Rechercher...') }
+  }
+})
+
+watchDebounced(search, (q) => {
+  const existing = filters.value[props.column] ?? {}
+  const operator = props.columnType === 'number' || props.columnType === 'year' || props.columnType === 'date' ? 'exact' : 'contains'
+  if (q) {
+    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
+  }
+  else {
+    const { [operator]: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}, { debounce: 300 })
+
+// Null filter helpers
+const nullFilter = computed(() => filters.value[props.column]?.null ?? null)
+
+function toggleNullFilter(mode: 'only' | 'exclude') {
+  const existing = filters.value[props.column] ?? {}
+  if (existing.null === mode) {
+    const { null: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, null: mode } }
+  }
+}
+
+// Categorical filter helpers
+const selectedValues = computed(() => filters.value[props.column]?.in ?? [])
+
+const filteredTops = computed(() => {
+  if (!props.columnProfile?.tops) return []
+  if (!search.value) return props.columnProfile.tops
+  const q = search.value.toLowerCase()
+  return props.columnProfile.tops.filter(top =>
+    (top.value ?? '').toLowerCase().includes(q),
+  )
+})
+
+function isValueSelected(value: string) {
+  return selectedValues.value.includes(value)
+}
+
+function toggleValue(value: string) {
+  const current = selectedValues.value
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+  const existing = filters.value[props.column] ?? {}
+  filters.value = { ...filters.value, [props.column]: { ...existing, in: next } }
+}
+
+// Number range filter helpers
+const profileMin = computed(() => props.columnProfile?.min ?? 0)
+const profileMax = computed(() => props.columnProfile?.max ?? 100)
+const rangeMin = ref<number | undefined>(undefined)
+const rangeMax = ref<number | undefined>(undefined)
+
+function applyRange() {
+  const existing = filters.value[props.column] ?? {}
+  const next = { ...existing }
+  if (Number.isFinite(rangeMin.value)) {
+    next.min = rangeMin.value
+  }
+  else {
+    delete next.min
+  }
+  if (Number.isFinite(rangeMax.value)) {
+    next.max = rangeMax.value
+  }
+  else {
+    delete next.max
+  }
+  filters.value = { ...filters.value, [props.column]: next }
+}
+
+function clearRange() {
+  rangeMin.value = undefined
+  rangeMax.value = undefined
+  const existing = filters.value[props.column]
+  if (existing) {
+    const { min: _min, max: _max, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}
+
+// Boolean filter helpers
+const booleanFilter = computed<boolean | null>(() => {
+  const f = filters.value[props.column]
+  if (!f || f.exact == null) return null
+  return f.exact === 'true'
+})
+
+function toggleBooleanFilter(value: boolean) {
+  const existing = filters.value[props.column] ?? {}
+  const strValue = String(value)
+  if (existing.exact === strValue) {
+    const { exact: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, exact: strValue } }
+  }
+}
+
+function toggleSort(direction: SortDirection) {
+  if (sort.value?.column === props.column && sort.value.direction === direction) {
+    sort.value = null
+  }
+  else {
+    sort.value = { column: props.column, direction }
+  }
+}
+</script>