@datagouv/components-next 0.0.7 → 0.0.9

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="border border-gray-default"
+    class="border border-gray-default overflow-auto"
     :class="{ 'fr-pb-4v': open }"
   >
     <header
       :id="resourceHeaderId"
-      class="fr-p-4v flex items-center justify-between relative"
+      class="fr-p-4v flex flex-wrap gap-4 items-center justify-between relative"
     >
       <div>
         <div class="flex items-center fr-mb-1v">
@@ -25,22 +25,28 @@
                 class="size-3.5 mr-1"
               />
               <span
-                :class="{
-                  'font-bold': open,
-                }"
+                v-if="open"
+                class="font-bold text-left"
+              ><component
+                :is="config.textClamp"
+                v-if="config && config.textClamp"
+                :max-lines="2"
+                :text="resource.title || t('Fichier sans nom')"
+              /></span>
+              <span
+                v-else
               ><component
                 :is="config.textClamp"
                 v-if="config && config.textClamp"
                 :max-lines="1"
-                :text="resource.title || t('Nameless file')"
+                :text="resource.title || t('Fichier sans nom')"
               /></span>
-
               <span class="absolute inset-0 z-1" />
             </button>
           </h4>
           <CopyButton
-            :label="$t('Copy link')"
-            :copied-label="$t('Link copied!')"
+            :label="$t('Copier le lien')"
+            :copied-label="$t('Lien copié !')"
             :text="resourceExternalUrl"
             class="z-2"
           />
@@ -50,7 +56,7 @@
             :resource
             class="dash-after"
           />
-          <span class="fr-text--xs fr-mb-0 dash-after">{{ t('Updated {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
+          <span class="fr-text--xs fr-mb-0 dash-after">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
           <span
             v-if="resource.format"
             class="fr-text--xs fr-mb-0 dash-after"
@@ -61,17 +67,17 @@
           </span>
           <span
             class="inline-flex items-center fr-text--xs fr-mb-0"
-            :aria-label="t('{n} downloads', resource.metrics.views)"
+            :aria-label="t('{n} téléchargements', resource.metrics.views)"
           >
             <span class="fr-icon-download-line fr-icon--xs fr-mr-1v" />
-            <span>{{ summarize(resource.metrics.views) }} <span class="hidden show-on-small">{{ t("downloads") }}</span></span>
+            <span>{{ summarize(resource.metrics.views) }} <span class="hidden show-on-small">{{ t("téléchargements") }}</span></span>
           </span>
         </div>
         <p
           v-if="communityResource"
           class="fr-mb-0 fr-mt-1v fr-text--xs text-gray-medium"
         >
-          {{ t('From') }}
+          {{ t('Par') }}
           <a
             v-if="communityResource.organization"
             class="fr-link fr-text--xs"
@@ -84,26 +90,21 @@
           </template>
         </p>
       </div>
-      <div class="flex items-center fr-ml-4v buttons">
-        <p
-          v-if="unavailable"
-          class="text-default-warning fr-m-0 fr-mr-2v"
-        >
-          {{ t('Unavailable') }}
-        </p>
+      <div class="flex items-center buttons">
         <p
           v-if="resource.format === 'url'"
           class="fr-col-auto fr-ml-3v fr-m-0 z-2"
         >
           <BrandedButton
             :href="resource.latest"
-            :title="t('File link - opens a new window')"
+            :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
             :aria-describedby="resourceTitleId"
             rel="ugc nofollow noopener"
             new-tab
             size="xs"
+            external
           >
-            {{ $t('Visit') }}
+            {{ $t('Visiter') }}
           </BrandedButton>
         </p>
         <p
@@ -118,7 +119,7 @@
             size="xs"
             :icon="RiFileCopyLine"
           >
-            {{ t('Copy link') }}
+            {{ t('Copier le lien') }}
           </BrandedButton>
         </p>
         <p
@@ -128,14 +129,15 @@
           <BrandedButton
             :href="resource.latest"
             rel="ugc nofollow noopener"
-            :title="t('Download file')"
+            :title="downloadButtonTitle"
             download
             class="relative text-transform-uppercase matomo_download z-2"
-            :icon="RiDownloadLine"
+            :icon="unavailable ? RiFileWarningLine : RiDownloadLine"
             size="xs"
             :aria-describedby="resourceTitleId"
+            external
           >
-            <span class="sr-only">{{ t('Download file as ') }}</span>{{ format }}
+            <span class="sr-only">{{ t('Télécharger la liste au format ') }}</span>{{ format }}
           </BrandedButton>
         </p>
         <p
@@ -146,6 +148,7 @@
             :dataset-id="dataset.id"
             :resource-id="resource.id"
             :is-community-resource="isCommunityResource"
+            size="xs"
           />
         </p>
         <div
@@ -177,13 +180,42 @@
           <TabPanel
             v-for="tab in tabsOptions"
             :key="tab.key"
+            class="px-4"
           >
+            <div v-if="tab.key === 'map'">
+              <Pmtiles
+                v-if="hasPmtiles"
+                :resource="resource"
+              />
+              <MapContainer
+                v-if="ogcWms"
+                :resource="resource"
+              />
+            </div>
             <div v-if="tab.key === 'data'">
-              <Preview :resource="resource" />
+              <!-- Show JSON viewer for JSON files -->
+              <JsonPreview
+                v-if="resource.format && resource.format.toLowerCase() === 'json'"
+                :resource="resource"
+              />
+              <!-- Show PDF viewer for PDF files -->
+              <PdfPreview
+                v-else-if="resource.format && resource.format.toLowerCase() === 'pdf'"
+                :resource="resource"
+              />
+              <!-- Show XML viewer for XML files -->
+              <XmlPreview
+                v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
+                :resource="resource"
+              />
+              <!-- Show regular preview for other file types -->
+              <Preview
+                v-else
+                :resource="resource"
+              />
             </div>
             <div
               v-if="tab.key === 'description'"
-              class="fr-pl-4v fr-pr-4v"
             >
               <div
                 class="fr-mt-0 markdown fr-text--sm text-mention-grey"
@@ -192,37 +224,34 @@
             </div>
             <div
               v-if="tab.key === 'data-structure'"
-              class="fr-pl-4v fr-pr-4v"
             >
               <DataStructure
-                v-if="hasPreview"
+                v-if="hasTabularData"
                 :resource="resource"
               />
             </div>
             <div
               v-if="tab.key === 'metadata'"
-              class="fr-pl-4v fr-pr-4v"
             >
               <Metadata :resource />
             </div>
             <div
               v-if="tab.key === 'downloads'"
-              class="fr-pl-4v fr-pr-4v"
             >
               <dl class="fr-pl-0">
                 <dt
                   v-if="resource.format === 'url'"
                   class="font-bold fr-text--sm fr-mb-0"
                 >
-                  {{ $t('Original URL') }}
+                  {{ $t("URL d'origine") }}
                 </dt>
                 <dt
                   v-else
                   class="font-bold fr-text--sm fr-mb-0"
                 >
-                  {{ $t('Original format') }}
+                  {{ $t('Format original') }}
                 </dt>
-                <dd class="text-sm ml-0 mt-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+                <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
                   <span v-if="resource.format === 'url'">
                     <a
                       :href="resource.latest"
@@ -254,31 +283,35 @@
                     </a>
                   </span>
                   <CopyButton
-                    :label="$t('Copy link')"
-                    :copied-label="$t('Link copied!')"
+                    :label="$t('Copier le lien')"
+                    :copied-label="$t('Lien copié !')"
                     :text="resource.latest"
                     class="relative"
                   />
                 </dd>
-                <template v-if="resource.extras['analysis:parsing:parquet_url']">
+                <template v-if="generatedFormats.length">
                   <dt class="font-bold fr-text--sm fr-mb-0">
-                    {{ $t('Auto-generated formats from {platform}', { platform: config.name }) }}
+                    {{ $t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
                   </dt>
-                  <dd class="text-sm ml-0 mt-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+                  <dd
+                    v-for="generatedFormat in generatedFormats"
+                    :key="generatedFormat.format"
+                    class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+                  >
                     <span>
                       <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
                       <a
-                        :href="resource.extras['analysis:parsing:parquet_url']"
+                        :href="generatedFormat.url"
                         class="fr-link"
                         rel="ugc nofollow noopener"
                       >
-                        <span>{{ $t('Format {format}', { format: 'parquet' }) }}<span v-if="resource.extras['analysis:parsing:parquet_size']"> - {{ filesize(resource.extras['analysis:parsing:parquet_size']) }}</span></span>
+                        <span>{{ $t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
                       </a>
                     </span>
                     <CopyButton
-                      :label="$t('Copy link')"
-                      :copied-label="$t('Link copied!')"
-                      :text="resource.extras['analysis:parsing:parquet_url']"
+                      :label="$t('Copier le lien')"
+                      :copied-label="$t('Lien copié !')"
+                      :text="generatedFormat.url"
                       class="relative"
                     />
                   </dd>
@@ -287,11 +320,10 @@
             </div>
             <div
               v-if="tab.key === 'swagger'"
-              class="fr-pl-4v fr-pr-4v"
             >
-              <div>{{ t('Swagger automatically generated by data.gouv.fr. This swagger allows you to query data by API by filtering it by column value.') }}</div>
+              <div>{{ t("Swagger généré automatiquement par {platform}. Ce swagger vous permet d'interroger les données par API en les filtrant par valeur de colonne.", { platform: config.name }) }}</div>
               <Swagger
-                v-if="hasPreview"
+                v-if="hasTabularData"
                 :url="`${config.tabularApiUrl}/api/resources/${props.resource.id}/swagger/`"
               />
             </div>
@@ -305,11 +337,11 @@
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { RiDownloadLine, RiFileCopyLine } from '@remixicon/vue'
+import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
 import { markdown } from '../../functions/markdown'
-import { formatRelativeIfRecentDate } from '../../functions/dates'
+import { useFormatDate } from '../../functions/dates'
 import type { CommunityResource, Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import TabGroup from '../Tabs/TabGroup.vue'
@@ -321,7 +353,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { getResourceExternalUrl } from '../../functions/datasets'
 import Metadata from './Metadata.vue'
@@ -331,7 +363,7 @@ import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
 import Preview from './Preview.vue'
 
-const OGC_SERVICES_FORMATS = ['ogc:wfs', 'ogc:wms', 'wfs', 'wms']
+const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 
 const props = withDefaults(defineProps<{
   dataset: Dataset | DatasetV2
@@ -347,20 +379,59 @@ const props = withDefaults(defineProps<{
 
 const config = useComponentsConfig()
 
-const Swagger = defineAsyncComponent(() => import('./Swagger.vue'))
+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'))
+const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
+const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
 
 const { t } = useI18n()
+const { formatRelativeIfRecentDate } = useFormatDate()
 
 const hasPreview = computed(() => {
+  // For JSON, PDF, and XML files, show preview.
+  // We cannot check for CORS issues here because we cannot use an async component here.
+  // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
+  const format = props.resource.format?.toLowerCase()
+  return format === 'json' || format === 'pdf' || format === 'xml'
+})
+
+const hasTabularData = computed(() => {
+  // Determines if we should show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure)
   return config.tabularApiUrl
-    && props.resource.extras['analysis:parsing:finished_at']
+    && props.resource.extras['analysis:parsing:parsing_table']
     && !props.resource.extras['analysis:parsing:error']
     && (config.tabularAllowRemote || props.resource.filetype === 'file')
 })
 
-const format = computed(() => getResourceFormatIcon(props.resource.format) ? props.resource.format : t('File'))
+const hasPmtiles = computed(() => {
+  return props.resource.extras['analysis:parsing:pmtiles_url']
+})
 
-const ogcService = computed(() => OGC_SERVICES_FORMATS.includes(props.resource.format))
+const format = computed(() => getResourceFormatIcon(props.resource.format) ? props.resource.format : t('Fichier'))
+
+const ogcService = computed(() => detectOgcService(props.resource))
+
+const ogcWms = computed(() => ogcService.value === 'wms')
+
+const generatedFormats = computed(() => {
+  const formats = GENERATED_FORMATS
+    .filter(format => `analysis:parsing:${format}_url` in props.resource.extras)
+    .map(format => ({
+      url: props.resource.extras[`analysis:parsing:${format}_url`] as string,
+      size: props.resource.extras[`analysis:parsing:${format}_size`] as number | undefined,
+      format: format,
+    }))
+  if ('analysis:parsing:parsing_table' in props.resource.extras) {
+    formats.push({
+      url: `${config.tabularApiUrl}/api/resources/${props.resource.id}/data/json/`,
+      size: undefined,
+      format: 'json',
+    })
+  }
+  return formats
+})
 
 const open = ref(props.expandedOnMount)
 const toggle = () => {
@@ -377,22 +448,26 @@ const toggle = () => {
 const tabsOptions = computed(() => {
   const options = []
 
-  if (hasPreview.value) {
-    options.push({ key: 'data', label: t('Data') })
+  if (hasPmtiles.value || ogcWms.value) {
+    options.push({ key: 'map', label: t('Carte') })
+  }
+
+  if (hasTabularData.value || hasPreview.value) {
+    options.push({ key: 'data', label: t('Aperçu') })
   }
 
   if (props.resource.description) {
     options.push({ key: 'description', label: t('Description') })
   }
 
-  if (hasPreview.value) {
-    options.push({ key: 'data-structure', label: t('Data structure') })
+  if (hasTabularData.value) {
+    options.push({ key: 'data-structure', label: t('Structure des données') })
   }
 
-  options.push({ key: 'metadata', label: t('Metadata') })
-  options.push({ key: 'downloads', label: t('Downloads') })
+  options.push({ key: 'metadata', label: t('Métadonnées') })
+  options.push({ key: 'downloads', label: t('Téléchargements') })
 
-  if (hasPreview.value) {
+  if (hasTabularData.value) {
     options.push({ key: 'swagger', label: t('Swagger') })
   }
 
@@ -417,8 +492,11 @@ const communityResource = computed<CommunityResource | null>(() => {
 const owner = computed(() => communityResource.value ? getOwnerName(communityResource.value) : null)
 
 const lastUpdate = props.resource.last_modified
+const conversionsLastUpdate = computed(() => formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at']))
 const availabilityChecked = props.resource.extras && 'check:available' in props.resource.extras
+
 const unavailable = availabilityChecked && props.resource.extras['check:available'] === false
+const downloadButtonTitle = unavailable ? t(`Le robot de {certifier} n'a pas pu accéder à ce fichier - Télécharger le fichier en {format}`, { certifier: config.name, format: format.value }) : t(`Télécharger le fichier en {format}`, { format: format.value })
 
 const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
 

package/src/components/ResourceAccordion/ResourceIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="(resource.filetype === 'remote' && resource.format ? getResourceFormatIcon(resource.format) : null) || File"
+    :is="(resource.format ? getResourceFormatIcon(resource.format) : null) || File"
     class="text-gray-800 shrink-0"
   />
 </template>
@@ -11,6 +11,12 @@ import File from '../Icons/File.vue'
 import { getResourceFormatIcon } from '../../functions/resources'
 
 defineProps<{
+  // We would like to use Resource | ResourceForm but ResourceForm is not in
+  // datagouv/components yet. We don't use `filetype` but we need otherwise
+  // TS don't like passing some object without `format` because it would have
+  // nothing in common with `{}`. We could do `{ format: … } | object` but it's
+  // really generic and I prefer to have something like `filetype` which is specific
+  // to resources' objects.
   resource: { format?: string | null, filetype: ResourceFileType | null }
 }>()
 </script>

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -1,94 +1,94 @@
 <template>
   <span
     v-if="title"
-    class="inline-flex fr-mb-0 align-items-baseline fr-text--xs"
+    class="inline-flex mb-0 items-baseline text-xs"
   >
     <Toggletip
       position="right"
       no-margin
-      class="relative z-2"
+      class="relative z-2 -ml-3 top-1 -my-3"
     >
       <template #toggletip="{ close }">
         <div class="flex justify-between border-bottom">
-          <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ $t("Data schema") }}</h5>
+          <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ $t("Schéma de données") }}</h5>
           <button
             type="button"
-            :title="t('Close')"
+            :title="t('Fermer')"
             class="border-left close-button flex items-center justify-center"
             @click="close"
           >&times;</button>
         </div>
-        <div class="fr-p-3v">
+        <div class="p-3">
           <div v-if="validataStatus === 'ok'">
-            {{ t("This file is valid for the shema:") }} <component
+            {{ t("Ce fichier est valide pour le schéma :") }} <component
               :is="documentationUrl ? 'a' : 'span'"
               :href="documentationUrl"
               class="fr-link fr-text--sm"
             >{{ title }}</component>.
           </div>
           <div v-if="validataStatus === 'warnings'">
-            {{ t("This file is valid for the shema:") }} <component
+            {{ t("Ce fichier est valide pour le schéma :") }} <component
               :is="documentationUrl ? 'a' : 'span'"
               :href="documentationUrl"
               class="fr-link fr-text--sm"
-            >{{ title }}</component>. {{ t("But its compliance could be improved.") }}
+            >{{ title }}</component>. {{ t("Mais sa conformité peut être améliorée.") }}
           </div>
           <div v-if="validataStatus === 'ko'">
-            {{ t("This file indicates to follow the schema:") }} <component
+            {{ t("Ce fichier indique suivre le schéma :") }} <component
               :is="documentationUrl ? 'a' : 'span'"
               :href="documentationUrl"
               class="fr-link fr-text--sm"
-            >{{ title }}</component>. {{ t("But is not compliant.") }}
+            >{{ title }}</component>. {{ t("Mais n'est pas conforme.") }}
           </div>
 
           <div
             v-if="validataWarnings.length"
-            class="text-default-warning flex items-center fr-mt-4v"
+            class="text-default-warning flex items-center mt-4"
           >
-            <span class="fr-icon-alert-line fr-icon--sm fr-mr-1v" />
-            <span>{{ validataWarnings.length }} {{ t('advices') }}</span>
+            <span class="fr-icon-alert-line fr-icon--sm mr-1" />
+            <span>{{ validataWarnings.length }} {{ t('recommandations') }}</span>
           </div>
           <div
             v-if="validataStructureErrors.length"
-            class="text-default-warning flex items-center fr-mt-4v"
+            class="text-default-warning flex items-center mt-4"
           >
-            <span class="fr-icon-alert-line fr-icon--sm fr-mr-1v" />
-            <span>{{ validataStructureErrors.length }} {{ t('structure errors') }}</span>
+            <span class="fr-icon-alert-line fr-icon--sm mr-1" />
+            <span>{{ validataStructureErrors.length }} {{ t('erreurs de structures') }}</span>
           </div>
           <div
             v-if="validataBodyErrors.length"
-            class="text-default-warning flex items-center fr-mt-4v"
+            class="text-default-warning flex items-center mt-4"
           >
-            <span class="fr-icon-alert-line fr-icon--sm fr-mr-1v" />
-            <span>{{ validataBodyErrors.length }} {{ t('body errors') }}</span>
+            <span class="fr-icon-alert-line fr-icon--sm mr-1" />
+            <span>{{ validataBodyErrors.length }} {{ t('erreurs de contenus') }}</span>
           </div>
 
           <div
             v-if="validationUrl"
-            class="w-100 text-align-right fr-mt-5v"
+            class="w-full text-right mt-5"
             target="_blank"
           >
-            <a :href="validationUrl">{{ t('See validation report') }}</a>
+            <a :href="validationUrl">{{ t('Voir le rapport de validation') }}</a>
           </div>
         </div>
       </template>
     </Toggletip>
-    <span class="fr-mr-1v text-gray-medium">{{ t("Schema:") }}</span>
+    <span class="mr-1 text-gray-medium">{{ t("Schéma:") }}</span>
     <span class="flex items-center bg-danger-lightest rounded-sm">
       <span class="fr-tag fr-tag--sm">{{ title }}</span>
       <span
         v-if="validataStatus === 'warnings'"
         class="flex items-center padding-sm"
       >
-        <span class="fr-icon-alert-line fr-icon--sm fr-mr-1v" />
-        <span>{{ t("Invalid") }}</span>
+        <span class="fr-icon-alert-line fr-icon--sm mr-1" />
+        <span>{{ t("Invalide") }}</span>
       </span>
       <span
         v-if="validataStatus === 'ko'"
         class="flex items-center text-warning-dark padding-sm"
       >
-        <span class="fr-icon-error-line fr-icon--sm fr-mr-1v" />
-        <span>{{ t("Invalid") }}</span>
+        <span class="fr-icon-error-line fr-icon--sm mr-1" />
+        <span>{{ t("Invalide") }}</span>
       </span>
     </span>
   </span>

package/src/components/ResourceAccordion/{Swagger.vue → Swagger.client.vue}

@@ -6,7 +6,7 @@
 import { onMounted } from 'vue'
 import SwaggerUI from 'swagger-ui'
 import 'swagger-ui/dist/swagger-ui.css'
-import 'swagger-themes/themes/newspaper.css'
+import '../../../assets/swagger-themes/newspaper.css'
 
 const props = defineProps<{
   url: string