Add reuses

components/BrandedButton/EditButton.vue

@@ -14,7 +14,7 @@ import { BrandedButton } from '@datagouv/components-next'
 import { RiEdit2Line } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'organizations' | 'posts'
+  type: 'organizations' | 'posts' | 'reuses'
   id: string
 }>()
 
@@ -26,6 +26,7 @@ const link = computed(() => {
     case 'organizations':
       return `${base}profile`
     case 'posts':
+    case 'reuses':
       return base
     default:
       return throwOnNever(props.type as never, t('No other type defined'))

components/Breadcrumb/Breadcrumb.vue

@@ -2,7 +2,7 @@
   <nav
     rol="navigation"
     :aria-label="$t(`You're here:`)"
-    class="fr-breadcrumb !mb-5"
+    class="fr-breadcrumb mb-5"
   >
     <ol class="fr-breadcrumb__list">
       <slot />

components/Datasets/DatasetsMetrics.vue

@@ -82,7 +82,7 @@
 <script setup lang="ts">
 import { BrandedButton } from '@datagouv/components-next'
 import { StatBox, type Organization } from '@datagouv/components-next'
-import { RiDownloadLine, RiTestTubeLine } from '@remixicon/vue'
+import { RiDownloadLine } from '@remixicon/vue'
 
 const props = defineProps<{
   organization: Organization

components/Divider.vue

@@ -4,10 +4,21 @@
       class="absolute inset-0 flex items-center"
       aria-hidden="true"
     >
-      <div class="w-full border-t border-gray-300" />
+      <div
+        class="w-full border-t"
+        :class="color"
+      />
     </div>
     <div class="relative flex justify-center">
       <span class="bg-white px-3 text-sm text-mention-grey"><slot /></span>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  color?: string
+}>(), {
+  color: 'border-gray-300',
+})
+</script>

components/FollowButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <button
+    type="button"
+    class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--secondary-grey-500 follow-button"
+    :disabled="readOnlyEnabled"
+    @click.prevent="toggleFollow"
+  >
+    <span>
+      <RiStarFill
+        v-if="following"
+        :class="{ 'animate-ping': animating }"
+        class="size-4"
+      />
+      <RiStarLine
+        v-else
+        :class="{ 'animate-ping': animating }"
+        class="size-4"
+      />
+    </span>
+    <span class="fr-ml-1w">
+      <template v-if="following">{{ $t("Remove from favourites") }}</template>
+      <template v-else>{{ $t("Add to favourites") }}</template>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { RiStarFill, RiStarLine } from '@remixicon/vue'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  url: string
+  following?: boolean
+}>()
+
+const config = useRuntimeConfig()
+const { $api } = useNuxtApp()
+
+const animating = ref(false)
+const following = ref(props.following)
+const readOnlyEnabled = config.public.readOnlyMode
+
+async function toggleFollow() {
+  const me = useMaybeMe()
+  if (!me.value) {
+    const localePath = useLocalePath()
+    return navigateTo(localePath('/login'), { external: true })
+  }
+
+  await $api(props.url, {
+    method: following.value ? 'DELETE' : 'POST',
+  })
+  following.value = !following.value
+  if (following.value) {
+    animating.value = true
+    setTimeout(() => (animating.value = false), 1300)
+  }
+}
+</script>

components/Organization/ListPage.vue

@@ -127,11 +127,7 @@ const qDebounced = debouncedRef(q, config.public.searchAutocompleteDebounce)
 const sort = ref(props.sort ?? '')
 const sortParam = computed(() => sort.value ? sort.value : undefined)
 
-watch([sort, qDebounced], async ([_newSort, newQ], [_oldSort, oldQ]) => {
-  if (newQ !== oldQ) {
-    sort.value = ''
-  }
-
+watch([sort, qDebounced], async ([_newSort, newQ]) => {
   emit('change', newQ, sortParam.value, 1)
 
   document.children[0].scrollIntoView({ behavior: 'smooth', block: 'start' })

components/Reuses/ListPage.vue

@@ -0,0 +1,178 @@
+<template>
+  <h1 class="!mb-2">
+    {{ $t('Reuses') }}
+  </h1>
+  <label
+    :for="inputId"
+    class="block mb-3"
+  >
+    {{ $t('Search among {count} reuses on {site}', {
+      count: totalReuses,
+      site: config.public.title,
+    }) }}
+  </label>
+  <div class="w-full flex mb-5">
+    <input
+      :id="inputId"
+      v-model.trim="q"
+      class="flex-1 px-4 py-2 bg-gray-lower rounded-tl-sm shadow-input-blue"
+      type="search"
+      :placeholder="$t('Search...')"
+    >
+    <BrandedButton
+      class="rounded-none rounded-tr"
+      :icon="RiSearch2Line"
+      size="lg"
+    >
+      {{ $t('Search') }}
+    </BrandedButton>
+  </div>
+  <div class="fr-grid-row fr-mb-1v fr-displayed-lg">
+    <ul class="fr-tags-group">
+      <li>
+        <button
+          type="button"
+          class="fr-tag"
+          :aria-pressed="!topic"
+          @click="topic = undefined"
+        >
+          {{ $t('All') }}
+        </button>
+      </li>
+      <li
+        v-for="currentTopic in topics"
+        :key="currentTopic.id"
+      >
+        <button
+          class="fr-tag"
+          :aria-pressed="currentTopic.id === topic"
+          @click="topic = currentTopic.id"
+        >
+          {{ currentTopic.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+  <div class="flex justify-between items-center mb-6">
+    <p class="mb-0">
+      {{ $t('{count} results', { count: reuses.total }) }}
+    </p>
+    <div class="flex items-center gap-1">
+      <label
+        :for="selectId"
+        class="flex-none text-sm"
+      >{{ $t('Sort by:') }}</label>
+      <select
+        :id="selectId"
+        v-model="sort"
+        class="fr-select !shadow-input-blue"
+      >
+        <option value="">
+          {{ $t('Relevance') }}
+        </option>
+        <option value="-created">
+          {{ $t('Newest') }}
+        </option>
+        <option value="created">
+          {{ $t('Oldest') }}
+        </option>
+        <option value="-followers">
+          {{ $t('Followers') }}
+        </option>
+        <option value="-reuses">
+          {{ $t('Reuses') }}
+        </option>
+      </select>
+    </div>
+  </div>
+  <LoadingBlock :status>
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 mb-16">
+      <ReuseCard
+        v-for="reuse in reuses.data"
+        :key="reuse.id"
+        class="col-span-1"
+        :reuse
+      />
+    </div>
+  </LoadingBlock>
+  <Pagination
+    :page="reuses.page"
+    :page-size="reuses.page_size"
+    :total-results="reuses.total"
+    :link="link"
+    @change="(p: number) => $emit('change', q, topic, sortParam, p)"
+  />
+</template>
+
+<script setup lang="ts">
+import { BrandedButton, Pagination } from '@datagouv/components-next'
+import type { Reuse, ReuseTopic } from '@datagouv/components-next'
+import { RiSearch2Line } from '@remixicon/vue'
+import { debouncedRef } from '@vueuse/core'
+import ReuseCard from '~/components/Reuses/ReuseCard.vue'
+import type { PaginatedArray, RequestStatus } from '~/types/types'
+
+const props = defineProps<{
+  /**
+   * Customize the links used
+   */
+  link?: (page: number) => string
+
+  /**
+   * List of reuses to show
+   */
+  reuses: PaginatedArray<Reuse>
+
+  /**
+   * The starting q
+   */
+  q: string
+
+  /**
+   * The starting sort
+   */
+  sort: string | undefined
+
+  /**
+   * The API request status
+   */
+  status: RequestStatus
+
+  /**
+   * The starting sort
+   */
+  topic: string | undefined
+
+  /**
+   * Reuse topics from API
+   */
+  topics: Array<ReuseTopic>
+
+  /**
+   * Number of reuses for this site or organization
+   */
+  totalReuses: number
+}>()
+
+const emit = defineEmits<{
+  change: [q: string, topic: string | undefined, sort: string | undefined, page: number]
+}>()
+
+const config = useRuntimeConfig()
+
+const inputId = useId()
+const selectId = useId()
+
+const q = ref(props.q ?? '')
+
+const qDebounced = debouncedRef(q, config.public.searchAutocompleteDebounce)
+const sort = ref(props.sort ?? '')
+const sortParam = computed(() => sort.value ? sort.value : undefined)
+const topic = ref(props.topic)
+
+watch([sort, topic, qDebounced], async ([_newSort, newTopic, newQ]) => {
+  emit('change', newQ, newTopic, sortParam.value, 1)
+
+  document.children[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+})
+</script>

datagouv-components/assets/main.css

@@ -22,6 +22,7 @@
   --color-mention-grey: #666; /* Copy from --text-mention-grey */
   --color-gray-title: #161616;
   --color-gray-medium: #666666;
+  --color-gray-low: #929292;
   --color-gray-lower-hover: #d2d2d2;
   --color-gray-lower-active: #c1c1c1;
   --color-gray-lower: #eeeeee;
@@ -102,3 +103,34 @@
     border-color: var(--color-gray-200, currentColor);
   }
 }
+
+@layer components {
+  meter.quality-score {
+    background: none;
+    border: 1px solid var(--color-gray-default);
+    border-radius: 8px;
+    height: 10px;
+    vertical-align: baseline;
+  }
+  meter.quality-score::-webkit-meter-bar {
+    height: 10px;
+    background: whiteSmoke;
+    border-radius: 8px;
+  }
+  meter.quality-score::-moz-meter-bar {
+    background: whiteSmoke;
+    border-radius: 8px;
+  }
+  meter.quality-score::-webkit-meter-suboptimum-value {
+    background-color: var(--color-gray-low);
+  }
+  meter.quality-score:-moz-meter-sub-optimum::-moz-meter-bar {
+    background-color: var(--color-gray-low);
+  }
+  meter.quality-score::-webkit-meter-optimum-value {
+    background-color: #27A658;
+  }
+  meter.quality-score:-moz-meter-optimum::-moz-meter-bar {
+    background-color: #27A658;
+  }
+}

datagouv-components/src/components/DatasetCard.vue

@@ -48,7 +48,7 @@
         </div>
       </div>
       <div class="fr-col-12 fr-col-sm">
-        <h4 class="fr-text--md fr-mb-0 fr-grid-row">
+        <h4 class="fr-text--md mb-0 fr-grid-row">
           <slot
             name="datasetUrl"
             :dataset="dataset"
@@ -76,13 +76,13 @@
         </h4>
         <div
           v-if="dataset.organization || dataset.owner"
-          class="fr-text--sm fr-m-0 flex"
+          class="text-sm m-0 flex truncate"
         >
           <template v-if="dataset.organization">
-            <div class="fr-mr-1v">
+            <div class="-mr-1 flex-initial">
               <AppLink
                 v-if="organizationUrl"
-                class="fr-link fr-text--sm flex items-center relative z-20"
+                class="link text-sm flex items-center relative z-[2]"
                 :to="organizationUrl"
               >
                 <OrganizationNameWithCertificate :organization="dataset.organization" />
@@ -95,7 +95,7 @@
           </template>
           <div
             v-else
-            class="fr-mr-1v truncate"
+            class="mr-1 truncate"
           >
             {{ ownerName }}
           </div>

datagouv-components/src/components/OrganizationNameWithCertificate.vue

@@ -5,7 +5,7 @@
       :type="getOrganizationType(organization)"
     />
     <div
-      class="mb-0 truncate"
+      class="mb-0 truncate flex-initial"
       :class="{ 'text-sm': size === 'sm' }"
     >
       {{ organization.name }}