@datagouv/components-next 0.2.0 → 1.0.0

package/src/components/DiscussionMessageCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <ObjectCard>
+    <ObjectCardHeader
+      :icon="RiChat3Line"
+      :url="discussionUrl || discussion.self_web_url || '#'"
+    >
+      {{ discussion.title }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="discussion.organization || discussion.user"
+      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="discussion.organization"
+        :owner="discussion.user"
+        :organization-url="organizationUrl"
+      />
+      <RiSubtractLine
+        aria-hidden="true"
+        class="size-4 flex-none fill-gray-medium"
+      />
+      <span class="text-gray-medium whitespace-nowrap">
+        {{ t('Posté {date}', { date: formatDate(discussion.created) }) }}
+      </span>
+    </div>
+
+    <ObjectCardShortDescription :text="firstMessageContent" />
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { RiChat3Line, RiSubtractLine } from '@remixicon/vue'
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { useFormatDate } from '../functions/dates'
+import { useTranslation } from '../composables/useTranslation'
+import type { Thread } from '../types/discussions'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+
+const props = defineProps<{
+  discussion: Thread
+  discussionUrl?: RouteLocationRaw
+  organizationUrl?: RouteLocationRaw
+}>()
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const firstMessageContent = computed(() => props.discussion.discussion?.[0]?.content)
+
+const formatDate = (dateString: string) => {
+  return formatRelativeIfRecentDate(dateString, {
+    dateStyle: 'long',
+    timeStyle: 'short',
+  })
+}
+</script>

package/src/components/ExtraAccordion.vue

@@ -4,12 +4,12 @@
     as="div"
   >
     <header
-      class="flex flex-wrap items-center pb-6 mb-6 border-bottom border-gray-default"
+      class="flex flex-wrap items-center pb-6 mb-6 border-b border-gray-default"
     >
       <div class="fr-col">
         <component
           :is="titleLevel"
-          class="subtitle subtitle--uppercase fr-m-0"
+          class="subtitle uppercase m-0"
         >
           {{ titleText }}
         </component>
@@ -34,7 +34,7 @@
       </div>
     </header>
     <DisclosurePanel :id="accordionId">
-      <div class="pb-6 mb-6 border-bottom border-gray-default">
+      <div class="pb-6 mb-6 border-b border-gray-default">
         <div
           class="fr-grid-row fr-grid-row--gutters fr-text--sm fr-m-0"
           data-testid="extra-list"
@@ -44,7 +44,7 @@
             :key="key"
             class="fr-col-12 fr-col-sm-6 fr-col-md-4"
           >
-            <h3 class="subtitle fr-mb-1v">
+            <h3 class="subtitle mb-1">
               {{ key }}
             </h3>
             <p class="text-sm m-0 text-gray-medium break-all">

package/src/components/Form/BadgeSelect.vue

@@ -0,0 +1,35 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="badges"
+    :loading="status === 'pending'"
+    :label="t('Label de données')"
+    :placeholder="t('Tous les labels')"
+    :get-option-id="(b: TranslatedBadge) => b.kind"
+    :display-value="(b: TranslatedBadge) => b.label"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { TranslatedBadge } from '../../types/badges'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<TranslatedBadge | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: badgesRecord, status } = await useFetch<Record<string, string>>('/api/1/datasets/badges/', { lazy: true })
+
+const badges = computed<TranslatedBadge[]>(() => {
+  if (!badgesRecord.value) return []
+  return Object.entries(badgesRecord.value).map(([kind, label]) => ({ kind, label }))
+})
+
+useSelectModelSync({ model, id, items: badges, getId: b => b.kind })
+</script>

package/src/components/Form/FormatSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="formats ?? []"
+    :loading="status === 'pending'"
+    :label="t('Formats')"
+    :placeholder="t('Tous les formats')"
+    :get-option-id="(f: string) => f"
+    :display-value="(f: string) => f"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useStringSelectSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<string | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: formats, status } = await useFetch<string[]>('/api/1/datasets/extensions/', { lazy: true })
+
+useStringSelectSync({ model, id })
+</script>

package/src/components/Form/GeozoneSelect.vue

@@ -0,0 +1,52 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="[]"
+    :suggest="suggestGeozones"
+    :label="t('Couverture spatiale')"
+    :placeholder="t('Toutes les couvertures')"
+    :get-option-id="(g: SpatialZone) => g.id"
+    :display-value="(g: SpatialZone) => g.name"
+    :multiple="false"
+    :loading="fetching"
+  >
+    <template #option="{ option }">
+      <div class="flex-1">
+        {{ option.name }}
+      </div>
+      <code class="bg-gray-100 text-gray-600 p-1 text-xs rounded">{{ option.code }}</code>
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { useAsyncSelectModelSync } from '../../composables/useSelectModelSync'
+import type { SpatialZone } from '../../types/granularity'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<SpatialZone | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const config = useComponentsConfig()
+const { t } = useTranslation()
+
+const { fetching } = useAsyncSelectModelSync({
+  model,
+  id,
+  getId: z => z.id,
+  fetchById: async (zoneId) => {
+    const zones = await suggestGeozones(zoneId)
+    return zones.find(z => z.id === zoneId) ?? null
+  },
+})
+
+async function suggestGeozones(q: string) {
+  return await ofetch<SpatialZone[]>('/api/1/spatial/zones/suggest/', {
+    baseURL: config.apiBase,
+    query: { q, size: 20 },
+  })
+}
+</script>

package/src/components/Form/GranularitySelect.vue

@@ -0,0 +1,29 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="granularities ?? []"
+    :loading="status === 'pending'"
+    :label="t('Granularité spatiale')"
+    :placeholder="t('Toutes les granularités')"
+    :get-option-id="(g: Granularity) => g.id"
+    :display-value="(g: Granularity) => g.name"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { Granularity } from '../../types/granularity'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<Granularity | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: granularities, status } = await useFetch<Granularity[]>('/api/1/spatial/granularities/', { lazy: true })
+
+useSelectModelSync({ model, id, items: granularities, getId: g => g.id })
+</script>

package/src/components/Form/LicenseSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="licenses ?? []"
+    :loading="status === 'pending'"
+    :label="t('Licences')"
+    :explanation="t('Les licences définissent les règles de réutilisation des jeux de données publiés.')"
+    :placeholder="t('Toutes les licences')"
+    :get-option-id="(l: License) => l.id"
+    :display-value="(l: License) => l.title"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { License } from '../../types/licenses'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<License | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: licenses, status } = await useFetch<License[]>('/api/1/datasets/licenses/', { lazy: true })
+
+useSelectModelSync({ model, id, items: licenses, getId: l => l.id })
+</script>

package/src/components/Form/OrganizationSelect.vue

@@ -0,0 +1,62 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="[]"
+    :suggest="suggestOrganizations"
+    :label="t('Organisations')"
+    :placeholder="t('Toutes les organisations')"
+    :get-option-id="(option) => option.id"
+    :display-value="(option) => option.name"
+    :filter="(option, query) => (option.name).toLocaleLowerCase().includes(query.toLocaleLowerCase())"
+    :multiple="false"
+    :loading="loading || fetching"
+  >
+    <template #option="{ option }">
+      <div class="flex items-center space-x-2">
+        <OrganizationLogo
+          :organization="option"
+          size-class="size-8"
+          class="flex-none"
+        />
+        <span>{{ option.name }}</span>
+      </div>
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { ofetch } from 'ofetch'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { useAsyncSelectModelSync } from '../../composables/useSelectModelSync'
+import type { Organization, OrganizationSuggest } from '../../types/organizations'
+import OrganizationLogo from '../OrganizationLogo.vue'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<Organization | OrganizationSuggest | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+defineProps<{
+  loading?: boolean
+}>()
+
+const config = useComponentsConfig()
+const { t } = useTranslation()
+
+const { fetching } = useAsyncSelectModelSync({
+  model,
+  id,
+  getId: org => org.id,
+  fetchById: orgId => ofetch<Organization>(`/api/1/organizations/${orgId}/`, { baseURL: config.apiBase }),
+})
+
+async function suggestOrganizations(q: string): Promise<Array<Organization | OrganizationSuggest>> {
+  return await ofetch<Array<OrganizationSuggest>>('/api/1/organizations/suggest/', {
+    baseURL: config.apiBase,
+    query: {
+      q,
+      size: 20,
+    },
+  })
+}
+</script>

package/src/components/Form/OrganizationTypeSelect.vue

@@ -0,0 +1,34 @@
+<template>
+  <SearchableSelect
+    v-model="selected"
+    :options="organizationTypes"
+    :label="t(`Type d'organisation`)"
+    :placeholder="t('Tous les types')"
+    :get-option-id="(opt) => opt.type"
+    :display-value="(value) => value.label"
+    :multiple="false"
+  >
+    <template #option="{ option }">
+      {{ option.label }}
+    </template>
+  </SearchableSelect>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getOrganizationTypes, OTHER, USER } from '../../functions/organizations'
+import { useTranslation } from '../../composables/useTranslation'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<string | undefined>()
+
+const { t } = useTranslation()
+
+const organizationTypes = getOrganizationTypes()
+  .filter(t => t.type !== OTHER && t.type !== USER)
+
+const selected = computed({
+  get: () => organizationTypes.find(t => t.type === model.value) ?? null,
+  set: (value) => { model.value = value?.type },
+})
+</script>

package/src/components/Form/ReuseTopicSelect.vue

@@ -0,0 +1,29 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="topics ?? []"
+    :loading="status === 'pending'"
+    :label="t('Thématique')"
+    :placeholder="t('Toutes les thématiques')"
+    :get-option-id="(topic: ReuseTopic) => topic.id"
+    :display-value="(topic: ReuseTopic) => topic.label"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { ReuseTopic } from '../../types/reuses'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<ReuseTopic | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: topics, status } = await useFetch<ReuseTopic[]>('/api/1/reuses/topics/', { lazy: true })
+
+useSelectModelSync({ model, id, items: topics, getId: topic => topic.id })
+</script>

package/src/components/Form/SchemaSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <SearchableSelect
+    v-model="model"
+    :options="schemas ?? []"
+    :loading="status === 'pending'"
+    :label="t('Schéma')"
+    :explanation="t('Les schémas de données permettent de décrire des modèles de données.')"
+    :placeholder="t('Tous les schémas')"
+    :get-option-id="(s: RegisteredSchema) => s.name"
+    :display-value="(s: RegisteredSchema) => s.name"
+    :multiple="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useSelectModelSync } from '../../composables/useSelectModelSync'
+import { useFetch } from '../../functions/api'
+import type { RegisteredSchema } from '../../types/schemas'
+import SearchableSelect from './SearchableSelect.vue'
+
+const model = defineModel<RegisteredSchema | null>({ default: null })
+const id = defineModel<string | undefined>('id')
+
+const { t } = useTranslation()
+
+const { data: schemas, status } = await useFetch<RegisteredSchema[]>('/api/1/datasets/schemas/', { lazy: true })
+
+useSelectModelSync({ model, id, items: schemas, getId: s => s.name })
+</script>