@datagouv/components-next 1.2.0 → 1.4.0

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -1,49 +1,87 @@
 <template>
-  <div v-if="allResources.length || hasAnyResources">
-    <div class="flex gap-6">
-      <div class="flex-1 min-w-0">
-        <ResourceExplorerViewer
-          v-if="selectedResource && allResources.length"
-          :key="selectedResource.id"
-          :dataset
-          :resource="selectedResource"
-          :resources="flatResources"
-          @select="selectResource"
-        />
-        <div
-          v-else-if="search"
-          class="flex flex-col items-center py-12"
-        >
-          <slot name="no-results-image">
-            <img
-              :src="noResultsImage"
-              class="h-20"
-              alt=""
-            >
-          </slot>
-          <p class="fr-text--bold fr-my-3v">
-            {{ t('Pas de résultats pour « {q} »', { q: search }) }}
-          </p>
-          <BrandedButton
-            color="primary"
-            @click="updateSearch('')"
-          >
-            {{ t('Réinitialiser la recherche') }}
-          </BrandedButton>
-        </div>
-      </div>
-      <div class="hidden md:block">
+  <div
+    v-if="groups.length || hasAnyResources"
+    :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''"
+  >
+    <ResourceExplorerHeader
+      v-if="fullscreen"
+      class="shrink-0"
+      :dataset
+      :resource="selectedResource"
+      :exit-to="exitTo"
+    />
+    <div
+      class="flex"
+      :class="fullscreen ? 'min-h-0 flex-1 overflow-hidden' : 'overflow-hidden rounded border border-gray-default'"
+    >
+      <div class="hidden md:flex">
         <ResourceExplorerSidebar
-          :resources="allResources"
+          :groups
           :selected-resource-id="selectedResource?.id ?? null"
           :collapsed="sidebarCollapsed"
           :search
-          @select="selectResource"
+          :loading-type="loadingType"
+          :resource-to="resourceTo"
+          replace
           @load-more="loadMore"
           @update:collapsed="sidebarCollapsed = $event"
           @update:search="updateSearch($event)"
         />
       </div>
+      <div
+        id="resource-explorer-viewer"
+        class="flex-1 min-w-0"
+        :class="fullscreen ? 'flex flex-col' : ''"
+        role="region"
+        :aria-label="t('Détail de la ressource')"
+      >
+        <!-- Suspense shows the skeleton fallback while the (async) viewer resolves
+             its data on each resource switch. `timeout` keeps the previous resource
+             visible for a beat so a near-instant switch doesn't flash a skeleton. -->
+        <Suspense
+          v-if="selectedResource"
+          :timeout="200"
+        >
+          <ResourceExplorerViewer
+            :key="selectedResource.id"
+            :dataset
+            :resource="selectedResource"
+            :resources="flatResources"
+            :resource-to="resourceTo"
+            :explore-to="exploreTo"
+            :resource-external-url="resourceExternalUrl"
+            replace
+            :fullscreen
+          />
+          <template #fallback>
+            <ResourceViewerSkeleton
+              :resource="selectedResource"
+              :dataset
+              :resources="flatResources"
+              :resource-to="resourceTo"
+              :explore-to="exploreTo"
+              :resource-external-url="resourceExternalUrl"
+              replace
+              :fullscreen
+            />
+          </template>
+        </Suspense>
+        <!-- The selection never falls back to nothing once a resource has been shown,
+             so having none means the groups aren't in yet: only `main` is fetched on
+             the server, the other types arrive on hydration. -->
+        <div
+          v-else
+          class="animate-pulse-placeholder p-4"
+          :class="fullscreen ? 'min-h-0 flex-1' : ''"
+          role="status"
+          :aria-label="t('Chargement des ressources…')"
+        >
+          <div
+            class="w-full rounded bg-gray-200"
+            :class="fullscreen ? 'h-full' : 'h-96'"
+          />
+        </div>
+      </div>
     </div>
   </div>
   <div
@@ -64,195 +102,52 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, type Ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useRouteQuery } from '@vueuse/router'
-import { useComponentsConfig } from '../../config'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 import { useTranslation } from '../../composables/useTranslation'
-import { useDebouncedRef } from '../../composables/useDebouncedRef'
-import { useFetch } from '../../functions/api'
-import { RESOURCE_TYPE } from '../../functions/resources'
-import type { PaginatedArray } from '../../types/api'
+import { useDatasetResources } from '../../composables/useDatasetResources'
 import type { DatasetV2 } from '../../types/datasets'
-import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
+import type { Resource } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
-import BrandedButton from '../BrandedButton.vue'
+import ResourceExplorerHeader from './ResourceExplorerHeader.vue'
+import ResourceViewerSkeleton from './ResourceViewerSkeleton.vue'
 
 const props = withDefaults(defineProps<{
   dataset: DatasetV2
   noResultsImage?: string
+  // Fullscreen mode: dataset context bar (org / title / date + download + exit), the
+  // viewer fills the height and hides its inline actions (shown in the context bar).
+  fullscreen?: boolean
+  exitTo?: RouteLocationRaw
+  // Inline mode only: link builder for the "Explorer" button in the viewer header
+  // that opens the fullscreen explorer on the current resource.
+  exploreTo?: (resource: Resource) => string
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource) => string
 }>(), {
   noResultsImage: '',
+  fullscreen: false,
 })
 
 const { t } = useTranslation()
-const router = useRouter()
-const config = useComponentsConfig()
+const route = useRoute()
+
+const {
+  groups,
+  flatResources,
+  hasAnyResources,
+  selectedResource,
+  loadMore,
+  loadingType,
+  search,
+  updateSearch,
+} = await useDatasetResources(() => props.dataset)
 
 const sidebarCollapsed = ref(false)
-const search = ref('')
-const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
-
-const PAGE_SIZE = 10
-const url = computed(() => `/api/2/datasets/${props.dataset.id}/resources/`)
-
-// Resource ID from URL query
-const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
-
-// Fetch resources for each type
-const mainParams = computed(() => ({
-  type: 'main' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const documentationParams = computed(() => ({
-  type: 'documentation' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const updateParams = computed(() => ({
-  type: 'update' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const apiParams = computed(() => ({
-  type: 'api' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const codeParams = computed(() => ({
-  type: 'code' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-const otherParams = computed(() => ({
-  type: 'other' as const,
-  page_size: PAGE_SIZE,
-  q: searchDebounced.value || undefined,
-}))
-
-const { data: mainData, status: mainStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: mainParams })
-const { data: documentationData, status: documentationStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: documentationParams, server: false })
-const { data: updateData, status: updateStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: updateParams, server: false })
-const { data: apiData, status: apiStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: apiParams, server: false })
-const { data: codeData, status: codeStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: codeParams, server: false })
-const { data: otherData, status: otherStatus } = await useFetch<PaginatedArray<Resource>>(url, { params: otherParams, server: false })
-
-const rawResourcesByTypes = [
-  { data: mainData, status: mainStatus },
-  { data: documentationData, status: documentationStatus },
-  { data: updateData, status: updateStatus },
-  { data: apiData, status: apiStatus },
-  { data: codeData, status: codeStatus },
-  { data: otherData, status: otherStatus },
-]
-
-// Evaluated once at setup (before any search) — never changes afterwards
-const hasAnyResources = computed(() => {
-  return props.dataset.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 at setup time with immediate: false
-// so that 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: PAGE_SIZE,
-  page: loadMorePage.value,
-  q: searchDebounced.value || undefined,
-}))
-const { data: loadMoreData, execute: executeLoadMore } = await useFetch<PaginatedArray<Resource>>(url, {
-  params: loadMoreParams,
-  immediate: false,
-  watch: false,
-})
-
-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
-  await executeLoadMore()
-
-  if (loadMoreData.value) {
-    extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
-  }
-}
-
-const allResources = computed<ResourceGroup[]>(() => {
-  return RESOURCE_TYPE
-    .map((type, index) => {
-      const rawData = rawResourcesByTypes[index]!
-      const extraData = extraResourcesByType[index]!
-      return {
-        type: type as ResourceType,
-        total: rawData.data.value?.total ?? 0,
-        items: [...(rawData.data.value?.data ?? []), ...extraData.value],
-      }
-    })
-    .filter(group => group.items.length > 0)
-})
-
-const flatResources = computed(() =>
-  allResources.value.flatMap(g => g.items),
-)
-
-// Fetch resource by ID if specified in URL (for SSR)
-const initialResourceId = resourceIdQuery.value
-const { data: fetchedResource } = initialResourceId
-  ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
-  : { data: ref(null) }
-
-// Initial selection (synchronous for SSR hydration)
-function getInitialResource(): Resource | null {
-  const resourceId = resourceIdQuery.value
-  if (resourceId) {
-    // First check in already loaded resources
-    const existing = flatResources.value.find(r => r.id === resourceId)
-    if (existing) return existing
-    // Use fetched resource if available
-    if (fetchedResource.value) return fetchedResource.value
-  }
-  // Default to first resource
-  return flatResources.value[0] ?? null
-}
-
-const selectedResource = ref<Resource | null>(getInitialResource())
-
-function updateSearch(newSearch: string) {
-  search.value = newSearch
-  flush()
-}
-
-const selectResource = (resource: Resource) => {
-  selectedResource.value = resource
-  router.replace({
-    query: { ...router.currentRoute.value.query, resource_id: resource.id },
-  })
-}
 
-// Update selection when resources change (e.g., after client-side fetch completes)
-watch(flatResources, () => {
-  if (selectedResource.value) return
-  const firstResource = flatResources.value[0]
-  if (firstResource) {
-    selectedResource.value = firstResource
-  }
+const resourceTo = (resource: Resource): RouteLocationRaw => ({
+  query: { ...route.query, resource_id: resource.id },
 })
 </script>

package/src/components/ResourceExplorer/ResourceExplorerHeader.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="sticky top-0 z-30 flex h-[58px] shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some/95 px-3 backdrop-blur-[5px] sm:gap-4">
+    <div class="flex min-w-0 items-center gap-2">
+      <OrganizationLogo
+        v-if="dataset.organization"
+        :organization="dataset.organization"
+        size-class="size-[34px] shrink-0 rounded-sm border border-gray-default bg-white p-1"
+      />
+      <Avatar
+        v-else-if="dataset.owner"
+        :user="dataset.owner"
+        :size="34"
+        class="shrink-0"
+      />
+      <div class="flex min-w-0 items-center gap-1 text-[13px] leading-[1.4] sm:text-base">
+        <span class="min-w-0 truncate text-gray-title">{{ producerName }}</span>
+        <span class="shrink-0 text-gray-title">/</span>
+        <span class="min-w-0 truncate font-bold text-gray-title">{{ dataset.title }}</span>
+        <template v-if="dataset.last_update">
+          <span class="hidden shrink-0 text-gray-medium sm:inline">·</span>
+          <TranslationT
+            class="hidden truncate text-gray-medium sm:inline"
+            keypath="mis à jour le {date}"
+          >
+            <template #date>
+              <FormattedDate :date="dataset.last_update" />
+            </template>
+          </TranslationT>
+        </template>
+      </div>
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <ResourceMainAction
+        v-if="resource"
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <BrandedButton
+        v-if="exitTo"
+        :href="exitTo"
+        :icon="RiFullscreenExitLine"
+        color="secondary"
+        size="xs"
+        icon-only
+        :title="t('Quitter le plein écran')"
+      >
+        {{ t('Quitter le plein écran') }}
+      </BrandedButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiFullscreenExitLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import Avatar from '../Avatar.vue'
+import BrandedButton from '../BrandedButton.vue'
+import OrganizationLogo from '../OrganizationLogo.vue'
+import ResourceMainAction from './ResourceMainAction.vue'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
+import { getOwnerName } from '../../functions/owned'
+import { useTranslation } from '../../composables/useTranslation'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+import type { Resource } from '../../types/resources'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2
+  resource: Resource | null
+  exitTo?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+
+// Plain producer name, matching the prototype: dark text, no link, no certificate
+// badge — unlike ObjectCardOwner which renders a styled link.
+const producerName = computed(() => getOwnerName(props.dataset))
+</script>

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,116 +1,149 @@
 <template>
   <aside
-    v-if="!collapsed"
-    class="w-full md:w-72 shrink-0 p-4 md:pr-0"
+    class="relative flex shrink-0 flex-col overflow-hidden border-r border-gray-default bg-white"
+    :class="resizing ? '' : 'transition-[width] duration-200'"
+    :style="{ width: collapsed ? '48px' : `${width}px` }"
+    :aria-label="t('Ressources')"
   >
-    <div class="flex items-center justify-between mb-3">
-      <h3 class="text-sm font-bold uppercase mb-0">
-        {{ t('Ressources') }}
-      </h3>
+    <div
+      class="flex h-14 items-center border-b border-gray-default bg-gray-some px-3"
+      :class="collapsed ? 'justify-center' : 'justify-between'"
+    >
+      <span
+        v-if="!collapsed"
+        class="text-[13px] font-medium text-gray-title"
+      >{{ t('Ressources') }}</span>
       <button
         type="button"
-        :title="t('Masquer le panneau')"
-        class="p-1 hover:bg-gray-100 rounded"
-        @click="$emit('update:collapsed', true)"
+        :title="collapsed ? t('Afficher le panneau des ressources') : t('Masquer le panneau')"
+        class="flex size-6 items-center justify-center rounded text-gray-plain hover:bg-gray-100"
+        @click="$emit('update:collapsed', !collapsed)"
       >
-        <RiArrowRightSLine class="size-5" />
+        <component
+          :is="collapsed ? RiSidebarUnfoldLine : RiSidebarFoldLine"
+          class="size-5"
+        />
       </button>
     </div>
 
-    <div class="mb-3">
-      <label
-        :for="searchId"
-        class="sr-only"
-      >{{ t('Rechercher') }}</label>
-      <input
-        :id="searchId"
-        :value="search"
-        type="search"
-        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
-        :placeholder="t('Rechercher')"
-        @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
-      >
-    </div>
+    <!-- min-w keeps the content laid out at the sidebar's min width so it doesn't
+         reflow (badges wrapping, section titles on 2 lines) while the width animates
+         open from the collapsed state — the aside's overflow-hidden clips the rest. -->
+    <!-- Extra bottom padding so the last item can scroll clear of the browser's
+         hover URL bar (Firefox shows it bottom-left). -->
+    <div
+      v-if="!collapsed"
+      class="flex min-h-0 min-w-[260px] flex-1 flex-col gap-3 overflow-y-auto p-2 pb-16"
+    >
+      <label class="flex h-8 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
+        <RiSearchLine class="size-3.5 shrink-0 text-gray-medium" />
+        <span class="sr-only">{{ t('Rechercher') }}</span>
+        <input
+          :value="search"
+          type="search"
+          class="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-gray-medium"
+          :placeholder="t('Rechercher une ressource')"
+          @input="$emit('update:search', ($event.target as HTMLInputElement).value)"
+        >
+      </label>
 
-    <div class="space-y-4 overflow-y-auto md:max-h-[calc(100vh-14rem)]">
-      <div
-        v-for="group in resources"
+      <section
+        v-for="group in groups"
         :key="group.type"
+        class="space-y-0.5"
       >
-        <div class="text-xs text-gray-plain font-bold uppercase mb-1.5 border-b border-gray-default pb-1">
+        <p class="px-1 py-2 text-[12px] font-medium leading-3 text-gray-medium">
           {{ getResourceLabel(group.type, group.total) }}
-        </div>
-        <ul class="list-none p-0 m-0 space-y-0.5">
-          <li
-            v-for="resource in group.items"
-            :key="resource.id"
-          >
-            <button
-              type="button"
-              class="w-full text-left px-2 py-1.5 rounded text-sm flex items-center gap-1.5 hover:bg-gray-100"
-              :class="{
-                'font-bold bg-blue-50': resource.id === selectedResourceId,
-              }"
-              @click="$emit('select', resource)"
-            >
-              <ResourceIcon
-                :resource
-                class="size-3.5 shrink-0"
-              />
-              <span class="truncate">{{ resource.title || t('Fichier sans nom') }}</span>
-            </button>
-          </li>
-        </ul>
+        </p>
+        <ResourceListItem
+          v-for="resource in group.items"
+          :key="resource.id"
+          :resource
+          :to="resourceTo(resource)"
+          :replace
+          :selected="resource.id === selectedResourceId"
+        />
         <button
           v-if="group.items.length < group.total"
           type="button"
-          class="w-full text-left px-2 py-1.5 text-sm text-blue-default hover:underline"
+          :disabled="loadingType === group.type"
+          class="flex w-full items-center gap-1 px-1 py-1 text-left text-[13px] text-blue-default hover:underline disabled:cursor-default disabled:no-underline"
           @click="$emit('load-more', group.type)"
         >
+          <RiLoader5Line
+            v-if="loadingType === group.type"
+            class="size-3.5 shrink-0 animate-spin"
+          />
           {{ t('Charger plus…') }}
         </button>
+      </section>
+
+      <!-- The search lives here, so its outcome does too: the viewer only says that
+           nothing is selected. -->
+      <div
+        v-if="search && !groups.length"
+        class="flex flex-col gap-2 px-1 py-2"
+      >
+        <p class="m-0 text-[13px] leading-snug text-gray-medium">
+          {{ t('Pas de résultats pour « {q} »', { q: search }) }}
+        </p>
+        <BrandedButton
+          color="secondary"
+          size="xs"
+          class="w-full"
+          @click="$emit('update:search', '')"
+        >
+          {{ t('Réinitialiser la recherche') }}
+        </BrandedButton>
       </div>
     </div>
-  </aside>
 
-  <div
-    v-else
-    class="shrink-0 flex items-start pt-1"
-  >
-    <button
-      type="button"
-      :title="t('Afficher le panneau des ressources')"
-      class="p-1 hover:bg-gray-100 rounded border border-gray-default"
-      @click="$emit('update:collapsed', false)"
-    >
-      <RiArrowLeftSLine class="size-5" />
-    </button>
-  </div>
+    <!-- Drag the right edge to resize the panel and read longer resource titles.
+         A separator rather than a button: it only answers to a drag, and a focusable
+         button would announce an action that no key can trigger. Keyboard users fold
+         the panel from the header instead. -->
+    <div
+      v-if="!collapsed"
+      role="separator"
+      aria-orientation="vertical"
+      :title="t('Glisser pour redimensionner')"
+      class="absolute right-0 top-0 z-20 h-full w-2 cursor-col-resize touch-none hover:bg-new-primary/10"
+      @mousedown="startResize"
+    />
+  </aside>
 </template>
 
 <script setup lang="ts">
-import { useId } from 'vue'
-import { RiArrowRightSLine, RiArrowLeftSLine } from '@remixicon/vue'
-import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { RiSidebarFoldLine, RiSidebarUnfoldLine, RiSearchLine, RiLoader5Line } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import ResourceListItem from '../ResourceListItem.vue'
 import { getResourceLabel } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
+import { useResizable } from '../../composables/useResizable'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 
 const { t } = useTranslation()
 
 defineProps<{
-  resources: ResourceGroup[]
+  groups: ResourceGroup[]
   selectedResourceId: string | null
   collapsed: boolean
   search: string
+  loadingType: ResourceType | null
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  replace?: boolean
 }>()
 
 defineEmits<{
-  'select': [resource: Resource]
   'load-more': [type: ResourceType]
   'update:collapsed': [value: boolean]
   'update:search': [value: string]
 }>()
 
-const searchId = useId()
+const { width, resizing, startResize } = useResizable({
+  initialWidth: 300,
+  minWidth: 260,
+  maxWidth: 720,
+})
 </script>