From 171f0126b91f0ee5b8b1ab0a35e1bf6345e1b15f Mon Sep 17 00:00:00 2001
From: Simon Mellerin <simon.mellerin@makina-corpus.com>
Date: Thu, 21 Nov 2024 16:15:54 +0100
Subject: [PATCH] #25 - DistributionForm - add multilingual value for title and
description
---
.../OcDatasetFormStep5/OcDatasetFormStep5.vue | 37 +++++++++++++++++--
.../OcDistributionForm/OcDistributionForm.vue | 31 ++++++++++++----
src/sparql/distribution.ts | 5 +--
3 files changed, 59 insertions(+), 14 deletions(-)
diff --git a/src/components/DatasetMultiStep/OcDatasetFormStep5/OcDatasetFormStep5.vue b/src/components/DatasetMultiStep/OcDatasetFormStep5/OcDatasetFormStep5.vue
index 0ead0e0..38bb204 100644
--- a/src/components/DatasetMultiStep/OcDatasetFormStep5/OcDatasetFormStep5.vue
+++ b/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"
diff --git a/src/components/OcDistributionForm/OcDistributionForm.vue b/src/components/OcDistributionForm/OcDistributionForm.vue
index e092b62..d227152 100644
--- a/src/components/OcDistributionForm/OcDistributionForm.vue
+++ b/src/components/OcDistributionForm/OcDistributionForm.vue
@@ -1,14 +1,26 @@
<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')
diff --git a/src/sparql/distribution.ts b/src/sparql/distribution.ts
index 4ead4c6..3e80719 100644
--- a/src/sparql/distribution.ts
+++ b/src/sparql/distribution.ts
@@ -1,6 +1,5 @@
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': [
--
GitLab