- 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

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,19 +71,20 @@
                         </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"
                 >
-                    <svg                       
+                    <svg
                         class="w-20 h-20 mb-3 text-gray-400"
                         version="1.1"
                         id="Capa_1"
@@ -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">
-                    <article
-                        v-if="file.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"
-                    >
-                        <img
-                            :alt="file.name"
-                            :src="generateURL(file)"
-                            class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed"
-                        />
-                        <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>
+                </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="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="generateURL(element)"
+                                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)"
                                 >
-                                    <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>
-                    <article v-else tabindex="0" class="group w-full h-full rounded-md bg-gray-100 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>
-                            <div class="flex">
-                                <p class="p-1 size text-xs text-gray-700">{{ getFileSize(file) }}</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"
+                            </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>
-                                </button>
-                            </div>
-                        </section>
-                    </article>
-                </li>
-            </ul>
+                                        <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>
+                        <!-- :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 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">{{ index }}</p>
+                                    <button
+                                        class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
+                                        @click="removeFile(index)"
+                                    >
+                                        <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,44 +128,50 @@ const removeAuthor = (key) => {
                 <th />
             </tr>
         </thead>
-        <tbody>
-            <tr v-for="(client, index) in itemsPaginated" :key="client.id">
-                <!-- <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" />
-                </td>
-                <td data-label="Name">
-                    {{ client.name }}
-                </td>
-                <td data-label="Email">
-                    {{ client.email }}
-                </td>
-                <!-- <td data-label="Name Type">
+        <!-- <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="element.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
+                    </td>
+                    <td data-label="Name">
+                        {{ element.name }}
+                    </td>
+                    <td data-label="Email">
+                        {{ element.email }}
+                    </td>
+                    <!-- <td data-label="Name Type">
                     {{ client.name_type }}
                 </td> -->
-                <!-- <td data-label="Orcid">
+                    <!-- <td data-label="Orcid">
                     {{ client.identifier_orcid }}
                 </td> -->
-                <!-- <td data-label="Progress" class="lg:w-32">
+                    <!-- <td data-label="Progress" class="lg:w-32">
 					<progress class="flex w-2/5 self-center lg:w-full" max="100" v-bind:value="client.progress">
 						{{ client.progress }}
 					</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>
-                </td>
-                <td class="before:hidden lg:w-1 whitespace-nowrap">
-                    <BaseButtons type="justify-start lg:justify-end" no-wrap>
-                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
-                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeAuthor(index)" />
-                    </BaseButtons>
-                </td>
-            </tr>
-        </tbody>
+                    <td data-label="Created" class="lg:w-1 whitespace-nowrap">
+                        <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>
+                            <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
+                            <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeAuthor(index)" />
+                        </BaseButtons>
+                    </td>
+                </tr>
+            </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>