Squashed commit of the following:
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 40s
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 40s
commit 579f0878e5240dc17db69be1e0b0c0f5af7ef9fe
Author: Arno Kaimbacher <arno.kaimbacher@geosphere.at>
Date: Tue Jun 9 09:25:44 2026 +0200
feat: Refactor error handling in Dataset Edit form and improve validation messages
- Updated error handling in the Dataset Edit form to use a centralized formatError function for displaying validation messages.
- Enhanced user feedback by ensuring that error messages are displayed consistently across various fields.
- Modified the validation rule for arrayContainsTypes to provide clearer error messages for missing main and translated titles/abstracts.
- Introduced a new ValidationService to manage manual construction of validation errors.
- Updated Vite configuration to streamline asset loading and improve performance.
- Adjusted Inertia setup to utilize dynamic imports for page-specific assets.
- Cleaned up unnecessary comments and code in various files for better readability.
commit 5efddc2a58c0e164fef585cc7344c06155dbc2c1
Author: Arno Kaimbacher <arno.kaimbacher@geosphere.at>
Date: Mon Jan 12 17:02:47 2026 +0100
feat: add dataset change detection and form submission composables
- Implemented `useDatasetChangeDetection` for tracking unsaved changes in dataset forms, including comparisons for licenses, basic properties, files, coverage, and more.
- Added `useDatasetFormSubmission` for handling dataset form submissions with validation, success/error handling, and auto-save functionality.
This commit is contained in:
parent
0680879e2f
commit
9368a0dd8d
38 changed files with 5588 additions and 6181 deletions
|
|
@ -72,7 +72,7 @@
|
|||
<FormField
|
||||
label="Language *"
|
||||
help="required: select dataset main language"
|
||||
:class="{ 'text-red-400': form.errors.language }"
|
||||
:errors="form.errors.language"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
|
|
@ -81,15 +81,12 @@
|
|||
placeholder="[Enter Language]"
|
||||
:errors="form.errors.language"
|
||||
:options="{ de: 'de', en: 'en' }"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.language">
|
||||
{{ form.errors.language.join(', ') }}
|
||||
</div>
|
||||
>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<!-- (3) dataset_type -->
|
||||
<FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
|
||||
<FormField label="Dataset Type *" help="required: dataset type" :errors="form.errors.type">
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.type"
|
||||
|
|
@ -97,16 +94,13 @@
|
|||
placeholder="-- select type --"
|
||||
:errors="form.errors.type"
|
||||
:options="doctypes"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
|
||||
{{ form.errors.type.join(', ') }}
|
||||
</div>
|
||||
>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<!-- (4) creating_corporation -->
|
||||
<FormField
|
||||
label="Creating Corporation *"
|
||||
:class="{ 'text-red-400': form.errors.creating_corporation }"
|
||||
label="Creating Corporation *"
|
||||
:errors="form.errors.creating_corporation"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
|
|
@ -115,13 +109,7 @@
|
|||
type="text"
|
||||
placeholder="[enter creating corporation]"
|
||||
:is-read-only="true"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors.creating_corporation && Array.isArray(form.errors.creating_corporation)"
|
||||
>
|
||||
{{ form.errors.creating_corporation.join(', ') }}
|
||||
</div>
|
||||
>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
|
|
@ -152,6 +140,7 @@
|
|||
<span class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm">3</span>
|
||||
Titles
|
||||
</h2>
|
||||
<!-- <pre class="text-xs text-red-500">{{ form.errors }}</pre> -->
|
||||
<!-- (5) titles -->
|
||||
<CardBox
|
||||
class="ml-10 shadow-md"
|
||||
|
|
@ -163,9 +152,9 @@
|
|||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Main Title *"
|
||||
help="required: main title"
|
||||
:class="{ 'text-red-400': form.errors['titles.0.value'] }"
|
||||
help="required: main title"
|
||||
class="w-full mr-1 flex-1"
|
||||
:errors="form.errors[`titles.0.value`]"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
|
|
@ -174,28 +163,16 @@
|
|||
placeholder="[enter main title]"
|
||||
:show-char-count="true"
|
||||
:max-input-length="255"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])"
|
||||
>
|
||||
{{ form.errors['titles.0.value'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Main Title Language*"
|
||||
help="required: main title language"
|
||||
:class="{ 'text-red-400': form.errors['titles.0.language'] }"
|
||||
:errors="form.errors['titles.0.language']"
|
||||
class="w-full ml-1 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['titles.0.language'] && Array.isArray(form.errors['titles.0.language'])"
|
||||
>
|
||||
{{ form.errors['titles.0.language'].join(', ') }}
|
||||
</div>
|
||||
<FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
|
|
@ -224,7 +201,7 @@
|
|||
placeholder="[enter main title]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
|
||||
{{ form.errors[`titles.${index}.value`].join(', ') }}
|
||||
{{ formatError(form.errors[`titles.${index}.value`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -236,8 +213,8 @@
|
|||
:options="titletypes"
|
||||
placeholder="[select title type]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`titles.${index}.type`])">
|
||||
{{ form.errors[`titles.${index}.type`].join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.type`]">
|
||||
{{ formatError(form.errors[`titles.${index}.type`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -250,7 +227,7 @@
|
|||
placeholder="[select title language]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.language`]">
|
||||
{{ form.errors[`titles.${index}.language`].join(', ') }}
|
||||
{{ formatError(form.errors[`titles.${index}.language`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -293,7 +270,7 @@
|
|||
<FormField
|
||||
label="Main Abstract *"
|
||||
help="required: main abstract"
|
||||
:class="{ 'text-red-400': form.errors['descriptions.0.value'] }"
|
||||
:errors="form.errors['descriptions.0.value']"
|
||||
class="w-full mr-1 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
|
|
@ -303,28 +280,16 @@
|
|||
placeholder="[enter main abstract]"
|
||||
:show-char-count="true"
|
||||
:max-input-length="2500"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])"
|
||||
>
|
||||
{{ form.errors['descriptions.0.value'].join(', ') }}
|
||||
</div>
|
||||
>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Main Description Language*"
|
||||
help="required: main abstract language"
|
||||
:class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
|
||||
:errors="form.errors['descriptions.0.language']"
|
||||
class="w-full ml-1 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.descriptions[0].language" type="text" :is-read-only="true">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.language'])"
|
||||
>
|
||||
{{ form.errors['descriptions.0.language'].join(', ') }}
|
||||
</div>
|
||||
<FormControl required v-model="form.descriptions[0].language" type="text" :is-read-only="true">
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
|
|
@ -350,7 +315,7 @@
|
|||
placeholder="[enter main title]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.value`]">
|
||||
{{ form.errors[`descriptions.${index}.value`].join(', ') }}
|
||||
{{ formatError(form.errors[`descriptions.${index}.value`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -364,9 +329,9 @@
|
|||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="Array.isArray(form.errors[`descriptions.${index}.type`])"
|
||||
v-if="form.errors[`descriptions.${index}.type`]"
|
||||
>
|
||||
{{ form.errors[`descriptions.${index}.type`].join(', ') }}
|
||||
{{ formatError(form.errors[`descriptions.${index}.type`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -379,7 +344,7 @@
|
|||
placeholder="[select title language]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.language`]">
|
||||
{{ form.errors[`descriptions.${index}.language`].join(', ') }}
|
||||
{{ formatError(form.errors[`descriptions.${index}.language`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -462,8 +427,8 @@
|
|||
:errors="form.errors"
|
||||
:relation="'authors'"
|
||||
/>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
|
||||
{{ form.errors.authors.join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.authors">
|
||||
{{ formatError(form.errors.authors) }}
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
|
|
@ -499,8 +464,8 @@
|
|||
:errors="form.errors"
|
||||
:relation="'contributors'"
|
||||
/>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
|
||||
{{ form.errors.contributors.join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.contributors">
|
||||
{{ formatError(form.errors.contributors) }}
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
|
|
@ -522,7 +487,7 @@
|
|||
<FormField
|
||||
label="Project.."
|
||||
help="project is optional"
|
||||
:class="{ 'text-red-400': form.errors.project_id }"
|
||||
:errors="form.errors.project_id"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
|
|
@ -533,9 +498,9 @@
|
|||
:errors="form.errors.project_id"
|
||||
:options="projects"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.project_id">
|
||||
<!-- <div class="text-red-400 text-sm" v-if="form.errors.project_id">
|
||||
{{ form.errors.project_id.join(', ') }}
|
||||
</div>
|
||||
</div> -->
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
|
|
@ -543,7 +508,7 @@
|
|||
<FormField
|
||||
label="Embargo Date.."
|
||||
help="embargo date is optional"
|
||||
:class="{ 'text-red-400': form.errors.embargo_date }"
|
||||
:errors="form.errors.embargo_date"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
|
|
@ -605,23 +570,15 @@
|
|||
<tbody>
|
||||
<tr v-for="(item, index) in form.references">
|
||||
<td data-label="Reference Value">
|
||||
<!-- <input name="Reference Value" class="form-control"
|
||||
placeholder="[VALUE]" v-model="item.value" /> -->
|
||||
<FormControl
|
||||
required
|
||||
v-model="item.value"
|
||||
:type="'text'"
|
||||
placeholder="[VALUE]"
|
||||
:errors="form.errors.embargo_date"
|
||||
:errors="form.errors[`references.${index}.value`]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="
|
||||
form.errors[`references.${index}.value`] &&
|
||||
Array.isArray(form.errors[`references.${index}.value`])
|
||||
"
|
||||
>
|
||||
{{ form.errors[`references.${index}.value`].join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.value`]">
|
||||
{{ formatError(form.errors[`references.${index}.value`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -633,11 +590,8 @@
|
|||
:options="referenceIdentifierTypes"
|
||||
placeholder="[type]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="Array.isArray(form.errors[`references.${index}.type`])"
|
||||
>
|
||||
{{ form.errors[`references.${index}.type`].join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.type`]">
|
||||
{{ formatError(form.errors[`references.${index}.type`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
|
|
@ -650,16 +604,12 @@
|
|||
:options="relationTypes"
|
||||
placeholder="[relation type]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="Array.isArray(form.errors[`references.${index}.relation`])"
|
||||
>
|
||||
{{ form.errors[`references.${index}.relation`].join(', ') }}
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.relation`]">
|
||||
{{ formatError(form.errors[`references.${index}.relation`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
<td data-label="Reference Label">
|
||||
<!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.references[index].label"
|
||||
|
|
@ -667,12 +617,11 @@
|
|||
placeholder="[reference label]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
|
||||
{{ form.errors[`references.${index}.label`].join(', ') }}
|
||||
{{ formatError(form.errors[`references.${index}.label`]) }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</td>
|
||||
<td class="before:hidden lg:w-1 whitespace-nowrap">
|
||||
<!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
|
||||
<BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -747,64 +696,20 @@
|
|||
class="mb-4 rounded-lg overflow-hidden shadow-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row ml-10">
|
||||
<div class="flex flex-col md:flex-row ml-10">
|
||||
<!-- x min and max -->
|
||||
<FormField
|
||||
label="Coverage X Min"
|
||||
:class="{ 'text-red-400': form.errors['coverage.x_min'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])"
|
||||
>
|
||||
{{ form.errors['coverage.x_min'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormField label="Coverage X Min" :errors="form.errors['coverage.x_min']" class="w-full mx-2 flex-1">
|
||||
<FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]" />
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Coverage X Max"
|
||||
:class="{ 'text-red-400': form.errors['coverage.x_max'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])"
|
||||
>
|
||||
{{ form.errors['coverage.x_max'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormField label="Coverage X Max" :errors="form.errors['coverage.x_max']" class="w-full mx-2 flex-1">
|
||||
<FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]" />
|
||||
</FormField>
|
||||
<!-- y min and max -->
|
||||
<FormField
|
||||
label="Coverage Y Min"
|
||||
:class="{ 'text-red-400': form.errors['coverage.y_min'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])"
|
||||
>
|
||||
{{ form.errors['coverage.y_min'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormField label="Coverage Y Min" :errors="form.errors['coverage.y_min']" class="w-full mx-2 flex-1">
|
||||
<FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]" />
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Coverage Y Max"
|
||||
:class="{ 'text-red-400': form.errors['coverage.y_max'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])"
|
||||
>
|
||||
{{ form.errors['coverage.y_max'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormField label="Coverage Y Max" :errors="form.errors['coverage.y_max']" class="w-full mx-2 flex-1">
|
||||
<FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]" />
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1028,6 +933,7 @@ const mapId = 'test';
|
|||
props.dataset.filesToDelete = [];
|
||||
props.dataset.subjectsToDelete = [];
|
||||
props.dataset.referencesToDelete = [];
|
||||
|
||||
let form = useForm<Dataset>(props.dataset as Dataset);
|
||||
|
||||
// Add this computed property to the script section
|
||||
|
|
@ -1446,6 +1352,11 @@ const onMapInitialized = (newItem: any) => {
|
|||
console.log(newItem);
|
||||
};
|
||||
|
||||
const formatError = (error: string | string[] | undefined) => {
|
||||
if (!error) return '';
|
||||
return Array.isArray(error) ? error.join(', ') : error;
|
||||
};
|
||||
|
||||
// Add this method to generate change summaries
|
||||
const getChangesSummary = () => {
|
||||
const changes = [];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue