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,64 @@
+<template>
+  <BrandedButton
+    type="button"
+    color="secondary"
+    :disabled="readOnlyEnabled"
+    :icon="following ? RiStarFill : RiStarLine"
+    :icon-attrs
+    :loading
+    size="xs"
+    @click.prevent="toggleFollow"
+  >
+    <template v-if="following">
+      {{ $t("Remove from favourites") }}
+    </template>
+    <template v-else>
+      {{ $t("Add to favourites") }}
+    </template>
+  </BrandedButton>
+</template>
+
+<script setup lang="ts">
+import { BrandedButton } from '@datagouv/components-next'
+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 loading = ref(false)
+const readOnlyEnabled = config.public.readOnlyMode
+
+const iconAttrs = computed(() => ({
+  class: animating.value ? 'animate-ping' : '',
+}))
+
+async function toggleFollow() {
+  const me = useMaybeMe()
+  if (!me.value) {
+    const localePath = useLocalePath()
+    return navigateTo(localePath('/login'), { external: true })
+  }
+  loading.value = true
+  try {
+    await $api(props.url, {
+      method: following.value ? 'DELETE' : 'POST',
+    })
+    following.value = !following.value
+    if (following.value) {
+      animating.value = true
+      setTimeout(() => (animating.value = false), 1300)
+    }
+  }
+  finally {
+    loading.value = false
+  }
+}
+</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/BrandedButton.vue

@@ -1,8 +1,8 @@
 <template>
   <component
     :is="href ? AppLink: 'button'"
-    class="inline-flex items-center rounded-full font-medium border !bg-none !no-underline"
-    :class="[colors, sizes, removePaddingsIfNoBorders, isDisabled ? '!opacity-50' : '', iconRight ? 'flex-row-reverse space-x-reverse' : '']"
+    class="inline-flex items-center rounded-full font-medium border !bg-none !no-underline after:content-none"
+    :class="[colors, sizes, removePaddingsIfNoBorders, isDisabled ? '!opacity-50' : '', iconRight && !newTab ? 'flex-row-reverse space-x-reverse' : '']"
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
     :role="href ? 'link' : ''"
@@ -26,6 +26,10 @@
       class="whitespace-nowrap"
       :class="iconOnly ? 'sr-only' : ''"
     ><slot /></span>
+    <RiExternalLinkLine
+      v-if="newTab"
+      :class="iconSize"
+    />
   </component>
 </template>
 
@@ -42,6 +46,7 @@ import {
   Text,
   useSlots,
 } from 'vue'
+import { RiExternalLinkLine } from '@remixicon/vue'
 import AppLink from './AppLink.vue'
 import { bannerActionTypeKey } from './BannerAction.vue'