@datagouv/components-next 0.2.0 → 1.0.1

package/src/components/DatasetCard.vue

@@ -1,209 +1,148 @@
 <template>
-  <div class="p-4 border bg-white border-gray-default relative hover:bg-gray-some">
-    <div
-      v-if="dataset.private || dataset.archived"
-      class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v fr-ml-n1v"
-    >
-      <p
+  <ObjectCard>
+    <template #badge>
+      <ObjectCardBadge
         v-if="dataset.private"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+        :icon="RiLockLine"
       >
-        <span
-          class="fr-icon-lock-line fr-icon--sm"
-          aria-hidden="true"
-        />
         {{ t('Brouillon') }}
-      </p>
-      <p
-        v-if="dataset.archived"
-        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      </ObjectCardBadge>
+      <ObjectCardBadge
+        v-else-if="dataset.archived"
+        :icon="RiArchiveLine"
       >
-        <span
-          class="fr-icon-archive-line fr-icon--sm"
-          aria-hidden="true"
-        />
         {{ t('Archivé') }}
-      </p>
+      </ObjectCardBadge>
+    </template>
+
+    <template #media>
+      <OrganizationLogo
+        v-if="dataset.organization"
+        :organization="dataset.organization"
+        size-class="size-12"
+      />
+      <Avatar
+        v-else-if="dataset.owner"
+        :user="dataset.owner"
+        :size="48"
+      />
+      <Placeholder
+        v-else
+        type="Dataset"
+        class="size-12"
+      />
+    </template>
+    <ObjectCardHeader
+      :icon="RiDatabase2Line"
+      :url="datasetUrl || dataset.page"
+      :target="datasetUrlInNewTab ? '_blank' : undefined"
+    >
+      {{ dataset.title }}
+      <template
+        v-if="dataset.acronym"
+        #extra
+      >
+        <small class="flex-1 ml-2">{{ dataset.acronym }}</small>
+      </template>
+    </ObjectCardHeader>
+    <div
+      v-if="dataset.organization || dataset.owner"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="dataset.organization"
+        :owner="dataset.owner"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine class="hidden md:block size-4 flex-none fill-gray-medium" />
+      <div class="w-full md:w-auto text-gray-medium whitespace-nowrap">
+        {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
+      </div>
     </div>
-    <div class="flex flex-wrap md:flex-nowrap gap-4 items-start">
-      <div class="flex-none">
-        <div class="flex justify-center items-center p-2 border border-gray-lower bg-[#fff]">
-          <OrganizationLogo
-            v-if="dataset.organization"
-            :organization="dataset.organization"
-            size-class="size-12"
-          />
-          <Avatar
-            v-else-if="dataset.owner"
-            :user="dataset.owner"
-            :size="48"
-          />
-          <Placeholder
-            v-else
-            type="Dataset"
-            class="size-12"
-          />
-        </div>
+    <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
+      <div class="hidden sm:flex text-gray-medium">
+        <DatasetQualityInline :quality="dataset.quality" />
       </div>
-      <div class="flex-1 overflow-hidden">
-        <h4 class="w-full text-base mb-0 flex">
-          <slot
-            name="datasetUrl"
-            :dataset="dataset"
-            :dataset-url="datasetUrl"
-          >
-            <AppLink
-              :to="datasetUrl"
-              class="text-gray-title text-base bg-none flex w-full truncate"
-              :target="datasetUrlInNewTab ? '_blank' : undefined"
-            >
-              <span
-                class="block truncate"
-                :class="dataset.acronym ? 'flex-initial' : 'flex-1'"
-              >{{ dataset.title }}</span>
-              <small
-                v-if="dataset.acronym"
-                class="flex-1 ml-2"
-              >{{ dataset.acronym }}</small>
-              <span class="absolute inset-0" />
-            </AppLink>
-          </slot>
-        </h4>
-        <div
-          v-if="dataset.organization || dataset.owner"
-          class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      <RiSubtractLine
+        aria-hidden="true"
+        class="hidden sm:block size-3"
+      />
+      <div class="flex flex-wrap items-center gap-1">
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} vues | {n} vue | {n} vues', dataset.metrics.views)"
         >
-          <template v-if="dataset.organization">
-            <div class="-mr-0.5 flex-initial truncate">
-              <AppLink
-                v-if="organizationUrl"
-                class="link text-sm overflow-hidden flex items-center relative z-[2] truncate"
-                :to="organizationUrl"
-              >
-                <OrganizationNameWithCertificate :organization="dataset.organization" />
-              </AppLink>
-              <OrganizationNameWithCertificate
-                v-else
-                :organization="dataset.organization"
-              />
-            </div>
-          </template>
-          <div
-            v-else
-            class="mr-1 truncate"
-          >
-            {{ ownerName }}
-          </div>
-          <RiSubtractLine class="hidden md:block size-4 flex-none fill-gray-medium" />
-          <div class="w-full md:w-auto text-gray-medium whitespace-nowrap">
-            {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataset.last_update, { dateStyle: 'medium' }) }) }}
-          </div>
-        </div>
-        <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
-          <div class="fr-hidden flex-sm dash-after-sm text-gray-medium -ml-2.5">
-            <DatasetQualityInline :quality="dataset.quality" />
-          </div>
-          <div class="flex flex-wrap items-center gap-1">
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} vues | {n} vue | {n} vues', dataset.metrics.views)"
-            >
-              <RiEyeLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(dataset.metrics.views) }}
-            </p>
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} téléchargements des ressources | {n} téléchargement des ressources | {n} téléchargements des ressources', dataset.metrics.resources_downloads)"
-            >
-              <RiDownloadLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(dataset.metrics.resources_downloads) }}
-            </p>
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} réutilisations | {n} réutilisation | {n} réutilisations', dataset.metrics.reuses)"
-            >
-              <RiLineChartLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(dataset.metrics.reuses) }}
-            </p>
-            <p
-              class="text-sm mb-0 flex items-center gap-0.5"
-              :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataset.metrics.followers)"
-            >
-              <RiStarLine
-                aria-hidden="true"
-                class="size-3.5"
-              />{{ summarize(dataset.metrics.followers) }}
-            </p>
-          </div>
-        </div>
-        <component
-          :is="config.textClamp"
-          v-if="showDescriptionShort && config && config.textClamp && descriptionShort"
-          class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere hidden sm:block"
-          :auto-resize="true"
-          :text="descriptionShort"
-          :max-lines="2"
-        />
+          <RiEyeLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataset.metrics.views) }}
+        </p>
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} téléchargements des ressources | {n} téléchargement des ressources | {n} téléchargements des ressources', dataset.metrics.resources_downloads)"
+        >
+          <RiDownloadLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataset.metrics.resources_downloads) }}
+        </p>
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} réutilisations | {n} réutilisation | {n} réutilisations', dataset.metrics.reuses)"
+        >
+          <RiLineChartLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataset.metrics.reuses) }}
+        </p>
+        <p
+          class="text-sm mb-0 flex items-center gap-0.5"
+          :aria-label="t('{n} abonnés | {n} abonné | {n} abonnés', dataset.metrics.followers)"
+        >
+          <RiStarLine
+            aria-hidden="true"
+            class="size-3.5"
+          />{{ summarize(dataset.metrics.followers) }}
+        </p>
       </div>
     </div>
-  </div>
+    <ObjectCardShortDescription
+      v-if="showDescriptionShort"
+      :text="getDescriptionShort(props.dataset)"
+    />
+  </ObjectCard>
 </template>
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
-import { computed, ref, watchEffect } from 'vue'
-import { RiDownloadLine, RiEyeLine, RiLineChartLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
+import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartLine, RiLockLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
-import { getOwnerName } from '../functions/owned'
-import { getDescriptionShort } from '../functions/datasets'
-import { useComponentsConfig } from '../config'
+import { getDescriptionShort } from '../functions/description'
 import { useTranslation } from '../composables/useTranslation'
 import DatasetQualityInline from './DatasetQualityInline.vue'
 import Avatar from './Avatar.vue'
 import Placeholder from './Placeholder.vue'
-import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
-import AppLink from './AppLink.vue'
 import OrganizationLogo from './OrganizationLogo.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardBadge from './ObjectCardBadge.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 
 type Props = {
   dataset: Dataset | DatasetV2
-
-  /**
-     * The datasetUrl is a route location object to allow Vue Router to navigate to the details of a dataset.
-     * It is used as a separate prop to allow other sites using the package to define their own dataset pages.
-     */
-  datasetUrl: RouteLocationRaw
+  datasetUrl?: RouteLocationRaw
   datasetUrlInNewTab?: boolean
-
-  /**
-     * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataset.
-     * It is used as a separate prop to allow other sites using the package to define their own organization pages.
-     */
   organizationUrl?: RouteLocationRaw
   showDescriptionShort?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  style: () => ({}),
   showDescriptionShort: true,
 })
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
-const ownerName = computed(() => getOwnerName(props.dataset))
-const config = useComponentsConfig()
-
-const descriptionShort = ref('')
-watchEffect(async () => {
-  if (!props.showDescriptionShort) return
-  descriptionShort.value = await getDescriptionShort(props.dataset.description, props.dataset.description_short)
-})
 </script>

package/src/components/DatasetInformation/DatasetEmbedSection.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="space-y-1 py-6">
+    <div class="flex items-center space-x-2 mb-1">
+      <h3 class="mb-0 uppercase text-gray-plain text-sm font-bold">
+        {{ t('Intégrer sur votre site') }}
+      </h3>
+      <CopyButton
+        :hide-label="true"
+        :label="t('Copier le code embarqué')"
+        :copied-label="t('Code embarqué copié !')"
+        :text="embedHtml"
+      />
+    </div>
+    <textarea
+      ref="textAreaRef"
+      class="bg-gray-lower text-gray-medium rounded font-mono text-sm px-1 py-[2px] w-full border resize-none"
+      :value="embedHtml"
+      readonly="true"
+      @click="selectContent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { getDatasetOEmbedHtml } from '../../functions/datasets'
+import type { Dataset, DatasetV2, DatasetV2WithFullObject } from '../../types/datasets'
+import CopyButton from '../CopyButton.vue'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2 | DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const textAreaRef = ref<HTMLTextAreaElement | null>(null)
+
+const embedHtml = computed(() => getDatasetOEmbedHtml('dataset', props.dataset.id))
+
+function selectContent(e: Event) {
+  (e.target as HTMLTextAreaElement).select()
+}
+</script>

package/src/components/DatasetInformation/DatasetInformationSection.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="space-y-1 py-6">
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Informations') }}
+    </h3>
+    <DescriptionList>
+      <div v-if="dataset.tags && dataset.tags.length">
+        <DescriptionListTerm>{{ t('Mots-clés') }}</DescriptionListTerm>
+        <DescriptionListDetails class="flex flex-wrap gap-2 items-start">
+          <AppLink
+            v-for="tag in dataset.tags"
+            :key="tag"
+            class="fr-raw-link"
+            :to="getTagUrl(tag)"
+          >
+            <Tag type="secondary">
+              {{ tag }}
+            </Tag>
+          </AppLink>
+        </DescriptionListDetails>
+      </div>
+      <div>
+        <DescriptionListTerm>{{ t('Identifiant') }}</DescriptionListTerm>
+        <DescriptionListDetails class="flex items-center gap-2">
+          {{ dataset.id }}
+          <CopyButton
+            class="!-mt-0.5"
+            :label="t(`Copier l'identifiant`)"
+            :copied-label="t('Identifiant copié !')"
+            :text="dataset.id"
+            :hide-label="true"
+          />
+        </DescriptionListDetails>
+      </div>
+      <div v-if="dataset.license">
+        <DescriptionListTerm>{{ t('Licence') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <LicenseBadge :license="dataset.license" />
+        </DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+import AppLink from '../AppLink.vue'
+import CopyButton from '../CopyButton.vue'
+import LicenseBadge from '../LicenseBadge.vue'
+import Tag from '../Tag.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2WithFullObject
+  tagUrl?: (tag: string) => string
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+function getTagUrl(tag: string): string {
+  if (props.tagUrl) {
+    return props.tagUrl(tag)
+  }
+  const base = config.baseUrl.endsWith('/') ? config.baseUrl.slice(0, -1) : config.baseUrl
+  return `${base}/datasets/search?tag=${tag}`
+}
+</script>

package/src/components/DatasetInformation/DatasetSchemaSection.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    v-if="schemas && schemas.length"
+    class="space-y-1 py-6"
+  >
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Schéma de données') }}
+    </h3>
+    <div class="space-y-4">
+      <div
+        v-for="schema, index in schemas"
+        :key="index"
+        class="flex flex-col md:flex-row gap-2 justify-between items-center"
+      >
+        <p class="text-sm mb-0">
+          {{ t('Les fichiers du jeu de données suivent le schéma :') }}
+          <Tag
+            type="secondary"
+            :icon="RiCheckboxCircleLine"
+          >
+            {{ schema.name || schema.url }}
+          </Tag>
+        </p>
+        <div v-if="schema.url || schema.name">
+          <BrandedButton
+            color="secondary"
+            :icon="RiBook2Line"
+            :href="schema.url ? schema.url : `${config.schemasSiteUrl}${schema.name}`"
+          >
+            {{ t('Voir la documentation du schéma') }}
+          </BrandedButton>
+        </div>
+      </div>
+      <p
+        v-if="config.schemasSiteUrl && config.schemasSiteName"
+        class="text-sm"
+      >
+        <TranslationT keypath="Les schémas de données permettent de décrire des modèles de données, découvrez comment les schémas améliorent la qualité des données et quels sont les cas d'usages possibles sur {link}">
+          <template #link>
+            <AppLink
+              :to="config.schemasSiteUrl"
+              external
+            >
+              {{ config.schemasSiteName }}
+            </AppLink>
+          </template>
+        </TranslationT>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiBook2Line, RiCheckboxCircleLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+import { useFetch } from '../../functions/api'
+import type { Dataset, DatasetV2, DatasetV2WithFullObject } from '../../types/datasets'
+import type { Schema } from '../../types/schemas'
+import Tag from '../Tag.vue'
+import BrandedButton from '../BrandedButton.vue'
+import TranslationT from '../TranslationT.vue'
+import AppLink from '../AppLink.vue'
+
+const props = defineProps<{
+  dataset: Dataset | DatasetV2 | DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const { data } = await useFetch<Array<Schema>>(`/api/2/datasets/${props.dataset.id}/schemas/`)
+const schemas = data
+</script>

package/src/components/DatasetInformation/DatasetSpatialSection.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="dataset.spatial"
+    class="space-y-1 py-6"
+  >
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Couverture spatiale') }}
+    </h3>
+    <DescriptionList>
+      <div v-if="dataset.spatial.zones && dataset.spatial.zones.length">
+        <DescriptionListTerm>{{ t('Zones') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ zonesDisplay }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.spatial.geom">
+        <DescriptionListTerm>{{ t('Couverture géographique') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <slot
+            name="map"
+            :geojson="dataset.spatial.geom"
+          />
+        </DescriptionListDetails>
+      </div>
+      <div v-if="dataset.spatial.granularity">
+        <DescriptionListTerm>{{ t('Granularité de la couverture territoriale') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ dataset.spatial.granularity.name }}</DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+
+const zonesDisplay = computed(() => {
+  if (!props.dataset.spatial?.zones?.length) return ''
+  const names = props.dataset.spatial.zones.map(z => z.name)
+  return humanJoin(names)
+})
+
+function humanJoin(source: Array<string>): string {
+  const array = [...source]
+  if (!array.length) return ''
+  if (array.length === 1) return array[0]!
+  const last = array.pop()!
+  return `${array.join(', ')} ${t('et')} ${last}`
+}
+</script>

package/src/components/DatasetInformation/DatasetTemporalitySection.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="space-y-1 py-6">
+    <h3 class="uppercase text-gray-plain text-sm font-bold">
+      {{ t('Temporalité') }}
+    </h3>
+    <DescriptionList>
+      <div>
+        <DescriptionListTerm>{{ t('Création') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ formatDate(dataset.created_at) }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.frequency">
+        <DescriptionListTerm>{{ t('Fréquence') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ dataset.frequency.label }}</DescriptionListDetails>
+      </div>
+      <div v-if="dataset.temporal_coverage">
+        <DescriptionListTerm>{{ t('Couverture temporelle') }}</DescriptionListTerm>
+        <DescriptionListDetails>
+          <DateRangeDetails :range="dataset.temporal_coverage" />
+        </DescriptionListDetails>
+      </div>
+      <div>
+        <DescriptionListTerm>{{ t('Dernière mise à jour') }}</DescriptionListTerm>
+        <DescriptionListDetails>{{ formatDate(dataset.last_update) }}</DescriptionListDetails>
+      </div>
+      <slot />
+    </DescriptionList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatDate } from '../../functions/dates'
+import type { DatasetV2WithFullObject } from '../../types/datasets'
+import DescriptionList from '../DescriptionList.vue'
+import DescriptionListTerm from '../DescriptionListTerm.vue'
+import DescriptionListDetails from '../DescriptionListDetails.vue'
+import DateRangeDetails from '../DateRangeDetails.vue'
+
+defineProps<{
+  dataset: DatasetV2WithFullObject
+}>()
+
+const { t } = useTranslation()
+const { formatDate } = useFormatDate()
+</script>

package/src/components/DatasetInformation/index.ts

@@ -0,0 +1,5 @@
+export { default as DatasetInformationSection } from './DatasetInformationSection.vue'
+export { default as DatasetTemporalitySection } from './DatasetTemporalitySection.vue'
+export { default as DatasetSpatialSection } from './DatasetSpatialSection.vue'
+export { default as DatasetSchemaSection } from './DatasetSchemaSection.vue'
+export { default as DatasetEmbedSection } from './DatasetEmbedSection.vue'