#25 - DistributionForm - add multilingual value for title and description

src/components/DatasetMultiStep/OcDatasetFormStep5/OcDatasetFormStep5.vue

@@ -160,10 +160,41 @@
       <hr class="w-full my-6 border-t border-gray-400" />
       <Accordion :value="['0']" class="w-full" multiple>
         <AccordionPanel :value="key" v-for="(distribution, key) in model.distribution" :key="key">
-          <AccordionHeader>{{ distribution.title }}</AccordionHeader>
+          <AccordionHeader>{{ translateValue(distribution.title) }}</AccordionHeader>
           <AccordionContent pt:content="flex flex-wrap">
-            <OcField :metadata="distributionMetadata.description" for="description" class="w-full">
-              {{ distribution.description }}
+            <OcField
+              v-if="distribution.title"
+              :metadata="distributionMetadata.title"
+              for="title"
+              class="w-full"
+            >
+              <div class="flex gap-2 flex-col">
+                <div
+                  v-for="(title, key) in distribution.title"
+                  :key="key"
+                  class="border w-full rounded-md"
+                >
+                  <Tag :value="key" severity="secondary" icon="fa-solid fa-globe" />
+                  <span class="m-2">{{ title }}</span>
+                </div>
+              </div>
+            </OcField>
+            <OcField
+              v-if="distribution.description"
+              :metadata="distributionMetadata.description"
+              for="description"
+              class="w-full"
+            >
+              <div class="flex gap-2 flex-col">
+                <div
+                  v-for="(description, key) in distribution.description"
+                  :key="key"
+                  class="flex items-start border w-full rounded-md"
+                >
+                  <Tag :value="key" severity="secondary" icon="fa-solid fa-globe" />
+                  <span class="m-2">{{ description }}</span>
+                </div>
+              </div>
             </OcField>
             <OcField
               v-if="distribution.license"

src/components/OcDistributionForm/OcDistributionForm.vue

 <template>
   <Form @submit="submit" :validation-schema="validationSchema" :initial-values="model">
-    <Field name="title" v-slot="{ field, errorMessage }">
+    <Field name="title" v-slot="{ value, handleChange, errorMessage }">
       <OcField for="title" :metadata="distributionMetadata.title">
-        <InputText id="title" v-bind="field" :invalid="!!errorMessage" required fluid />
+        <OcMultilingualField
+          id="title"
+          :initial-value="value"
+          @updateValue="handleChange"
+          :inputComponent="InputText"
+          :inputProps="{ invalid: !!errorMessage, required: true, fluid: true }"
+        />
       </OcField>
       <Message v-if="errorMessage" severity="error">{{ errorMessage }}</Message>
     </Field>
-    <Field name="description" v-slot="{ field, errorMessage }">
+    <Field name="description" v-slot="{ value, handleChange, errorMessage }">
       <OcField for="description" :metadata="distributionMetadata.description">
-        <Textarea id="description" v-bind="field" :invalid="!!errorMessage" required fluid />
+        <OcMultilingualField
+          id="description"
+          :initial-value="value"
+          @updateValue="handleChange"
+          :inputComponent="Textarea"
+          :inputProps="{ invalid: !!errorMessage, required: true, fluid: true }"
+        />
       </OcField>
       <Message v-if="errorMessage" severity="error">{{ errorMessage }}</Message>
     </Field>
@@ -129,7 +141,7 @@
 
 <script setup lang="ts">
 import { useTranslateValue } from '@/composables/useTranslateValue'
-import type { OcDistribution, OcService, OcConcept } from '@/declarations'
+import type { OcDistribution, OcService, OcConcept, LocalizedProperty } from '@/declarations'
 import { toTypedSchema } from '@vee-validate/yup'
 import Button from 'primevue/button'
 import { Field, Form, type GenericObject } from 'vee-validate'
@@ -145,6 +157,7 @@ import OcConceptSelect from '../FormInputs/OcConceptSelect/OcConceptSelect.vue'
 import OcServiceAutocomplete from '../FormInputs/OcServiceAutocomplete/OcServiceAutocomplete.vue'
 import OcConceptAutocomplete from '../FormInputs/OcConceptAutocomplete/OcConceptAutocomplete.vue'
 import OcLicenseSelect from '../FormInputs/OcLicenseSelect/OcLicenseSelect.vue'
+import OcMultilingualField from '../FormInputs/OcMultilingualField/OcMultilingualField.vue'
 
 const { t } = useI18n()
 const { translateValue } = useTranslateValue()
@@ -158,9 +171,12 @@ const emit = defineEmits<{
 
 const validationSchema = toTypedSchema(
   yup.object({
-    title: yup.string().required().label(translateValue(distributionMetadata.title.label)),
+    title: yup
+      .mixed<LocalizedProperty<string>>()
+      .required()
+      .label(translateValue(distributionMetadata.title.label)),
     description: yup
-      .string()
+      .mixed<LocalizedProperty<string>>()
       .required()
       .label(translateValue(distributionMetadata.description.label)),
     license: yup.mixed<OcConcept>().label(translateValue(distributionMetadata.license.label)),
@@ -182,7 +198,6 @@ const validationSchema = toTypedSchema(
 )
 
 const submit = (values: GenericObject) => {
-  console.log('save')
   model.value = values
 
   emit('save')

src/sparql/distribution.ts

 import type {
   Credentials,
-  OcConcept,
   OcDataset,
   OcDistribution,
   OcDistributionSummary,
@@ -14,7 +13,7 @@ import {
   executeSparqlConstruct
 } from './sparql'
 import { resourceContext } from './resource'
-import { ContextDefinition } from 'jsonld'
+import { type ContextDefinition } from 'jsonld'
 
 export async function insertDistribution(
   distribution: Partial<OcDistribution>,
@@ -142,7 +141,7 @@ export async function getDistribution(
       '@container': '@language'
     }
   }
-  
+
   const frame = {
     '@context': context,
     '@type': [