@datagouv/components-next 0.0.7 → 0.0.9

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

@@ -0,0 +1,153 @@
+<template>
+  <div class="fr-text--xs">
+    <div v-if="jsonData">
+      <JsonViewer
+        :value="jsonData"
+        boxed
+        sort
+        theme="light"
+        :max-depth="3"
+        :expand-depth="2"
+        :indent-width="2"
+      />
+    </div>
+    <div
+      v-else-if="loading"
+      class="text-gray-medium"
+    >
+      {{ $t("Chargement de l'aperçu JSON...") }}
+    </div>
+    <SimpleBanner
+      v-else-if="fileTooLarge"
+      type="warning"
+      class="flex items-center space-x-2"
+    >
+      <RiErrorWarningLine class="shink-0 size-6" />
+      <span>{{ fileSizeBytes
+        ? $t("Fichier JSON 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="shink-0 size-6" />
+      <span>{{ $t("Ce fichier JSON 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="shink-0 size-6" />
+      <span>{{ $t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
+    </SimpleBanner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { RiErrorWarningLine } from '@remixicon/vue'
+
+import { useComponentsConfig } from '../../config'
+import SimpleBanner from '../SimpleBanner.vue'
+import type { Resource } from '../../types/resources'
+
+const JsonViewer = defineAsyncComponent(() =>
+  import('vue3-json-viewer').then((module) => {
+    // Import CSS when component loads
+    import('vue3-json-viewer/dist/vue3-json-viewer.css')
+    return module.JsonViewer
+  }),
+)
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const config = useComponentsConfig()
+
+const jsonData = ref<unknown>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const fileTooLarge = ref(false)
+
+const fileSizeBytes = computed(() => {
+  // Check if resource has filesize
+  if (props.resource.filesize) {
+    return props.resource.filesize
+  }
+
+  // Check if resource has content-length in extras (from API metadata)
+  const contentLength = props.resource.extras?.['analysis:content-length']
+  if (contentLength && typeof contentLength === 'number') {
+    return contentLength
+  }
+
+  return null
+})
+
+const shouldLoadJson = 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 maxJsonPreviewSize is configured
+  if (!config.maxJsonPreviewSize) {
+    // If no limit is set, don't load unknown files
+    return false
+  }
+
+  // Convert maxJsonPreviewSize from characters to bytes (rough estimate)
+  // Assuming average 1 byte per character for JSON
+  const maxSizeBytes = config.maxJsonPreviewSize
+
+  return size <= maxSizeBytes
+})
+
+const fetchJsonData = async () => {
+  // Check if file is too large or size is unknown before making the request
+  if (!shouldLoadJson.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.json') // For testing locally without CORS issues
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.json()
+
+    // Use the original data directly - let the JSON viewer handle large files
+    jsonData.value = data
+  }
+  catch (err) {
+    console.error('Error loading JSON:', err)
+
+    if (err instanceof TypeError) {
+      error.value = 'network'
+    }
+    else {
+      error.value = 'generic'
+    }
+
+    jsonData.value = null
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchJsonData()
+})
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <SimpleBanner
+    v-if="hasError"
+    type="warning"
+    class="flex items-center space-x-2"
+  >
+    <RiErrorWarningLine class="shink-0 size-6" />
+    <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
+  </SimpleBanner>
+  <div
+    v-else
+    id="map"
+    ref="mapRef"
+  />
+</template>
+
+<script setup lang = "ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { RiErrorWarningLine } from '@remixicon/vue'
+
+import View from 'ol/View'
+import Map from 'ol/Map'
+import ScaleLine from 'ol/control/ScaleLine'
+import TileLayer from 'ol/layer/Tile'
+import OSM from 'ol/source/OSM'
+
+import {
+  CRS,
+  GeoportalAttribution,
+  GeoportalFullScreen,
+  GeoportalZoom,
+  LayerImport,
+  LayerSwitcher,
+} from 'geopf-extensions-openlayers'
+
+import SimpleBanner from '../SimpleBanner.vue'
+import type { Resource } from '../../types/resources'
+
+const props = defineProps<{ resource: Resource }>()
+
+const { t } = useI18n()
+
+let map = null
+const mapRef = ref(0)
+const hasError = ref(false)
+
+async function displayMap() {
+  await import('ol/ol.css')
+  await import('@gouvfr/dsfr/dist/dsfr.css')
+  await import('@gouvfr/dsfr/dist/utility/icons/icons.css')
+  await import('geopf-extensions-openlayers/css/Dsfr.css')
+
+  CRS.load()
+  map = new Map({
+    target: mapRef.value,
+    layers: [
+      new TileLayer({
+        source: new OSM(),
+      }),
+    ],
+    view: new View({
+      center: [288074.8449901076, 6247982.515792289],
+      zoom: 8,
+      constrainResolution: true,
+    }),
+  })
+
+  const scaleControl = new ScaleLine({
+    units: 'metric',
+    bar: false,
+  })
+  map.addControl(scaleControl)
+
+  const fullscreen = new GeoportalFullScreen({
+    position: 'top-right',
+  })
+  map.addControl(fullscreen)
+
+  const zoom = new GeoportalZoom({
+    position: 'bottom-left',
+  })
+  map.addControl(zoom)
+
+  const layerSwitcher = new LayerSwitcher({
+    options: {
+      position: 'top-right',
+    },
+  })
+  map.addControl(layerSwitcher)
+
+  const attributions = new GeoportalAttribution({
+    position: 'bottom-right',
+  })
+  map.addControl(attributions)
+
+  const layerImport = new LayerImport({
+    position: 'bottom-left',
+    listable: true,
+    layerTypes: ['WMS'],
+  })
+  layerImport._serviceUrlImportInput.value = props.resource.url
+  layerImport._formContainer.dispatchEvent(new CustomEvent('submit', { cancelable: true }))
+
+  map.addControl(layerImport)
+
+  // Wait for GetCapabilities to be called before trying to show layer
+  // TODO: use signal handling to know whether GetCapabilities failed or not
+  const waitTimeout = 500
+  let retry = 20
+  function showLayer() {
+    if (!layerImport._getCapResponseWMSLayers) {
+      retry--
+      if (retry > 0)
+        setTimeout(showLayer, waitTimeout)
+      else
+        hasError.value = true
+    }
+    else {
+      const layerInfo = layerImport._getCapResponseWMSLayers.filter(layer => layer.Name == props.resource.title)[0]
+      layerImport._addGetCapWMSLayer(layerInfo)
+    }
+  }
+  setTimeout(showLayer, waitTimeout)
+}
+
+onMounted(() => {
+  displayMap()
+})
+</script>
+
+<style>
+  #map {
+    width: 100%;
+    height: 500px;
+  }
+</style>

package/src/components/ResourceAccordion/Metadata.vue

@@ -6,11 +6,10 @@ import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
 import DescriptionList from '../DescriptionList.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
-import { formatDate } from '../../functions/dates'
+import { useFormatDate } from '../../functions/dates'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
 import { getResourceTitleId, getResourceLabel } from '../../functions/resources'
-import { useComponentsConfig } from '../../config'
 
 const props = defineProps<{
   resource: Resource
@@ -20,109 +19,89 @@ const hasExtras = computed(() => Object.keys(props.resource.extras).length)
 const resourceTitleId = computed(() => getResourceTitleId(props.resource))
 
 const { t } = useI18n()
-const config = useComponentsConfig()
+const { formatDate } = useFormatDate()
 </script>
 
 <template>
   <div>
-    <div class="flex gap-3rem flex-col-on-small">
-      <DescriptionList class="flex-1">
+    <div class="flex flex-wrap gap-12 flex-col md:flex-row overflow-hidden">
+      <DescriptionList class="flex-1 max-w-full">
         <DescriptionTerm>
           {{ t('URL') }}
           <CopyButton
-            :label="$t('Copy URL')"
-            :copied-label="$t('URL copied!')"
+            :label="$t(`Copier l'URL`)"
+            :copied-label="$t('URL copiée !')"
             :text="resource.url"
             :aria-describedby="resourceTitleId"
           />
         </DescriptionTerm>
         <DescriptionDetails :with-ellipsis="false">
-          <code class="code">
-            <a :href="resource.url"><component
-              :is="config.textClamp"
-              v-if="config && config.textClamp"
-              :max-lines="1"
-              :autoresize="true"
-              :text="resource.url"
-            /></a>
+          <code class="code truncate p-1">
+            <a :href="resource.url">
+              {{ resource.url }}
+            </a>
           </code>
         </DescriptionDetails>
         <DescriptionTerm>
-          {{ t('Stable URL') }}
+          {{ t('URL stable') }}
           <CopyButton
-            :label="$t('Copy stable URL')"
-            :copied-label="$t('Stable URL copied!')"
+            :label="$t(`Copier l'URL stable`)"
+            :copied-label="$t('URL stable copiée !')"
             :text="resource.latest"
             :aria-describedby="resourceTitleId"
           />
         </DescriptionTerm>
         <DescriptionDetails :with-ellipsis="false">
-          <code class="code">
-            <a :href="resource.latest"><component
-              :is="config.textClamp"
-              v-if="config && config.textClamp"
-              :max-lines="1"
-              :autoresize="true"
-              :text="resource.latest"
-            /></a>
+          <code class="code truncate p-1">
+            <a :href="resource.latest">
+              {{ resource.latest }}
+            </a>
           </code>
         </DescriptionDetails>
         <DescriptionTerm>
-          {{ t('Identifier') }}
+          {{ t('Identifiant') }}
           <CopyButton
-            :label="$t('Copy ID')"
-            :copied-label="$t('ID copied!')"
+            :label="$t(`Copier l'identifiant`)"
+            :copied-label="$t('ID copié !')"
             :text="resource.id"
             :aria-describedby="resourceTitleId"
           />
         </DescriptionTerm>
         <DescriptionDetails :with-ellipsis="false">
-          <code class="code">
-            <component
-              :is="config.textClamp"
-              v-if="config && config.textClamp"
-              :max-lines="1"
-              :autoresize="true"
-              :text="resource.id"
-            />
+          <code class="code truncate p-1">
+            {{ resource.id }}
           </code>
         </DescriptionDetails>
         <template v-if="resource.checksum">
           <DescriptionTerm>
             {{ resource.checksum.type }}
             <CopyButton
-              :label="$t('Copy checksum')"
-              :copied-label="$t('Checksum copied!')"
+              :label="$t('Copier la somme de contrôle')"
+              :copied-label="$t('Somme de contrôle copiée !')"
               :text="resource.checksum.value"
               :aria-describedby="resourceTitleId"
             />
           </DescriptionTerm>
           <DescriptionDetails :with-ellipsis="false">
-            <code class="code">
-              <component
-                :is="config.textClamp"
-                v-if="config && config.textClamp"
-                :max-lines="1"
-                :autoresize="true"
-                :text="resource.checksum.value"
-              />
+            <code class="code truncate p-1">
+              {{ resource.checksum.value }}
             </code>
           </DescriptionDetails>
         </template>
       </DescriptionList>
       <DescriptionList style="flex-shrink: 0;">
-        <DescriptionTerm>{{ t('Created on') }}</DescriptionTerm>
+        <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
           {{ formatDate(resource.created_at) }}
         </DescriptionDetails>
-        <DescriptionTerm>{{ t('Modified on') }}</DescriptionTerm>
+        <DescriptionTerm>{{ t('Modifiée le') }}</DescriptionTerm>
         <DescriptionDetails>
           {{ formatDate(resource.last_modified) }}
         </DescriptionDetails>
       </DescriptionList>
       <DescriptionList style="flex-shrink: 0;">
         <template v-if="resource.filesize">
-          <DescriptionTerm>{{ t('Size') }}</DescriptionTerm>
+          <DescriptionTerm>{{ t('Taille') }}</DescriptionTerm>
           <DescriptionDetails>
             {{ filesize(resource.filesize) }}
           </DescriptionDetails>
@@ -134,9 +113,9 @@ const config = useComponentsConfig()
           </DescriptionDetails>
         </template>
         <template v-if="resource.mime">
-          <DescriptionTerm>{{ t('MIME Type') }}</DescriptionTerm>
+          <DescriptionTerm>{{ t('Type MIME') }}</DescriptionTerm>
           <DescriptionDetails>
-            <code class="code text-overflow-ellipsis">{{ resource.mime }}</code>
+            <code class="code truncate">{{ resource.mime }}</code>
           </DescriptionDetails>
         </template>
       </DescriptionList>
@@ -145,8 +124,8 @@ const config = useComponentsConfig()
       <ExtraAccordion
         v-if="hasExtras"
         class="pt-6 mt-6 border-top border-gray-default"
-        :button-text="t('See extras')"
-        :title-text="t('Resource Extras')"
+        :button-text="t('Voir les extras')"
+        :title-text="t('Extras de la ressource')"
         title-level="h5"
         :extra="resource.extras"
       />

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

@@ -0,0 +1,189 @@
+<template>
+  <div class="text-xs">
+    <div v-if="pdfData">
+      <!--
+      We use props.resource.url instead of props.resource.latest
+      because the PDF component raises an error otherwise.
+      See https://github.com/datagouv/cdata/pull/611
+      -->
+      <PDF
+        :src="props.resource.url"
+        :show-progress="true"
+        progress-color="#0063cb"
+        :show-page-tooltip="true"
+        :show-back-to-top-btn="true"
+        :scroll-threshold="300"
+        pdf-width="100%"
+        :row-gap="12"
+        :use-system-fonts="true"
+        :disable-range="false"
+        :disable-stream="false"
+        :disable-auto-fetch="false"
+        class="w-full"
+        @on-progress="handleProgress"
+        @on-complete="handleComplete"
+        @on-page-change="handlePageChange"
+        @on-pdf-init="handlePdfInit"
+        @on-error="handleError"
+      />
+    </div>
+    <div
+      v-else-if="loading"
+      class="text-gray-medium"
+    >
+      {{ $t("Chargement de l'aperçu PDF...") }}
+    </div>
+    <SimpleBanner
+      v-else-if="fileTooLarge"
+      type="warning"
+      class="flex items-center space-x-2"
+    >
+      <RiErrorWarningLine class="shink-0 size-6" />
+      <span>{{ fileSizeBytes
+        ? $t("Fichier PDF 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="shink-0 size-6" />
+      <span>{{ $t("Ce fichier PDF 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="shink-0 size-6" />
+      <span>{{ $t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
+    </SimpleBanner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { RiErrorWarningLine } from '@remixicon/vue'
+import SimpleBanner from '../SimpleBanner.vue'
+import { useComponentsConfig } from '../../config'
+import type { Resource } from '../../types/resources'
+
+const PDF = defineAsyncComponent(() =>
+  import('pdf-vue3').then((module) => {
+    return module.default
+  }),
+)
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const config = useComponentsConfig()
+
+const pdfData = ref<boolean>(false)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const fileTooLarge = ref(false)
+
+const fileSizeBytes = computed(() => {
+  // Check if resource has filesize
+  if (props.resource.filesize) {
+    return props.resource.filesize
+  }
+
+  // Check if resource has content-length in extras (from API metadata)
+  const contentLength = props.resource.extras?.['analysis:content-length']
+  if (contentLength && typeof contentLength === 'number') {
+    return contentLength
+  }
+
+  return null
+})
+
+const shouldLoadPdf = computed(() => {
+  const size = fileSizeBytes.value
+  if (!size) {
+    // If we don't know the size, don't risk loading a potentially huge file
+    return false
+  }
+
+  // Use maxPdfPreviewSize from config, fallback to 10 MB if not set
+  const maxSizeBytes = config.maxPdfPreviewSize ?? 10_000_000
+  return size <= maxSizeBytes
+})
+
+const loadPdf = async () => {
+  // Check if file is too large or size is unknown before loading
+  if (!shouldLoadPdf.value) {
+    fileTooLarge.value = true
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    // Test if the PDF URL is accessible
+    const response = await fetch(props.resource.url, { method: 'HEAD' })
+    // const response = await fetch('/test-data.pdf') // For testing locally without CORS issues
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    // If the URL is accessible, set pdfData to true
+    // The PDF component will handle the actual loading
+    pdfData.value = true
+  }
+  catch (err) {
+    console.error('Error testing PDF URL:', err)
+
+    if (err instanceof TypeError) {
+      error.value = 'network'
+    }
+    else {
+      error.value = 'generic'
+    }
+
+    pdfData.value = false
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// Event handlers for PDF component
+const handleProgress = (loadRatio: number) => {
+  console.log(`PDF loading progress: ${loadRatio}%`)
+}
+
+const handleComplete = () => {
+  console.log('PDF download completed')
+}
+
+const handlePageChange = (page: number) => {
+  console.log(`PDF page changed to: ${page}`)
+}
+
+const handlePdfInit = (pdf: unknown) => {
+  console.log('PDF initialized:', pdf)
+}
+
+const handleError = (err: unknown) => {
+  console.error('PDF loading error:', err)
+
+  if (err instanceof TypeError) {
+    error.value = 'network'
+  }
+  else {
+    error.value = 'generic'
+  }
+
+  pdfData.value = false
+}
+
+onMounted(() => {
+  loadPdf()
+})
+</script>