feat: Enhance dataset management and improve frontend components

- Added preloads 'allowed_extensions_mimetypes' and 'dependent_array_min_length' in adonisrc.ts
- Updated @symfony/webpack-encore from ^4.6.1 to ^5.0.1
- AdminuserController: Implemented pagination for 10 records in index method
- Enabled reviewers to reject datasets to editors with email notifications (DatasetController.ts)
- Submitter DatasetController: Files now loaded in ascending order (sort_order) in edit mode
- file.ts: Removed serialization of fileData due to browser issues
- Modified FileUpload.vue to mark already uploaded files as deleted
- Improved keyword search in SearchCategoryAutocomplete.vue
- Started development on Category.vue for submitters to categorize DDC
- Added new route /dataset/categorize in routes.ts
- Introduced 2 new rules in start/rules: allowed_extensions_mimetypes.ts and dependent_array_min_length.ts
- Performed npm updates

adonisrc.ts

@@ -31,7 +31,9 @@ export default defineConfig({
     () => import('#start/rules/translated_language'),
     () => import('#start/rules/unique_person'),
     () => import('#start/rules/file_length'),
-    () => import('#start/rules/file_scan')
+    () => import('#start/rules/file_scan'),
+    () => import('#start/rules/allowed_extensions_mimetypes'),
+    () => import('#start/rules/dependent_array_min_length')
   ],
   /*
 |--------------------------------------------------------------------------
@@ -71,7 +73,7 @@ export default defineConfig({
     // () => import('@adonisjs/core/providers/vinejs_provider'),
     () => import('#providers/vinejs_provider'),
     () => import('@adonisjs/mail/mail_provider')
-  //   () => import('#providers/mail_provider'),
+    //   () => import('#providers/mail_provider'),
   ],
   metaFiles: [
     {

app/Controllers/Http/Admin/AdminuserController.ts

@@ -45,7 +45,7 @@ export default class AdminuserController {
             // .filter(qs)
             // .preload('focusInterests')
             // .preload('role')
-            .paginate(page, 5);
+            .paginate(page, 10);
 
         // var test = request.all();
 

app/Controllers/Http/Reviewer/DatasetController.ts

@@ -279,7 +279,7 @@ export default class DatasetsController {
         let emailStatusMessage = '';
 
         if (sendMail == true) {
-            if (dataset.user.email && validRecipientEmail) {
+            if (dataset.editor.email && validRecipientEmail) {
                 try {
                     await mail.send((message) => {
                         message.to(dataset.editor.email).subject('Dataset Rejection Notification').html(`

app/Controllers/Http/Submitter/DatasetController.ts

@@ -216,7 +216,13 @@ export default class DatasetController {
             authors: vine
                 .array(
                     vine.object({
-                        email: vine.string().trim().maxLength(255).email().normalizeEmail().isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
+                        email: vine
+                            .string()
+                            .trim()
+                            .maxLength(255)
+                            .email()
+                            .normalizeEmail()
+                            .isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
                         first_name: vine.string().trim().minLength(3).maxLength(255),
                         last_name: vine.string().trim().minLength(3).maxLength(255),
                     }),
@@ -226,14 +232,20 @@ export default class DatasetController {
             contributors: vine
                 .array(
                     vine.object({
-                        email: vine.string().trim().maxLength(255).email().normalizeEmail().isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
+                        email: vine
+                            .string()
+                            .trim()
+                            .maxLength(255)
+                            .email()
+                            .normalizeEmail()
+                            .isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
                         first_name: vine.string().trim().minLength(3).maxLength(255),
                         last_name: vine.string().trim().minLength(3).maxLength(255),
                         pivot_contributor_type: vine.enum(Object.keys(ContributorTypes)),
                     }),
                 )
                 .distinct('email')
-                .optional(),        
+                .optional(),
             project_id: vine.number().optional(),
         });
 
@@ -293,7 +305,13 @@ export default class DatasetController {
             authors: vine
                 .array(
                     vine.object({
-                        email: vine.string().trim().maxLength(255).email().normalizeEmail().isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
+                        email: vine
+                            .string()
+                            .trim()
+                            .maxLength(255)
+                            .email()
+                            .normalizeEmail()
+                            .isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
                         first_name: vine.string().trim().minLength(3).maxLength(255),
                         last_name: vine.string().trim().minLength(3).maxLength(255),
                     }),
@@ -303,14 +321,20 @@ export default class DatasetController {
             contributors: vine
                 .array(
                     vine.object({
-                        email: vine.string().trim().maxLength(255).email().normalizeEmail().isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
+                        email: vine
+                            .string()
+                            .trim()
+                            .maxLength(255)
+                            .email()
+                            .normalizeEmail()
+                            .isUniquePerson({ table: 'persons', column: 'email', idField: 'id' }),
                         first_name: vine.string().trim().minLength(3).maxLength(255),
                         last_name: vine.string().trim().minLength(3).maxLength(255),
                         pivot_contributor_type: vine.enum(Object.keys(ContributorTypes)),
                     }),
                 )
                 .distinct('email')
-                .optional(),                
+                .optional(),
             // third step
             project_id: vine.number().optional(),
             // embargo_date: schema.date.optional({ format: 'yyyy-MM-dd' }, [rules.after(10, 'days')]),
@@ -791,7 +815,9 @@ export default class DatasetController {
                 builder.orderBy('id', 'asc').withCount('datasets');
             })
             .preload('references')
-            .preload('files');
+            .preload('files', (query) => {
+                query.orderBy('sort_order', 'asc'); // Sort by sort_order column
+            });
 
         const dataset = await datasetQuery.firstOrFail();
         const validStates = ['inprogress', 'rejected_editor'];
@@ -961,6 +987,18 @@ export default class DatasetController {
                 }
             }
 
+            // save coverage
+            const coverageData = request.input('coverage');
+            if (coverageData) {
+                if (coverageData.id) {
+                    const coverage = await Coverage.findOrFail(coverageData.id);
+                    coverage.merge(coverageData);
+                    if (coverage.$isDirty) {
+                        await coverage.useTransaction(trx).save();
+                    }
+                }
+            }
+
             // Save already existing files
             const files = request.input('fileInputs', []);
             for (const fileData of files) {
@@ -1016,6 +1054,14 @@ export default class DatasetController {
                 }
             }
 
+            const filesToDelete = request.input('filesToDelete', []);
+            for (const fileData of filesToDelete) {
+                if (fileData.id) {
+                    const file = await File.findOrFail(fileData.id);
+                    await file.useTransaction(trx).delete();
+                }
+            }
+
             // save collection
             // const collection: Collection | null = await Collection.query().where('id', 21).first();
             // collection && (await dataset.useTransaction(trx).related('collections').attach([collection.id]));
@@ -1036,6 +1082,10 @@ export default class DatasetController {
 
             await trx.commit();
             console.log('Dataset and related models created successfully');
+
+            session.flash('message', 'Dataset has been updated successfully');
+            // return response.redirect().toRoute('user.index');
+            return response.redirect().toRoute('dataset.edit', [dataset.id]);
         } catch (error) {
             if (trx !== null) {
                 await trx.rollback();
@@ -1044,10 +1094,6 @@ export default class DatasetController {
             // throw new ValidationException(true, { 'upload error': `failed to create dataset and related models. ${error}` });
             throw error;
         }
-
-        session.flash('message', 'Dataset has been updated successfully');
-        // return response.redirect().toRoute('user.index');
-        return response.redirect().back();
     }
 
     private extractVariableNameAndSortOrder(inputString: string): { clientFileName: string; sortOrder?: number } {

app/models/dataset.ts

@@ -46,7 +46,12 @@ export default class Dataset extends DatasetExtension {
     @column({ columnName: 'creating_corporation' })
     public creating_corporation: string;
 
-    @column.dateTime({ columnName: 'embargo_date' })
+    @column.dateTime({ 
+        columnName: 'embargo_date',
+        serialize: (value: Date | null) => {
+            return value ? dayjs(value).format('YYYY-MM-DD') : value;
+        },
+    })
     public embargo_date: DateTime;
 
     @column({})

app/models/file.ts

@@ -123,25 +123,25 @@ export default class File extends BaseModel {
 
     readonly webkitRelativePath: string = '';
 
-    @computed({
-        serializeAs: 'fileData',
-    })
-    public get fileData(): string {
-        try {
-            const fileContent: Buffer = fs.readFileSync(this.filePath);
-            // Create a Blob from the file content
-            // const blob = new Blob([fileContent], { type: this.type }); // Adjust
-            // let fileSrc = URL.createObjectURL(blob);
-            // return fileSrc;
+    // @computed({
+    //     serializeAs: 'fileData',
+    // })
+    // public get fileData(): string {
+    //     try {
+    //         const fileContent: Buffer = fs.readFileSync(this.filePath);
+    //         // Create a Blob from the file content
+    //         // const blob = new Blob([fileContent], { type: this.type }); // Adjust
+    //         // let fileSrc = URL.createObjectURL(blob);
+    //         // return fileSrc;
 
-            // create a JSON string that contains the data in the property "blob"
-            const json = JSON.stringify({ blob: fileContent.toString('base64') });
-            return json;
-        } catch (err) {
-            // console.error(`Error reading file: ${err}`);
-            return '';
-        }
-    }
+    //         // create a JSON string that contains the data in the property "blob"
+    //         const json = JSON.stringify({ blob: fileContent.toString('base64') });
+    //         return json;
+    //     } catch (err) {
+    //         // console.error(`Error reading file: ${err}`);
+    //         return '';
+    //     }
+    // }
 
     public async createHashValues(trx?: TransactionClientContract) {
         const hashtypes: string[] = ['md5', 'sha512'];

app/validators/dataset.ts

@@ -1,14 +1,14 @@
 import vine, { SimpleMessagesProvider } from '@vinejs/vine';
 import { TitleTypes, DescriptionTypes, ContributorTypes, ReferenceIdentifierTypes, RelationTypes } from '#contracts/enums';
 import dayjs from 'dayjs';
-import MimeType from '#models/mime_type';
+// import MimeType from '#models/mime_type';
 
-const enabledExtensions = await MimeType.query().select('file_extension').where('enabled', true).exec();
-const extensions = enabledExtensions
-    .map((extension) => {
-        return extension.file_extension.split('|');
-    })
-    .flat();
+// const enabledExtensions = await MimeType.query().select('file_extension').where('enabled', true).exec();
+// const extensions = enabledExtensions
+//     .map((extension) => {
+//         return extension.file_extension.split('|');
+//     })
+//     .flat();
 
 /**
  * Validates the dataset's creation action
@@ -137,8 +137,9 @@ export const createDatasetValidator = vine.compile(
                 vine
                     .myfile({
                         size: '512mb',
-                        extnames: extensions,
+                        //extnames: extensions,
                     })
+                    .allowedMimetypeExtensions()
                     .filenameLength({ clientNameSizeLimit: 100 })
                     .fileScan({ removeInfected: true }),
             )
@@ -267,13 +268,25 @@ export const updateDatasetValidator = vine.compile(
             .minLength(3)
             .distinct('value'),
         // last step
-        files: vine.array(
-            vine.myfile({
-                size: '512mb',
-                extnames: extensions,
-            }),
+        files: vine
+        .array(
+            vine
+                .myfile({
+                    size: '512mb',
+                    //extnames: extensions,
+                })
+                .allowedMimetypeExtensions()
+                .filenameLength({ clientNameSizeLimit: 100 })
+                .fileScan({ removeInfected: true }),
+        ).dependentArrayMinLength({ dependentArray: 'fileInputs', min: 1}),
+        fileInputs: vine
+        .array(
+            vine
+                .object({
+                    label: vine.string().trim().maxLength(100),
+                    //extnames: extensions,
+                })                
         ),
-        // .minLength(1),
     }),
 );
 

package.json

@@ -37,7 +37,7 @@
     "@mdi/js": "^7.1.96",
     "@poppinss/utils": "^6.7.2",
     "@swc/core": "^1.4.2",
-    "@symfony/webpack-encore": "^4.6.1",
+    "@symfony/webpack-encore": "^5.0.1",
     "@tailwindcss/forms": "^0.5.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/clamscan": "^2.0.4",
@@ -71,6 +71,7 @@
     "vue": "^3.4.26",
     "vue-facing-decorator": "^3.0.0",
     "vue-loader": "^17.0.1",
+    "webpack-dev-server": "^5.1.0",
     "xslt3": "^2.5.0"
   },
   "dependencies": {

providers/vinejs_provider.ts

@@ -39,7 +39,7 @@ declare module '@adonisjs/core/http' {
 export function isBodyParserFile(file: MultipartFile | unknown): boolean {
     return !!(file && typeof file === 'object' && 'isMultipartFile' in file);
 }
-async function getEnabledExtensions() {
+export async function getEnabledExtensions() {
     const enabledExtensions = await MimeType.query().select('file_extension').where('enabled', true).exec();
     const extensions = enabledExtensions
         .map((extension) => {

public/assets/manifest.json

@@ -43,11 +43,13 @@
   "assets/resources_js_Pages_Reviewer_Dataset_Index_vue.js": "http://localhost:8080/assets/resources_js_Pages_Reviewer_Dataset_Index_vue.js",
   "assets/resources_js_Pages_Reviewer_Dataset_Reject_vue.js": "http://localhost:8080/assets/resources_js_Pages_Reviewer_Dataset_Reject_vue.js",
   "assets/resources_js_Pages_Reviewer_Dataset_Review_vue.js": "http://localhost:8080/assets/resources_js_Pages_Reviewer_Dataset_Review_vue.js",
-  "assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-0c4b04.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-0c4b04.css",
-  "assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-0c4b04.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-0c4b04.js",
+  "assets/resources_js_Pages_Submitter_Dataset_Category_vue.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Category_vue.css",
+  "assets/resources_js_Pages_Submitter_Dataset_Category_vue.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Category_vue.js",
+  "assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-03a898.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-03a898.css",
+  "assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-03a898.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Create_vue-resources_js_utils_toast_css-resources_js_Com-03a898.js",
   "assets/resources_js_Pages_Submitter_Dataset_Delete_vue.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Delete_vue.js",
-  "assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-b6a1eb.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-b6a1eb.css",
-  "assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-b6a1eb.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-b6a1eb.js",
+  "assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-a37b65.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-a37b65.css",
+  "assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-a37b65.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Edit_vue-resources_js_utils_toast_css-resources_js_Compo-a37b65.js",
   "assets/resources_js_Pages_Submitter_Dataset_Index_vue.css": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Index_vue.css",
   "assets/resources_js_Pages_Submitter_Dataset_Index_vue.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Index_vue.js",
   "assets/resources_js_Pages_Submitter_Dataset_Release_vue.js": "http://localhost:8080/assets/resources_js_Pages_Submitter_Dataset_Release_vue.js",

resources/js/Components/FileUpload.vue

@@ -3,10 +3,6 @@
         class="relative h-full flex flex-col bg-white dark:bg-slate-900/70 shadow-xl rounded-md"
         v-on:dragenter="dragEnterHandler" v-on:dragleave="dragLeaveHandler" v-on:dragover="dragOverHandler"
         v-on:drop="dropHandler">
-        <!-- ondrop="dropHandler(event);"
-        ondragover="dragOverHandler(event);"
-        ondragleave="dragLeaveHandler(event);"
-        ondragenter="dragEnterHandler(event);" -->
 
         <!-- overlay -->
         <div id="overlay" ref="overlay"
@@ -23,15 +19,6 @@
 
         <!-- scroll area -->
         <div class="h-full p-8 w-full h-full flex flex-col">
-            <!-- <header id="dropzone" class="border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center">
-                <p class="mb-3 font-semibold text-gray-900 flex flex-wrap justify-center">
-                    <span>Drag and drop your</span>&nbsp;<span>files anywhere or</span>
-                </p>
-                <input id="hidden-input" type="file" multiple class="hidden" />
-                <button id="button" class="mt-2 rounded-sm px-3 py-1 bg-gray-200 hover:bg-gray-300 focus:shadow-outline focus:outline-none">
-                    Upload a file
-                </button>
-            </header> -->
             <header class="flex items-center justify-center w-full">
                 <label for="dropzone-file"
                     class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
@@ -47,14 +34,12 @@
                         </p>
                         <!-- <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->
                     </div>
-                    <input id="dropzone-file" type="file" class="hidden" @change="onChangeFile"  multiple="true"/>
+                    <input id="dropzone-file" type="file" class="hidden" @change="onChangeFile" multiple="true" />
                 </label>
             </header>
 
             <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">To Upload</h1>
 
-            <!-- <ul id="gallery" class="flex flex-1 flex-wrap -m-1"> -->
-
             <draggable id="galleryxy" tag="ul" class="flex flex-1 flex-wrap -m-1" v-model="items" item-key="sort_order">
                 <!-- <li
                     v-if="files.length == 0"
@@ -86,52 +71,44 @@
                 </li> -->
                 <template #item="{ index, element }">
                     <li class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24" :key="index">
-                        <article v-if="element.type.match('image.*')" tabindex="0"
-                            class="bg-gray-50 group hasImage w-full h-full rounded-md cursor-pointer relative text-transparent hover:text-white shadow-sm">
-                            <!-- :src="element.fileSrc" :src="generateURL(element)" -->
-                            <img :alt="element.name" :src="element.fileSrc"
-                                class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed opacity-75" />
-                            <!-- <section                                
-                                class="hasError text-red-500 shadow-sm font-semibold flex flex-row rounded-md text-xs break-words w-full h-full z-21 absolute top-0 py-2 px-3"
-                            >
-                                <p class="p-1 text-xs" v-if="errors[`files.${index}`]">
-                                    {{ errors[`files.${index}`].join(', ') }}
-                                </p>
-                                <button
-                                    class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md"
-                                    @click="removeFile(index)"
-                                >
-                                    <DeleteIcon></DeleteIcon>
-                                </button>
-                            </section> -->
-                            <section
-                                class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
+                        <!-- :src="element.fileSrc" :src="generateURL(element)" -->
+                        <!-- <article
+                            v-if="element.type.match('image.*')"
+                            tabindex="0"
+                            class="bg-gray-50 group hasImage w-full h-full rounded-md cursor-pointer relative text-transparent hover:text-white shadow-sm"
+                        >
+                           
+                            <img
+                                :alt="element.name"
+                                :src="element.fileSrc"
+                                class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed opacity-75"
+                            />                            
+                            <section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
                                 <h1 class="flex-1">{{ element.name }}</h1>
                                 <div class="flex">
                                     <p class="p-1 size text-xs">{{ getFileSize(element) }}</p>
                                     <p class="p-1 size text-xs text-gray-700">{{ element.sort_order }}</p>
-                                    <button class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md"
-                                        @click="removeFile(index)">
+                                    <button
+                                        class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md"
+                                        @click.prevent="removeFile(index)"
+                                    >
                                         <DeleteIcon></DeleteIcon>
                                     </button>
                                 </div>
-                            </section>
-                            <!-- <div class="text-red-400 text-sm w-full h-full rounded-md cursor-pointer relative shadow-sm" v-if="errors[`files.${index}`]">
-                            {{ errors[`files.${index}`].join(', ') }}
-                        </div> -->
-                        </article>
+                            </section>                         
+                        </article> -->
                         <!-- :class="errors && errors[`files.${index}`] ? 'bg-red-400' : 'bg-gray-100'" -->
-                        <article v-else tabindex="0"
+                        <article tabindex="0"
                             class="bg-gray-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm">
                             <section
                                 class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
                                 <h1 class="flex-1 text-gray-700 group-hover:text-blue-800">{{ element.name }}</h1>
                                 <div class="flex">
                                     <p class="p-1 size text-xs text-gray-700">{{ getFileSize(element) }}</p>
-                                    <p class="p-1 size text-xs text-gray-700">{{ element.sort_order }}</p>
+                                    <p class="p-1 size text-xs text-gray-700">sort: {{ element.sort_order }}</p>
                                     <button
                                         class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
-                                        @click="removeFile(index)">
+                                        @click.prevent="removeFile(index)">
                                         <DeleteIcon></DeleteIcon>
                                     </button>
                                 </div>
@@ -142,6 +119,58 @@
             </draggable>
             <!-- </ul> -->
 
+            <!--<ul id="deletetFiles"></ul> -->
+
+            <div>
+                <h1 v-if="deletetFiles.length > 0" class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">Files To
+                    Delete</h1>
+                <ul id="deletetFiles" tag="ul" class="flex flex-1 flex-wrap -m-1">
+                    <li v-for="(element, index) in deletetFiles" :key="index"
+                        class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24">
+                        <!-- <article
+                            v-if="element.type.match('image.*')"
+                            tabindex="0"
+                            class="bg-red-50 group hasImage w-full h-full rounded-md cursor-pointer relative text-transparent hover:text-white shadow-sm"
+                        >
+                            <img
+                                :alt="element.name"
+                                :src="element.fileSrc"
+                                class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed opacity-75"
+                            />
+                            <section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
+                                <h1 class="flex-1">{{ element.name }}</h1>
+                                <div class="flex">
+                                    <p class="p-1 size text-xs">{{ getFileSize(element) }}</p>
+                                    <p class="p-1 size text-xs text-gray-700">{{ element.sort_order }}</p>
+                                    <button
+                                        class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md"
+                                        @click.prevent="reactivateFile(index)"
+                                    >
+                                        <RefreshIcon></RefreshIcon>
+                                    </button>
+                                </div>
+                            </section>
+                        </article> -->
+                        <article tabindex="0"
+                            class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm">
+                            <section
+                                class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
+                                <h1 class="flex-1 text-gray-700 group-hover:text-blue-800">{{ element.name }}</h1>
+                                <div class="flex">
+                                    <!-- <p class="p-1 size text-xs text-gray-700">{{ getFileSize(element) }}</p> -->
+                                    <p class="p-1 size text-xs text-gray-700">{{ element.sort_order }}</p>
+                                    <button
+                                        class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
+                                        @click.prevent="reactivateFile(index)">
+                                        <RefreshIcon></RefreshIcon>
+                                    </button>
+                                </div>
+                            </section>
+                        </article>
+                    </li>
+                </ul>
+            </div>
+
             <div v-if="fileErrors" class="flex flex-col mt-6 animate-fade-in" v-for="fileError in fileErrors">
                 <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                     <p class="font-bold">Be Warned</p>
@@ -149,21 +178,12 @@
                 </div>
             </div>
 
-            <!-- <div class="text-red-400 text-sm" v-if="errors && Array.isArray(errors['files.0'])">
-                {{ errors['files.0'].join(', ') }}
-            </div> -->
-            <!-- <div v-if="hasErrors">
-                <div class="font-medium text-red-600">Whoops! Something went wrong.</div>
-
-                <ul class="mt-3 list-disc list-inside text-sm text-red-600">
-                    <li v-for="(error, key) in errors" :key="key">{{ error }}</li>
-                </ul>
-            </div> -->
         </div>
 
         <!-- sticky footer -->
         <footer class="flex justify-end px-8 pb-8 pt-4">
-            <button id="cancel" class="ml-3 rounded-sm px-3 py-1 hover:bg-gray-300 focus:shadow-outline focus:outline-none"
+            <button id="cancel"
+                class="ml-3 rounded-sm px-3 py-1 hover:bg-gray-300 focus:shadow-outline focus:outline-none"
                 @click="clearAllFiles">
                 Clear
             </button>
@@ -175,6 +195,7 @@
 import { Component, Vue, Prop, Ref, Watch } from 'vue-facing-decorator';
 import { usePage } from '@inertiajs/vue3';
 import DeleteIcon from '@/Components/Icons/Delete.vue';
+import RefreshIcon from '@/Components/Icons/Refresh.vue';
 // import { Page, PageProps, Errors, ErrorBag } from '@inertiajs/inertia';
 import Draggable from 'vuedraggable';
 import { Buffer } from 'buffer';
@@ -212,18 +233,11 @@ interface InteriaPage {
     name: 'file-upload',
     components: {
         DeleteIcon,
+        RefreshIcon,
         Draggable,
     },
 })
 class FileUploadComponent extends Vue {
-    /**
-     * Connect map id.
-     */
-    //  @Prop({
-    // 	type: Object,
-    // 	default: () => ({}),
-    // })
-    // errors: IErrorMessage;
 
     @Ref('overlay') overlay: HTMLDivElement;
 
@@ -236,6 +250,23 @@ class FileUploadComponent extends Vue {
     })
     files: Array<TethysFile | File>;
 
+
+    @Prop({
+        type: Array<File>,
+        default: [],
+    })
+    filesToDelete: Array<TethysFile>;
+
+    // // deletetFiles: Array<TethysFile> = [];
+    get deletetFiles(): Array<TethysFile> {
+        return this.filesToDelete;
+    }
+    set deletetFiles(values: Array<TethysFile>) {
+        // this.modelValue = value;
+        this.filesToDelete.length = 0;
+        this.filesToDelete.push(...values);       
+    }
+
     get items(): Array<TethysFile | File> {
         return this.files;
     }
@@ -249,10 +280,20 @@ class FileUploadComponent extends Vue {
         // });
     }
 
-    @Watch("files", {
-        deep: true //also in case of pushing
+    @Watch('files', {
+        deep: true, //also in case of pushing
     })
-    public propertyWatcher(newItems: Array<TethysFile>) {
+    public propertyWatcherFiles(newItems: Array<TethysFile>) {
+        // Update sort_order based on the new index when the list is changed
+        newItems.forEach((item, index) => {
+            item.sort_order = index + 1; // Assuming sort_order starts from 1
+        });
+    }
+
+    @Watch('filesToDelete', {
+        deep: true, //also in case of pushing
+    })
+    public propertyWatcherDeletedFiles(newItems: Array<TethysFile>) {
         // Update sort_order based on the new index when the list is changed
         newItems.forEach((item, index) => {
             item.sort_order = index + 1; // Assuming sort_order starts from 1
@@ -262,7 +303,7 @@ class FileUploadComponent extends Vue {
     public created() {
         for (const file of this.files) {
             if (!(file instanceof File)) {
-                // console.log(`${file.name} path is ${file.filePath} here.`);               
+                // console.log(`${file.name} path is ${file.filePath} here.`);
                 this.generateURL(file);
                 // console.log(`${file.fileSrc} path.`);
             }
@@ -281,35 +322,45 @@ class FileUploadComponent extends Vue {
         1 > --this.counter && this.overlay.classList.remove('draggedover');
     }
 
-    public dragOverHandler(e) {
-        if (this._hasFiles(e.dataTransfer)) {
-            e.preventDefault();
+    public dragOverHandler(event: DragEvent): void {
+        if (this._hasFiles(event.dataTransfer)) {
+            event.preventDefault();
         }
     }
 
-    public startDrag(evt, item) {
-        evt.dataTransfer.dropEffect = 'move';
-        evt.dataTransfer.effectAllowed = 'move';
-        evt.dataTransfer.setData('itemID', item.id);
+    public startDrag(event: DragEvent, item: { id: string }) {
+        const dataTransfer = event.dataTransfer;
+
+        // Check if dataTransfer is not null
+        if (dataTransfer) {
+            dataTransfer.dropEffect = 'move';
+            dataTransfer.effectAllowed = 'move';
+            dataTransfer.setData('itemID', item.id);
+        } else {
+            console.warn('dataTransfer is null, drag event may not be supported.');
+        }
     }
 
     // reset counter and append file to gallery when file is dropped
 
-    public dropHandler(event) {
+    public dropHandler(event: DragEvent): void {
         event.preventDefault();
-        for (const file of event.dataTransfer.files) {
-            // let fileName = String(file.name.replace(/\.[^/.]+$/, ''));
-            // file.label = fileName;
-            // if (file.type.match('image.*')) {
-            //     this.generateURL(file);
-            // }
-            this._addFile(file);
+        const dataTransfer = event.dataTransfer;
+        if (dataTransfer) {
+            for (const file of event.dataTransfer?.files) {
+                // let fileName = String(file.name.replace(/\.[^/.]+$/, ''));
+                // file.label = fileName;
+                // if (file.type.match('image.*')) {
+                //     this.generateURL(file);
+                // }
+                this._addFile(file);
+            }
+            this.overlay.classList.remove('draggedover');
+            this.counter = 0;
         }
-        this.overlay.classList.remove('draggedover');
-        this.counter = 0;
     }
 
-    public onChangeFile(event) {
+    public onChangeFile(event: Event) {
         event.preventDefault();
         // let uploadedFile = event.target.files[0];
         // let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
@@ -343,13 +394,46 @@ class FileUploadComponent extends Vue {
         return Object.fromEntries(Object.entries(this.errors).filter(([key]) => key.startsWith('file')));
     }
 
-    public clearAllFiles(event) {
+    public clearAllFiles(event: Event) {
         event.preventDefault();
         this.items.splice(0);
     }
 
-    public removeFile(key) {
+    public removeFile(key: number) {
+        // Check if the key is within the bounds of the items array
+        if (key < 0 || key >= this.items.length) {
+            console.error('Invalid key provided for removal.');
+            return;
+        }
+        let fileToDelete = this.items[key];
+        // Remove the file from items
         this.items.splice(key, 1);
+
+        // Check if the file is of type TethysFile based on its properties
+        if (this.isTethysFile(fileToDelete)) {
+            this.deletetFiles.push(fileToDelete);
+        }
+    }
+    // Helper method to check if a file is of type TethysFile
+    private isTethysFile(file: any): file is TethysFile {
+        // Replace the following conditions with the actual properties of TethysFile
+        return file && typeof file.id === 'number'; // Example property check
+    }
+
+    public reactivateFile(key: number) {
+        // Check if the key is within the bounds of the items array
+        if (key < 0 || key >= this.deletetFiles.length) {
+            console.error('Invalid key provided for reactivate.');
+            return;
+        }
+        let fileToReactivate = this.deletetFiles[key];
+        // Remove the file from items
+        this.deletetFiles.splice(key, 1);
+
+        // Check if the file is of type TethysFile based on its properties
+        if (this.isTethysFile(fileToReactivate)) {
+            this.items.push(fileToReactivate);
+        }
     }
 
     public generateURL(file: TethysFile | File): string {
@@ -358,21 +442,21 @@ class FileUploadComponent extends Vue {
         // const blob = new Blob([file.fileData], { type: 'image/png'});
         // let fileSrc = file.fileData;
 
-        let localUrl: string = "";
+        let localUrl: string = '';
         if (file instanceof File) {
             localUrl = URL.createObjectURL(file as Blob);
         } else if (file.fileData) {
-            // const blob = new Blob([file.fileData]); 
+            // const blob = new Blob([file.fileData]);
             // localUrl = URL.createObjectURL(blob);
             const parsed = JSON.parse(file.fileData);
-            file.fileData = "";
+            file.fileData = '';
             // retrieve the original buffer of data
-            const buff = Buffer.from(parsed.blob, "base64");
+            const buff = Buffer.from(parsed.blob, 'base64');
             const blob = new Blob([buff], { type: 'application/octet-stream' });
             // file.blob = blob;
             localUrl = URL.createObjectURL(blob);
-            file.fileSrc = localUrl;           
-        }   
+            file.fileSrc = localUrl;
+        }
 
         // setTimeout(() => {
         //     URL.revokeObjectURL(localUrl);
@@ -380,8 +464,6 @@ class FileUploadComponent extends Vue {
         return localUrl;
     }
 
-
-
     // private async downloadFile(id: number): Promise<string> {
     //     const response = await axios.get<Blob>(`/api/download/${id}`, {
     //         responseType: 'blob',
@@ -393,9 +475,7 @@ class FileUploadComponent extends Vue {
     //     return url;
     // }
 
-
-
-    public getFileSize(file) {
+    public getFileSize(file: File) {
         if (file.size > 1024) {
             if (file.size > 1048576) {
                 return Math.round(file.size / 1048576) + 'mb';
@@ -421,7 +501,7 @@ class FileUploadComponent extends Vue {
     private _addFile(file: File) {
         // const reader = new FileReader();
         // reader.onload = (event) => {
-        //     const base64Data = (event.target as FileReader).result as string;           
+        //     const base64Data = (event.target as FileReader).result as string;
         //     this.items.push(test);
 
         // };
@@ -442,30 +522,23 @@ class FileUploadComponent extends Vue {
                 mime_type: file.type,
                 visible_in_frontdoor: false,
                 visible_in_oai: false,
-                fileSrc: file.type.match('image.*')? this.generateURL(file) : "",
+                fileSrc: file.type.match('image.*') ? this.generateURL(file) : '',
                 blob: file as Blob,
-                sort_order: (this.items.length + 1),
+                sort_order: this.items.length + 1,
             };
             // this.items.push(test);
             this.items[this.items.length] = test;
-        }
-        else {
+        } else {
             this.items.push(file);
         }
     }
 
-    // private async readBase64(blob: Blob): Promise<string> {
-    //     return new Promise<string>((resolve, reject) => {
-    //         const reader = new FileReader();
-    //         reader.onload = (event) => resolve((event.target as FileReader).result as string);
-    //         reader.onerror = reject;
-    //         reader.readAsDataURL(blob);
-    //     });
-    // }
-
     // use to check if a file is being dragged
-    private _hasFiles({ types = [] as Array<string> }) {
-        return types.indexOf('Files') > -1;
+    // private _hasFiles({ types = [] as Array<string> }) {
+    //     return types.indexOf('Files') > -1;
+    // }
+    private _hasFiles(dataTransfer: DataTransfer | null): boolean {
+        return dataTransfer ? dataTransfer.items.length > 0 : false;
     }
 }
 export default FileUploadComponent;

resources/js/Components/Icons/Refresh.vue

@@ -0,0 +1,27 @@
+<template>
+    <svg
+        class="pointer-events-none fill-current w-4 h-4 ml-auto"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 118.04 122.88">
+    >
+    <path 
+     class="pointer-events-none"
+    d="M16.08,59.26A8,8,0,0,1,0,59.26a59,59,0,0,1,97.13-45V8a8,8,0,1,1,16.08,0V33.35a8,8,0,0,1-8,8L80.82,43.62a8,8,0,1,1-1.44-15.95l8-.73A43,43,0,0,0,16.08,59.26Zm22.77,19.6a8,8,0,0,1,1.44,16l-10.08.91A42.95,42.95,0,0,0,102,63.86a8,8,0,0,1,16.08,0A59,59,0,0,1,22.3,110v4.18a8,8,0,0,1-16.08,0V89.14h0a8,8,0,0,1,7.29-8l25.31-2.3Z"
+    />
+    </svg>
+</template>
+
+<style scoped>
+.my-svg-component {
+    /* Scoped CSS here */
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+</style>

resources/js/Components/SearchCategoryAutocomplete.vue

@@ -295,35 +295,10 @@ async function handleInput(e: Event) {
 //     }
 // }
 
+// Function to execute the SPARQL query against the endpoint
 async function request(url: string, param: string) {
     try {
-        let query = encodeURIComponent(`
-        PREFIX skos:<http://www.w3.org/2004/02/skos/core#>
-        select distinct (?label as ?title) ?s (strlen(str(?label)) as ?strlen) 
-        where
-        {
-            VALUES ?n {"${sparqlEncode(param.toLowerCase())}"}
-            ?s skos:prefLabel ?label . 
-            filter(lang(?label)='${language.value}') 
-            filter(regex(?label, ?n, "i"))  # Case-insensitive regex match
-            }
-            order by  ?label ?strlen
-
-        `);
-        let response = await searchTerm(url + '?query=' + query + '&format=application/json');
-        error.value = '';
-        data.results = getResults(response);
-        // // this.results = res.data;
-        // // this.loading = false;
-    } catch (error) {
-        error.value = error.message;
-        // this.loading = false;
-    }
-}
-
-
-async function requestOriginal(url: string, param: string) {
-    try {
+        // Create SPARQL query to search for concepts by keyword
         let query = encodeURIComponent(`
         PREFIX dcterms:<http://purl.org/dc/terms/>
         PREFIX skos:<http://www.w3.org/2004/02/skos/core#>
@@ -331,37 +306,69 @@ async function requestOriginal(url: string, param: string) {
         WHERE {
             VALUES ?n {"${sparqlEncode(param.toLowerCase())}"}
             VALUES ?p { skos:prefLabel skos:altLabel }
-            ?s a skos:Concept; ?p ?lEN . FILTER((lang(?lEN)="en"))
+            
+            ?s a skos:Concept; ?p ?lEN . 
+            FILTER((lang(?lEN)="en"))
 
-            # FILTER(regex(str(?s), 'ncl/geoera/keyword'))
+            # New filter added to restrict the URIs to 'ncl/geoera/keyword'
+            FILTER(regex(str(?s), 'ncl/geoera/keyword'))
             
             OPTIONAL{?s ?p ?l . FILTER(lang(?l)="${language.value}")}
-            BIND(COALESCE(?l, ?lEN) AS ?L) . FILTER(regex(?L,?n,"i"))
+            BIND(COALESCE(?l, ?lEN) AS ?L) . 
+            FILTER(regex(?L, ?n, "i"))
 
+            # Exclude "(category)" in titles
             FILTER(!regex(?L, "\(category\)", "i"))
             FILTER(!regex(?L, "\(kategorie\)", "i")) 
 
             ?s skos:prefLabel ?plEN . FILTER((lang(?plEN)="en"))
+   
             OPTIONAL{?s skos:prefLabel ?pl . FILTER(lang(?pl)="${language.value}")}
             BIND(COALESCE(?pl, ?plEN) AS ?title)
-            BIND(CONCAT(STR(?p),"|",STR(?L)) AS ?text)
-            BIND(IF(?p=skos:prefLabel,1,2) AS ?sort)
+            BIND(CONCAT(STR(?p), "|", STR(?L)) AS ?text)
+            BIND(IF(?p = skos:prefLabel, 1, 2) AS ?sort)
         }
         ORDER BY ?sort
         LIMIT 100`);
 
-
-        let response = await searchTerm(url + '?query=' + query + '&format=application/json');
+        let response = await searchTerm(url + '?query=' + query + '&format=application/json'); // Execute query
         error.value = '';
-        data.results = getResults(response);
-        // // this.results = res.data;
-        // // this.loading = false;
+        data.results = getResults(response);  // Process results and store them
     } catch (error) {
-        error.value = error.message;
-        // this.loading = false;
+        error.value = error.message; // Handle any errors in fetching the data
     }
 }
 
+
+// async function request(url: string, param: string) {
+//     try {
+//         let query = encodeURIComponent(`
+//         PREFIX skos:<http://www.w3.org/2004/02/skos/core#>
+//         select distinct (?label as ?title) ?s (strlen(str(?label)) as ?strlen) 
+//         where
+//         {
+//             VALUES ?n {"${sparqlEncode(param.toLowerCase())}"}
+//             ?s skos:prefLabel ?label . 
+//             filter(lang(?label)='${language.value}') 
+//             filter(regex(?label, ?n, "i"))  # Case-insensitive regex match
+//             }
+//             order by  ?label ?strlen
+
+//         `);
+//         let response = await searchTerm(url + '?query=' + query + '&format=application/json');
+//         error.value = '';
+//         data.results = getResults(response);
+//         // // this.results = res.data;
+//         // // this.loading = false;
+//     } catch (error) {
+//         error.value = error.message;
+//         // this.loading = false;
+//     }
+// }
+
+
+
+
 async function searchTerm(term: string): Promise<any> {
     let res = await axios.get(term);
     // console.log(res.data);

resources/js/Components/TableKeywords.vue

@@ -57,7 +57,7 @@ const pagesList = computed(() => {
     return pagesList;
 });
 
-const removeItem = (key) => {
+const removeItem = (key: number) => {
     items.value.splice(key, 1);
 };
 

resources/js/Dataset.ts

@@ -56,6 +56,7 @@ export interface Dataset {
     subjects: Array<Subject>;
     references: Array<DatasetReference>;
     files: Array<TethysFile>;
+    filesToDelete?: Array<TethysFile>;
     // upload: TethysFile
 }
 

resources/js/Pages/Reviewer/Dataset/Index.vue

@@ -86,6 +86,9 @@ const formatServerState = (state: string) => {
             <NotificationBar v-if="flash.warning" color="warning" :icon="mdiAlertBoxOutline">
                 {{ flash.warning }}
             </NotificationBar>
+            <NotificationBar v-if="flash.error" color="danger" :icon="mdiAlertBoxOutline">
+                {{ flash.error }}
+            </NotificationBar>
 
             <!-- table -->
             <CardBox class="mb-6" has-table>

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

@@ -0,0 +1,91 @@
+<template>
+    <div class="flex flex-col h-screen p-4 bg-gray-100">
+        <header class="flex justify-between items-center mb-4">
+            <h1 class="text-xl font-bold">SKOS Browser</h1>
+            <div class="flex space-x-2">
+                <button @click="updateApp" title="Update the application">
+                    <img src="/Resources/Images/refresh.png" alt="Update" class="w-4 h-4" />
+                </button>
+                <button @click="showInfo" title="Info">
+                    <img src="/Resources/Images/info.png" alt="Info" class="w-4 h-4" />
+                </button>
+            </div>
+        </header>
+
+        <div class="bg-white shadow-md rounded-lg p-4 mb-6">
+            <h2 class="text-lg font-semibold">GBA-Thesaurus</h2>
+            <label class="block text-sm font-medium">Aktueller Endpoint:</label>
+            <!-- <TreeView :items="endpoints" @select="onEndpointSelected" /> -->
+        </div>
+
+        <div class="bg-white shadow-md rounded-lg p-4">
+            <h2 class="text-lg font-semibold">Konzept-Suche</h2>
+            <!-- <Autocomplete v-model="selectedConcept" :items="concepts" placeholder="Search for a concept" @change="onConceptSelected" /> -->
+            <div class="mt-4">
+                <h3 class="text-md font-medium">Ausgewähltes Konzept</h3>
+                <p>{{ selectedConcept.title }}</p>
+                <a :href="selectedConcept.uri" target="_blank" class="text-blue-500">URI</a>
+                <textarea
+                    v-model="selectedConcept.description"
+                    class="mt-2 w-full h-24 border rounded"
+                    placeholder="Description"
+                ></textarea>
+            </div>
+            <div class="mt-4">
+                <h3 class="text-md font-medium">Untergeordnete Konzepte</h3>
+                <!-- <LinkLabelList :items="narrowerConcepts" /> -->
+            </div>
+            <div class="mt-4">
+                <h3 class="text-md font-medium">Übergeordnete Konzepte</h3>
+                <!-- <LinkLabelList :items="broaderConcepts" /> -->
+            </div>
+            <div class="mt-4">
+                <h3 class="text-md font-medium">Verwandte Konzepte</h3>
+                <!-- <LinkLabelList :items="relatedConcepts" /> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import TreeView from './TreeView.vue'; // Assuming you have a TreeView component
+// import Autocomplete from './Autocomplete.vue'; // Assuming you have an Autocomplete component
+// import LinkLabelList from './LinkLabelList.vue'; // Assuming you have a LinkLabelList component
+
+export default {
+    components: {
+        // TreeView,
+        // Autocomplete,
+        // LinkLabelList,
+    },
+    data() {
+        return {
+            endpoints: [], // This should be populated with your data
+            concepts: [], // This should be populated with your data
+            selectedConcept: {},
+            narrowerConcepts: [], // Populate with data
+            broaderConcepts: [], // Populate with data
+            relatedConcepts: [], // Populate with data
+        };
+    },
+    methods: {
+        updateApp() {
+            // Handle app update logic
+        },
+        showInfo() {
+            // Handle showing information
+        },
+        onEndpointSelected(endpoint) {
+            // Handle endpoint selection
+        },
+        onConceptSelected(concept) {
+            this.selectedConcept = concept;
+            // Handle concept selection logic, e.g., fetching related concepts
+        },
+    },
+};
+</script>
+
+<style scoped>
+/* Add your styles here */
+</style>

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

@@ -965,6 +965,11 @@ Removes a selected keyword
 
                         <CardBox class="mb-6 shadow" has-table title="Dataset References" :header-icon="mdiPlusCircle"
                             v-on:header-icon-click="addReference">
+                             <!-- Message when no references exist -->
+                            <div v-if="form.references.length === 0" class="text-center py-4">
+                                <p class="text-gray-600">No references added yet.</p>
+                                <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
+                            </div>
                             <table class="table-fixed border-green-900" v-if="form.references.length">
                                 <thead>
                                     <tr>

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

@@ -440,7 +440,7 @@
                     </select> -->
                 </div>
 
-                <FileUploadComponent :files="form.files"></FileUploadComponent>
+                <FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete"></FileUploadComponent>
 
                 <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
                     {{ form.errors['files'].join(', ') }}
@@ -482,9 +482,6 @@
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import { useForm, Head, usePage } from '@inertiajs/vue3';
 import { computed, ComputedRef } from 'vue';
-// import { ref } from 'vue';
-// import { MainService } from '@/Stores/main';
-// import FormInput from '@/Components/FormInput.vue'; //          @/Components/FormInput.vue'
 import { Dataset, Title, Subject, TethysFile, Person, License } from '@/Dataset';
 import { stardust } from '@eidellev/adonis-stardust/client';
 
@@ -620,6 +617,7 @@ const mapId = 'test';
 //     // });
 // }
 
+props.dataset.filesToDelete = [];
 let form = useForm<Dataset>(props.dataset as Dataset);
 
 // const mainService = MainService();
@@ -681,10 +679,17 @@ const submit = async (): Promise<void> => {
                 // return MultipartFile for file upload
                 const options: FilePropertyBag = {
                     type: obj.type,
-                    lastModified: obj.lastModified
+                    lastModified: obj.lastModified,
+                    sortOrder: obj.sort_order,
                 };
-                // let file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
-                let file = new File([obj.blob], `${obj.label}`, options);
+                // const file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
+                // const metadata = JSON.stringify({ sort_order: obj.sort_order });
+                // const metadataBlob = new Blob([metadata + '\n'], { type: 'application/json' });
+                const file = new File([obj.blob], `${obj.label}`, options,);
+            
+                // const file = new File([obj.blob], `${obj.label}`, options);
+             
+                
                 // fileUploads[obj.sort_order] = file;
                 fileUploads.push(file);
             } else {
@@ -716,7 +721,17 @@ const submit = async (): Promise<void> => {
 
             rights: 'true',
         }))
-        .put(route);
+        // .put(route);
+        .put(route, {
+            onSuccess: () => {
+                // console.log(form.data());
+                // mainService.setDataset(form.data());
+                // formStep.value++;
+                // form.filesToDelete = [];
+                // Clear the array using splice
+               form.filesToDelete?.splice(0, form.filesToDelete.length);
+            },
+        });
 };
 
 const hasIdAttribute = (obj: License | number): obj is License => {

start/routes.ts

@@ -254,6 +254,10 @@ router.group(() => {
         .use([middleware.auth(), middleware.can(['dataset-delete'])]);
 
     router.get('/person', [PersonController, 'index']).as('person.index').use([middleware.auth()]);
+
+    router.get('/dataset/categorize', ({ inertia }: HttpContext) => {
+        return inertia.render('Submitter/Dataset/Category');
+})
    
 })
     .prefix('submitter');

start/rules/allowed_extensions_mimetypes.ts

@@ -0,0 +1,82 @@
+/*
+|--------------------------------------------------------------------------
+| Preloaded File - node ace make:preload rules/allowedExtensionsMimetypes
+|--------------------------------------------------------------------------
+|*/
+
+import { FieldContext } from '@vinejs/vine/types';
+import vine from '@vinejs/vine';
+// import { VineString } from '@vinejs/vine';
+import { VineMultipartFile, isBodyParserFile } from '#providers/vinejs_provider';
+import type { MultipartFile } from '@adonisjs/core/bodyparser';
+// import db from '@adonisjs/lucid/services/db';
+import MimeType from '#models/mime_type';
+
+/**
+ * Options accepted by the unique rule
+ */
+// type Options = {
+//     mainLanguageField: string;
+//     typeField: string;
+// };
+type Options = {
+    // size: string | number;
+    // extnames: string[];
+    clientNameSizeLimit: number;
+};
+
+async function allowedMimetypeExtensions(file: VineMultipartFile | unknown, options: Options | unknown, field: FieldContext) {
+    // if (typeof value !== 'string' && typeof value != 'number') {
+    //     return;
+    // }
+
+    if (!isBodyParserFile(file)) {
+        return;
+    }
+    const validatedFile = file as MultipartFile;
+    const mimeType = validatedFile?.headers['content-type']; // Get MIME type from the file
+    const fileExtension = validatedFile?.extname?.toLocaleLowerCase() as string; // Get file extension from the file
+
+    // validate if file extension is allowed in combination with mimetype
+    const mimeRecord = await MimeType.query().select('file_extension').where('name', mimeType).andWhere('enabled', true).first();
+
+    if (!mimeRecord) {
+        const allowedMimetypes = await MimeType.query().select('name').where('enabled', true);
+        // Transform allowed MIME types to a concatenated string
+        const allowedMimetypesString = allowedMimetypes.map((mime) => mime.name).join(', ');
+        // throw new Error('Invalid MIME type');
+        // Report error with the concatenated allowed MIME types
+        field.report(
+            `Invalid MIME type ${mimeType}. Allowed MIME types are: ${allowedMimetypesString}`,
+            'allowedMimetypeExtensions',
+            field,
+        );
+    } else {
+        const allowedExtensions = mimeRecord.file_extension.split('|');
+        // Validate if the file's extension is in the allowed extensions
+        if (!allowedExtensions.includes(fileExtension)) {
+            //throw new Error(`File extension ${fileExtension} is not allowed for MIME type ${mimeType}`);
+            field.report(
+                `File extension ${fileExtension} is not allowed for MIME type ${mimeType}. Allowed extensions are: ${mimeRecord.file_extension}`,
+                'allowedMimetypeExtensions', 
+                field
+            );
+        }
+        // if (validatedFile.clientName.length > options.clientNameSizeLimit) {
+
+        //     field.report(`Filename length should be less or equal than ${options.clientNameSizeLimit} characters`, 'filenameLength', field);
+        // }
+    }
+}
+
+export const allowedMimetypeExtensionsRule = vine.createRule(allowedMimetypeExtensions);
+
+declare module '#providers/vinejs_provider' {
+    interface VineMultipartFile {
+        allowedMimetypeExtensions(options?: Options): this;
+    }
+}
+
+VineMultipartFile.macro('allowedMimetypeExtensions', function (this: VineMultipartFile, options: Options) {
+    return this.use(allowedMimetypeExtensionsRule(options));
+});

start/rules/dependent_array_min_length.ts

@@ -0,0 +1,61 @@
+/*
+|--------------------------------------------------------------------------
+| Preloaded File - node ace make:preload rules/dependentArrayMinLength
+|--------------------------------------------------------------------------
+|*/
+
+import { FieldContext } from '@vinejs/vine/types';
+import vine, { VineArray } from '@vinejs/vine';
+import { SchemaTypes } from '@vinejs/vine/types';
+
+/**
+ * Options accepted by the dependentArrayMinLength rule
+ */
+type Options = {
+    min: number;
+    dependentArray: string;
+};
+
+async function dependentArrayMinLength(value: unknown, options: Options, field: FieldContext) {
+    const fileInputs = field.data[options.dependentArray]; // Access the dependent array
+    const isArrayValue = Array.isArray(value);
+    const isArrayFileInputs = Array.isArray(fileInputs);
+
+    if (isArrayValue && isArrayFileInputs) {
+        if (value.length >= options.min) {
+            return true; // Valid if the main array length meets the minimum
+        } else if (value.length === 0 && fileInputs.length >= options.min) {
+            return true; // Valid if the main array is empty and the dependent array meets the minimum
+        } else {
+            field.report(
+                `At least {{ min }} item for {{field}} field must be defined`,
+                'array.dependentArrayMinLength',
+                field,
+                options,
+            );
+        }
+    } else {
+        // Report if either value or dependentArray is not an array
+        field.report(
+            `Both the {{field}} field and dependent array {{dependentArray}} must be arrays.`,
+            'array.dependentArrayMinLength',
+            field,
+            options,
+        );
+    }
+
+    return false; // Invalid if none of the conditions are met
+}
+
+export const dependentArrayMinLengthRule = vine.createRule(dependentArrayMinLength);
+
+// Extend the VineArray interface with the same type parameters
+declare module '@vinejs/vine' {
+    interface VineArray<Schema extends SchemaTypes> {
+        dependentArrayMinLength(options: Options): this;
+    }
+}
+
+VineArray.macro('dependentArrayMinLength', function <Schema extends SchemaTypes>(this: VineArray<Schema>, options: Options) {
+    return this.use(dependentArrayMinLengthRule(options));
+});