feat: new resources explorer

Author: ThibaudDauce

components/ResourceExplorer/ResourceExplorer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div v-if="allResources.length">
+    <div class="flex gap-6">
+      <div class="flex-1 min-w-0">
+        <ResourceExplorerViewer
+          v-if="selectedResource"
+          :key="selectedResource.id"
+          :dataset
+          :resource="selectedResource"
+        />
+      </div>
+      <ResourceExplorerSidebar
+        :resources="allResources"
+        :selected-resource-id="selectedResource?.id ?? null"
+        :collapsed="sidebarCollapsed"
+        @select="selectResource"
+        @update:collapsed="sidebarCollapsed = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RESOURCE_TYPE, type DatasetV2, type Resource, type ResourceType } from '@datagouv/components-next'
+import type { PaginatedArray } from '~/types/types'
+import type { ResourceGroup } from './ResourceExplorerSidebar.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const { $api } = useNuxtApp()
+
+const sidebarCollapsed = ref(false)
+
+const url = computed(() => `/api/2/datasets/${props.dataset.id}/resources/`)
+
+const rawResourcesByTypes = await Promise.all(
+  RESOURCE_TYPE.map(type =>
+    useAPI<PaginatedArray<Resource>>(url, {
+      query: { type, page_size: 50 },
+    }),
+  ),
+)
+
+const allResources = computed<ResourceGroup[]>(() => {
+  return RESOURCE_TYPE
+    .map((type, index) => ({
+      type: type as ResourceType,
+      items: rawResourcesByTypes[index].data.value?.data ?? [],
+    }))
+    .filter(group => group.items.length > 0)
+})
+
+const flatResources = computed(() =>
+  allResources.value.flatMap(g => g.items),
+)
+
+const selectedResource = ref<Resource | null>(null)
+const selectionInitialized = ref(false)
+
+const selectResource = (resource: Resource) => {
+  selectedResource.value = resource
+  selectionInitialized.value = true
+  router.replace({
+    query: { ...route.query, resource_id: resource.id },
+  })
+}
+
+// Sélection initiale : resource_id de l'URL ou premier fichier du premier groupe (dans l'ordre RESOURCE_TYPE)
+watchEffect(async () => {
+  if (selectionInitialized.value) return
+
+  const resourceId = route.query.resource_id as string | undefined
+  if (resourceId) {
+    const existing = flatResources.value.find(r => r.id === resourceId)
+    if (existing) {
+      selectedResource.value = existing
+      selectionInitialized.value = true
+      return
+    }
+    try {
+      const fetched = await $api<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${resourceId}/`)
+      selectedResource.value = fetched
+      selectionInitialized.value = true
+      return
+    }
+    catch {
+      // fallback ci-dessous
+    }
+  }
+
+  // Prend le 1er élément du 1er groupe non-vide (dans l'ordre RESOURCE_TYPE : main d'abord)
+  if (flatResources.value.length > 0) {
+    selectedResource.value = flatResources.value[0]
+    selectionInitialized.value = true
+  }
+})
+</script>

components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -0,0 +1,118 @@
+<template>
+  <aside
+    v-if="!collapsed"
+    class="w-72 shrink-0 border-l border-gray-default pl-4"
+  >
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-sm font-bold uppercase mb-0">
+        {{ $t('Ressources') }}
+      </h3>
+      <button
+        type="button"
+        :title="$t('Masquer le panneau')"
+        class="p-1 hover:bg-gray-100 rounded"
+        @click="$emit('update:collapsed', true)"
+      >
+        <RiArrowRightSLine class="size-5" />
+      </button>
+    </div>
+
+    <div class="mb-3">
+      <label
+        :for="searchId"
+        class="sr-only"
+      >{{ $t('Rechercher') }}</label>
+      <input
+        :id="searchId"
+        v-model="search"
+        type="search"
+        class="w-full border border-gray-default rounded px-2.5 py-1.5 text-sm"
+        :placeholder="$t('Rechercher')"
+      >
+    </div>
+
+    <div class="space-y-4 overflow-y-auto max-h-[60vh]">
+      <div
+        v-for="group in filteredGroups"
+        :key="group.type"
+      >
+        <div class="text-xs text-gray-plain font-bold uppercase mb-1.5 border-b border-gray-default pb-1">
+          {{ getResourceLabel(group.type, group.items.length) }}
+        </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>
+      </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>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { ResourceIcon, getResourceLabel, type Resource, type ResourceType } from '@datagouv/components-next'
+import { RiArrowRightSLine, RiArrowLeftSLine } from '@remixicon/vue'
+
+export interface ResourceGroup {
+  type: ResourceType
+  items: Resource[]
+}
+
+const props = defineProps<{
+  resources: ResourceGroup[]
+  selectedResourceId: string | null
+  collapsed: boolean
+}>()
+
+defineEmits<{
+  'select': [resource: Resource]
+  'update:collapsed': [value: boolean]
+}>()
+
+const searchId = useId()
+const search = ref('')
+
+const filteredGroups = computed(() => {
+  const q = search.value.toLowerCase().trim()
+  if (!q) return props.resources.filter(g => g.items.length > 0)
+  return props.resources
+    .map(group => ({
+      ...group,
+      items: group.items.filter(r =>
+        (r.title || '').toLowerCase().includes(q),
+      ),
+    }))
+    .filter(g => g.items.length > 0)
+})
+</script>