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

package/src/components/TabularExplorer/useTabularUrlState.ts

@@ -0,0 +1,69 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+import { useRoute } from 'vue-router'
+import type { LocationQueryValue } from 'vue-router'
+import { useComponentsConfig } from '../../config'
+import {
+  TABULAR_FILTERS_PARAM,
+  TABULAR_SEARCH_PARAM,
+  TABULAR_SORT_PARAM,
+  filtersFromUrlQuery,
+  filtersToUrlQuery,
+  searchFromUrlParam,
+  sortFromUrlParam,
+  sortToUrlParam,
+} from '../../functions/tabular'
+import type { ColumnFilters, SortConfig, TabularUrlAlias } from './types'
+
+type QueryRef = Ref<LocationQueryValue | LocationQueryValue[] | undefined>
+
+/**
+ * Sort, filters and global search of the explorer, stored in the URL: going back
+ * to the page finds them again, and a link to it shares them. Only the `columns`
+ * of the resource are read from it.
+ *
+ * Every param goes through `useRouteQuery`, which batches the writes of a tick
+ * into a single `router.replace`: a change never stacks history entries, and
+ * moving a filter from an alias to the JSON param is one navigation, not two.
+ */
+export function useTabularUrlState(
+  aliases: Record<string, TabularUrlAlias>,
+  defaultSort: SortConfig | null,
+  columns: MaybeRefOrGetter<readonly string[]>,
+) {
+  const config = useComponentsConfig()
+  const route = (config.useRoute ?? useRoute)()
+  const filterRefs = [...Object.keys(aliases), TABULAR_FILTERS_PARAM]
+    .map(param => [param, useRouteQuery(param, undefined, { route }) as QueryRef] as const)
+  const sortRef = useRouteQuery(TABULAR_SORT_PARAM, undefined, { route }) as QueryRef
+  const searchRef = useRouteQuery(TABULAR_SEARCH_PARAM, undefined, { route }) as QueryRef
+
+  const filters = computed<Record<string, ColumnFilters>>({
+    get: () => filtersFromUrlQuery(
+      Object.fromEntries(filterRefs.map(([param, ref]) => [param, ref.value])),
+      aliases,
+      toValue(columns),
+    ),
+    set: (value) => {
+      const query = filtersToUrlQuery(value, aliases)
+      for (const [param, ref] of filterRefs) ref.value = query[param]
+    },
+  })
+
+  const sort = computed<SortConfig | null>({
+    get: () => sortFromUrlParam(sortRef.value, defaultSort, toValue(columns)),
+    set: (value) => {
+      sortRef.value = sortToUrlParam(value, defaultSort)
+    },
+  })
+
+  const globalSearch = computed<string>({
+    get: () => searchFromUrlParam(searchRef.value),
+    set: (value) => {
+      searchRef.value = value || undefined
+    },
+  })
+
+  return { filters, sort, globalSearch }
+}

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/config.ts

@@ -1,6 +1,7 @@
 import { inject, type Component, type InjectionKey } from 'vue'
 import type { UseFetchFunction } from './functions/api.types'
 import type { $Fetch, FetchOptions } from 'ofetch'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
@@ -43,6 +44,12 @@ export type PluginConfig = {
   textClamp?: string | Component | null
   appLink?: Component | null
   clientOnly?: Component | null
+  /**
+   * The route of the page a component is rendered in. vue-router's `useRoute` is the
+   * global one: while the next page loads, the page being left is still mounted and
+   * already sees the next URL. Nuxt's `useRoute` keeps each page on its own route.
+   */
+  useRoute?: () => RouteLocationNormalizedLoaded
   searchDebounce?: number
   forumUrl?: string
 }

package/src/functions/tabular.ts

@@ -23,7 +23,9 @@ import {
 } from '@remixicon/vue'
 import { useTranslation } from '../composables/useTranslation'
 import type { TranslationFunction } from '../composables/useTranslation'
-import type { ColumnFilters, ColumnType, DateFilter } from '../components/TabularExplorer/types'
+import type { LocationQueryValue } from 'vue-router'
+import { DATE_FILTER_OPERATORS } from '../components/TabularExplorer/types'
+import type { ColumnFilters, ColumnType, DateFilter, DateFilterOperator, SortConfig, TabularUrlAlias } from '../components/TabularExplorer/types'
 import { parseDateValue } from './dates'
 
 export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
@@ -126,6 +128,137 @@ export function buildCellValueFilter(columnType: ColumnType, value: unknown, exi
   }
 }
 
+export const TABULAR_FILTERS_PARAM = 'filters'
+export const TABULAR_SORT_PARAM = 'sort'
+export const TABULAR_SEARCH_PARAM = 'q'
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function firstQueryValue(value: LocationQueryValue | LocationQueryValue[] | undefined): string | undefined {
+  const first = Array.isArray(value) ? value[0] : value
+  return first ?? undefined
+}
+
+/**
+ * The criteria of a column filter that actually filter something, read from any
+ * value: the ones from the URL can be anything a user typed. Empty criteria are
+ * dropped too, so that a column left with none of them has no key left.
+ */
+export function normalizeColumnFilters(value: unknown): ColumnFilters {
+  if (!isRecord(value)) return {}
+  const filter: ColumnFilters = {}
+  if (Array.isArray(value.in) && value.in.length && value.in.every(v => typeof v === 'string')) filter.in = value.in
+  if (typeof value.exact === 'string' && value.exact) filter.exact = value.exact
+  if (typeof value.min === 'number' && Number.isFinite(value.min)) filter.min = value.min
+  if (typeof value.max === 'number' && Number.isFinite(value.max)) filter.max = value.max
+  if (typeof value.contains === 'string' && value.contains) filter.contains = value.contains
+  if (value.null === 'only' || value.null === 'exclude') filter.null = value.null
+  const date = value.date
+  if (isRecord(date) && DATE_FILTER_OPERATORS.includes(date.operator as DateFilterOperator) && typeof date.start === 'string') {
+    filter.date = { operator: date.operator as DateFilterOperator, start: date.start }
+    if (typeof date.end === 'string') filter.date.end = date.end
+  }
+  return filter
+}
+
+/**
+ * The URL params holding `filters`. A column whose only criterion is the one of
+ * an alias is written under that alias; every other column goes, whole, into a
+ * single JSON param.
+ */
+export function filtersToUrlQuery(
+  filters: Record<string, ColumnFilters>,
+  aliases: Record<string, TabularUrlAlias>,
+): Record<string, string> {
+  const query: Record<string, string> = {}
+  const rest: Record<string, ColumnFilters> = {}
+  for (const [column, raw] of Object.entries(filters)) {
+    const filter = normalizeColumnFilters(raw)
+    const criteria = Object.keys(filter)
+    if (!criteria.length) continue
+    const alias = criteria.length === 1
+      ? Object.entries(aliases).find(([, a]) => a.column === column && a.operator === criteria[0])
+      : undefined
+    const aliasValue = alias && filter[alias[1].operator]
+    if (alias && aliasValue) query[alias[0]] = aliasValue
+    else rest[column] = filter
+  }
+  if (Object.keys(rest).length) query[TABULAR_FILTERS_PARAM] = JSON.stringify(rest)
+  return query
+}
+
+/**
+ * The filters a URL holds, restricted to the `columns` of the resource: the
+ * Tabular API rejects a query naming any other column, and the explorer would be
+ * left without its controls to remove it. Such a column comes from a link to a
+ * resource since re-uploaded with other columns, or from a hand-edited URL.
+ */
+export function filtersFromUrlQuery(
+  query: Record<string, LocationQueryValue | LocationQueryValue[] | undefined>,
+  aliases: Record<string, TabularUrlAlias>,
+  columns: readonly string[],
+): Record<string, ColumnFilters> {
+  const filters: Record<string, ColumnFilters> = {}
+  for (const [param, { column, operator }] of Object.entries(aliases)) {
+    const value = firstQueryValue(query[param])
+    if (value && columns.includes(column)) filters[column] = { [operator]: value }
+  }
+  const json = firstQueryValue(query[TABULAR_FILTERS_PARAM])
+  if (!json) return filters
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(json)
+  }
+  catch {
+    return filters
+  }
+  if (!isRecord(parsed)) return filters
+  for (const [column, raw] of Object.entries(parsed)) {
+    const filter = normalizeColumnFilters(raw)
+    if (Object.keys(filter).length && columns.includes(column)) filters[column] = filter
+  }
+  return filters
+}
+
+export function searchFromUrlParam(param: LocationQueryValue | LocationQueryValue[] | undefined): string {
+  return firstQueryValue(param) ?? ''
+}
+
+export function isSameSort(a: SortConfig | null | undefined, b: SortConfig | null | undefined): boolean {
+  return a?.column === b?.column && a?.direction === b?.direction
+}
+
+/**
+ * The URL param holding `sort`, in the `-column` for descending convention of
+ * the udata API. The default sort stays out of the URL; dropping it is written as
+ * an empty value, since an absent param already means "the default sort".
+ */
+export function sortToUrlParam(sort: SortConfig | null, defaultSort: SortConfig | null): string | undefined {
+  if (isSameSort(sort, defaultSort)) return undefined
+  if (!sort) return ''
+  return sort.direction === 'desc' ? `-${sort.column}` : sort.column
+}
+
+/**
+ * The sort a URL holds. One on a column the resource does not have falls back to
+ * the default sort, for the same reason as in `filtersFromUrlQuery`.
+ */
+export function sortFromUrlParam(
+  param: LocationQueryValue | LocationQueryValue[] | undefined,
+  defaultSort: SortConfig | null,
+  columns: readonly string[],
+): SortConfig | null {
+  const value = firstQueryValue(param)
+  if (value === undefined) return defaultSort
+  if (value === '') return null
+  const sort: SortConfig = value.startsWith('-')
+    ? { column: value.slice(1), direction: 'desc' }
+    : { column: value, direction: 'asc' }
+  return columns.includes(sort.column) ? sort : defaultSort
+}
+
 export type TypeDisplay = {
   icon: Component
   label: string

package/src/main.ts

@@ -24,7 +24,7 @@ import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
 import type { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, OrFilters, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm, CombinedSort, ColumnDefinition, ColumnsDefinition } from './types/visualizations'
-import type { ColumnFilters, ColumnType, TabularRow } from './components/TabularExplorer/types'
+import type { ColumnFilters, ColumnType, TabularRow, TabularUrlAlias } from './components/TabularExplorer/types'
 import type { GlobalSearchConfig, SearchType, SearchTypeConfig, SortOption, HiddenFilter, BuiltInFilterKey, DatasetSearchConfig, DatasetSearchFilters, DataserviceSearchConfig, DataserviceSearchFilters, ReuseSearchConfig, ReuseSearchFilters, OrganizationSearchConfig, OrganizationSearchFilters, TopicSearchConfig, TopicSearchFilters } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 import { useSearchFilter } from './composables/useSearchFilter'
@@ -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'
@@ -269,6 +270,7 @@ export type {
   ColumnType,
   ColumnsDefinition,
   TabularRow,
+  TabularUrlAlias,
   FilterCondition,
   Filter,
   AndFilters,
@@ -422,6 +424,7 @@ export {
   SelectGroup,
   Listbox,
   InfiniteLoader,
+  TabularActiveFilters,
   TabularExplorer,
   TabularMobileFilters,
   TabularTable,