@datagouv/components-next 0.0.1

package/src/components/Pagination.vue

@@ -0,0 +1,205 @@
+<template>
+  <nav
+    v-if="totalResults > pageSize"
+    role="navigation"
+    class="fr-pagination fr-pagination--centered"
+    :aria-label="t('Pagination')"
+  >
+    <ul class="fr-pagination__list">
+      <li>
+        <a
+          :href="getHref(1)"
+          class="fr-pagination__link fr-pagination__link--first"
+          data-testid="first-page"
+          @click.prevent="onClick(1)"
+        >
+          {{ t('First page') }}
+        </a>
+      </li>
+      <li>
+        <a
+          :href="getHref(page - 1)"
+          class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
+          data-testid="previous-page"
+          @click.prevent="previousPage"
+        >
+          {{ t('Previous page') }}
+        </a>
+      </li>
+      <li>
+        <a
+          :aria-current="page === 1 ? 'page' : undefined"
+          :href="getHref(1)"
+          class="fr-pagination__link"
+          :class="{ 'fr-hidden fr-unhidden-sm': page > 1 }"
+          :title="t('Page {nb}', { nb: 1 })"
+          :data-testid="1"
+          @click.prevent="onClick(1)"
+        >
+          1
+        </a>
+      </li>
+      <li
+        v-for="(index, arrayIndex) in visiblePages"
+        :key="arrayIndex"
+      >
+        <a
+          v-if="index"
+          class="fr-pagination__link"
+          :class="{ 'fr-hidden fr-unhidden-lg': index < page - 1 || index > page + 1 }"
+          :aria-current="page === index ? 'page' : undefined"
+          :href="getHref(index)"
+          :title="t('Page {nb}', { nb: index })"
+          :data-testid="index"
+          @click.prevent="onClick(index)"
+        >
+          {{ index }}
+        </a>
+        <a
+          v-else
+          class="fr-pagination__link fr-hidden fr-unhidden-lg"
+        >
+          …
+        </a>
+      </li>
+      <li>
+        <a
+          class="fr-pagination__link"
+          :aria-current="page === pageCount ? 'page' : undefined"
+          :href="getHref(pageCount)"
+          :title="t('Page {nb}', { nb: pageCount })"
+          :data-testid="pageCount"
+          @click.prevent="onClick(pageCount)"
+        >
+          {{ pageCount }}
+        </a>
+      </li>
+      <li>
+        <a
+          class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
+          :href="getHref(page + 1)"
+          data-testid="next-page"
+          @click.prevent="nextPage"
+        >
+          {{ t('Next page') }}
+        </a>
+      </li>
+      <li>
+        <a
+          class="fr-pagination__link fr-pagination__link--last"
+          :href="getHref(pageCount)"
+          data-testid="last-page"
+          @click.prevent="onClick(pageCount)"
+        >
+          {{ t('Last page') }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type Props = {
+  /**
+   * The current page.
+   */
+  page?: number
+  /**
+   * The page size.
+   */
+  pageSize?: number
+  /**
+   * Customize the links used
+   */
+  link?: (page: number) => string
+  /**
+   * The number of items in the collection. It's used to calculated the number of pages.
+   */
+  totalResults: number
+}
+
+const emit = defineEmits<{
+  (event: 'change', page: number): void
+}>()
+
+const props = withDefaults(defineProps<Props>(), {
+  page: 1,
+  pageSize: 20,
+})
+
+const PAGES_AROUND = 3
+
+function range(size: number, startAt = 1) {
+  return [...Array(size).keys()].map(i => i + startAt)
+}
+
+function getPages(pageCount: number) {
+  return range(pageCount)
+}
+
+function getPagesShown(pages: { length: number }, currentPage: number) {
+  return Math.min(
+    PAGES_AROUND * 2 + 1,
+    pages.length - 2,
+    PAGES_AROUND + currentPage - 1,
+    PAGES_AROUND + pages.length - currentPage,
+  )
+}
+
+function getStartPage(currentPage: number) {
+  return Math.max(
+    currentPage - PAGES_AROUND, // we want to start 3 pages before the current one
+    2, // we don't want to start below page 2
+  )
+}
+
+function getVisiblePages(currentPage: number, pageCount: number) {
+  const pages = getPages(pageCount)
+  const start = getStartPage(currentPage)
+  if (pageCount <= 2) {
+    return []
+  }
+  const pagination: Array<number | null> = range(getPagesShown(pages, currentPage), start)
+  if (!pagination.includes(2)) {
+    pagination.unshift(null)
+  }
+  if (!pagination.includes(pageCount - 1)) {
+    pagination.push(null)
+  }
+  return pagination
+}
+
+const { t } = useI18n()
+const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
+const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
+
+function onClick(index: number) {
+  if (index !== props.page) {
+    return emit('change', index)
+  }
+}
+
+function nextPage() {
+  const index = props.page + 1
+  if (index <= pageCount.value) {
+    return emit('change', index)
+  }
+}
+
+function previousPage() {
+  const index = props.page - 1
+  if (index > 0) {
+    return emit('change', index)
+  }
+}
+
+function getHref(forPage: number) {
+  if (forPage < 1 || forPage > pageCount.value) {
+    return undefined
+  }
+  return props.page === forPage ? undefined : (props.link ? props.link(forPage) : '#')
+}
+</script>

package/src/components/Placeholder.vue

@@ -0,0 +1,29 @@
+<template>
+  <img
+    loading="lazy"
+    :src="path"
+    :alt="alternativeTextForDefinedImageOnly"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { computedAsync } from '@vueuse/core'
+
+const props = defineProps<{
+  type: 'author' | 'dataset' | 'news' | 'organization' | 'reuse'
+  src?: string | null
+  alt?: string
+  size: number
+}>()
+const placeholderUrl = async () => {
+  const module = await import(`../../assets/placeholders/${props.type}.png`)
+  return props.src ? props.src : module.default
+}
+
+const alternativeTextForDefinedImageOnly = computed(() => props.src ? props.alt : '')
+const path = computedAsync(() => placeholderUrl())
+</script>

package/src/components/ReadMore.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="relative">
+    <div
+      ref="readMoreRef"
+      class="overflow-hidden"
+      :style="{ height: containerHeight + 'px' }"
+    >
+      <div ref="containerRef">
+        <slot />
+      </div>
+    </div>
+    <div
+      v-if="readMoreRequired"
+      class=" bottom-0 w-full cursor-pointer text-center"
+      :class="{
+        'relative pt-2.5': expanded,
+        'absolute pt-20 bg-linear-to-b from-white/0 via-70% via-white/100 to-white/100': !expanded,
+      }"
+      @click.stop="toggle"
+    >
+      <BrandedButton
+        color="primary-softer"
+        @click.stop="toggle"
+      >
+        <template v-if="expanded">
+          {{ $t("Read less") }}
+        </template>
+        <template v-else>
+          {{ $t("Read more") }}
+        </template>
+      </BrandedButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { templateRef, useElementSize } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { easing, tween, styler } from 'popmotion'
+import BrandedButton from './BrandedButton.vue'
+
+const props = withDefaults(defineProps<{
+  maxHeight?: string
+}>(), {
+  maxHeight: '',
+})
+
+const DEFAULT_HEIGHT = 284
+const expanded = ref(false)
+const readMoreRequired = ref(false)
+const containerRef = templateRef<HTMLElement | null>('containerRef')
+const readMoreRef = templateRef<HTMLElement | null>('readMoreRef')
+const { height } = useElementSize(containerRef)
+const containerHeight = ref(DEFAULT_HEIGHT)
+const getHeight = (elt: Element) => {
+  const style = getComputedStyle(elt)
+  return parseFloat(style.getPropertyValue('height'))
+    + parseFloat(style.getPropertyValue('margin-top'))
+    + parseFloat(style.getPropertyValue('margin-bottom'))
+}
+const getDefaultHeight = () => {
+  const elementMaxHeight = document.querySelector(`[data-read-more-max-height="${props.maxHeight}"]`)
+  if (!elementMaxHeight) {
+    return DEFAULT_HEIGHT
+  }
+  return Array.from(elementMaxHeight.children)
+    .map(getHeight)
+    .reduce((total, height) => total + height, 0)
+}
+const updateReadMoreHeight = (height: number) => {
+  containerHeight.value = getDefaultHeight()
+  readMoreRequired.value = height > containerHeight.value
+  if (!readMoreRequired.value) {
+    containerHeight.value = height
+  }
+}
+const toggle = () => {
+  if (!readMoreRef.value) {
+    return
+  }
+  const divStyler = styler(readMoreRef.value)
+  if (expanded.value) {
+    tween({
+      from: { height: readMoreRef.value.scrollHeight },
+      to: { height: getDefaultHeight() },
+      duration: 300,
+      ease: easing.anticipate,
+    }).start({
+      update: divStyler.set,
+      complete: () => readMoreRef.value?.scrollIntoView({ behavior: 'smooth' }),
+    })
+  }
+  else {
+    tween({
+      from: { height: getDefaultHeight() },
+      to: { height: readMoreRef.value.scrollHeight },
+      duration: 300,
+      ease: easing.anticipate,
+    }).start({
+      update: divStyler.set,
+      complete: () => divStyler.set({ height: 'auto' }),
+    })
+  }
+  expanded.value = !expanded.value
+}
+watch(height, updateReadMoreHeight)
+</script>

package/src/components/ResourceAccordion/DataStructure.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    v-if="hasError"
+    class="bg-warning-lightest text-warning-dark p-3 mb-4"
+  >
+    <p class="fr-grid-row fr-m-0">
+      <span
+        class="fr-icon-warning-line"
+        aria-hidden="true"
+      />
+      {{ $t("The data structure of this file failed to load.") }}
+    </p>
+  </div>
+  <PreviewLoader v-else-if="loading" />
+  <div
+    v-else
+    class="fr-grid-row fr-grid-row--gutters"
+  >
+    <div
+      v-if="!hasColumnInfo"
+      class="bg-warning-lightest text-warning-dark p-3 mb-4"
+    >
+      <p class="fr-grid-row fr-m-0">
+        <span
+          class="fr-icon-warning-line"
+          aria-hidden="true"
+        />
+        {{ $t("No data structure found for this file.") }}
+      </p>
+    </div>
+    <template v-if="hasColumnInfo">
+      <div
+        v-for="(column, index) in columns"
+        :key="index"
+        class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3"
+      >
+        <h5 class="fr-text--sm fr-text--bold fr-mt-0 fr-mb-1v">
+          {{ column }}
+        </h5>
+        <code class="code">
+          {{ columnsInfo[column].format }}
+        </code>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { Resource } from '../../types/resources'
+import { getProfile } from '../../functions/tabularApi'
+import PreviewLoader from './PreviewLoader.vue'
+
+const props = defineProps<{ resource: Resource }>()
+
+type ColumnInfo = {
+  score: number
+  format: string
+  python_type: string
+}
+
+const columns = ref<Array<string>>([])
+const columnsInfo = ref<Record<string, ColumnInfo>>({})
+const loading = ref(true)
+const hasError = ref(false)
+const hasColumnInfo = ref(false)
+
+onMounted(async () => {
+  try {
+    const { data } = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
+    if ('profile' in data && data.profile) {
+      columns.value = Object.keys(data.profile.columns)
+      columnsInfo.value = data.profile.columns
+      hasColumnInfo.value = true
+      loading.value = false
+    }
+    else {
+      hasError.value = true
+      loading.value = false
+    }
+  }
+  catch {
+    hasError.value = true
+    loading.value = false
+  }
+})
+</script>

package/src/components/ResourceAccordion/EditButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <BrandedButton
+    :href="adminUrl"
+    icon-only
+    :icon="RiPencilLine"
+    color="warning"
+    data-testid="edit-button"
+  >
+    {{ t("Edit file") }}
+  </BrandedButton>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { RiPencilLine } from '@remixicon/vue'
+import { useComponentsConfig } from '../../config'
+import BrandedButton from '../BrandedButton.vue'
+
+type Props = {
+  datasetId: string
+  isCommunityResource?: boolean
+  resourceId: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCommunityResource: false,
+})
+
+const config = useComponentsConfig()
+
+const { t } = useI18n()
+const resourceType = props.isCommunityResource ? 'community-resource' : 'resource'
+const adminUrl = `${config.baseUrl}/dataset/${props.datasetId}/${resourceType}/${props.resourceId}`
+</script>

package/src/components/ResourceAccordion/Metadata.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import type { Resource } from '../../types/resources'
+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 { filesize } from '../../functions/helpers'
+import ExtraAccordion from '../ExtraAccordion.vue'
+import { getResourceTitleId, getResourceLabel } from '../../functions/resources'
+import { useComponentsConfig } from '../../config'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const hasExtras = computed(() => Object.keys(props.resource.extras).length)
+const resourceTitleId = computed(() => getResourceTitleId(props.resource))
+
+const { t } = useI18n()
+const config = useComponentsConfig()
+</script>
+
+<template>
+  <div>
+    <div class="flex gap-3rem flex-col-on-small">
+      <DescriptionList class="flex-1">
+        <DescriptionTerm>
+          {{ t('URL') }}
+          <CopyButton
+            :label="$t('Copy URL')"
+            :copied-label="$t('URL copied!')"
+            :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>
+        </DescriptionDetails>
+        <DescriptionTerm>
+          {{ t('Stable URL') }}
+          <CopyButton
+            :label="$t('Copy stable URL')"
+            :copied-label="$t('Stable URL copied!')"
+            :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>
+        </DescriptionDetails>
+        <DescriptionTerm>
+          {{ t('Identifier') }}
+          <CopyButton
+            :label="$t('Copy ID')"
+            :copied-label="$t('ID copied!')"
+            :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>
+        </DescriptionDetails>
+        <template v-if="resource.checksum">
+          <DescriptionTerm>
+            {{ resource.checksum.type }}
+            <CopyButton
+              :label="$t('Copy checksum')"
+              :copied-label="$t('Checksum copied!')"
+              :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>
+          </DescriptionDetails>
+        </template>
+      </DescriptionList>
+      <DescriptionList style="flex-shrink: 0;">
+        <DescriptionTerm>{{ t('Created on') }}</DescriptionTerm>
+        <DescriptionDetails>
+          {{ formatDate(resource.created_at) }}
+        </DescriptionDetails>
+        <DescriptionTerm>{{ t('Modified on') }}</DescriptionTerm>
+        <DescriptionDetails>
+          {{ formatDate(resource.last_modified) }}
+        </DescriptionDetails>
+      </DescriptionList>
+      <DescriptionList style="flex-shrink: 0;">
+        <template v-if="resource.filesize">
+          <DescriptionTerm>{{ t('Size') }}</DescriptionTerm>
+          <DescriptionDetails>
+            {{ filesize(resource.filesize) }}
+          </DescriptionDetails>
+        </template>
+        <template v-if="resource.mime">
+          <DescriptionTerm>{{ t('Type') }}</DescriptionTerm>
+          <DescriptionDetails>
+            {{ getResourceLabel(resource.type) }}
+          </DescriptionDetails>
+        </template>
+        <template v-if="resource.mime">
+          <DescriptionTerm>{{ t('MIME Type') }}</DescriptionTerm>
+          <DescriptionDetails>
+            <code class="code text-overflow-ellipsis">{{ resource.mime }}</code>
+          </DescriptionDetails>
+        </template>
+      </DescriptionList>
+    </div>
+    <div>
+      <ExtraAccordion
+        v-if="hasExtras"
+        class="pt-6 mt-6 border-top border-gray-default"
+        :button-text="t('See extras')"
+        :title-text="t('Resource Extras')"
+        title-level="h5"
+        :extra="resource.extras"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gap-3rem {
+  gap: 3rem;
+}
+
+.gap-3rem dl {
+  padding-inline-start: 0;
+}
+
+@container (max-width: 600px) {
+  .flex-col-on-small {
+    flex-direction: column
+  }
+}
+</style>