@datagouv/components-next 1.0.2-dev.172 → 1.0.2-dev.174

package/src/composables/useDatasetResources.ts

@@ -0,0 +1,164 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+import { useComponentsConfig } from '../config'
+import { useDebouncedRef } from './useDebouncedRef'
+import { useFetch } from '../functions/api'
+import { RESOURCE_EXPLORER_PAGE_SIZE, RESOURCE_TYPE } from '../functions/resources'
+import type { PaginatedArray } from '../types/api'
+import type { DatasetV2 } from '../types/datasets'
+import type { Resource, ResourceGroup, ResourceType } from '../types/resources'
+
+// Fetches a dataset's resources grouped by type (paginated per type, searchable)
+// and derives the currently selected resource from the `resource_id` query param.
+// Shared by the dataset page and the explore page so the left navigation behaves
+// identically in both.
+export async function useDatasetResources(datasetGetter: MaybeRefOrGetter<DatasetV2>) {
+  const config = useComponentsConfig()
+
+  const search = ref('')
+  const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
+
+  const datasetId = computed(() => toValue(datasetGetter).id)
+  const url = computed(() => `/api/2/datasets/${datasetId.value}/resources/`)
+
+  const makeParams = (type: ResourceType) => computed(() => ({
+    type,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    q: searchDebounced.value || undefined,
+  }))
+
+  // Evaluated once at setup (before any search) — never changes afterwards
+  const hasAnyResources = computed(() => toValue(datasetGetter).resources.total > 0)
+
+  const extraResourcesByType: Ref<Resource[]>[] = RESOURCE_TYPE.map(() => ref<Resource[]>([]))
+  const pageByType: Ref<number>[] = RESOURCE_TYPE.map(() => ref(1))
+
+  watch(searchDebounced, () => {
+    for (let i = 0; i < RESOURCE_TYPE.length; i++) {
+      extraResourcesByType[i]!.value = []
+      pageByType[i]!.value = 1
+    }
+  })
+
+  // Separate useFetch for loadMore, initialized with immediate: false so it doesn't
+  // fetch until execute() is called from the event handler.
+  const loadMoreType = ref<ResourceType>('main')
+  const loadMorePage = ref(1)
+  const loadMoreParams = computed(() => ({
+    type: loadMoreType.value,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    page: loadMorePage.value,
+    q: searchDebounced.value || undefined,
+  }))
+
+  const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
+  const initialResourceId = resourceIdQuery.value
+
+  // Vue rule: composables must be called synchronously, before any `await` — `inject()`
+  // needs the active component instance, which a plain .ts composable loses after its
+  // first await (documented in useTabularProfile.ts). The package's `useFetch` calls
+  // `useComponentsConfig()` (an inject) on every call, so we kick off every request
+  // up-front, then await them together. This is also the idiomatic Nuxt parallel-fetch.
+  const typeFetches = RESOURCE_TYPE.map(type =>
+    useFetch<PaginatedArray<Resource>>(url, {
+      params: makeParams(type),
+      // Only main is server-rendered; the rest hydrate client-side to keep SSR light.
+      server: type === 'main',
+    }),
+  )
+  const loadMoreFetch = useFetch<PaginatedArray<Resource>>(url, { params: loadMoreParams, immediate: false, watch: false })
+  // The resource pointed at by `resource_id` (SSR / deep link) may live beyond the first
+  // page of its type group, so it wouldn't be in flatResources — fetch it directly.
+  const fetchedResourceFetch = initialResourceId
+    ? useFetch<Resource>(`/api/1/datasets/${datasetId.value}/resources/${initialResourceId}/`)
+    : null
+
+  const typeResults = await Promise.all(typeFetches)
+  const { data: loadMoreData, execute: executeLoadMore } = await loadMoreFetch
+  const fetchedResource = fetchedResourceFetch ? (await fetchedResourceFetch).data : ref<Resource | null>(null)
+
+  const rawDataByType = typeResults.map(result => result.data)
+
+  // Which type group is currently loading its next page. A single loadMoreFetch is
+  // shared across types, so we track the type here to show the spinner on the right
+  // group's "Charger plus…" button.
+  const loadingType = ref<ResourceType | null>(null)
+
+  const loadMore = async (type: ResourceType) => {
+    const index = RESOURCE_TYPE.indexOf(type)
+    if (index === -1) return
+    const pageRef = pageByType[index]!
+    const extraRef = extraResourcesByType[index]!
+    pageRef.value++
+
+    loadMoreType.value = type
+    loadMorePage.value = pageRef.value
+    loadingType.value = type
+    try {
+      await executeLoadMore()
+
+      if (loadMoreData.value) {
+        extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
+      }
+    }
+    finally {
+      loadingType.value = null
+    }
+  }
+
+  const groups = computed<ResourceGroup[]>(() => {
+    return RESOURCE_TYPE
+      .map((type, index) => {
+        const rawData = rawDataByType[index]!
+        const extraData = extraResourcesByType[index]!
+        return {
+          type: type as ResourceType,
+          total: rawData.value?.total ?? 0,
+          items: [...(rawData.value?.data ?? []), ...extraData.value],
+        }
+      })
+      .filter(group => group.items.length > 0)
+  })
+
+  const flatResources = computed(() => groups.value.flatMap(g => g.items))
+
+  // The URL is the single source of truth for the selection: no ref to keep in
+  // sync, navigation is done with plain links that change `resource_id`.
+  let lastShown: Resource | null = null
+  const remember = (resource: Resource | null) => {
+    if (resource) lastShown = resource
+    return resource
+  }
+
+  const selectedResource = computed<Resource | null>(() => {
+    const wantedId = resourceIdQuery.value
+    const fromList = flatResources.value.find(r => r.id === wantedId)
+    if (fromList) return remember(fromList)
+    // `fetchedResource` answers for `initialResourceId` only: it holds that one
+    // resource, so using it for any other id would show something the URL doesn't
+    // point at.
+    if (wantedId && wantedId === initialResourceId) return remember(fetchedResource.value)
+    // A search that matches nothing narrows the navigation, it doesn't unload the
+    // viewer — keep showing what we had, which is the dataset's first resource when
+    // nothing has been clicked yet.
+    return remember(flatResources.value[0] ?? null) ?? lastShown
+  })
+
+  function updateSearch(newSearch: string) {
+    search.value = newSearch
+    // Only a reset skips the debounce: typing must stay debounced, since each
+    // change fires one request per resource type.
+    if (!newSearch) flush()
+  }
+
+  return {
+    groups,
+    flatResources,
+    hasAnyResources,
+    selectedResource,
+    loadMore,
+    loadingType,
+    search,
+    updateSearch,
+  }
+}

package/src/composables/useResizable.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+type UseResizableOptions = {
+  initialWidth: number
+  minWidth: number
+  maxWidth: number
+}
+
+// Drag-to-resize a horizontal panel. Returns the reactive width, a `resizing`
+// flag (to disable width transitions while dragging) and a `startResize` handler
+// to bind on a drag handle's `mousedown`. Encapsulates the drag math, clamping and
+// the temporary body cursor / text-selection lock. VueUse has no ready-made panel
+// resize (useResizeObserver only observes size), so we build it on `useEventListener`
+// which handles listener cleanup and SSR for us.
+export function useResizable({ initialWidth, minWidth, maxWidth }: UseResizableOptions) {
+  const width = ref(initialWidth)
+  const resizing = ref(false)
+  let startX = 0
+  let startWidth = 0
+
+  const clamp = (value: number) => Math.min(maxWidth, Math.max(minWidth, Math.round(value)))
+
+  function startResize(event: MouseEvent) {
+    event.preventDefault()
+    startX = event.clientX
+    startWidth = width.value
+    resizing.value = true
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+  }
+
+  useEventListener('mousemove', (event: MouseEvent) => {
+    if (!resizing.value) return
+    width.value = clamp(startWidth + event.clientX - startX)
+  })
+
+  useEventListener('mouseup', () => {
+    if (!resizing.value) return
+    resizing.value = false
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+  })
+
+  return { width, resizing, startResize }
+}

package/src/composables/useResourceCapabilities.ts

@@ -11,6 +11,11 @@ import { useTranslation } from './useTranslation'
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
+// Which preview the data tab shows. Single source of truth: the viewer renders it and
+// the skeleton picks the matching placeholder shape, so each holding its own copy of
+// this precedence would let the two drift apart.
+export type PreviewKind = 'json' | 'pdf' | 'xml' | 'image' | 'datafair' | 'openapi' | 'tabular' | 'unavailable'
+
 export function useResourceCapabilities(
   resource: MaybeRefOrGetter<Resource>,
   dataset: MaybeRefOrGetter<Dataset | DatasetV2>,
@@ -19,11 +24,6 @@ export function useResourceCapabilities(
   const { t } = useTranslation()
   const checkTabularData = useHasTabularData()
 
-  const hasPreview = computed(() => {
-    const format = toValue(resource).format?.toLowerCase()
-    return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
-  })
-
   const hasTabularData = computed(() => {
     const r = toValue(resource)
     return checkTabularData(r)
@@ -86,6 +86,20 @@ export function useResourceCapabilities(
 
   const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
 
+  // A dedicated preview always wins over the interactive table: a PDF that also
+  // carries a parsing table is a PDF first.
+  const previewKind = computed<PreviewKind>(() => {
+    const format = toValue(resource).format?.toLowerCase()
+    if (format === 'json') return 'json'
+    if (format === 'pdf') return 'pdf'
+    if (format === 'xml') return 'xml'
+    if (isImagePreviewFormat(format)) return 'image'
+    if (hasDatafairPreview.value) return 'datafair'
+    if (hasOpenAPIPreview.value) return 'openapi'
+    if (hasTabularData.value) return 'tabular'
+    return 'unavailable'
+  })
+
   const tabsOptions = computed(() => {
     const r = toValue(resource)
     const options = []
@@ -116,7 +130,6 @@ export function useResourceCapabilities(
     }
 
     options.push({ key: 'metadata', label: t('Métadonnées') })
-    options.push({ key: 'downloads', label: t('Téléchargements') })
 
     if (hasTabularData.value) {
       options.push({ key: 'api', label: t('API') })
@@ -126,7 +139,7 @@ export function useResourceCapabilities(
   })
 
   return {
-    hasPreview,
+    previewKind,
     hasTabularData,
     hasPmtiles,
     hasPmtilesError,

package/src/functions/resources.ts

@@ -84,6 +84,25 @@ export function getResourceFormatIcon(format: string): Component | null {
   }
 }
 
+// Badge colors for the resource icon, keyed on the same format categorization as
+// getResourceFormatIcon so tabular/geo/code/documentation stay consistent with the icon.
+export function getResourceIconColor(format?: string | null): string {
+  const icon = format ? getResourceFormatIcon(format) : null
+  switch (icon) {
+    case Table:
+      return 'bg-[#c3fad5] text-[#18753c]'
+    case RiMap2Line:
+    case RiEarthLine:
+      return 'bg-[#e6eefe] text-[#0063cb]'
+    case Code:
+      return 'bg-[#fce164] text-[#716043]'
+    case Documentation:
+      return 'bg-[#fee7fc] text-[#6e445a]'
+    default:
+      return 'bg-gray-100 text-gray-plain'
+  }
+}
+
 export function getResourceTitleId(resource: Resource) {
   return 'resource-' + resource.id + '-title'
 }

package/src/main.ts

@@ -108,6 +108,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'
@@ -123,6 +126,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'
@@ -413,4 +418,7 @@ export {
   Listbox,
   InfiniteLoader,
   TabularExplorer,
+  TabularMobileFilters,
+  TabularTable,
+  TabularToolbar,
 }

package/dist/ImagePreview.client-c_SJXLpr.js

@@ -1,36 +0,0 @@
-import { defineComponent as T, ref as _, computed as l, openBlock as r, createElementBlock as u, createBlock as p, withCtx as f, createTextVNode as m, toDisplayString as g, unref as o } from "vue";
-import { a as y, u as z, b as k, _ as d } from "./main-D7EaQcIR.js";
-const w = { class: "text-xs" }, B = ["src"], E = /* @__PURE__ */ T({
-  __name: "ImagePreview.client",
-  props: {
-    resource: {}
-  },
-  setup(a) {
-    const n = a, { t } = y(), h = z(), i = _(!1), v = l(() => n.resource.format?.toUpperCase() ?? t("Fichier")), c = l(() => k(n.resource)), x = l(() => {
-      const s = c.value, e = h.maxImagePreviewByteSize;
-      return !s || !e ? !1 : s <= e;
-    });
-    return (s, e) => (r(), u("div", w, [
-      x.value ? i.value ? (r(), p(d, { key: 1 }, {
-        default: f(() => [
-          m(g(o(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
-      })) : (r(), u("img", {
-        key: 2,
-        src: a.resource.url,
-        alt: "",
-        class: "block w-full h-auto max-w-[800px]",
-        onError: e[0] || (e[0] = (C) => i.value = !0)
-      }, null, 40, B)) : (r(), p(d, { key: 0 }, {
-        default: f(() => [
-          m(g(c.value ? o(t)("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType: v.value }) : o(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 {
-  E as default
-};

package/dist/PreviewWrapper.vue_vue_type_script_setup_true_lang-B3ByRwHK.js

@@ -1,58 +0,0 @@
-import { defineComponent as _, ref as g, computed as v, 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 { a as B, b as E, c as L, _ as c } from "./main-D7EaQcIR.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), h = v(() => E(i.resource)), T = v(() => L(i.resource)), y = v(() => {
-      const e = h.value, m = i.maxSize;
-      return !e || !m ? !1 : e <= m;
-    });
-    return S(async () => {
-      if (!(!y.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", { data: p.value }, void 0, void 0, 0) : d.value ? (l(), k("div", q, r(a(t)("Chargement de l'aperçu {fileType}...", { fileType: s.fileType })), 1)) : y.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(h.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 _
-};