@datagouv/components-next 1.3.0 → 1.4.0

package/src/functions/tabular.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'vue'
+import { parseDate, type CalendarDate } from '@internationalized/date'
 import {
   RiHashtag,
   RiPriceTag3Line,
@@ -22,12 +23,74 @@ import {
 } from '@remixicon/vue'
 import { useTranslation } from '../composables/useTranslation'
 import type { TranslationFunction } from '../composables/useTranslation'
-import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
+import type { ColumnFilters, ColumnType, DateFilter } from '../components/TabularExplorer/types'
+import { parseDateValue } from './dates'
 
 export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
   const f = filters[column]
   if (!f) return false
-  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
+  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null || f.date)
+}
+
+// `initialFilters` is a public prop of TabularExplorer, so a filter can carry
+// anything a consumer put in it. An unparseable date is dropped rather than
+// thrown, the way a non-numeric `min` is already ignored by `Number.isFinite`.
+export function parseIsoDate(value: string | undefined): CalendarDate | null {
+  if (!value) return null
+  try {
+    return parseDate(value)
+  }
+  catch {
+    return null
+  }
+}
+
+/**
+ * The calendar day a cell of a date column falls on, as an ISO date, or null
+ * when the value is not one the API produced. Timestamps keep only their day:
+ * filtering a whole day is the useful reading of "filter by this value", where
+ * the exact millisecond would only ever match that one row.
+ */
+export function toIsoDay(value: unknown): string | null {
+  const day = String(value ?? '').slice(0, 10)
+  return parseIsoDate(day) ? day : null
+}
+
+/**
+ * The day interval a date filter selects, half-open: `[lower, upper)`.
+ * An absent bound means the interval is open on that side.
+ */
+function dateFilterBounds(filter: DateFilter): { lower: CalendarDate | null, upper: CalendarDate | null } {
+  const start = parseIsoDate(filter.start)
+  if (!start) return { lower: null, upper: null }
+  switch (filter.operator) {
+    case 'is':
+      return { lower: start, upper: start.add({ days: 1 }) }
+    case 'before':
+      return { lower: null, upper: start }
+    case 'after':
+      return { lower: start.add({ days: 1 }), upper: null }
+    case 'between': {
+      const end = parseIsoDate(filter.end)
+      return { lower: start, upper: end ? end.add({ days: 1 }) : null }
+    }
+  }
+}
+
+/**
+ * Query params for a date filter, as a half-open day interval.
+ *
+ * The same two operators cover `date` and `datetime` columns, which
+ * `resolveColumnType` merges into one display type. `__exact` would not: a
+ * timestamp is never equal to a bare day, so an exact filter silently matches
+ * nothing on a `datetime` column.
+ */
+export function buildDateFilterParams(column: string, filter: DateFilter): Record<string, string> {
+  const { lower, upper } = dateFilterBounds(filter)
+  const params: Record<string, string> = {}
+  if (lower) params[`${column}__greater`] = lower.toString()
+  if (upper) params[`${column}__strictly_less`] = upper.toString()
+  return params
 }
 
 export type TypeDisplay = {
@@ -42,9 +105,19 @@ export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, Type
     text: { icon: RiText, label: t('Texte') },
     date: { icon: RiCalendarLine, label: t('Date') },
     boolean: { icon: RiCheckboxLine, label: t('Booléen') },
+    year: { icon: RiCalendarLine, label: t('Année') },
   }
 }
 
+export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (colInfo.format === 'year') return 'year'
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (isCategorical) return 'categorical'
+  return 'text'
+}
+
 // csv-detective formats that carry no semantic meaning beyond the generic
 // display type already resolved by `ColumnType` — these fall back to
 // `buildTypeConfig` (Texte / Nombre / Date / Booléen) in the header.
@@ -138,8 +211,8 @@ export function useFormatTabular() {
 
   function formatCellDate(value: unknown): string {
     if (value == null || value === '') return '–'
-    const d = new Date(String(value))
-    if (Number.isNaN(d.getTime())) return String(value)
+    const d = parseDateValue(String(value))
+    if (!d) return String(value)
     return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d)
   }
 
@@ -149,6 +222,48 @@ export function useFormatTabular() {
 const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
 const FALSY_VALUES = ['false', '0', 'non', 'no']
 
+// `encodeURIComponent` leaves `.`, `(` and `)` as-is, but they are the operator
+// separator and the delimiters of the API's `or(...)` grammar: a search value
+// containing one makes the parser reject the whole query with a 400. Wrapping
+// the value in double quotes (as the API README suggests) does not work here —
+// the API keeps them as part of the searched string and returns no result. It
+// does percent-decode the value after parsing, so encoding them is enough.
+function encodeConditionValue(value: string): string {
+  return encodeURIComponent(value)
+    .replace(/\./g, '%2E')
+    .replace(/\(/g, '%28')
+    .replace(/\)/g, '%29')
+}
+
+// A decimal literal, not `Number()`: the API compares against a number column,
+// and it answers an error for the whole `or(...)` when it is handed something it
+// cannot parse as one — which `Number()` happily accepts (`0x10`, `1e5`, ` `).
+const NUMBER_LITERAL_RE = /^-?\d+(\.\d+)?$/
+
+/**
+ * Builds the OR conditions for global search across all columns.
+ * Text and categorical columns get a `__contains` filter; number columns
+ * get a `__exact` filter only when the search value is numeric.
+ * Year, date and boolean columns are excluded.
+ */
+export function buildGlobalSearchConditions(
+  allColumns: string[],
+  getColumnType: (col: string) => ColumnType,
+  searchValue: string,
+): string[] {
+  const conditions: string[] = []
+  for (const col of allColumns) {
+    const type = getColumnType(col)
+    if (type === 'text' || type === 'categorical') {
+      conditions.push(col + '__contains.' + encodeConditionValue(searchValue))
+    }
+    else if (type === 'number' && NUMBER_LITERAL_RE.test(searchValue)) {
+      conditions.push(col + '__exact.' + encodeConditionValue(searchValue))
+    }
+  }
+  return conditions
+}
+
 export function isTruthy(value: unknown): boolean {
   if (typeof value === 'boolean') return value
   if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())

package/src/functions/tabularApi.ts

@@ -1,7 +1,7 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
 import type { GenericFilter } from '../types/visualizations'
-import type { SortConfig } from '../components/TabularExplorer/types'
+import type { SortConfig, TabularProfileResponse } from '../components/TabularExplorer/types'
 
 export type { SortConfig }
 
@@ -31,48 +31,6 @@ export type FetchTabularDataOptions = {
   filters?: GenericFilter | undefined
 }
 
-export type TabularProfileResponse = {
-  profile: {
-    header: Array<string>
-    columns: Record<string, {
-      score: number
-      format: string
-      python_type: string
-    }>
-    formats: Record<string, Array<string>>
-    profile: Record<string, {
-      tops: Array<{ count: number, value: string }>
-      nb_distinct: number
-      nb_missing_values: number
-      min?: number
-      max?: number
-      std?: number
-      mean?: number
-    }>
-    encoding: string
-    separator: string
-    categorical: Array<string>
-    total_lines: number
-    nb_duplicates: number
-    columns_fields: Record<string, {
-      score: number
-      format: string
-      python_type: string
-    }>
-    columns_labels: Record<string, {
-      score: number
-      format: string
-      python_type: string
-    }>
-    header_row_idx: number
-    heading_columns: number
-    trailing_columns: number
-  }
-  deleted_at: string | null
-  dataset_id: string
-  indexes: null
-}
-
 /**
  * Call Tabular-api to get table content with options object
  */

package/src/main.ts

@@ -15,7 +15,7 @@ import type { Owned, OwnedWithFullObject, OwnedWithId } from './types/owned'
 import type { Comment, Thread } from './types/discussions'
 import type { PageBloc, ContentBloc, BlocWithTitle, DatasetsListBloc, DataservicesListBloc, ReusesListBloc, LinkInBloc, LinksListBloc, MarkdownBloc, AccordionItemBloc, AccordionListBloc, HeroBloc } from './types/pages'
 import type { Post } from './types/posts'
-import type { ReuseReference, NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
+import type { ReuseReference, NewReuse, Reuse, ReuseV2, ReuseTopic, ReuseType } from './types/reuses'
 import type { RegisteredSchema, Schema, SchemaDetails, SchemaField, SchemaPath, SchemaPublicationMode, SchemaResponseData, SchemaVersion, ValidataError } from './types/schemas'
 import type { TopicV2, TopicElement, TopicElementClass, TopicElementRel } from './types/topics'
 import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceGroup, ResourceType, Resource } from './types/resources'
@@ -23,7 +23,8 @@ import type { Site } from './types/site'
 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, GenericFilter, XAxisType, XAxisSortBy, SortDirection, XAxis, XAxisForm, UnitPosition, YAxis, DataSeriesType, DataSeries, DataSeriesForm } from './types/visualizations'
+import type { Chart, ChartForm, ChartForApi, FilterCondition, Filter, AndFilters, 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 { 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'
@@ -37,8 +38,12 @@ import Avatar from './components/Avatar.vue'
 import AvatarWithName from './components/AvatarWithName.vue'
 import BannerAction from './components/BannerAction.vue'
 import BrandedButton from './components/BrandedButton.vue'
+import ChartCard from './components/ChartCard.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
+import DataserviceQuality from './components/DataserviceQuality.vue'
+import DataserviceQualityInline from './components/DataserviceQualityInline.vue'
+import DataserviceQualityTooltipContent from './components/DataserviceQualityTooltipContent.vue'
 import DatasetCard from './components/DatasetCard.vue'
 import DataStructure from './components/ResourceAccordion/DataStructure.vue'
 import Downloads from './components/ResourceAccordion/Downloads.vue'
@@ -47,14 +52,15 @@ import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
 import DateRangeDetails from './components/DateRangeDetails.vue'
+import FormattedDate from './components/FormattedDate.vue'
 import { DatasetInformationSection, DatasetTemporalitySection, DatasetSpatialSection, DatasetSchemaSection, DatasetEmbedSection } from './components/DatasetInformation'
 import LeafletMap from './components/LeafletMap.vue'
 import LicenseBadge from './components/LicenseBadge.vue'
 import Tag from './components/Tag.vue'
 import DatasetQuality from './components/DatasetQuality.vue'
 import DatasetQualityInline from './components/DatasetQualityInline.vue'
-import DatasetQualityItem from './components/DatasetQualityItem.vue'
-import DatasetQualityScore from './components/DatasetQualityScore.vue'
+import QualityItem from './components/QualityItem.vue'
+import QualityScore from './components/QualityScore.vue'
 import ProgressBar from './components/ProgressBar.vue'
 import DatasetQualityTooltipContent from './components/DatasetQualityTooltipContent.vue'
 import ExtraAccordion from './components/ExtraAccordion.vue'
@@ -104,6 +110,9 @@ import SelectGroup from './components/Form/SelectGroup.vue'
 import Listbox from './components/Form/Listbox.vue'
 import InfiniteLoader from './components/InfiniteLoader.vue'
 import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
+import TabularMobileFilters from './components/TabularExplorer/TabularMobileFilters.vue'
+import TabularTable from './components/TabularExplorer/TabularTable.vue'
+import TabularToolbar from './components/TabularExplorer/TabularToolbar.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 import { ofetch } from 'ofetch'
@@ -119,6 +128,8 @@ export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
 export * from './composables/useResourceCapabilities'
 export * from './composables/useTabularProfile'
+export * from './composables/useDatasetResources'
+export * from './composables/useResizable'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -227,6 +238,7 @@ export type {
   ResourceType,
   ReuseReference,
   Reuse,
+  ReuseV2,
   ReuseTopic,
   ReuseType,
   Schema,
@@ -251,6 +263,12 @@ export type {
   Chart,
   ChartForm,
   ChartForApi,
+  CombinedSort,
+  ColumnDefinition,
+  ColumnFilters,
+  ColumnType,
+  ColumnsDefinition,
+  TabularRow,
   FilterCondition,
   Filter,
   AndFilters,
@@ -327,8 +345,12 @@ export {
   AvatarWithName,
   BannerAction,
   BrandedButton,
+  ChartCard,
   CopyButton,
   DataserviceCard,
+  DataserviceQuality,
+  DataserviceQualityInline,
+  DataserviceQualityTooltipContent,
   DatasetCard,
   DataStructure,
   Downloads,
@@ -343,10 +365,11 @@ export {
   DiscussionMessageCard,
   DatasetQuality,
   DatasetQualityInline,
-  DatasetQualityItem,
-  DatasetQualityScore,
+  QualityItem,
+  QualityScore,
   DatasetQualityTooltipContent,
   DateRangeDetails,
+  FormattedDate,
   ExtraAccordion,
   LabelTag,
   LeafletMap,
@@ -399,4 +422,7 @@ export {
   Listbox,
   InfiniteLoader,
   TabularExplorer,
+  TabularMobileFilters,
+  TabularTable,
+  TabularToolbar,
 }

package/src/types/dataservices.ts

@@ -31,6 +31,20 @@ export type BaseDataservice = Owned & WithAccessType & {
 
 export type NewDataservice = Omit<BaseDataservice, keyof OwnedWithId> & OwnedWithId
 
+export type DataserviceQuality = {
+  has_description: boolean
+  has_machine_documentation: boolean
+  has_technical_documentation: boolean
+  has_business_documentation: boolean
+  license: boolean
+  has_contact_point: boolean
+  has_base_api_url: boolean
+  availability_documented: boolean
+  rate_limiting_documented: boolean
+  access_conditions_clear: boolean
+  score: number
+}
+
 export type Dataservice = Owned & WithAccessType & {
   acronym: string
   archived_at: string | null
@@ -72,4 +86,5 @@ export type Dataservice = Owned & WithAccessType & {
   slug: string
   tags: Array<string>
   title: string
+  quality?: DataserviceQuality
 }

package/src/types/organizations.ts

@@ -1,5 +1,6 @@
 import type { User } from './users'
 import type { Badges } from './badges'
+import type { PageBloc } from './pages'
 
 export type MemberRole = 'admin' | 'editor' | 'partial_editor'
 
@@ -68,4 +69,13 @@ export type Organization = {
     reuses_by_months: Record<string, number>
     views: number
   }
+  // Editorial blocs powering the organization "Présentation" tab. Excluded from
+  // the default API read mask, so only present when requested with X-Fields.
+  // Read through the API's `public_presentation_blocs`: hidden from the public until
+  // published, but always returned to organization administrators.
+  presentation_blocs?: Array<PageBloc>
+  // Publication date of the blocs. `null` means draft (never public); a set date
+  // means published. Like `presentation_blocs`, only present when requested with
+  // X-Fields.
+  presentation_blocs_published_at?: string | null
 }

package/src/types/reuses.ts

@@ -1,5 +1,5 @@
 import type { Owned, OwnedWithId } from './owned'
-import type { Dataset } from './datasets'
+import type { Dataset, Rel } from './datasets'
 import type { Badges } from './badges'
 import type { Dataservice } from './dataservices'
 
@@ -51,6 +51,17 @@ export type Reuse = BaseReuse & {
   permissions: { edit: boolean, delete: boolean }
 }
 
+/**
+ * Lightweight reuse returned by the listing endpoints (`/api/2/reuses/` and
+ * `/api/2/reuses/search/`): the `datasets` and `dataservices` reference lists
+ * are replaced by links to their respective listing endpoints filtered on this
+ * reuse, so that listing reuses does not dereference every linked dataset.
+ */
+export type ReuseV2 = Owned & Omit<Reuse, 'datasets' | 'dataservices'> & {
+  datasets: Rel
+  dataservices: Rel
+}
+
 export type ReuseType = {
   id: string
   label: string

package/src/types/search.ts

@@ -4,7 +4,7 @@ import type { AccessType } from './access_types'
 import type { Dataset } from './datasets'
 import type { Dataservice } from './dataservices'
 import type { Organization } from './organizations'
-import type { Reuse } from './reuses'
+import type { ReuseV2 } from './reuses'
 import type { TopicV2 } from './topics'
 import type {
   CERTIFIED,
@@ -372,7 +372,7 @@ export type GlobalSearchConfig = SearchTypeConfig[]
 export type SearchResponseByClass = {
   datasets: DatasetSearchResponse<Dataset>
   dataservices: DataserviceSearchResponse<Dataservice>
-  reuses: ReuseSearchResponse<Reuse>
+  reuses: ReuseSearchResponse<ReuseV2>
   organizations: OrganizationSearchResponse<Organization>
   topics: TopicSearchResponse<TopicV2>
 }

package/src/types/visualizations.ts

@@ -1,5 +1,6 @@
 import type { TabularAggregateType } from '../functions/tabularApi'
 import type { Owned, OwnedWithId } from './owned'
+import type { ColumnType } from '../components/TabularExplorer/types'
 
 export type FilterCondition = 'exact' | 'differs' | 'is_null' | 'is_not_null' | 'greater' | 'less' | 'strictly_greater' | 'strictly_less'
 export type Filter = {
@@ -66,6 +67,7 @@ export type Chart = Owned & {
   created_at: string
   last_modified: string
   deleted_at: string | null
+  image: string | null
   uri: string
   page: string
   x_axis: XAxis
@@ -87,3 +89,6 @@ export type ChartForm = Omit<ChartForApi, 'x_axis' | 'series' | 'owner' | 'organ
   chart_type?: DataSeriesType | null
   filter: GenericFilter | null
 }
+
+export type ColumnDefinition = { name: string, type: ColumnType, min?: number, max?: number }
+export type ColumnsDefinition = Record<string, Array<ColumnDefinition>>

package/dist/PreviewWrapper.vue_vue_type_script_setup_true_lang-C3dDzrIr.js

@@ -1,61 +0,0 @@
-import { defineComponent as _, ref as g, computed as h, onMounted as S, nextTick as w, openBlock as l, createElementBlock as k, renderSlot as C, toDisplayString as r, unref as a, createBlock as n, withCtx as o, createTextVNode as u, createCommentVNode as b } from "vue";
-import { c6 as B, bm as E, bk as L, _ as c } from "./main-DKu5SOAl.js";
-const R = { class: "text-xs" }, q = {
-  key: 1,
-  class: "text-gray-medium"
-}, V = /* @__PURE__ */ _({
-  __name: "PreviewWrapper",
-  props: {
-    fileType: {},
-    resource: {},
-    maxSize: {},
-    load: { type: Function }
-  },
-  emits: ["loaded"],
-  setup(s, { emit: x }) {
-    const i = s, z = x, { t } = B(), p = g(null), d = g(!1), f = g(null), y = h(() => E(i.resource)), T = h(() => L(i.resource)), v = h(() => {
-      const e = y.value, m = i.maxSize;
-      return !e || !m ? !1 : e <= m;
-    });
-    return S(async () => {
-      if (!(!v.value || T.value === "blocked")) {
-        d.value = !0;
-        try {
-          p.value = await i.load(), await w(), z("loaded");
-        } catch (e) {
-          console.error("Error loading preview:", e), f.value = e instanceof TypeError ? "network" : "generic";
-        } finally {
-          d.value = !1;
-        }
-      }
-    }), (e, m) => (l(), k("div", R, [
-      p.value !== null ? C(e.$slots, "default", {
-        key: 0,
-        data: p.value
-      }) : d.value ? (l(), k("div", q, r(a(t)("Chargement de l'aperçu {fileType}...", { fileType: s.fileType })), 1)) : v.value ? T.value === "blocked" ? (l(), n(c, { key: 3 }, {
-        default: o(() => [
-          u(r(a(t)("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.", { fileType: s.fileType })), 1)
-        ]),
-        _: 1
-      })) : f.value === "network" ? (l(), n(c, { key: 4 }, {
-        default: o(() => [
-          u(r(a(t)("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : f.value ? (l(), n(c, { key: 5 }, {
-        default: o(() => [
-          u(r(a(t)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : b("", !0) : (l(), n(c, { key: 2 }, {
-        default: o(() => [
-          u(r(y.value ? a(t)("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType: s.fileType }) : a(t)("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      }))
-    ]));
-  }
-});
-export {
-  V as _
-};