@datagouv/components-next 0.0.1

package/src/components/DatasetCard.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="p-4 border border-gray-default relative hover:bg-gray-some">
+    <div :id />
+    <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
+        v-if="dataset.private"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <span
+          class="fr-icon-lock-line fr-icon--sm"
+          aria-hidden="true"
+        />
+        {{ t('Draft') }}
+      </p>
+      <p
+        v-if="dataset.archived"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <span
+          class="fr-icon-archive-line fr-icon--sm"
+          aria-hidden="true"
+        />
+        {{ t('Archived') }}
+      </p>
+    </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-3 border border-gray-lower bg-[#fff]">
+          <Placeholder
+            v-if="dataset.organization"
+            type="dataset"
+            :src="dataset.organization.logo_thumbnail"
+            alt=""
+            :size="40"
+          />
+          <Avatar
+            v-else-if="dataset.owner"
+            :user="dataset.owner"
+            :size="40"
+          />
+          <Placeholder
+            v-else
+            type="dataset"
+            :size="40"
+          />
+        </div>
+      </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 truncate"
+            >
+              <span class="block flex-initial truncate">{{ dataset.title }}</span>
+              <small
+                v-if="dataset.acronym"
+                class="flex-none 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 truncate"
+        >
+          <template v-if="dataset.organization">
+            <div class="-mr-0.5 flex-initial truncate">
+              <AppLink
+                v-if="organizationUrl"
+                class="link text-sm 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>
+          <div class="text-gray-medium dash-before-sm whitespace-nowrap">
+            {{ $t('Updated {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-500 -ml-2.5">
+            <DatasetQualityInline
+              :quality="dataset.quality"
+              :teleport-id="id"
+            />
+          </div>
+          <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
+            <p
+              class="fr-text--sm fr-my-0"
+              :aria-label="t('{n} resources downloads', dataset.metrics.resources_downloads)"
+            >
+              <span
+                class="fr-icon-download-line fr-icon--sm fr-px-1v"
+                aria-hidden="true"
+              />{{ summarize(dataset.metrics.resources_downloads) }}
+            </p>
+            <p
+              class="fr-text--sm fr-my-0"
+              :aria-label="t('{n} followers', dataset.metrics.followers)"
+            >
+              <span
+                class="fr-icon-star-line fr-icon--sm fr-px-1v"
+                aria-hidden="true"
+              />{{ summarize(dataset.metrics.followers) }}
+            </p>
+            <p
+              class="fr-text--sm fr-my-0"
+              :aria-label="t('{n} reuses', dataset.metrics.reuses)"
+            >
+              <span
+                class="fr-icon-line-chart-line fr-icon--sm fr-px-1v"
+                aria-hidden="true"
+              />{{ summarize(dataset.metrics.reuses) }}
+            </p>
+          </div>
+        </div>
+        <component
+          :is="config.textClamp"
+          v-if="showDescription && config && config.textClamp && description"
+          class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere"
+          :auto-resize="true"
+          :text="description"
+          :max-lines="2"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { RouteLocationRaw } from 'vue-router'
+import { computed, ref, useId, watchEffect } from 'vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
+import { summarize } from '../functions/helpers'
+import { formatRelativeIfRecentDate } from '../functions/dates'
+import { getOwnerName } from '../functions/owned'
+import { removeMarkdown } from '../functions/markdown'
+import { useComponentsConfig } from '../config'
+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'
+
+  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
+
+    /**
+     * 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
+    showDescription?: boolean
+  }
+
+const props = withDefaults(defineProps<Props>(), {
+  style: () => ({}),
+  showDescription: true,
+})
+
+const { t } = useI18n()
+const id = useId()
+const ownerName = computed(() => getOwnerName(props.dataset))
+const config = useComponentsConfig()
+
+const description = ref('')
+watchEffect(async () => {
+  if (!props.showDescription) return
+  description.value = await removeMarkdown(props.dataset.description)
+})
+</script>

package/src/components/DatasetInformationPanel.vue

@@ -0,0 +1,210 @@
+<template>
+ <div class="py-6 mb-6 border-bottom border-gray-default">
+    <h2 class="subtitle subtitle--uppercase">
+      {{ $t('Informations') }}
+    </h2>
+    <div class="fr-text--sm fr-m-0">
+      <dl class="fr-grid-row fr-grid-row--gutters">
+        <div
+          v-if="license"
+          class="fr-col-12 fr-col-sm-6 fr-col-md-4"
+        >
+          <dt class="subtitle fr-mb-0">
+            {{ $t('License') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            <code class="bg-grey-some px-1 text-gray-medium">
+              <a :href="license.url">
+                {{ license.title }}
+              </a>
+            </code>
+          </dd>
+        </div>
+        <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
+          <dt class="subtitle fr-mb-0">
+            ID
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ dataset.id }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  <div class="pb-6 mb-6 border-bottom border-gray-default">
+    <h2 class="subtitle subtitle--uppercase">
+      {{ $t('Temporality') }}
+    </h2>
+    <div class="fr-text--sm fr-m-0">
+      <dl class="fr-grid-row fr-grid-row--gutters">
+        <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
+          <dt class="subtitle fr-mb-0">
+            {{ $t('Creation') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ formatDate(dataset.created_at) }}
+          </dd>
+        </div>
+        <div
+          v-if="frequency"
+          class="fr-col-12 fr-col-sm-6 fr-col-md-4"
+        >
+          <dt class="subtitle fr-mb-0">
+            {{ $t('Frequency') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ frequency.label }}
+          </dd>
+        </div>
+      </dl>
+      <dl class="fr-grid-row fr-grid-row--gutters">
+        <div class="fr-col-12 fr-col-sm-6 fr-col-md-4">
+          <dt class="subtitle fr-mb-0">
+            {{ $t('Last update') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ formatDate(props.dataset.last_update) }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  <div class="pb-6 mb-6 border-bottom border-gray-default">
+    <h2 class="subtitle subtitle--uppercase">
+      {{ $t('Spatial coverage') }}
+    </h2>
+    <div class="fr-text--sm fr-m-0">
+      <dl class="fr-grid-row fr-grid-row--gutters">
+        <div
+          v-if="zonesLabels.length"
+          class="fr-col-12 fr-col-sm-6 fr-col-md-4"
+        >
+          <dt class="subtitle fr-mb-0">
+            {{ $t('Territorial coverage') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ zonesLabels.join(', ') }}
+          </dd>
+        </div>
+        <div
+          v-if="granularity"
+          class="fr-col-12 fr-col-sm-6 fr-col-md-4"
+        >
+          <dt class="subtitle fr-mb-0">
+            {{ $t('Granularity of territorial coverage') }}
+          </dt>
+          <dd class="text-sm m-0 text-gray-medium p-0">
+            {{ granularity.name }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  <div class="pb-6 mb-6 border-bottom border-gray-default">
+    <h2 class="subtitle subtitle--uppercase">
+      Actions
+    </h2>
+    <div class="fr-text--sm fr-m-0">
+      <h3 class="subtitle fr-mb-1v">
+        {{ $t('Integrate on your website') }}
+        <CopyButton
+          :hide-label="true"
+          :label="$t('Copy embed')"
+          :copied-label="$t('Embed copied')"
+          class="fr-my-1w fr-mr-1w"
+          :text="getDatasetOEmbedHtml('dataset', dataset.id)"
+        />
+      </h3>
+      <div class="embed-wrapper">
+        <textarea
+          ref="textAreaRef"
+          :value="getDatasetOEmbedHtml('dataset', dataset.id)"
+          readonly="true"
+          rows="1"
+          @click="selectContent"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-if="hasExtras">
+    <ExtraAccordion
+      :button-text="t('See extras')"
+      :title-text="t('Extras')"
+      :extra="props.dataset.extras"
+      title-level="h2"
+    />
+  </div>
+  <div v-if="props.dataset?.harvest">
+    <ExtraAccordion
+      :button-text="t('See harvest')"
+      :title-text="t('Harvest')"
+      :extra="props.dataset.harvest"
+      title-level="h2"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { formatDate } from '../functions/dates'
+// import useOEmbed from '../../composables/useOEmbed'
+import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { Granularity } from '../types/granularity'
+import type { Frequency } from '../types/frequency'
+import type { License } from '../types/licenses'
+import { useFetch } from '../functions/api'
+import getDatasetOEmbedHtml from '../functions/datasets'
+import ExtraAccordion from './ExtraAccordion.vue'
+import CopyButton from './CopyButton.vue'
+
+const props = defineProps<{
+  dataset: DatasetV2 | Dataset
+}>()
+const { t } = useI18n()
+// const embedText = useOEmbed('dataset', props.dataset.id)
+const textAreaRef = ref<HTMLTextAreaElement | null>(null)
+
+const hasExtras = computed(() => Object.keys(props.dataset.extras).length > 0)
+
+function selectContent() {
+  if (textAreaRef.value) {
+    textAreaRef.value.select()
+  }
+};
+
+const { data: allLicenses } = await useFetch<Array<License>>('/api/1/datasets/licenses/')
+const license = computed(() => {
+  if (!props.dataset.license) return null
+  if (!allLicenses.value) return null
+
+  return allLicenses.value.find(license => license.id === props.dataset.license)
+})
+
+const { data: frequencies } = await useFetch<Array<Frequency>>('/api/1/datasets/frequencies/')
+const frequency = computed(() => {
+  if (!props.dataset.frequency) return null
+  if (!frequencies.value) return null
+
+  return frequencies.value.find(frequency => frequency.id === props.dataset.frequency)
+})
+
+const zonesUrl = computed(() => {
+  if (!props.dataset.spatial?.zones || !props.dataset.spatial.zones.length) return null
+
+  return `/api/1/spatial/zones/${props.dataset.spatial.zones.join(',')}/`
+})
+const { data: zones } = await useFetch<{ features: Array<{ properties: { name: string } }> }>(zonesUrl)
+const zonesLabels = computed(() => {
+  if (!zones.value) return []
+  return zones.value.features.map(feature => feature.properties.name)
+})
+
+const { data: granularities } = await useFetch<Array<Granularity>>('/api/1/spatial/granularities/')
+const granularity = computed(() => {
+  if (!props.dataset.spatial?.granularity) return null
+  if (!granularities.value) return null
+
+  return granularities.value.find(granularity => granularity.id === props.dataset.spatial?.granularity)
+})
+</script>

package/src/components/DatasetQuality.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="fr-grid-row fr-grid-row--middle fr-ml-n1v">
+    <Toggletip>
+      {{ $t('Metadata quality:') }}
+      <template #toggletip>
+        <DatasetQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
+    <p class="fr-m-0 fr-mr-1v">
+      {{ $t('Metadata quality:') }}
+    </p>
+  </div>
+  <DatasetQualityScore
+    :score="quality.score"
+    class="w-100"
+  />
+  <template v-if="showItemWarnings">
+    <ul class="list-none pl-0">
+      <DatasetQualityItemWarning
+        :quality-item="quality.dataset_description_quality"
+        :message="$t('Data description empty')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.resources_documentation"
+        :message="$t('Files documentation missing')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.license"
+        :message="$t('No license set')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
+        :message="quality.update_frequency ? $t('Update frequency not followed') : $t('Update frequency not set')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.has_open_format"
+        :message="$t('File formats are closed')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.temporal_coverage"
+        :message="$t('Temporal coverage not set')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.spatial"
+        :message="$t('Spatial coverage not set')"
+      />
+      <DatasetQualityItemWarning
+        :quality-item="quality.all_resources_available"
+        :message="$t('Some files are unavailable')"
+      />
+    </ul>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { Quality } from '../types/datasets'
+import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
+import DatasetQualityScore from './DatasetQualityScore.vue'
+import Toggletip from './Toggletip.vue'
+import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
+
+withDefaults(defineProps<{
+  quality: Quality
+  showItemWarnings?: boolean
+}>(), {
+  showItemWarnings: true,
+})
+</script>

package/src/components/DatasetQualityInline.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
+    <div class="fr-grid-row fr-grid-row--middle">
+      <Toggletip
+        class="relative z-2"
+        :teleport-id
+      >
+        <template #toggletip>
+          <DatasetQualityTooltipContent :quality />
+        </template>
+      </Toggletip>
+      <p class="my-0 mr-1 text-gray-medium text-sm">
+        {{ $t('Metadata :') }}
+      </p>
+      <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
+        <DatasetQualityScore :score="quality.score" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Quality } from '../types/datasets'
+import DatasetQualityScore from './DatasetQualityScore.vue'
+import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
+import Toggletip from './Toggletip.vue'
+
+defineProps<{
+  quality: Quality
+  teleportId?: string
+}>()
+</script>

package/src/components/DatasetQualityItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <li>
+    <p
+      v-if="passed"
+      class="fr-my-0"
+    >
+      <span
+        class="fr-icon-check-line"
+        aria-hidden="true"
+      />
+      {{ messagePassed }}
+    </p>
+    <p
+      v-else
+      class="my-0 text-gray-medium"
+    >
+      <span
+        class="fr-icon-warning-line"
+        aria-hidden="true"
+      />
+      {{ messageFailed }}
+    </p>
+  </li>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  passed: boolean | null
+  messagePassed: string
+  messageFailed: string
+}>()
+</script>

package/src/components/DatasetQualityItemWarning.vue

@@ -0,0 +1,21 @@
+<template>
+  <li
+    v-if="!qualityItem"
+    class="text-warning-dark flex flex-wrap items-center m-1"
+  >
+    <p class="fr-my-0 fr-text--sm">
+      <span
+        class="fr-icon-warning-line fr-icon--sm"
+        aria-hidden="true"
+      />
+      {{ message }}
+    </p>
+  </li>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  qualityItem: boolean
+  message: string
+}>()
+</script>

package/src/components/DatasetQualityScore.vue

@@ -0,0 +1,35 @@
+<template>
+  <meter
+    class="quality-score"
+    :class="props.class"
+    min="0"
+    low="0"
+    :high="high"
+    :max="quality_max_score"
+    :optimum="quality_max_score"
+    :value="score"
+  >
+    <template v-if="score >= high">
+      {{ t('Good') }}
+    </template>
+    <template v-else>
+      {{ t('To improve') }}
+    </template>({{ calculatedScore }})
+  </meter>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
+  score: number
+  class?: string
+}>(), {
+  class: '',
+})
+const quality_max_score = 1
+const high = quality_max_score * 2 / 3
+const { t, locale } = useI18n()
+const calculatedScore = computed(() => new Intl.NumberFormat(locale.value, { style: 'percent' }).format(props.score))
+</script>

package/src/components/DatasetQualityTooltipContent.vue

@@ -0,0 +1,79 @@
+<template>
+  <h5 class="fr-text--sm fr-my-0">
+    {{ t("Metadata quality:") }}
+  </h5>
+  <ul class="list-none pl-0">
+    <DatasetQualityItem
+      :passed="quality.dataset_description_quality"
+      :message-passed="t('Data description filled')"
+      :message-failed="t('Data description empty')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.resources_documentation"
+      :message-passed="t('Files documented')"
+      :message-failed="t('Files documentation missing')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.license"
+      :message-passed="t('License filled')"
+      :message-failed="t('No license set')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.update_frequency && !!quality.update_fulfilled_in_time"
+      :message-passed="t('Update frequency followed')"
+      :message-failed="quality.update_frequency ? t('Update frequency not followed') : t('Update frequency not set')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.has_open_format"
+      :message-passed="t('File formats are open')"
+      :message-failed="t('File formats are closed')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.temporal_coverage"
+      :message-passed="t('Temporal coverage filled')"
+      :message-failed="t('Temporal coverage not set')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.spatial"
+      :message-passed="t('Spatial coverage filled')"
+      :message-failed="t('Spatial coverage not set')"
+      class="fr-my-1w"
+    />
+    <DatasetQualityItem
+      :passed="quality.all_resources_available"
+      :message-passed="t('All files are available')"
+      :message-failed="t('Some files are unavailable')"
+      class="fr-my-1w"
+    />
+  </ul>
+  <div class="fr-grid-row fr-grid-row--right not-enlarged">
+    <a
+      :href="config.datasetQualityGuideUrl"
+      target="_blank"
+      rel="noopener"
+      :title="t('Learn more about this indicator - opens a new window')"
+    >
+      {{ t("Learn more about this indicator") }}
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Quality } from '../types/datasets'
+import { useComponentsConfig } from '../config'
+import DatasetQualityItem from './DatasetQualityItem.vue'
+
+defineProps<{
+  quality: Quality
+}>()
+
+const { t } = useI18n()
+const config = useComponentsConfig()
+</script>