Handle multiple contact points

components/ContactPointSelect.vue

@@ -9,7 +9,6 @@
         :display-value="(option) => 'id' in option ? (option.name || option.email || $t('Unknown')) : t('New contact')"
         :get-option-id="(option) => 'id' in option ? option.id : 'new'"
         :multiple="false"
-        required
         :loading
         :error-text
         :warning-text
@@ -39,6 +38,7 @@
     >
       <InputGroup
         v-model="newContactForm.name"
+        required
         :label="t('Contact Name')"
         :has-error="!!getFirstError('name')"
         :has-warning="!!getFirstWarning('name')"
@@ -47,6 +47,7 @@
       />
       <InputGroup
         v-model="newContactForm.email"
+        type="email"
         :label="t('Contact Email')"
         placeholder="[email protected]"
         :has-error="!!getFirstError('email')"
@@ -105,19 +106,28 @@ const { form: newContactForm, getFirstError, getFirstWarning, touch } = useForm(
   name: '',
   email: '',
   contact_form: '',
+  role: 'contact',
 } as NewContactPoint, {
+  name: [required()],
   email: [email()],
   contact_form: [url()],
 }, {})
 
 const contact = defineModel<ContactPointInForm | null>()
+
 const props = defineProps<{
   organization: Organization
   errorText?: string | null
   warningText?: string | null
 }>()
 
-const contactsUrl = computed(() => `/api/1/organizations/${props.organization.id}/contacts`)
+onMounted(() => {
+  if (contact.value && !('id' in contact.value)) {
+    contact.value = newContactForm.value
+  }
+})
+
+const contactsUrl = computed(() => `/api/1/organizations/${props.organization.id}/contacts/`)
 const { data: contacts, status } = await useAPI<PaginatedArray<ContactPoint>>(contactsUrl, { lazy: true })
 const loading = computed(() => status.value === 'pending')
 const contactsWithNewOption = computed<Array<ContactPointInForm>>(() => {

components/Dataservices/AdminUpdateDataservicePage.vue

@@ -85,7 +85,7 @@ import type { Dataservice } from '@datagouv/components'
 import { RiArchiveLine, RiDeleteBin6Line } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton/BrandedButton.vue'
 import DescribeDataservice from '~/components/Dataservices/DescribeDataservice.vue'
-import type { ContactPoint, DataserviceForm, LinkToSubject } from '~/types/types'
+import type { DataserviceForm, LinkToSubject } from '~/types/types'
 import { toForm, toApi } from '~/utils/dataservices'
 
 const { t } = useI18n()
@@ -117,11 +117,14 @@ async function save() {
     loading.value = true
 
     if (
-      dataserviceForm.value.contact_point
+      dataserviceForm.value.contact_points
       && dataserviceForm.value.owned?.organization
-      && !('id' in dataserviceForm.value.contact_point)
     ) {
-      dataserviceForm.value.contact_point = await newContactPoint($api, dataserviceForm.value.owned?.organization, dataserviceForm.value.contact_point)
+      for (const contactPointKey in dataserviceForm.value.contact_points) {
+        if (!('id' in dataserviceForm.value.contact_points[contactPointKey])) {
+          dataserviceForm.value.contact_points[contactPointKey] = await newContactPoint($api, dataserviceForm.value.owned?.organization, dataserviceForm.value.contact_points[contactPointKey])
+        }
+      }
     }
     await $api(`/api/1/dataservices/${dataservice.value.id}/`, {
       method: 'PATCH',

components/Dataservices/DescribeDataservice.vue

@@ -88,7 +88,7 @@
           v-if="form.owned?.organization"
           :id="contactPointAccordionId"
           :title="$t('Define a point of contact')"
-          :state="accordionState('contact_point')"
+          :state="accordionState('contact_points')"
         >
           <p class="fr-m-0">
             {{ $t("Specify a contact point, such as an email or a link to a form, so users can reach you in case of issues or for questions.") }}
@@ -336,10 +336,19 @@
           <LinkedToAccordion
             class="fr-fieldset__element"
             :accordion="contactPointAccordionId"
-            @blur="touch('contact_point')"
+            @blur="touch('contact_points')"
           >
+            <template v-for="(contact_point, index) in form.contact_points">
+              <ContactPointSelect
+                v-if="contact_point.role == 'contact'"
+                :key="'id' in contact_point ? contact_point.id : index"
+                v-model="form.contact_points[index]"
+                :organization="form.owned?.organization"
+              />
+            </template>
             <ContactPointSelect
-              v-model="form.contact_point"
+              v-if="form.contact_points.length === 0"
+              v-model="form.contact_points[0]"
               :organization="form.owned?.organization"
             />
           </LinkedToAccordion>

components/Datasets/AdminUpdateDatasetPage.vue

@@ -135,11 +135,14 @@ async function save() {
   try {
     loading.value = true
     if (
-      datasetForm.value.contact_point
+      datasetForm.value.contact_points
       && datasetForm.value.owned?.organization
-      && !('id' in datasetForm.value.contact_point)
     ) {
-      datasetForm.value.contact_point = await newContactPoint($api, datasetForm.value.owned?.organization, datasetForm.value.contact_point)
+      for (const contactPointKey in datasetForm.value.contact_points) {
+        if (!('id' in datasetForm.value.contact_points[contactPointKey])) {
+          datasetForm.value.contact_points[contactPointKey] = await newContactPoint($api, datasetForm.value.owned?.organization, datasetForm.value.contact_points[contactPointKey])
+        }
+      }
     }
 
     await $api(`/api/1/datasets/${dataset.value.id}/`, {

components/Datasets/DescribeDataset.vue

@@ -102,7 +102,7 @@
           v-if="form.owned?.organization"
           :id="contactPointAccordionId"
           :title="$t('Define a point of contact')"
-          :state="accordionState('contact_point')"
+          :state="accordionState('contact_points')"
         >
           <p class="fr-m-0">
             {{ $t("Specify a contact point, such as an email or a link to a form, so users can reach you in case of issues or for questions.") }}
@@ -342,10 +342,19 @@
           <LinkedToAccordion
             class="fr-fieldset__element"
             :accordion="contactPointAccordionId"
-            @blur="touch('contact_point')"
+            @blur="touch('contact_points')"
           >
+            <template v-for="(contact_point, index) in form.contact_points">
+              <ContactPointSelect
+                v-if="contact_point.role == 'contact'"
+                :key="'id' in contact_point ? contact_point.id : index"
+                v-model="form.contact_points[index]"
+                :organization="form.owned?.organization"
+              />
+            </template>
             <ContactPointSelect
-              v-model="form.contact_point"
+              v-if="form.contact_points.length === 0"
+              v-model="form.contact_points[0]"
               :organization="form.owned?.organization"
             />
           </LinkedToAccordion>

pages/beta/admin/dataservices/new.vue

@@ -72,7 +72,6 @@ import Step2AddDatasets from '~/components/Dataservices/New/Step2AddDatasets.vue
 import Step3CompletePublication from '~/components/Dataservices/New/Step3CompletePublication.vue'
 import Stepper from '~/components/Stepper/Stepper.vue'
 import type {
-  ContactPoint,
   DataserviceForm,
   DatasetSuggest,
 } from '~/types/types'
@@ -110,7 +109,7 @@ const dataserviceForm = useState(
       license: null,
       private: true,
       rate_limiting: '',
-      contact_point: null,
+      contact_points: [],
     } as DataserviceForm),
 )
 
@@ -147,11 +146,14 @@ async function save() {
   try {
     loading.value = true
     if (
-      dataserviceForm.value.contact_point
+      dataserviceForm.value.contact_points
       && dataserviceForm.value.owned?.organization
-      && !('id' in dataserviceForm.value.contact_point)
     ) {
-      dataserviceForm.value.contact_point = await newContactPoint($api, dataserviceForm.value.owned?.organization, dataserviceForm.value.contact_point)
+      for (const contactPointKey in dataserviceForm.value.contact_points) {
+        if (!('id' in dataserviceForm.value.contact_points[contactPointKey])) {
+          dataserviceForm.value.contact_points[contactPointKey] = await newContactPoint($api, dataserviceForm.value.owned?.organization, dataserviceForm.value.contact_points[contactPointKey])
+        }
+      }
     }
 
     newDataservice.value = await $api<Dataservice>('/api/1/dataservices/', {

pages/beta/admin/datasets/new.vue

@@ -100,6 +100,8 @@ const datasetForm = useState(DATASET_FORM_STATE, () => ({
   frequency: null as Frequency | null,
   spatial_zones: [] as Array<SpatialZone>,
   spatial_granularity: null as SpatialGranularity | null,
+  contact_points: [],
+  private: true,
 } as DatasetForm))
 const datasetFiles = useState<Array<NewDatasetFile>>(DATASET_FILES_STATE, () => [])
 const newDataset = useState<Dataset | null>('new-dataset', () => null)
@@ -129,11 +131,14 @@ async function save() {
   try {
     loading.value = true
     if (
-      datasetForm.value.contact_point
+      datasetForm.value.contact_points
       && datasetForm.value.owned?.organization
-      && !('id' in datasetForm.value.contact_point)
     ) {
-      datasetForm.value.contact_point = await newContactPoint($api, datasetForm.value.owned?.organization, datasetForm.value.contact_point)
+      for (const contactPointKey in datasetForm.value.contact_points) {
+        if (!('id' in datasetForm.value.contact_points[contactPointKey])) {
+          datasetForm.value.contact_points[contactPointKey] = await newContactPoint($api, datasetForm.value.owned?.organization, datasetForm.value.contact_points[contactPointKey])
+        }
+      }
     }
 
     newDataset.value = newDataset.value || await $api<Dataset>('/api/1/datasets/', {

types/types.d.ts

@@ -127,7 +127,7 @@ export type DatasetForm = {
   description: string
   tags: Array<Tag>
   license: License | null
-  contact_point: NewContactPoint | ContactPoint | null
+  contact_points: Array<NewContactPoint | ContactPoint>
   temporal_coverage: { start: null | string, end: null | string }
   frequency: Frequency | null
   spatial_zones: Array<SpatialZone>
@@ -145,7 +145,7 @@ export type NewDatasetForApi = {
   owner?: string
   tags: Array<string>
   license?: string
-  contact_point?: string | null
+  contact_points?: Array<string> | null
   temporal_coverage?: { start: string, end: string }
   frequency?: string
   spatial?: {
@@ -189,7 +189,7 @@ export type DataserviceForm = {
   title: string
   acronym: string
   description: string
-  contact_point: NewContactPoint | ContactPoint | null
+  contact_points: Array<NewContactPoint | ContactPoint>
   is_restricted: boolean
   has_token: boolean
   base_api_url: string
@@ -210,7 +210,7 @@ export type NewDataserviceForApi = {
   acronym?: string
   description: string
   datasets?: Array<string>
-  contact_point?: string | null
+  contact_points?: Array<string> | null
   is_restricted: boolean
   has_token: boolean
   base_api_url: string | null
@@ -251,6 +251,7 @@ export type ContactPoint = {
   name: string
   contact_form?: string
   email?: string
+  role: string
 }
 
 export type NewContactPoint = Omit<ContactPoint, 'id'>

utils/contacts.ts

@@ -9,6 +9,7 @@ export async function newContactPoint(api: $Fetch, organization: Organization, c
       name: contactPoint.name,
       email: contactPoint.email,
       contact_form: contactPoint.contact_form,
+      role: contactPoint.role,
       organization: organization.id,
     }),
   })

utils/dataservices.ts

@@ -19,7 +19,7 @@ export function toForm(dataservice: Dataservice): DataserviceForm {
     title: dataservice.title,
     description: dataservice.description,
     acronym: dataservice.acronym,
-    contact_point: dataservice.contact_point as unknown as ContactPoint | null, // TODO the API returns a ContactPoint object.
+    contact_points: (dataservice.contact_points ?? []) as Array<ContactPoint>, // TODO the API returns a ContactPoint object.
     is_restricted: dataservice.is_restricted,
     has_token: dataservice.has_token,
     base_api_url: dataservice.base_api_url || '',
@@ -33,6 +33,7 @@ export function toForm(dataservice: Dataservice): DataserviceForm {
 }
 
 export function toApi(form: DataserviceForm, overrides: { archived_at?: string | null, datasets?: Array<Dataset | DatasetSuggest>, private?: boolean } = {}): NewDataserviceForApi {
+  const contactPoints = form.contact_points?.filter(cp => 'id' in cp).map(cp => cp.id) ?? []
   return {
     organization: form.owned?.organization?.id,
     owner: form.owned?.owner?.id,
@@ -42,7 +43,7 @@ export function toApi(form: DataserviceForm, overrides: { archived_at?: string |
     private: overrides.private,
     archived_at: overrides.archived_at,
     datasets: overrides.datasets ? overrides.datasets.map(({ id }) => id) : undefined,
-    contact_point: form.contact_point && 'id' in form.contact_point ? form.contact_point.id : undefined,
+    contact_points: form.contact_points && contactPoints.length ? contactPoints : undefined,
     is_restricted: form.is_restricted,
     has_token: form.has_token,
     base_api_url: form.base_api_url || null,

utils/datasets.ts

@@ -8,7 +8,7 @@ import Documentation from '~/components/Icons/Documentation.vue'
 import Image from '~/components/Icons/Image.vue'
 import Link from '~/components/Icons/Link.vue'
 import Table from '~/components/Icons/Table.vue'
-import type { DatasetForm, NewDatasetFile, NewDatasetForApi, SpatialGranularity, SpatialZone } from '~/types/types'
+import type { ContactPoint, DatasetForm, NewDatasetFile, NewDatasetForApi, SpatialGranularity, SpatialZone } from '~/types/types'
 
 export function getResourceFormatIcon(format: string): Component | null {
   switch (format?.trim()?.toLowerCase()) {
@@ -108,7 +108,7 @@ export function toForm(dataset: Dataset, licenses: Array<License>, frequencies:
     acronym: dataset.acronym,
     tags: dataset.tags?.map(text => ({ text })) || [],
     license: licenses.find(l => l.id === dataset.license) || null,
-    contact_point: dataset.contact_point,
+    contact_points: dataset.contact_points ?? [],
     frequency: frequencies.find(f => f.id === dataset.frequency) || null,
     temporal_coverage: dataset.temporal_coverage ? { start: dataset.temporal_coverage.start, end: dataset.temporal_coverage.end } : { start: null, end: null }, // TODO fix this type, the API returns an object not a string
     spatial_zones: dataset.spatial?.zones?.map(id => zones.find(z => z.id === id)).filter(z => z !== undefined) || [],
@@ -118,6 +118,7 @@ export function toForm(dataset: Dataset, licenses: Array<License>, frequencies:
 }
 
 export function toApi(form: DatasetForm, overrides: { private?: boolean, archived?: string | null } = {}): NewDatasetForApi {
+  const contactPoints = form.contact_points?.filter(cp => 'id' in cp).map(cp => cp.id) ?? []
   return {
     organization: form.owned?.organization?.id,
     owner: form.owned?.owner?.id,
@@ -128,7 +129,7 @@ export function toApi(form: DatasetForm, overrides: { private?: boolean, archive
     acronym: form.acronym,
     tags: form.tags.map(t => t.text),
     license: form.license?.id || '',
-    contact_point: form.contact_point && 'id' in form.contact_point ? form.contact_point.id : undefined,
+    contact_points: form.contact_points && contactPoints.length ? contactPoints : undefined,
     frequency: form.frequency?.id || '',
     temporal_coverage: (form.temporal_coverage.start && form.temporal_coverage.end) ? form.temporal_coverage as { start: string, end: string } : undefined,
     spatial: (form.spatial_granularity || form.spatial_zones)