- add model DatasetReference.ts

- add references inside Creta.vue for Submitter /dataset
- npm updates
- extended enum types
- added relations for Dataset.ts

app/Controllers/Http/Submitter/DatasetController.ts

@@ -6,6 +6,7 @@ import Project from 'App/Models/Project';
 import Title from 'App/Models/Title';
 import Description from 'App/Models/Description';
 import Language from 'App/Models/Language';
+import Coverage from 'App/Models/Coverage';
 // import CreateUserValidator from 'App/Validators/CreateUserValidator';
 // import UpdateUserValidator from 'App/Validators/UpdateUserValidator';
 import { schema, CustomMessages, rules } from '@ioc:Adonis/Core/Validator';
@@ -15,8 +16,9 @@ import Database from '@ioc:Adonis/Lucid/Database';
 import { TransactionClientContract } from '@ioc:Adonis/Lucid/Database';
 import Subject from 'App/Models/Subject';
 import CreateDatasetValidator from 'App/Validators/CreateDatasetValidator';
-import { TitleTypes, DescriptionTypes, ContributorTypes, PersonNameTypes } from 'Contracts/enums';
+import { TitleTypes, DescriptionTypes, ContributorTypes, PersonNameTypes, ReferenceIdentifierTypes, RelationTypes } from 'Contracts/enums';
 import type { ModelQueryBuilderContract } from '@ioc:Adonis/Lucid/Orm';
+import DatasetReference from 'App/Models/DatasetReference';
 
 export default class DatasetController {
     public async index({ auth, request, inertia }: HttpContextContract) {
@@ -115,6 +117,10 @@ export default class DatasetController {
                 .map(([key, value]) => ({ value: key, label: value })),
             // descriptiontypes: DescriptionTypes
             projects: projects,
+            referenceIdentifierTypes: Object.entries(ReferenceIdentifierTypes)               
+                .map(([key, value]) => ({ value: key, label: value })),
+            relationTypes: Object.entries(RelationTypes)               
+                .map(([key, value]) => ({ value: key, label: value })),
         });
     }
 
@@ -239,6 +245,17 @@ export default class DatasetController {
                 depth_min: schema.number.optional([rules.requiredIfExists('depth_max')]),
                 depth_max: schema.number.optional([rules.requiredIfExists('depth_min')]),
             }),
+            references: schema.array([rules.uniqueArray('value')]).members(
+                schema.object().members({
+                    value: schema.string({ trim: true }, [
+                        rules.minLength(3),
+                        rules.maxLength(255),                       
+                    ]),
+                    type: schema.enum(Object.values(ReferenceIdentifierTypes)),
+                    relation: schema.enum(Object.values(RelationTypes)),
+                    // language: schema.string({ trim: true }, [rules.minLength(2), rules.maxLength(255)]),
+                }),
+            ),
             subjects: schema.array([rules.minLength(3), rules.uniqueArray('value')]).members(
                 schema.object().members({
                     value: schema.string({ trim: true }, [
@@ -263,6 +280,7 @@ export default class DatasetController {
         }
         return response.redirect().back();
     }
+
     public async store({ auth, request, response, session }: HttpContextContract) {
         // node ace make:validator CreateDataset
         try {
@@ -277,134 +295,15 @@ export default class DatasetController {
             throw error;
         }
 
-        // const user = new User();
-        // user.email = 'example@example.com';
-        // user.password = 'password';
-        // await user.useTransaction(trx).save();
-
         let trx: TransactionClientContract | null = null;
         try {
             trx = await Database.transaction();
             const user = (await User.find(auth.user?.id)) as User;
 
-            // const dataset = await user.related('datasets').create({
-            //     type: request.input('type'),
-            //     creatingCorporation: request.input('creating_corporation'),
-            //     language: request.input('language'),
-            // });
-
-            // Create a new instance of the Dataset model:
-            const dataset = new Dataset();
-            dataset.type = request.input('type');
-            dataset.creatingCorporation = request.input('creating_corporation');
-            dataset.language = request.input('language');
-            dataset.embargoDate = request.input('embargo_date');
-            //await dataset.related('user').associate(user); // speichert schon ab
-            // Dataset.$getRelation('user').boot();
-            // Dataset.$getRelation('user').setRelated(dataset, user);
-            // dataset.$setRelated('user', user);
-            await user.useTransaction(trx).related('datasets').save(dataset);
-
-            //store licenses:
-            const licenses: number[] = request.input('licenses', []);
-            dataset.useTransaction(trx).related('licenses').sync(licenses);
-
-            const authors = request.input('authors', []);
-            for (const [key, person] of authors.entries()) {
-                const pivotData = { role: 'author', sort_order: key + 1 };
-
-                if (person.id !== undefined) {
-                    await dataset
-                        .useTransaction(trx)
-                        .related('persons')
-                        .attach({
-                            [person.id]: {
-                                role: pivotData.role,
-                                sort_order: pivotData.sort_order,
-                                allow_email_contact: false,
-                            },
-                        });
-                } else {
-                    const dataPerson = new Person();
-                    // use overwritten fill method
-                    dataPerson.fill(person);
-                    await dataset.useTransaction(trx).related('persons').save(dataPerson, false, {
-                        role: pivotData.role,
-                        sort_order: pivotData.sort_order,
-                        allow_email_contact: false,
-                    });
-                }
-            }
-
-            const contributors = request.input('contributors', []);
-            for (const [key, person] of contributors.entries()) {
-                const pivotData = { role: 'contributor', sort_order: key + 1 };
-
-                if (person.id !== undefined) {
-                    await dataset
-                        .useTransaction(trx)
-                        .related('persons')
-                        .attach({
-                            [person.id]: {
-                                role: pivotData.role,
-                                sort_order: pivotData.sort_order,
-                                allow_email_contact: false,
-                            },
-                        });
-                } else {
-                    const dataPerson = new Person();
-                    // use overwritten fill method
-                    dataPerson.fill(person);
-                    await dataset.useTransaction(trx).related('persons').save(dataPerson, false, {
-                        role: pivotData.role,
-                        sort_order: pivotData.sort_order,
-                        allow_email_contact: false,
-                    });
-                }
-            }
-
-            //save main and additional titles
-            const titles = request.input('titles', []);
-            for (const titleData of titles) {
-                const title = new Title();
-                title.value = titleData.value;
-                title.language = titleData.language;
-                title.type = titleData.type;
-                await dataset.useTransaction(trx).related('titles').save(title);
-            }
-
-            //save abstract and additional descriptions
-            const descriptions = request.input('descriptions', []);
-            for (const descriptionData of descriptions) {
-                // $descriptionReference = new Description($description);
-                // $dataset->abstracts()->save($descriptionReference);
-                const description = new Description();
-                description.value = descriptionData.value;
-                description.language = descriptionData.language;
-                description.type = descriptionData.type;
-                await dataset.useTransaction(trx).related('descriptions').save(description);
-            }
-
-            //save keywords
-            const keywords = request.input('subjects', []);
-            for (const keywordData of keywords) {
-                // $dataKeyword = new Subject($keyword);
-                // $dataset->subjects()->save($dataKeyword);
-                const keyword = await Subject.firstOrNew({ value: keywordData.value, type: keywordData.type }, keywordData);
-                if (keyword.$isNew === true) {
-                    await dataset.useTransaction(trx).related('subjects').save(keyword);
-                } else {
-                    await dataset.useTransaction(trx).related('subjects').attach([keyword.id]);
-                }
-            }
-
-            // Dataset.$getRelation('persons').boot();
-            // Dataset.$getRelation('persons').pushRelated(dataset, person)
-            // dataset.$pushRelated('persons', person);
+            await this.createDatasetAndAssociations(user, request, trx);
 
             await trx.commit();
-
-            console.log('Users and posts created successfully');
+            console.log('Dataset and related models created successfully');
         } catch (error) {
             if (trx !== null) {
                 await trx.rollback();
@@ -425,8 +324,6 @@ export default class DatasetController {
             // fieldName: 'file'
             // size: 135624
 
-            //const datasetFolder = 'files/' . dataset->id;
-
             // await coverImage.moveToDisk('./')
             await coverImage.moveToDisk(
                 '/test_dataset2',
@@ -444,6 +341,110 @@ export default class DatasetController {
         return response.redirect().back();
     }
 
+    private async createDatasetAndAssociations(user: User, request: HttpContextContract['request'], trx: TransactionClientContract) {
+        // Create a new instance of the Dataset model:
+        const dataset = new Dataset();
+        dataset.type = request.input('type');
+        dataset.creatingCorporation = request.input('creating_corporation');
+        dataset.language = request.input('language');
+        dataset.embargoDate = request.input('embargo_date');
+        //await dataset.related('user').associate(user); // speichert schon ab
+        // Dataset.$getRelation('user').boot();
+        // Dataset.$getRelation('user').setRelated(dataset, user);
+        // dataset.$setRelated('user', user);
+        await user.useTransaction(trx).related('datasets').save(dataset);
+
+        //store licenses:
+        const licenses: number[] = request.input('licenses', []);
+        dataset.useTransaction(trx).related('licenses').sync(licenses);
+
+        // save authors and contributors
+        await this.savePersons(dataset, request.input('authors', []), 'author', trx);
+        await this.savePersons(dataset, request.input('contributors', []), 'contributor', trx);
+
+        //save main and additional titles
+        const titles = request.input('titles', []);
+        for (const titleData of titles) {
+            const title = new Title();
+            title.value = titleData.value;
+            title.language = titleData.language;
+            title.type = titleData.type;
+            await dataset.useTransaction(trx).related('titles').save(title);
+        }
+
+        // save descriptions
+        const descriptions = request.input('descriptions', []);
+        for (const descriptionData of descriptions) {
+            const description = new Description();
+            description.value = descriptionData.value;
+            description.language = descriptionData.language;
+            description.type = descriptionData.type;
+            await dataset.useTransaction(trx).related('descriptions').save(description);
+        }
+
+        //save references
+        const references = request.input('references', []);
+        for (const referencePayload of references) {
+            const dataReference = new DatasetReference();
+            dataReference.fill(referencePayload);
+            // $dataReference = new DatasetReference($reference);
+            dataset.related('references').save(dataReference);
+        }
+
+        //save keywords
+        const keywords = request.input('subjects', []);
+        for (const keywordData of keywords) {
+            // $dataKeyword = new Subject($keyword);
+            // $dataset->subjects()->save($dataKeyword);
+            const keyword = await Subject.firstOrNew({ value: keywordData.value, type: keywordData.type }, keywordData);
+            if (keyword.$isNew === true) {
+                await dataset.useTransaction(trx).related('subjects').save(keyword);
+            } else {
+                await dataset.useTransaction(trx).related('subjects').attach([keyword.id]);
+            }
+        }
+
+        // save coverage
+        const coverageData = request.input('coverage');
+        if (coverageData) {
+            // const formCoverage = request.input('coverage');
+            const coverage = new Coverage();
+            coverage.fill(coverageData);
+            // await dataset.coverage().save(coverageData);
+            await dataset.useTransaction(trx).related('coverage').save(coverage);
+            // Alternatively, you can associate the dataset with the coverage and then save it:
+            // await coverage.dataset().associate(dataset).save();
+            // await coverage.useTransaction(trx).related('dataset').associate(dataset);
+        }
+    }
+
+    private async savePersons(dataset: Dataset, persons: any[], role: string, trx: TransactionClientContract) {
+        for (const [key, person] of persons.entries()) {
+            const pivotData = { role: role, sort_order: key + 1 };
+
+            if (person.id !== undefined) {
+                await dataset
+                    .useTransaction(trx)
+                    .related('persons')
+                    .attach({
+                        [person.id]: {
+                            role: pivotData.role,
+                            sort_order: pivotData.sort_order,
+                            allow_email_contact: false,
+                        },
+                    });
+            } else {
+                const dataPerson = new Person();
+                dataPerson.fill(person);
+                await dataset.useTransaction(trx).related('persons').save(dataPerson, false, {
+                    role: pivotData.role,
+                    sort_order: pivotData.sort_order,
+                    allow_email_contact: false,
+                });
+            }
+        }
+    }
+
     public messages: CustomMessages = {
         'minLength': '{{ field }} must be at least {{ options.minLength }} characters long',
         'maxLength': '{{ field }} must be less then {{ options.maxLength }} characters long',

app/Models/Coverage.ts

@@ -7,6 +7,21 @@ export default class Coverage extends BaseModel {
     public static primaryKey = 'id';
     public static table = 'coverage';
     public static selfAssignPrimaryKey = false;
+    public static fillable: string[] = [
+        'elevation_min',
+        'elevation_max',
+        'elevation_absolut',
+        'depth_min',
+        'depth_max',
+        'depth_absolut',
+        'time_min',
+        'time_max',
+        'time_absolut',
+        'x_min',
+        'x_max',
+        'y_min',
+        'y_max',
+    ];
 
     @column({
         isPrimary: true,

app/Models/Dataset.ts

@@ -22,6 +22,7 @@ import License from './License';
 import Subject from './Subject';
 import File from './File';
 import Coverage from './Coverage';
+import DatasetReference from './DatasetReference'; 
 
 export default class Dataset extends BaseModel {
     public static namingStrategy = new SnakeCaseNamingStrategy();
@@ -138,6 +139,11 @@ export default class Dataset extends BaseModel {
     })
     public coverage: HasOne<typeof Coverage>;
 
+    @hasMany(() => DatasetReference, {
+        foreignKey: 'document_id',
+    })
+    public references: HasMany<typeof DatasetReference>;
+
 
     @computed({
         serializeAs: 'main_title',

app/Models/DatasetReference.ts

@@ -0,0 +1,49 @@
+import { column, BaseModel, SnakeCaseNamingStrategy, belongsTo, BelongsTo } from '@ioc:Adonis/Lucid/Orm';
+import { DateTime } from 'luxon';
+import Dataset from './Dataset';
+
+export default class DatasetReference extends BaseModel {
+    public static namingStrategy = new SnakeCaseNamingStrategy();
+    public static primaryKey = 'id';
+    public static table = 'document_references';
+    public static fillable: string[] = ['value', 'label', 'type', 'relation'];
+
+    @column({
+        isPrimary: true,
+    })
+    public id: number;
+
+    @column({})
+    public document_id: number;
+
+    @column({})
+    public related_document_id?: number;
+
+    @column({})
+    public type: string;
+
+    @column({})
+    public relation: string;
+
+    @column({})
+    public value: string;
+
+    @column({})
+    public label: string;
+
+    @column.dateTime({
+        autoCreate: true,
+    })
+    public created_at?: DateTime;
+
+    @column.dateTime({
+        autoCreate: true,
+        autoUpdate: true,
+    })
+    public updated_at?: DateTime;
+
+    @belongsTo(() => Dataset, {
+        foreignKey: 'document_id',
+    })
+    public dataset: BelongsTo<typeof Dataset>;
+}

app/Validators/CreateDatasetValidator.ts

@@ -1,7 +1,7 @@
 import { schema, CustomMessages, rules } from '@ioc:Adonis/Core/Validator';
 import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
 import dayjs from 'dayjs';
-import { TitleTypes, DescriptionTypes } from 'Contracts/enums';
+import { TitleTypes, DescriptionTypes, RelationTypes, ReferenceIdentifierTypes } from 'Contracts/enums';
 
 export default class CreateDatasetValidator {
     constructor(protected ctx: HttpContextContract) {}
@@ -73,6 +73,17 @@ export default class CreateDatasetValidator {
             depth_min: schema.number.optional([rules.requiredIfExists('depth_max')]),
             depth_max: schema.number.optional([rules.requiredIfExists('depth_min')]),
         }),
+        references: schema.array([rules.uniqueArray('value')]).members(
+            schema.object().members({
+                value: schema.string({ trim: true }, [
+                    rules.minLength(3),
+                    rules.maxLength(255),                       
+                ]),
+                type: schema.enum(Object.values(ReferenceIdentifierTypes)),
+                relation: schema.enum(Object.values(RelationTypes)),
+                // language: schema.string({ trim: true }, [rules.minLength(2), rules.maxLength(255)]),
+            }),
+        ),
         subjects: schema.array([rules.minLength(3), rules.uniqueArray('value')]).members(
             schema.object().members({
                 value: schema.string({ trim: true }, [

contracts/enums.ts

@@ -79,3 +79,24 @@ export enum ContributorTypes {
 export enum SubjectTypes {
     uncontrolled = 'uncontrolled',
 }
+
+export enum ReferenceIdentifierTypes {
+    DOI = 'DOI',
+    Handle = 'Handle',
+    ISBN = 'ISBN',
+    ISSN = 'ISSN',
+    URL = 'URL',
+    URN = 'URN',
+}
+
+export enum RelationTypes {
+    IsSupplementTo = 'IsSupplementTo',
+    IsSupplementedBy = 'IsSupplementedBy',
+    IsContinuedBy = 'IsContinuedBy',
+    Continues = 'Continues',
+    IsNewVersionOf = 'IsNewVersionOf',
+    IsPartOf = 'IsPartOf',
+    HasPart = 'HasPart',
+    Compiles = 'Compiles',
+    IsVariantFormOf = 'IsVariantFormOf',
+}

package-lock.json

@@ -33,7 +33,6 @@
                 "reflect-metadata": "^0.1.13",
                 "saxon-js": "^2.5.0",
                 "source-map-support": "^0.5.21",
-                "vue-facing-decorator": "^2.1.13",
                 "vuedraggable": "^4.1.0",
                 "xmlbuilder2": "^3.1.1"
             },
@@ -74,6 +73,7 @@
                 "ts-loader": "^9.4.2",
                 "typescript": "^5.1.3",
                 "vue": "^3.2.47",
+                "vue-facing-decorator": "^3.0.0",
                 "vue-loader": "^17.0.1",
                 "xslt3": "^2.5.0",
                 "youch": "^3.2.0",
@@ -2699,9 +2699,9 @@
             }
         },
         "node_modules/@eslint/eslintrc": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
-            "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
+            "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
             "dev": true,
             "dependencies": {
                 "ajv": "^6.12.4",
@@ -2767,9 +2767,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "8.44.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
-            "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
+            "version": "8.46.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
+            "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4168,9 +4168,9 @@
             }
         },
         "node_modules/@types/validator": {
-            "version": "13.7.17",
-            "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.17.tgz",
-            "integrity": "sha512-aqayTNmeWrZcvnG2MG9eGYI6b7S5fl+yKgPs6bAjOTwPS316R5SxBGKvtSExfyoJU7pIeHJfsHI0Ji41RVMkvQ=="
+            "version": "13.9.0",
+            "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.9.0.tgz",
+            "integrity": "sha512-NclP0IbzHj/4tJZKFqKh8E7kZdgss+MCUYV9G+TLltFfDA4lFgE4PKPpDIyS2FlcdANIfSx273emkupvChigbw=="
         },
         "node_modules/@types/ws": {
             "version": "8.5.5",
@@ -5864,9 +5864,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.21.9",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
-            "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
+            "version": "4.21.10",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+            "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
             "dev": true,
             "funding": [
                 {
@@ -5883,9 +5883,9 @@
                 }
             ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001503",
-                "electron-to-chromium": "^1.4.431",
-                "node-releases": "^2.0.12",
+                "caniuse-lite": "^1.0.30001517",
+                "electron-to-chromium": "^1.4.477",
+                "node-releases": "^2.0.13",
                 "update-browserslist-db": "^1.0.11"
             },
             "bin": {
@@ -6081,9 +6081,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001517",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
-            "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
+            "version": "1.0.30001518",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
+            "integrity": "sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==",
             "dev": true,
             "funding": [
                 {
@@ -7950,9 +7950,9 @@
             "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.475",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.475.tgz",
-            "integrity": "sha512-mTye5u5P98kSJO2n7zYALhpJDmoSQejIGya0iR01GpoRady8eK3bw7YHHnjA1Rfi4ZSLdpuzlAC7Zw+1Zu7Z6A==",
+            "version": "1.4.479",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.479.tgz",
+            "integrity": "sha512-ABv1nHMIR8I5n3O3Een0gr6i0mfM+YcTZqjHy3pAYaOjgFG+BMquuKrSyfYf5CbEkLr9uM05RA3pOk4udNB/aQ==",
             "dev": true
         },
         "node_modules/emittery": {
@@ -8011,9 +8011,9 @@
             }
         },
         "node_modules/enquirer": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.0.tgz",
-            "integrity": "sha512-ehu97t6FTYK2I3ZYtnp0BZ9vt0mvEL/cnHBds7Ct6jo9VX1VIkiFhOvVRWh6eblQqd7KOoICIQV+syZ3neXO/Q==",
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+            "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
             "dependencies": {
                 "ansi-colors": "^4.1.1",
                 "strip-ansi": "^6.0.1"
@@ -8101,27 +8101,27 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.45.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
-            "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
+            "version": "8.46.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
+            "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
-                "@eslint-community/regexpp": "^4.4.0",
-                "@eslint/eslintrc": "^2.1.0",
-                "@eslint/js": "8.44.0",
+                "@eslint-community/regexpp": "^4.6.1",
+                "@eslint/eslintrc": "^2.1.1",
+                "@eslint/js": "^8.46.0",
                 "@humanwhocodes/config-array": "^0.11.10",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@nodelib/fs.walk": "^1.2.8",
-                "ajv": "^6.10.0",
+                "ajv": "^6.12.4",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
                 "debug": "^4.3.2",
                 "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.2.0",
-                "eslint-visitor-keys": "^3.4.1",
-                "espree": "^9.6.0",
+                "eslint-scope": "^7.2.2",
+                "eslint-visitor-keys": "^3.4.2",
+                "espree": "^9.6.1",
                 "esquery": "^1.4.2",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
@@ -8212,9 +8212,9 @@
             }
         },
         "node_modules/eslint-scope": {
-            "version": "7.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.1.tgz",
-            "integrity": "sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==",
+            "version": "7.2.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
             "dev": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
@@ -8228,9 +8228,9 @@
             }
         },
         "node_modules/eslint-visitor-keys": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-            "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+            "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -12710,13 +12710,13 @@
             }
         },
         "node_modules/pg": {
-            "version": "8.11.1",
-            "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.1.tgz",
-            "integrity": "sha512-utdq2obft07MxaDg0zBJI+l/M3mBRfIpEN3iSemsz0G5F2/VXx+XzqF4oxrbIZXQxt2AZzIUzyVg/YM6xOP/WQ==",
+            "version": "8.11.2",
+            "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.2.tgz",
+            "integrity": "sha512-l4rmVeV8qTIrrPrIR3kZQqBgSN93331s9i6wiUiLOSk0Q7PmUxZD/m1rQI622l3NfqBby9Ar5PABfS/SulfieQ==",
             "dependencies": {
                 "buffer-writer": "2.0.0",
                 "packet-reader": "1.0.0",
-                "pg-connection-string": "^2.6.1",
+                "pg-connection-string": "^2.6.2",
                 "pg-pool": "^3.6.1",
                 "pg-protocol": "^1.6.0",
                 "pg-types": "^2.1.0",
@@ -12784,6 +12784,11 @@
                 "node": ">=4"
             }
         },
+        "node_modules/pg/node_modules/pg-connection-string": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.2.tgz",
+            "integrity": "sha512-ch6OwaeaPYcova4kKZ15sbJ2hKb/VP48ZD2gE7i1J+L4MspCtBMAx8nMgz7bksc7IojCIIWuEhHibSMFH8m8oA=="
+        },
         "node_modules/pgpass": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
@@ -16716,9 +16721,10 @@
             }
         },
         "node_modules/vue-facing-decorator": {
-            "version": "2.1.20",
-            "resolved": "https://registry.npmjs.org/vue-facing-decorator/-/vue-facing-decorator-2.1.20.tgz",
-            "integrity": "sha512-Xv987Q+XhhWTPXxzG4HllHxckMahV04wDcRebdd/AWlU/hYm7+tGRo2eD84mpl3rZLZQ74Cr41UlWbGbEQptNA==",
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/vue-facing-decorator/-/vue-facing-decorator-3.0.0.tgz",
+            "integrity": "sha512-NnbFHlJCYzQv8Mx9ehm486NLxidx/KeqbSDgi4V9kLXakLIijzLHqRWMpuEWW4hsQFxRh3bTtPCTCZMP2OL+4Q==",
+            "dev": true,
             "peerDependencies": {
                 "vue": "^3.0.0"
             }

package.json

@@ -55,6 +55,7 @@
         "ts-loader": "^9.4.2",
         "typescript": "^5.1.3",
         "vue": "^3.2.47",
+        "vue-facing-decorator": "^3.0.0",
         "vue-loader": "^17.0.1",
         "xslt3": "^2.5.0",
         "youch": "^3.2.0",
@@ -86,7 +87,6 @@
         "reflect-metadata": "^0.1.13",
         "saxon-js": "^2.5.0",
         "source-map-support": "^0.5.21",
-        "vue-facing-decorator": "^2.1.13",
         "vuedraggable": "^4.1.0",
         "xmlbuilder2": "^3.1.1"
     }

resources/js/Dataset.ts

@@ -11,6 +11,7 @@ export interface Dataset {
         | number
         | (IErrorMessage | undefined)
         | Coverage
+        | Array<DatasetReference>
         | Array<File>;
     language: Ref<string>;
     // licenses: Array<number>;
@@ -27,6 +28,7 @@ export interface Dataset {
     errors?: IErrorMessage;
     // async (user): Promise<void>;
     subjects: Array<Subject>;
+    references: Array<DatasetReference>;
     files: Array<TestFile> | undefined;
     // upload: TethysFile
 }
@@ -53,6 +55,13 @@ export interface Subject {
     value: string;
     external_key?: string;
 }
+export interface DatasetReference {
+    // id: number; 
+    value: string;
+    label: string;
+    type: string;
+    relation: string;
+}
 
 export interface Title {
     value: string;

resources/js/Pages/Submitter/Dataset/Create.vue

@@ -12,7 +12,8 @@ import {
     mdiBookOpenPageVariant,
     mdiImageText,
     mdiEarthPlus,
-    mdiAlertBoxOutline
+    mdiAlertBoxOutline,
+    mdiTrashCan
 } from '@mdi/js';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -67,6 +68,14 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    referenceIdentifierTypes: {
+        type: Object,
+        default: () => ({}),
+    },
+    relationTypes: {
+        type: Object,
+        default: () => ({}),
+    },
     errors: {
         type: Object,
         default: () => ({}),
@@ -127,6 +136,7 @@ if (Object.keys(mainService.dataset).length == 0) {
             { value: '', type: 'uncontrolled', language: language.value },
             { value: '', type: 'uncontrolled', language: language.value },
         ],
+        references: [],
         files: [],
         // upload: { label: 'test', sorting: 0 },
     };
@@ -151,6 +161,7 @@ if (Object.keys(mainService.dataset).length == 0) {
         embargo_date: mainService.dataset.embargo_date,
         coverage: mainService.dataset.coverage,
         subjects: mainService.dataset.subjects,
+        references: mainService.dataset.references,
         files: mainService.dataset.files,
         // upload: mainService.dataset.upload,
     };
@@ -324,6 +335,7 @@ const submit = async () => {
                         { value: '', type: 'uncontrolled', language: language.value },
                         { value: '', type: 'uncontrolled', language: language.value },
                     ],
+                    references: [],
                     files: [] as Array<File>,
                     upload: { label: 'test', sorting: 0 },
                 };
@@ -388,6 +400,19 @@ const addKeyword = () => {
     form.subjects.push(newSubject);
 };
 
+const addReference = () => {
+    let newReference = { value: '', label: '', relation: '', type: '' };
+    //this.dataset.files.push(uploadedFiles[i]);
+    form.references.push(newReference);
+};
+/*
+Removes a selected reference
+*/
+const removeReference = (key) => {
+    form.references.splice(key, 1);
+};
+        /*
+
 // const onChangeFile = (event) => {
 //     // let uploadedFile = event.target.files[0];
 
@@ -411,17 +436,16 @@ const addKeyword = () => {
         <ul class="list-decimal">
             <li>
                 die Data Policy von Tethys RDR sowie die Terms & Conditions von Tethys gelesen und verstanden zu haben (<a
-                    href="/docs/HandbuchTethys.pdf"
-                    target="_blank"
-                    >siehe hier</a
-                >)
+                    href="/docs/HandbuchTethys.pdf" target="_blank">siehe hier</a>)
+            </li>
+            <li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich eingeholt zu haben
             </li>
-            <li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich eingeholt zu haben</li>
             <li>sowohl mit der Data Policy als auch mit den Terms & Conditions einverstanden zu sein</li>
         </ul>
     </CardBoxModal>
 
     <LayoutAuthenticated>
+
         <Head title="Submit Dataset" />
         <SectionMain>
             <SectionTitleLineWithButton :icon="mdiDatabasePlus" title="Submit dataset" main>
@@ -450,7 +474,8 @@ const addKeyword = () => {
                             <icon-recommendet></icon-recommendet>
                         </icon-wizard>
 
-                        <icon-wizard :is-current="formStep == 4" :is-checked="false" :label="'Confirm'" :is-last-step="true">
+                        <icon-wizard :is-current="formStep == 4" :is-checked="false" :label="'Confirm'"
+                            :is-last-step="true">
                             <icon-confirm></icon-confirm>
                         </icon-wizard>
                     </div>
@@ -460,20 +485,11 @@ const addKeyword = () => {
                 <div class="mt-8 p-4">
                     <div v-if="formStep == 1">
                         <div class="flex flex-col md:flex-row">
-                            <FormField
-                                label="Language *"
-                                help="required: select dataset main language"
-                                :class="{ 'text-red-400': errors.language }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.language"
-                                    :type="'select'"
-                                    placeholder="[Enter Language]"
-                                    :errors="form.errors.language"
-                                    :options="{ de: 'de', en: 'en' }"
-                                >
+                            <FormField label="Language *" help="required: select dataset main language"
+                                :class="{ 'text-red-400': errors.language }" class="w-full mx-2 flex-1">
+                                <FormControl required v-model="form.language" :type="'select'"
+                                    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>
@@ -481,12 +497,8 @@ const addKeyword = () => {
                             </FormField>
                         </div>
 
-                        <FormField
-                            label="Licenses"
-                            wrap-body
-                            :class="{ 'text-red-400': form.errors.licenses }"
-                            class="mt-8 w-full mx-2 flex-1"
-                        >
+                        <FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }"
+                            class="mt-8 w-full mx-2 flex-1">
                             <FormCheckRadioGroup v-model="form.licenses" name="roles" is-column :options="props.licenses" />
                         </FormField>
 
@@ -494,23 +506,15 @@ const addKeyword = () => {
                             <input class="form-checkbox" name="rights" id="rights" type="checkbox" v-model="dataset.rights" />
                             terms and conditions
                         </label> -->
-                        <FormField
-                            label="Rights"
-                            help="You must agree to continue"
-                            wrap-body
-                            :class="{ 'text-red-400': form.errors.rights }"
-                            class="mt-8 w-full mx-2 flex-1 flex-col"
-                        >
+                        <FormField label="Rights" help="You must agree to continue" wrap-body
+                            :class="{ 'text-red-400': form.errors.rights }" class="mt-8 w-full mx-2 flex-1 flex-col">
                             <label for="rights" class="checkbox mr-6 mb-3 last:mr-0">
                                 <input type="checkbox" id="rights" required v-model="form.rights" />
                                 <span class="check" />
                                 <a class="pl-2" target="_blank">terms and conditions </a>
                                 <!-- <BaseButton color="modern" :icon="mdiInformationOutline" small @click="isModalActive = true" /> -->
-                                <BaseIcon
-                                    v-if="mdiInformationOutline"
-                                    :path="mdiInformationOutline"
-                                    @click.prevent="isModalActive = true"
-                                />
+                                <BaseIcon v-if="mdiInformationOutline" :path="mdiInformationOutline"
+                                    @click.prevent="isModalActive = true" />
                             </label>
                         </FormField>
                         <div class="text-red-400 text-sm" v-if="errors.rights && Array.isArray(errors.rights)">
@@ -522,43 +526,24 @@ const addKeyword = () => {
                     <div v-if="formStep == 2">
                         <!-- <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"> -->
                         <div class="flex flex-col md:flex-row">
-                            <FormField
-                                label="Dataset Type *"
-                                help="required: dataset type"
-                                :class="{ 'text-red-400': form.errors.type }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.type"
-                                    :type="'select'"
-                                    placeholder="-- select type --"
-                                    :errors="errors.type"
-                                    :options="doctypes"
-                                >
-                                    <div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
+                            <FormField label="Dataset Type *" help="required: dataset type"
+                                :class="{ 'text-red-400': form.errors.type }" class="w-full mx-2 flex-1">
+                                <FormControl required v-model="form.type" :type="'select'" placeholder="-- select type --"
+                                    :errors="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>
                             <!-- <div class="w-full mx-2 flex-1 svelte-1l8159u"></div> -->
                             <!-- Creating Corporation -->
-                            <FormField
-                                label="Creating Corporation *"
-                                :class="{ 'text-red-400': form.errors.creating_corporation }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.creating_corporation"
-                                    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)"
-                                    >
+                            <FormField label="Creating Corporation *"
+                                :class="{ 'text-red-400': form.errors.creating_corporation }" class="w-full mx-2 flex-1">
+                                <FormControl required v-model="form.creating_corporation" 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>
@@ -567,42 +552,27 @@ const addKeyword = () => {
                         <!-- <BaseDivider /> -->
 
                         <!-- titles -->
-                        <CardBox
-                            class="mb-6 shadow"
-                            :has-form-data="true"
-                            title="Titles"
-                            :icon="mdiFinance"
-                            :header-icon="mdiPlusCircle"
-                            v-on:header-icon-click="addTitle()"
-                        >
+                        <CardBox class="mb-6 shadow" :has-form-data="true" title="Titles" :icon="mdiFinance"
+                            :header-icon="mdiPlusCircle" v-on:header-icon-click="addTitle()">
                             <!-- <div  class="py-6 border-t border-gray-100 dark:border-slate-800"> -->
                             <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'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl required v-model="form.titles[0].value" type="text" placeholder="[enter main title]">
-                                        <div
-                                            class="text-red-400 text-sm"
-                                            v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])"
-                                        >
+                                <FormField label="Main Title *" help="required: main title"
+                                    :class="{ 'text-red-400': form.errors['titles.0.value'] }" class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.titles[0].value" type="text"
+                                        placeholder="[enter main title]">
+                                        <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>
                                 </FormField>
-                                <FormField
-                                    label="Main Title Language*"
-                                    help="required: main title language"
+                                <FormField label="Main Title Language*" help="required: main title language"
                                     :class="{ 'text-red-400': form.errors['titles.0.language'] }"
-                                    class="w-full mx-2 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'])"
-                                        >
+                                    class="w-full mx-2 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>
@@ -614,60 +584,38 @@ const addKeyword = () => {
                                 <div v-for="(item, index) in form.titles">
                                     <div class="flex flex-col md:flex-row" v-if="item.type != 'Main'">
                                         <FormField v-if="item.type != 'Main'" label="Remove">
-                                            <BaseButton
-                                                :icon="mdiMinusCircle"
-                                                class="mt-1"
-                                                @click.prevent="removeTitle(index)"
-                                                color="modern"
-                                                small
-                                            />
+                                            <BaseButton :icon="mdiMinusCircle" class="mt-1"
+                                                @click.prevent="removeTitle(index)" color="modern" small />
                                         </FormField>
-                                        <FormField
-                                            label="Title Value *"
+                                        <FormField label="Title Value *"
                                             :class="{ 'text-red-400': form.errors[`titles.${index}.value`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.titles[index].value"
-                                                type="text"
-                                                placeholder="[enter main title]"
-                                            >
-                                                <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.titles[index].value" type="text"
+                                                placeholder="[enter main title]">
+                                                <div class="text-red-400 text-sm"
+                                                    v-if="form.errors[`titles.${index}.value`]">
                                                     {{ form.errors[`titles.${index}.value`].join(', ') }}
                                                 </div>
                                             </FormControl>
                                         </FormField>
-                                        <FormField
-                                            label="Title Type*"
+                                        <FormField label="Title Type*"
                                             :class="{ 'text-red-400': form.errors[`titles.${index}.type`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.titles[index].type"
-                                                type="select"
-                                                :options="titletypes"
-                                                placeholder="[select title type]"
-                                            >
-                                                <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`titles.${index}.type`])">
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.titles[index].type" type="select"
+                                                :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>
                                             </FormControl>
                                         </FormField>
-                                        <FormField
-                                            label="Title Language*"
+                                        <FormField label="Title Language*"
                                             :class="{ 'text-red-400': form.errors[`titles.${index}.language`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.titles[index].language"
-                                                type="select"
-                                                :options="{ de: 'de', en: 'en' }"
-                                                placeholder="[select title language]"
-                                            >
-                                                <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.language`]">
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.titles[index].language" type="select"
+                                                :options="{ de: 'de', en: 'en' }" placeholder="[select title language]">
+                                                <div class="text-red-400 text-sm"
+                                                    v-if="form.errors[`titles.${index}.language`]">
                                                     {{ form.errors[`titles.${index}.language`].join(', ') }}
                                                 </div>
                                             </FormControl>
@@ -679,48 +627,27 @@ const addKeyword = () => {
                         </CardBox>
 
                         <!-- Descriptions -->
-                        <CardBox
-                            :icon="mdiImageText"
-                            class="mb-6 shadow"
-                            :has-form-data="true"
-                            title="Descriptions"
-                            :header-icon="mdiPlusCircle"
-                            v-on:header-icon-click="addDescription()"
-                        >
+                        <CardBox :icon="mdiImageText" class="mb-6 shadow" :has-form-data="true" title="Descriptions"
+                            :header-icon="mdiPlusCircle" v-on:header-icon-click="addDescription()">
                             <div class="flex flex-col md:flex-row">
-                                <FormField
-                                    label="Main Abstract *"
-                                    help="required: main abstract"
+                                <FormField label="Main Abstract *" help="required: main abstract"
                                     :class="{ 'text-red-400': form.errors['descriptions.0.value'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl
-                                        required
-                                        v-model="form.descriptions[0].value"
-                                        type="textarea"
-                                        placeholder="[enter main abstract]"
-                                    >
-                                        <div
-                                            class="text-red-400 text-sm"
-                                            v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])"
-                                        >
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.descriptions[0].value" type="textarea"
+                                        placeholder="[enter main abstract]">
+                                        <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 Title Language*"
-                                    help="required: main abstract language"
+                                <FormField label="Main Title Language*" help="required: main abstract language"
                                     :class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
-                                    class="w-full mx-2 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'])
-                                            "
-                                        >
+                                    class="w-full mx-2 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>
@@ -732,75 +659,40 @@ const addKeyword = () => {
                                 <div v-for="(item, index) in form.descriptions">
                                     <div class="flex flex-col md:flex-row" v-if="item.type != 'Abstract'">
                                         <FormField v-if="item.type != 'Abstract'" label="Remove">
-                                            <BaseButton
-                                                :icon="mdiMinusCircle"
-                                                class="mt-1"
-                                                @click.prevent="removeDescription(index)"
-                                                color="modern"
-                                                small
-                                            />
+                                            <BaseButton :icon="mdiMinusCircle" class="mt-1"
+                                                @click.prevent="removeDescription(index)" color="modern" small />
                                         </FormField>
-                                        <FormField
-                                            label="Description Value *"
+                                        <FormField label="Description Value *"
                                             :class="{ 'text-red-400': form.errors[`descriptions.${index}.value`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.descriptions[index].value"
-                                                type="text"
-                                                placeholder="[enter additional description]"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="
-                                                        form.errors[`descriptions.${index}.value`] &&
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.descriptions[index].value" type="text"
+                                                placeholder="[enter additional description]">
+                                                <div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.value`] &&
                                                     Array.isArray(form.errors[`descriptions.${index}.value`])
-                                                    "
-                                                >
+                                                    ">
                                                     {{ form.errors[`descriptions.${index}.value`].join(', ') }}
                                                 </div>
                                             </FormControl>
                                         </FormField>
-                                        <FormField
-                                            label="Description Type *"
+                                        <FormField label="Description Type *"
                                             :class="{ 'text-red-400': form.errors[`descriptions.${index}.type`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.descriptions[index].type"
-                                                type="select"
-                                                :options="descriptiontypes"
-                                                placeholder="[select description type]"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="
-                                                        form.errors[`descriptions.${index}.type`] &&
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.descriptions[index].type" type="select"
+                                                :options="descriptiontypes" placeholder="[select description type]">
+                                                <div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.type`] &&
                                                     Array.isArray(form.errors[`descriptions.${index}.type`])
-                                                    "
-                                                >
+                                                    ">
                                                     {{ form.errors[`descriptions.${index}.type`].join(', ') }}
                                                 </div>
                                             </FormControl>
                                         </FormField>
-                                        <FormField
-                                            label="Description Language*"
+                                        <FormField label="Description Language*"
                                             :class="{ 'text-red-400': form.errors[`titdescriptionsles.${index}.language`] }"
-                                            class="w-full mx-2 flex-1"
-                                        >
-                                            <FormControl
-                                                required
-                                                v-model="form.descriptions[index].language"
-                                                type="select"
-                                                :options="{ de: 'de', en: 'en' }"
-                                                placeholder="[select title language]"
-                                            >
-                                                <div
-                                                    class="text-red-400 text-sm"
-                                                    v-if="form.errors && Array.isArray(form.errors[`descriptions.${index}.language`])"
-                                                >
+                                            class="w-full mx-2 flex-1">
+                                            <FormControl required v-model="form.descriptions[index].language" type="select"
+                                                :options="{ de: 'de', en: 'en' }" placeholder="[select title language]">
+                                                <div class="text-red-400 text-sm"
+                                                    v-if="form.errors && Array.isArray(form.errors[`descriptions.${index}.language`])">
                                                     {{ form.errors[`descriptions.${index}.language`].join(', ') }}
                                                 </div>
                                             </FormControl>
@@ -812,12 +704,8 @@ const addKeyword = () => {
 
                         <!-- authors -->
                         <CardBox class="mb-6 shadow" has-table title="Authors" :icon="mdiBookOpenPageVariant">
-                            <SearchAutocomplete
-                                source="/api/persons"
-                                :response-property="'first_name'"
-                                placeholder="search in person table...."
-                                v-on:person="onAddAuthor"
-                            ></SearchAutocomplete>
+                            <SearchAutocomplete source="/api/persons" :response-property="'first_name'"
+                                placeholder="search in person table...." v-on:person="onAddAuthor"></SearchAutocomplete>
 
                             <TablePersons :persons="form.authors" v-if="form.authors.length > 0" />
                             <div class="text-red-400 text-sm" v-if="errors.authors && Array.isArray(errors.authors)">
@@ -827,12 +715,9 @@ const addKeyword = () => {
 
                         <!-- contributors -->
                         <CardBox class="mb-6 shadow" has-table title="Contributors" :icon="mdiBookOpenPageVariant">
-                            <SearchAutocomplete
-                                source="/api/persons"
-                                :response-property="'first_name'"
-                                placeholder="search in person table...."
-                                v-on:person="onAddContributor"
-                            ></SearchAutocomplete>
+                            <SearchAutocomplete source="/api/persons" :response-property="'first_name'"
+                                placeholder="search in person table...." v-on:person="onAddContributor">
+                            </SearchAutocomplete>
 
                             <TablePersons :persons="form.contributors" v-if="form.contributors.length > 0" />
                         </CardBox>
@@ -841,39 +726,20 @@ const addKeyword = () => {
                     <!-- <label>To Do: Recommendet</label> -->
                     <div v-if="formStep == 3">
                         <div class="flex flex-col md:flex-row">
-                            <FormField
-                                label="Project.."
-                                help="project is optional"
-                                :class="{ 'text-red-400': errors.project_id }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.project_id"
-                                    :type="'select'"
-                                    placeholder="[Select Project]"
-                                    :errors="form.errors.project_id"
-                                    :options="projects"
-                                >
+                            <FormField label="Project.." help="project is optional"
+                                :class="{ 'text-red-400': errors.project_id }" class="w-full mx-2 flex-1">
+                                <FormControl required v-model="form.project_id" :type="'select'"
+                                    placeholder="[Select Project]" :errors="form.errors.project_id" :options="projects">
                                     <div class="text-red-400 text-sm" v-if="form.errors.project_id">
                                         {{ form.errors.project_id.join(', ') }}
                                     </div>
                                 </FormControl>
                             </FormField>
 
-                            <FormField
-                                label="Embargo Date.."
-                                help="embargo date is optional"
-                                :class="{ 'text-red-400': errors.embargo_date }"
-                                class="w-full mx-2 flex-1"
-                            >
-                                <FormControl
-                                    required
-                                    v-model="form.embargo_date"
-                                    :type="'date'"
-                                    placeholder="date('y-m-d')"
-                                    :errors="form.errors.embargo_date"
-                                >
+                            <FormField label="Embargo Date.." help="embargo date is optional"
+                                :class="{ 'text-red-400': errors.embargo_date }" class="w-full mx-2 flex-1">
+                                <FormControl required v-model="form.embargo_date" :type="'date'" placeholder="date('y-m-d')"
+                                    :errors="form.errors.embargo_date">
                                     <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
                                         {{ form.errors.embargo_date.join(', ') }}
                                     </div>
@@ -883,71 +749,50 @@ const addKeyword = () => {
                         <CardBox class="mb-6 shadow" has-table title="Geo Location" :icon="mdiEarthPlus">
                             <!-- @onMapInitialized="onMapInitialized" -->
                             <!-- v-bind-event="{ mapId, name: mapId }" -->
-                            <MapComponent
-                                :mapOptions="mapOptions"
-                                :baseMaps="baseMaps"
-                                :fitBounds="fitBounds"
-                                :coverage="form.coverage"
-                                :mapId="mapId"
-                                v-bind-event:onMapInitializedEvent="onMapInitialized"
-                            ></MapComponent>
+                            <MapComponent :mapOptions="mapOptions" :baseMaps="baseMaps" :fitBounds="fitBounds"
+                                :coverage="form.coverage" :mapId="mapId"
+                                v-bind-event:onMapInitializedEvent="onMapInitialized"></MapComponent>
                             <!-- <label v-bind-event="{ for: mapId }" /> -->
 
                             <div class="flex flex-col md:flex-row">
                                 <!-- 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'])"
-                                        >
+                                <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>
-                                <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'])"
-                                        >
+                                <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>
                                 <!-- 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'])"
-                                        >
+                                <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>
-                                <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'])"
-                                        >
+                                <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>
@@ -967,58 +812,41 @@ const addKeyword = () => {
                                     elevation range (m)
                                 </label>
                                 <label for="elevation-option-three" class="pure-radio">
-                                    <input id="elevation-option-three" type="radio" v-model="elevation" value="no_elevation" />
+                                    <input id="elevation-option-three" type="radio" v-model="elevation"
+                                        value="no_elevation" />
                                     no elevation
                                 </label>
                             </div>
                             <div class="flex flex-col md:flex-row">
-                                <FormField
-                                    v-if="elevation === 'absolut'"
-                                    label="elevation absolut"
+                                <FormField v-if="elevation === 'absolut'" label="elevation absolut"
                                     :class="{ 'text-red-400': form.errors['coverage.elevation_absolut'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl
-                                        required
-                                        v-model="form.coverage.elevation_absolut"
-                                        type="text"
-                                        placeholder="[enter elevation_absolut]"
-                                    >
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_absolut'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.elevation_absolut" type="text"
+                                        placeholder="[enter elevation_absolut]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.elevation_absolut'])">
                                             {{ form.errors['coverage.elevation_absolut'].join(', ') }}
                                         </div>
                                     </FormControl>
                                 </FormField>
-                                <FormField
-                                    v-if="elevation === 'range'"
-                                    label="elevation min"
+                                <FormField v-if="elevation === 'range'" label="elevation min"
                                     :class="{ 'text-red-400': form.errors['coverage.elevation_min'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl
-                                        required
-                                        v-model="form.coverage.elevation_min"
-                                        type="text"
-                                        placeholder="[enter elevation_min]"
-                                    >
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_min'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.elevation_min" type="text"
+                                        placeholder="[enter elevation_min]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.elevation_min'])">
                                             {{ form.errors['coverage.elevation_min'].join(', ') }}
                                         </div>
                                     </FormControl>
                                 </FormField>
-                                <FormField
-                                    v-if="elevation === 'range'"
-                                    label="elevation max"
+                                <FormField v-if="elevation === 'range'" label="elevation max"
                                     :class="{ 'text-red-400': form.errors['coverage.elevation_max'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl
-                                        required
-                                        v-model="form.coverage.elevation_max"
-                                        type="text"
-                                        placeholder="[enter elevation_max]"
-                                    >
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.elevation_max'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.elevation_max" type="text"
+                                        placeholder="[enter elevation_max]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.elevation_max'])">
                                             {{ form.errors['coverage.elevation_max'].join(', ') }}
                                         </div>
                                     </FormControl>
@@ -1041,43 +869,35 @@ const addKeyword = () => {
                                 </label>
                             </div>
                             <div class="flex flex-col md:flex-row">
-                                <FormField
-                                    v-if="depth === 'absolut'"
-                                    label="depth absolut"
+                                <FormField v-if="depth === 'absolut'" label="depth absolut"
                                     :class="{ 'text-red-400': form.errors['coverage.depth_absolut'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl
-                                        required
-                                        v-model="form.coverage.depth_absolut"
-                                        type="text"
-                                        placeholder="[enter depth_absolut]"
-                                    >
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_absolut'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.depth_absolut" type="text"
+                                        placeholder="[enter depth_absolut]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.depth_absolut'])">
                                             {{ form.errors['coverage.depth_absolut'].join(', ') }}
                                         </div>
-                                    </FormControl></FormField
-                                >
-                                <FormField
-                                    v-if="depth === 'range'"
-                                    label="depth min"
+                                    </FormControl>
+                                </FormField>
+                                <FormField v-if="depth === 'range'" label="depth min"
                                     :class="{ 'text-red-400': form.errors['coverage.depth_min'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl required v-model="form.coverage.depth_min" type="text" placeholder="[enter depth_min]">
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_min'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.depth_min" type="text"
+                                        placeholder="[enter depth_min]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.depth_min'])">
                                             {{ form.errors['coverage.depth_min'].join(', ') }}
                                         </div>
                                     </FormControl>
                                 </FormField>
-                                <FormField
-                                    v-if="depth === 'range'"
-                                    label="depth max"
+                                <FormField v-if="depth === 'range'" label="depth max"
                                     :class="{ 'text-red-400': form.errors['coverage.depth_max'] }"
-                                    class="w-full mx-2 flex-1"
-                                >
-                                    <FormControl required v-model="form.coverage.depth_max" type="text" placeholder="[enter depth_max]">
-                                        <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors['coverage.depth_max'])">
+                                    class="w-full mx-2 flex-1">
+                                    <FormControl required v-model="form.coverage.depth_max" type="text"
+                                        placeholder="[enter depth_max]">
+                                        <div class="text-red-400 text-sm"
+                                            v-if="Array.isArray(form.errors['coverage.depth_max'])">
                                             {{ form.errors['coverage.depth_max'].join(', ') }}
                                         </div>
                                     </FormControl>
@@ -1085,20 +905,72 @@ const addKeyword = () => {
                             </div>
                         </CardBox>
 
-                        <CardBox
-                            class="mb-6 shadow"
-                            has-table
-                            title="Dataset Keywords"
-                            :icon="mdiEarthPlus"
-                            :header-icon="mdiPlusCircle"
-                            v-on:header-icon-click="addKeyword"
-                        >
+                        <CardBox class="mb-6 shadow" has-table title="Dataset References" :header-icon="mdiPlusCircle"
+                            v-on:header-icon-click="addReference">
+                            <table class="table table-hover" v-if="form.references.length">
+                                <thead>
+                                    <tr>
+                                        <th>Value of the identifier</th>
+                                        <th>Type</th>
+                                        <th>Relation</th>
+                                        <th>Label</th>
+                                        <th></th>
+                                    </tr>
+                                </thead>
+                                <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" />
+                                        </td>
+                                        <td>
+                                            <FormControl required v-model="form.references[index].type" type="select"
+                                                :options="referenceIdentifierTypes"
+                                                placeholder="[identifier type]">
+                                                <div class="text-red-400 text-sm"
+                                                    v-if="Array.isArray(form.errors[`references.${index}.type`])">
+                                                    {{ form.errors[`references.${index}.type`].join(', ') }}
+                                                </div>
+                                            </FormControl>
+                                        </td>
+
+                                        <td>
+                                            <!-- {!! Form::select('Reference[Relation]', $relationTypes, null,
+                                            ['placeholder' => '[relationType]', 'v-model' => 'item.relation',
+                                            'data-vv-scope' => 'step-2'])
+                                            !!} -->
+                                            <FormControl required v-model="form.references[index].relation" type="select"
+                                                :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>
+                                            </FormControl>
+                                        </td>
+                                        <td data-label="Reference Label">
+                                            <input name="Reference Label" class="form-control" v-model="item.label" />
+                                        </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>
+                                </tbody>
+                            </table>
+                        </CardBox>
+
+
+                        <CardBox class="mb-6 shadow" has-table title="Dataset Keywords" :icon="mdiEarthPlus"
+                            :header-icon="mdiPlusCircle" v-on:header-icon-click="addKeyword">
                             <!-- <ul>
                                 <li v-for="(subject, index) in form.subjects" :key="index">
                                 {{ subject.value }} <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeKeyword(index)" />
                                 </li>
                             </ul> -->
-                            <TableKeywords :keywords="form.subjects" :errors="form.errors" v-if="form.subjects.length > 0" />
+                            <TableKeywords :keywords="form.subjects" :errors="form.errors"
+                                v-if="form.subjects.length > 0" />
                         </CardBox>
                     </div>
 
@@ -1120,7 +992,8 @@ const addKeyword = () => {
                         <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['file'])">
                             {{ form.errors['file'].join(', ') }}
                         </div>
-                        <div class="text-red-400 text-sm" v-if="form.errors['upload.label'] && Array.isArray(form.errors['upload.label'])">
+                        <div class="text-red-400 text-sm"
+                            v-if="form.errors['upload.label'] && Array.isArray(form.errors['upload.label'])">
                             {{ form.errors['upload.label'].join(', ') }}
                         </div>
                         <!-- <label v-if="form.upload">{{ form.upload?.label }}</label> -->
@@ -1129,34 +1002,26 @@ const addKeyword = () => {
 
                 <template #footer>
                     <div class="flex p-2 mt-4">
-                        <button
-                            v-if="formStep > 1"
-                            @click="prevStep"
-                            class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-gray-200 bg-gray-100 text-gray-700 border duration-200 ease-in-out border-gray-600 transition"
-                        >
+                        <button v-if="formStep > 1" @click="prevStep"
+                            class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-gray-200 bg-gray-100 text-gray-700 border duration-200 ease-in-out border-gray-600 transition">
                             Previous
                         </button>
 
                         <div class="flex-auto flex flex-row-reverse">
-                            <button
-                                v-if="formStep < 4"
-                                @click="nextStep"
-                                class="text-base ml-2 hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-600 bg-teal-600 text-teal-100 border duration-200 ease-in-out border-teal-600 transition"
-                            >
+                            <button v-if="formStep < 4" @click="nextStep"
+                                class="text-base ml-2 hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-600 bg-teal-600 text-teal-100 border duration-200 ease-in-out border-teal-600 transition">
                                 Next
                             </button>
 
-                            <button
-                                v-if="formStep == 4"
-                                :disabled="form.processing"
+                            <button v-if="formStep == 4" :disabled="form.processing"
                                 class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-200 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition"
-                                @click.stop="submit"
-                            >
+                                @click.stop="submit">
                                 Save
                             </button>
                         </div>
                     </div>
-                    <progress v-if="form.progress" :value="form.progress.percentage" max="100">{{ form.progress.percentage }}%</progress>
+                    <progress v-if="form.progress" :value="form.progress.percentage" max="100">{{ form.progress.percentage
+                    }}%</progress>
                 </template>
             </CardBox>
         </SectionMain>
@@ -1165,18 +1030,21 @@ const addKeyword = () => {
 
 <style>
 .dropbox {
-    outline: 2px dashed grey; /* the dash box */
+    outline: 2px dashed grey;
+    /* the dash box */
     outline-offset: -10px;
     background: lightcyan;
     color: dimgray;
     padding: 10px 0;
-    min-height: 200px; /* minimum height */
+    min-height: 200px;
+    /* minimum height */
     position: relative;
     cursor: pointer;
 }
 
 .input-file {
-    opacity: 0; /* invisible but it's there! */
+    opacity: 0;
+    /* invisible but it's there! */
     width: 100%;
     height: 200px;
     position: absolute;
@@ -1184,7 +1052,8 @@ const addKeyword = () => {
 }
 
 .dropbox:hover {
-    background: lightblue; /* when mouse over to the drop zone, change color */
+    background: lightblue;
+    /* when mouse over to the drop zone, change color */
 }
 
 .dropbox p {
@@ -1192,6 +1061,7 @@ const addKeyword = () => {
     text-align: center;
     padding: 50px 0;
 }
+
 span.remove-file {
     color: red;
     cursor: pointer;