- daraggable crators and contributors inside Pages/Submitter/Dataset/Create.Vue

- typescript and prettier updates
- FileUpload component with dark mode and dragable uploads
- comment FontFamily in tailwind.config.js

app/Controllers/Http/Submitter/DatasetController.ts

@@ -274,19 +274,27 @@ export default class DatasetController {
                     language: schema.string({ trim: true }, [rules.minLength(2), rules.maxLength(255)]),
                 }),
             ),
-            file: schema.file({
+            // file: schema.file({
+            //     size: '100mb',
+            //     extnames: ['jpg', 'gif', 'png'],
+            // }),
+            files: schema.array([rules.minLength(1)]).members(
+                schema.file({
                     size: '100mb',
                     extnames: ['jpg', 'gif', 'png'],
                 }),
-            upload: schema.object().members({
-                label: schema.string({ trim: true }, [rules.maxLength(255)]),
+            ),
+            // upload: schema.object().members({
+            //     label: schema.string({ trim: true }, [rules.maxLength(255)]),
 
-                // label: schema.string({ trim: true }, [
-                //     // rules.minLength(3),
-                //     // rules.maxLength(255),
-                // ]),
-            }),
+            //     // label: schema.string({ trim: true }, [
+            //     //     // rules.minLength(3),
+            //     //     // rules.maxLength(255),
+            //     // ]),
+            // }),
         });
+
+        // const coverImages = request.file('files');
         // node ace make:validator CreateUser
         try {
             //  Step 2 - Validate request body against  the schema
@@ -298,9 +306,8 @@ export default class DatasetController {
             // return response.badRequest(error.messages);
             throw error;
         }
-        const coverImage = request.file('file');
+        const coverImage = request.files('files')[0];
         if (coverImage) {
-            
             // clientName: 'Gehaltsschema.png'
             // extname: 'png'
             // fieldName: 'file'
@@ -309,12 +316,15 @@ export default class DatasetController {
             //const datasetFolder = 'files/' . dataset->id;
 
             // await coverImage.moveToDisk('./')
-            await coverImage.moveToDisk('/test_dataset', {
+            await coverImage.moveToDisk(
+                '/test_dataset2',
+                {
                     name: 'renamed-file-name.jpg',
                     overwrite: true, // overwrite in case of conflict
-            },'local');
+                },
+                'local',
+            );
             // let path = coverImage.filePath;
-
         }
         // const user = await User.create(input);
         // if (request.input('roles')) {
@@ -362,7 +372,7 @@ export default class DatasetController {
         'subjects.*.type.required': 'keyword type is required',
         'subjects.*.language.required': 'language of keyword is required',
 
-        'file.size': 'file size is to big',
-        'file.extnames': 'file extension is not supported',
+        'files.*.size': 'file size is to big',
+        'files.extnames': 'file extension is not supported',
     };
 }

app/Models/Dataset.ts

@@ -33,7 +33,7 @@ export default class Dataset extends BaseModel {
 
 
 	@column.dateTime({ columnName: 'server_date_published' })
-	public ServerDatePublished: DateTime;
+	public serverDatePublished: DateTime;
 
 	@column.dateTime({ autoCreate: true, columnName: 'created_at' })
 	public createdAt: DateTime;

commands/ValidateChecksum.ts

@@ -2,7 +2,7 @@ import { BaseCommand } from '@adonisjs/core/build/standalone';
 import crypto from 'crypto';
 import fs from 'fs';
 // import Config from '@ioc:Adonis/Core/Config';
-import Logger from '@ioc:Adonis/Core/Logger'
+import Logger from '@ioc:Adonis/Core/Logger';
 
 export default class ValidateChecksum extends BaseCommand {
     /**
@@ -56,9 +56,7 @@ export default class ValidateChecksum extends BaseCommand {
             }
 
             if (hashValue['md5'] == calculatedMd5FileHash) {
-                Logger.info(
-                    `File id ${file.id}: stored md5 checksum: ${calculatedMd5FileHash}, control md5 checksum: ${hashValue['md5']}`,
-                );
+                Logger.info(`File id ${file.id}: stored md5 checksum: ${calculatedMd5FileHash}, control md5 checksum: ${hashValue['md5']}`);
             } else {
                 Logger.error(
                     `File id ${file.id}: stored md5 checksum: ${calculatedMd5FileHash}, control md5 checksum: ${hashValue['md5']}`,

config/app.ts

@@ -158,7 +158,6 @@ export const logger: LoggerConfig = {
         paths: ['password', '*.password'],
     },
 
-
     /*
   |--------------------------------------------------------------------------
   | Pretty print

config/bodyparser.ts

@@ -32,12 +32,7 @@ const bodyParserConfig: BodyParserConfig = {
         encoding: 'utf-8',
         limit: '1mb',
         strict: true,
-        types: [
-            'application/json',
-            'application/json-patch+json',
-            'application/vnd.api+json',
-            'application/csp-report',
-        ],
+        types: ['application/json', 'application/json-patch+json', 'application/vnd.api+json', 'application/csp-report'],
     },
 
     /*

contracts/validator.ts

@@ -1,9 +1,5 @@
 declare module '@ioc:Adonis/Core/Validator' {
     interface Rules {
-      translatedLanguage(
-        mainLanguageField: string,
-        typeField: string
-    ): Rule
+        translatedLanguage(mainLanguageField: string, typeField: string): Rule;
     }
-  }
-  
+}

package.json

@@ -63,10 +63,10 @@
     "pinia": "^2.0.30",
     "pino-pretty": "^10.0.0",
     "postcss-loader": "^7.0.2",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.8",
     "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.1.3",
     "vue": "^3.2.47",
     "vue-loader": "^17.0.1",
     "youch": "^3.2.0",
@@ -96,6 +96,7 @@
     "proxy-addr": "^2.0.7",
     "reflect-metadata": "^0.1.13",
     "source-map-support": "^0.5.21",
-    "vue-facing-decorator": "^2.1.13"
+    "vue-facing-decorator": "^2.1.13",
+    "vuedraggable": "^4.1.0"
   }
 }

resources/js/Components/FileUpload.vue

@@ -1,7 +1,7 @@
 <template>
-    <div
+    <section
         aria-label="File Upload Modal"
-        class="relative h-full flex flex-col bg-white shadow-xl rounded-md"
+        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"
@@ -35,7 +35,7 @@
         </div>
 
         <!-- scroll area -->
-        <div class="h-full overflow-auto p-8 w-full h-full flex flex-col">
+        <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>
@@ -48,7 +48,7 @@
             <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-teal-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                    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"
                 >
                     <div class="flex flex-col items-center justify-center pt-5 pb-6">
                         <svg
@@ -71,14 +71,15 @@
                         </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" /> -->
+                    <input id="dropzone-file" type="file" class="hidden" @change="onChangeFile" />
                 </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">
-                <li
+            <!-- <ul id="gallery" class="flex flex-1 flex-wrap -m-1"> -->
+            <draggable id="gallery" tag="ul" class="flex flex-1 flex-wrap -m-1" v-model="files" item-key="sorting">
+                <!-- <li
                     v-if="files.length == 0"
                     id="empty"
                     class="h-full w-full text-center flex flex-col items-center justify-center items-center"
@@ -105,69 +106,87 @@
                         </g>
                     </svg>
                     <span class="text-small text-gray-500">No files selected</span>
-                </li>
-                <li v-for="(file, index) in files" :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">
+                </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">
                         <article
-                        v-if="file.type.match('image.*')"
+                            v-if="element.type.match('image.*')"
                             tabindex="0"
-                        class="group hasImage w-full h-full rounded-md bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm"
+                            class="bg-gray-50 group hasImage w-full h-full rounded-md cursor-pointer relative text-transparent hover:text-white shadow-sm"
                         >
                             <img
-                            :alt="file.name"
-                            :src="generateURL(file)"
-                            class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed"
+                                :alt="element.name"
+                                :src="generateURL(element)"
+                                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">{{ file.name }}</h1>
-                            <div class="flex">
-                                <p class="p-1 size text-xs">{{ getFileSize(file) }}</p>
+                            <!-- <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)"
                                 >
-                                    <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 24 24"
+                                    <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">
+                                <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">{{ index }}</p>
+                                    <button
+                                        class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md"
+                                        @click="removeFile(index)"
                                     >
-                                        <path
-                                            class="pointer-events-none"
-                                            d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"
-                                        />
-                                    </svg>
+                                        <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>
-                    <article v-else tabindex="0" class="group w-full h-full rounded-md bg-gray-100 cursor-pointer relative shadow-sm">
+                        <!-- :class="errors && errors[`files.${index}`] ? 'bg-red-400' : 'bg-gray-100'" -->
+                        <article v-else 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 group-hover:text-blue-800">{{ file.name }}</h1>
+                                <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(file) }}</p>
+                                    <p class="p-1 size text-xs text-gray-700">{{ getFileSize(element) }}</p>
+                                    <p class="p-1 size text-xs text-gray-700">{{ index }}</p>
                                     <button
                                         class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
                                         @click="removeFile(index)"
                                     >
-                                    <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 24 24"
-                                    >
-                                        <path
-                                            class="pointer-events-none"
-                                            d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"
-                                        />
-                                    </svg>
+                                        <DeleteIcon></DeleteIcon>
                                     </button>
                                 </div>
                             </section>
                         </article>
                     </li>
+                </template>
+            </draggable>
+            <!-- </ul> -->
+
+            <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>
+                    <p>{{ fileError.join(', ') }}</p>
+                </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 -->
@@ -180,37 +199,77 @@
                 Clear
             </button>
         </footer>
-    </div>
+    </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
-import BaseButton from './BaseButton.vue';
-// import { mdiPlus, mdiMinus } from '@mdi/js';
-import { mdiTrashCan } from '@mdi/js';
+// import BaseButton from './BaseButton.vue';
+import { usePage } from '@inertiajs/vue3';
+import DeleteIcon from '@/Components/Icons/Delete.vue';
+// import { Page, PageProps, Errors, ErrorBag } from '@inertiajs/inertia';
+import Draggable from 'vuedraggable';
+import { TestFile } from '@/Dataset';
+
+interface IDictionary {
+    [index: string]: Array<string>;
+}
+export declare type ErrorBag1 = Record<string, Array<string>>;
+interface InteriaPage {
+    // extends Page<PageProps> {
+    [key: string]: boolean | number | string | Object | (string | null);
+    errors: IDictionary;
+    props: {
+        // [key: string]: Array<string>;
+        errors: IDictionary;
+        auth: {
+            user: {
+                name: string;
+            };
+        };
+        // laravelVersion: string;
+        // phpVersion: string;
+    };
+}
 
 @Component({
     name: 'file-upload',
     components: {
-        BaseButton,
-        mdiTrashCan,
+        DeleteIcon,
+        Draggable,
     },
 })
 export default class FileUploadComponent extends Vue {
-    // mdiPlus = mdiPlus;
-    // mdiMinus = mdiMinus;
-
     /**
      * Connect map id.
      */
-    @Prop() public mapId: string;
+    //  @Prop({
+    // 	type: Object,
+    // 	default: () => ({}),
+    // })
+    // errors: IErrorMessage;
 
     @Ref('overlay') overlay: HTMLDivElement;
 
     private counter: number = 0;
-    files: Array<File> = [];
+    // @Prop() files: Array<TestFile>;
+
+    @Prop({
+        type: Array<TestFile>,
+        default: [],
+    })
+    modelValue: Array<TestFile>;
     // mdiTrashCan = mdiTrashCan;
 
+    get files() {
+        return this.modelValue;
+    }
+    set files(value: Array<TestFile>) {
+        // this.modelValue = value;
+        this.modelValue.length = 0;
+        this.modelValue.push(...value);
+    }
+
     dragEnterHandler(e) {
         e.preventDefault();
         if (!this._hasFiles(e.dataTransfer)) {
@@ -240,12 +299,48 @@ export default class FileUploadComponent extends Vue {
     dropHandler(event) {
         event.preventDefault();
         for (const file of event.dataTransfer.files) {
+            // let fileName = String(file.name.replace(/\.[^/.]+$/, ''));
+            // file.label = fileName;
             this._addFile(file);
         }
         this.overlay.classList.remove('draggedover');
         this.counter = 0;
     }
 
+    onChangeFile(event) {
+        event.preventDefault();
+        // let uploadedFile = event.target.files[0];
+
+        // let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
+        // form.file = event.target.files[0];
+        // form.upload.label = fileName;
+        // console.log(file.file);
+        for (const file of event.target.files) {
+            // let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
+            // file.label = fileName;
+            this._addFile(file);
+        }
+        // this.overlay.classList.remove('draggedover');
+        this.counter = 0;
+    }
+
+    get errors(): IDictionary {
+        if (usePage().props.errors) {
+            // return usePage().props.errors;
+            return usePage<InteriaPage>().props.errors;
+        } else {
+            return {};
+        }
+    }
+
+    get hasErrors(): boolean {
+        return Object.keys(this.errors).length > 0;
+    }
+
+    get fileErrors() {
+        return Object.fromEntries(Object.entries(this.errors).filter(([key]) => key.startsWith('file')));
+    }
+
     clearAllFiles(event) {
         event.preventDefault();
         this.files.splice(0);
@@ -255,16 +350,6 @@ export default class FileUploadComponent extends Vue {
         this.files.splice(key, 1);
     }
 
-    // check if file is of type image and prepend the initialied
-    // template to the target element
-    private _addFile(file) {
-        // const isImage = file.type.match('image.*');
-        // const objectURL = URL.createObjectURL(file);
-
-        // this.files[objectURL] = file;
-        this.files.push(file);
-    }
-
     generateURL(file) {
         let fileSrc = URL.createObjectURL(file);
         setTimeout(() => {
@@ -285,6 +370,18 @@ export default class FileUploadComponent extends Vue {
         }
     }
 
+    // check if file is of type image and prepend the initialied
+    // template to the target element
+    private _addFile(file: TestFile) {
+        // const isImage = file.type.match('image.*');
+        // const objectURL = URL.createObjectURL(file);
+
+        // this.files[objectURL] = file;
+        // let test: TethysFile = { upload: file, label: "dfdsfs", sorting: 0 };
+        // file.sorting = this.files.length;
+        this.files.push(file);
+    }
+
     // use to check if a file is being dragged
     private _hasFiles({ types = [] as Array<string> }) {
         return types.indexOf('Files') > -1;
@@ -300,6 +397,10 @@ export default class FileUploadComponent extends Vue {
     background: rgba(5, 5, 5, 0.45);
 }
 
+section.hasError {
+    background-color: rgba(5, 5, 5, 0.4);
+}
+
 #overlay p,
 i {
     opacity: 0;

resources/js/Components/Icons/Delete.vue

@@ -0,0 +1,40 @@
+<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 24 24"
+    >
+        <path
+            class="pointer-events-none"
+            d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"
+        />
+    </svg>
+</template>
+
+<!-- <script>
+export default {
+    name: 'Icon_Mandatory',
+};
+</script> -->
+
+<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;
+}
+
+/* path,
+circle {
+    stroke: #ffffff;
+    stroke-width: 6px;
+    fill: none;
+} */
+</style>

resources/js/Components/TablePersons.vue

@@ -11,6 +11,7 @@ import BaseButton from '@/Components/BaseButton.vue';
 import UserAvatar from '@/Components/UserAvatar.vue';
 // import Person from 'App/Models/Person';
 import { Person } from '@/Stores/main';
+import Draggable from 'vuedraggable';
 
 const props = defineProps({
     checkable: Boolean,
@@ -22,7 +23,20 @@ const props = defineProps({
 
 const styleService = StyleService();
 // const mainService = MainService();
-const items = computed(() => props.persons);
+// const items = computed(() => props.persons);
+
+const items = computed({
+    get() {
+        return props.persons;
+    },
+    // setter
+    set(value) {
+        // Note: we are using destructuring assignment syntax here.
+       
+       props.persons.length = 0;
+       props.persons.push(...value);
+    },
+});
 
 // const isModalActive = ref(false);
 // const isModalDangerActive = ref(false);
@@ -30,7 +44,18 @@ const perPage = ref(5);
 const currentPage = ref(0);
 // const checkedRows = ref([]);
 
-const itemsPaginated = computed(() => items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1)));
+const itemsPaginated = computed({
+    get() {
+        return items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1));
+    },
+    // setter
+    set(value) {
+        // Note: we are using destructuring assignment syntax here.
+       
+       props.persons.length = 0;
+       props.persons.push(...value);
+    },
+});
 
 const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
 
@@ -93,6 +118,7 @@ const removeAuthor = (key) => {
         <thead>
             <tr>
                 <!-- <th v-if="checkable" /> -->
+                <th scope="col">ID</th>
                 <th class="hidden lg:table-cell"></th>
                 <th>Name</th>
                 <th>Email</th>
@@ -102,17 +128,21 @@ const removeAuthor = (key) => {
                 <th />
             </tr>
         </thead>
-        <tbody>
-            <tr v-for="(client, index) in itemsPaginated" :key="client.id">
+        <!-- <tbody> -->
+        <!-- <tr v-for="(client, index) in itemsPaginated" :key="client.id"> -->
+        <draggable id="galliwasery" tag="tbody" v-model="items" item-key="id">
+            <template #item="{ index, element }">
+                <tr>
+                    <td scope="row">{{ index + 1 }}</td>
                     <!-- <TableCheckboxCell v-if="checkable" @checked="checked($event, client)" /> -->
                     <td class="border-b-0 lg:w-6 before:hidden hidden lg:table-cell">
-                    <UserAvatar :username="client.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
+                        <UserAvatar :username="element.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
                     </td>
                     <td data-label="Name">
-                    {{ client.name }}
+                        {{ element.name }}
                     </td>
                     <td data-label="Email">
-                    {{ client.email }}
+                        {{ element.email }}
                     </td>
                     <!-- <td data-label="Name Type">
                     {{ client.name_type }}
@@ -126,7 +156,7 @@ const removeAuthor = (key) => {
 					</progress>
 				</td> -->
                     <td data-label="Created" class="lg:w-1 whitespace-nowrap">
-                    <small class="text-gray-500 dark:text-slate-400" :title="client.created_at">{{ client.created_at }}</small>
+                        <small class="text-gray-500 dark:text-slate-400" :title="element.created_at">{{ element.created_at }}</small>
                     </td>
                     <td class="before:hidden lg:w-1 whitespace-nowrap">
                         <BaseButtons type="justify-start lg:justify-end" no-wrap>
@@ -135,11 +165,13 @@ const removeAuthor = (key) => {
                         </BaseButtons>
                     </td>
                 </tr>
-        </tbody>
+            </template>
+        </draggable>
+        <!-- </tbody> -->
     </table>
     <!-- :class="[ pagesList.length > 1 ? 'block' : 'hidden']" -->
-    <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800" >
-        <BaseLevel>
+    <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
+        <!-- <BaseLevel>
             <BaseButtons>
                 <BaseButton
                     v-for="page in pagesList"
@@ -152,6 +184,6 @@ const removeAuthor = (key) => {
                 />
             </BaseButtons>
             <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
-        </BaseLevel>
+        </BaseLevel> -->
     </div>
 </template>

resources/js/Dataset.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue';
 
 export interface Dataset {
-    [key: string]: string | Ref<string>| boolean | Array<Title> |  Array<Description>|  Array<Person> | number | (IErrorMessage | undefined) | Coverage | TethysFile | File;
+    [key: string]: string | Ref<string>| boolean | Array<Title> |  Array<Description>|  Array<Person> | number | (IErrorMessage | undefined) | Coverage | Array<File>;
 	language: Ref<string>;
 	// licenses: Array<number>;
 	rights: boolean;
@@ -17,15 +17,26 @@ export interface Dataset {
     errors?: IErrorMessage;
 	// async (user): Promise<void>;
     subjects: Array<Subject>,
-    file: File | undefined,
-    upload: TethysFile
+    files: Array<TestFile> | undefined,
+    // upload: TethysFile
 }
 
-export interface TethysFile {    
+
+/** Provides information about files and allows JavaScript in a web page to access their content. */
+export interface TestFile extends Blob {
+    readonly lastModified: number;
+    readonly name: string;
+    readonly webkitRelativePath: string;
     label: string,
     sorting: number,
 }
 
+// export interface TethysFile {    
+//     label: string,
+//     sorting: number,
+//     upload: File,
+// }
+
 export interface Subject {
     // id: number;
     language: string 

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

@@ -127,8 +127,8 @@ if (Object.keys(mainService.dataset).length == 0) {
             { value: '', type: 'uncontrolled', language: language.value },
             { value: '', type: 'uncontrolled', language: language.value },
         ],
-        file: undefined,
-        upload: { label: 'test', sorting: 0 },
+        files: [],
+        // upload: { label: 'test', sorting: 0 },
     };
     // Set the form's current values as the new defaults...
     // mainService.setDataset(dataset, language);
@@ -151,8 +151,8 @@ if (Object.keys(mainService.dataset).length == 0) {
         embargo_date: mainService.dataset.embargo_date,
         coverage: mainService.dataset.coverage,
         subjects: mainService.dataset.subjects,
-        file: mainService.dataset.file,
-        upload: mainService.dataset.upload,
+        files: mainService.dataset.files,
+        // upload: mainService.dataset.upload,
     };
     for (let index in mainService.dataset.titles) {
         let title: Title = mainService.dataset.titles[index];
@@ -217,7 +217,7 @@ watch(depth, (currentValue) => {
 // let time= "no_time";
 
 const isModalActive = ref(false);
-const formStep = ref(4);
+const formStep = ref(1);
 
 const mapOptions: MapOptions = {
     center: [48.208174, 16.373819],
@@ -281,7 +281,7 @@ const submit = async () => {
             rights: form.rights && form.rights == true ? 'true' : 'false',
         }))
         .post(route, {
-            forceFormData: true,
+            // forceFormData: true,
             onSuccess: () => {
                 // console.log(form.data());
                 // mainService.clearDataset();
@@ -324,7 +324,7 @@ const submit = async () => {
                         { value: '', type: 'uncontrolled', language: language.value },
                         { value: '', type: 'uncontrolled', language: language.value },
                     ],
-                    file: undefined,
+                    files: [] as Array<File>,
                     upload: { label: 'test', sorting: 0 },
                 };
                 form = useForm<Dataset>(dataset);
@@ -388,15 +388,15 @@ const addKeyword = () => {
     form.subjects.push(newSubject);
 };
 
-const onChangeFile = (event) => {
-    // let uploadedFile = event.target.files[0];
+// const onChangeFile = (event) => {
+//     // let uploadedFile = event.target.files[0];
 
-    let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
-    form.file = event.target.files[0];
-    form.upload.label = fileName;
-    // form.upload = file;
-    // console.log(file.file);
-};
+//     let fileName = String(event.target.files[0].name.replace(/\.[^/.]+$/, ''));
+//     form.file = event.target.files[0];
+//     form.upload.label = fileName;
+//     // form.upload = file;
+//     // console.log(file.file);
+// };
 /*
         Removes a selected keyword
         */
@@ -1115,7 +1115,7 @@ const onChangeFile = (event) => {
                             </p>                           
                         </div> -->                    
 
-                        <FileUploadComponent></FileUploadComponent>
+                        <FileUploadComponent v-model="form.files"></FileUploadComponent>
 
                         <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['file'])">
                             {{ form.errors['file'].join(', ') }}

resources/js/notiwind.ts

@@ -1,16 +1,12 @@
 // notiwind.ts
-import {
-    createNotifier,
-    NotificationGroup,
-    defineNotificationComponent,
-  } from "notiwind";
+import { createNotifier, NotificationGroup, defineNotificationComponent } from 'notiwind';
 
-  export type NotificationSchema = {
+export type NotificationSchema = {
     type: string;
     title?: string;
     text: string;
-  };
+};
 
-  export const notify = createNotifier<NotificationSchema>();
-  export const Notification = defineNotificationComponent<NotificationSchema>();
-  export { NotificationGroup };
+export const notify = createNotifier<NotificationSchema>();
+export const Notification = defineNotificationComponent<NotificationSchema>();
+export { NotificationGroup };

start/routes.ts

@@ -149,9 +149,7 @@ Route.group(() => {
         .as('dataset.third.step')
         .middleware(['auth', 'can:dataset-submit']);
 
-    Route.post('/dataset/submit', 'DatasetController.store')
-        .as('dataset.submit')
-        .middleware(['auth', 'can:dataset-submit']);
+    Route.post('/dataset/submit', 'DatasetController.store').as('dataset.submit').middleware(['auth', 'can:dataset-submit']);
 
     // Route.get('/user/:id', 'UsersController.show').as('user.show').where('id', Route.matchers.number());
     // Route.get('/user/:id/edit', 'UsersController.edit').as('user.edit').where('id', Route.matchers.number());

tailwind.config.js

@@ -15,10 +15,10 @@ module.exports = {
                 'primary': '#22C55E',
                 'primary-dark': '#DCFCE7',
             },
-            fontFamily: {
-                sans: ['Inter', ...defaultTheme.fontFamily.sans],
-                logo: ['Archivo Black', ...defaultTheme.fontFamily.sans],
-            },
+            // fontFamily: {
+            //     sans: ['Inter', ...defaultTheme.fontFamily.sans],
+            //     logo: ['Archivo Black', ...defaultTheme.fontFamily.sans],
+            // },
             zIndex: {
                 '-1': '-1',
             },

webpack.config.js

@@ -274,8 +274,8 @@ Encore.addLoader({
 		// loaders: {
 		// 	ts: 'ts-loader',
 		// },
-		// cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
-		// cacheIdentifier: 'f930df3e',
+		cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
+		cacheIdentifier: 'f930df3e',
 		babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
 	},
 })