@datagouv/components-next 1.0.2-dev.9 → 1.0.2-dev.91

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -56,7 +56,7 @@
             :resource
           />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />
@@ -231,7 +231,7 @@
                 :dataset="dataset"
               />
               <!-- Show Datafair embedded preview (koumoul) -->
-              <SwaggerClient
+              <OpenApiViewer
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
@@ -357,7 +357,7 @@
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
               </div>
-              <Swagger
+              <OpenApiViewer
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${props.resource.id}/swagger/`"
               />
@@ -387,9 +387,8 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'
@@ -399,7 +398,7 @@ import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
 import Preview from './Preview.vue'
 import { isOrganizationCertified } from '../../functions/organizations'
-import SwaggerClient from './Swagger.client.vue'
+import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 
 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']
@@ -418,7 +417,6 @@ const props = withDefaults(defineProps<{
 
 const config = useComponentsConfig()
 
-const Swagger = defineAsyncComponent(() => import('./Swagger.client.vue'))
 const MapContainer = defineAsyncComponent(() => import('./MapContainer.client.vue'))
 const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -1,59 +1,24 @@
 <template>
-  <div class="fr-text--xs">
-    <div v-if="xmlData">
-      <XmlViewer :xml="xmlData" />
-    </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu XML...") }}
-    </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier XML trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier XML ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
-    </SimpleBanner>
-  </div>
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="XML"
+    :resource="resource"
+    :max-size="config.maxXmlPreviewCharSize"
+    :load="load"
+  >
+    <XmlViewer :xml="(data as string)" />
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
+import { defineAsyncComponent } from 'vue'
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
 import type { Resource } from '../../types/resources'
-import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d'
-import { getResourceFilesize } from '../../main'
 
 const XmlViewer = defineAsyncComponent(() =>
-  import('vue3-xml-viewer').then((module) => {
-    return module.default || module.XmlViewer
-  }),
+  import('vue3-xml-viewer').then(module => module.default || module.XmlViewer),
 )
 
 const props = defineProps<{
@@ -61,74 +26,10 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
-
-const xmlData = ref<string | null>(null)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const shouldLoadXml = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxXmlPreviewCharSize is configured
-  if (!config.maxXmlPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
-
-  // Convert maxXmlPreviewCharSize from characters to bytes (rough estimate)
-  // Assuming average 1 byte per character for XML
-  const maxByteSize = config.maxXmlPreviewCharSize
-
-  return size <= maxByteSize
-})
 
-const fetchXmlData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadXml.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const response = await fetch(props.resource.url)
-    // const response = await fetch('/test-data.xml') // For testing locally without CORS issues
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-    const data = await response.text()
-
-    // Use the XML data as string - let the XML viewer handle large files
-    xmlData.value = data
-  }
-  catch (err) {
-    console.error('Error loading XML:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-
-    xmlData.value = null
-  }
-  finally {
-    loading.value = false
-  }
+const load = async () => {
+  const response = await fetch(props.resource.url)
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+  return response.text()
 }
-
-onMounted(() => {
-  fetchXmlData()
-})
 </script>

package/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -2,6 +2,19 @@
   <div v-if="allResources.length || hasAnyResources">
     <div class="flex gap-6">
       <div class="flex-1 min-w-0">
+        <div
+          v-if="dataset.resources.total > 1"
+          class="md:hidden flex justify-end mb-3"
+        >
+          <BrandedButton
+            size="xs"
+            color="secondary"
+            :icon="RiListUnordered"
+            @click="mobileSidebarOpen = true"
+          >
+            {{ t('Ressources ({count})', { count: dataset.resources.total }) }}
+          </BrandedButton>
+        </div>
         <ResourceExplorerViewer
           v-if="selectedResource && allResources.length"
           :key="selectedResource.id"
@@ -30,17 +43,38 @@
           </BrandedButton>
         </div>
       </div>
+      <div class="hidden md:block">
+        <ResourceExplorerSidebar
+          :resources="allResources"
+          :selected-resource-id="selectedResource?.id ?? null"
+          :collapsed="sidebarCollapsed"
+          :search
+          @select="selectResource"
+          @load-more="loadMore"
+          @update:collapsed="sidebarCollapsed = $event"
+          @update:search="updateSearch($event)"
+        />
+      </div>
+    </div>
+
+    <!-- Mobile sidebar panel -->
+    <dialog
+      ref="mobileSidebarDialog"
+      class="mobile-sidebar md:hidden fixed inset-0 m-0 ml-auto p-0 h-dvh max-h-dvh w-80 max-w-[85vw] bg-white shadow-lg overflow-y-auto overscroll-contain backdrop:bg-black/30"
+      @close="mobileSidebarOpen = false"
+      @click.self="closeMobileSidebar"
+    >
       <ResourceExplorerSidebar
         :resources="allResources"
         :selected-resource-id="selectedResource?.id ?? null"
-        :collapsed="sidebarCollapsed"
+        :collapsed="false"
         :search
         @select="selectResource"
         @load-more="loadMore"
-        @update:collapsed="sidebarCollapsed = $event"
+        @update:collapsed="closeMobileSidebar"
         @update:search="updateSearch($event)"
       />
-    </div>
+    </dialog>
   </div>
   <div
     v-else
@@ -73,6 +107,7 @@ import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
+import { RiListUnordered } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 
 const props = withDefaults(defineProps<{
@@ -159,6 +194,22 @@ watch(searchDebounced, () => {
   }
 })
 
+// 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
@@ -166,17 +217,12 @@ const loadMore = async (type: ResourceType) => {
   const extraRef = extraResourcesByType[index]!
   pageRef.value++
 
-  const { data } = await useFetch<PaginatedArray<Resource>>(url, {
-    params: {
-      type,
-      page_size: PAGE_SIZE,
-      page: pageRef.value,
-      q: searchDebounced.value || undefined,
-    },
-  })
+  loadMoreType.value = type
+  loadMorePage.value = pageRef.value
+  await executeLoadMore()
 
-  if (data.value) {
-    extraRef.value = [...extraRef.value, ...data.value.data]
+  if (loadMoreData.value) {
+    extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
   }
 }
 
@@ -200,6 +246,21 @@ const flatResources = computed(() =>
 
 // Fetch resource by ID if specified in URL (for SSR)
 const initialResourceId = resourceIdQuery.value
+const mobileSidebarOpen = ref(false)
+const mobileSidebarDialog = ref<HTMLDialogElement | null>(null)
+
+watch(mobileSidebarOpen, (open) => {
+  if (open) {
+    mobileSidebarDialog.value?.showModal()
+  }
+  else {
+    mobileSidebarDialog.value?.close()
+  }
+})
+
+function closeMobileSidebar() {
+  mobileSidebarOpen.value = false
+}
 const { data: fetchedResource } = initialResourceId
   ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
   : { data: ref(null) }
@@ -227,6 +288,7 @@ function updateSearch(newSearch: string) {
 
 const selectResource = (resource: Resource) => {
   selectedResource.value = resource
+  mobileSidebarOpen.value = false
   router.replace({
     query: { ...router.currentRoute.value.query, resource_id: resource.id },
   })
@@ -241,3 +303,9 @@ watch(flatResources, () => {
   }
 })
 </script>
+
+<style>
+html:has(dialog.mobile-sidebar[open]) {
+  overflow: hidden;
+}
+</style>

package/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside
     v-if="!collapsed"
-    class="w-72 shrink-0 pl-4"
+    class="w-full md:w-72 shrink-0 p-4 md:pr-0"
   >
     <div class="flex items-center justify-between mb-3">
       <h3 class="text-sm font-bold uppercase mb-0">
@@ -32,7 +32,7 @@
       >
     </div>
 
-    <div class="space-y-4 overflow-y-auto">
+    <div class="space-y-4 overflow-y-auto md:max-h-[calc(100vh-14rem)]">
       <div
         v-for="group in resources"
         :key="group.type"

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -6,7 +6,7 @@
           <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
             <ResourceIcon
               :resource
-              class="size-3.5 mr-1"
+              class="size-3.5 mr-1 shrink-0 translate-y-px"
             />
             <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
           </h3>
@@ -14,9 +14,16 @@
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
             :text="resourceExternalUrl"
+            class="hidden md:inline-flex"
           />
         </div>
-        <div class="text-gray-medium text-xs flex items-center gap-1">
+        <div class="text-gray-medium text-xs flex items-center gap-1 flex-wrap">
+          <SchemaBadge :resource />
+          <RiSubtractLine
+            v-if="resource.schema?.name || resource.schema?.url"
+            aria-hidden="true"
+            class="size-3 fill-gray-medium"
+          />
           <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
           <RiSubtractLine
             aria-hidden="true"
@@ -128,14 +135,28 @@
                 :resource="resource"
                 :dataset="dataset"
               />
-              <SwaggerClient
+              <OpenApiViewer
                 v-else-if="hasOpenAPIPreview"
                 :url="resource.extras['apidocUrl'] as string"
               />
               <Preview
-                v-else
+                v-else-if="hasTabularData"
                 :resource="resource"
               />
+              <PreviewUnavailable v-else>
+                <!-- "File too large to download" is the only analysis:error value from hydra for now -->
+                <template v-if="resource.extras['analysis:error'] === 'File too large to download'">
+                  {{ t("Ce fichier est trop volumineux pour être analysé et prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+                </template>
+                <template v-else-if="resource.extras['analysis:parsing:error']">
+                  {{ t("L'analyse de ce fichier a rencontré une erreur, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.") }}
+                  <br>
+                  <span class="text-gray-medium text-xs">{{ resource.extras['analysis:parsing:error'] }}</span>
+                </template>
+                <template v-else>
+                  {{ t("Ce fichier ne peut pas être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+                </template>
+              </PreviewUnavailable>
             </div>
             <div v-if="tab.key === 'description'">
               <MarkdownViewer
@@ -283,7 +304,7 @@
                 <p>{{ t("- Si le fichier est supprimé, l'API sera également supprimée.") }}</p>
                 <p>{{ t("Pour des usages pérennes, prévoyez que cette API dépend directement du fichier source.") }}</p>
               </div>
-              <Swagger
+              <OpenApiViewer
                 v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${resource.id}/swagger/`"
               />
@@ -298,12 +319,13 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
+import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
 import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
-import Swagger from '../ResourceAccordion/Swagger.client.vue'
+import OpenApiViewer from '../OpenApiViewer/OpenApiViewer.vue'
 import TabGroup from '../Tabs/TabGroup.vue'
 import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
@@ -313,9 +335,9 @@ import Tooltip from '../Tooltip.vue'
 import Preview from '../ResourceAccordion/Preview.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
+import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon } from '../../functions/resources'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
@@ -342,9 +364,6 @@ const MapContainer = defineAsyncComponent(() =>
 const Pmtiles = defineAsyncComponent(() =>
   import('../ResourceAccordion/Pmtiles.client.vue'),
 )
-const SwaggerClient = defineAsyncComponent(() =>
-  import('../ResourceAccordion/Swagger.client.vue'),
-)
 
 const props = defineProps<{
   dataset: Dataset | DatasetV2