- dark modus for geoera search (keywords)

- enum ContributorTypes
- add contributor types for creating a dataset
- npm updates
- tailwind styling for _table.css
- adapting migration code for dataset_11_subject.ts

resources/js/Components/SearchCategoryAutocomplete.vue

@@ -235,7 +235,7 @@ const inputElClass = computed(() => {
     // dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
     const base = [
         'block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg',
-        'dark:placeholder-gray-400',
+        'dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500',
         'h-12',
         props.borderless ? 'border-0' : 'border',
         props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',

resources/js/Components/TableKeywords.vue

@@ -20,6 +20,10 @@ const props = defineProps({
         type: Array<Subject>,
         default: () => [],
     },
+    subjectTypes: {
+        type: Object,
+        default: () => ({}),
+    },
     errors: {
         type: Object,
         default: () => ({}),
@@ -102,73 +106,59 @@ const removeItem = (key) => {
             <tr>
                 <!-- <th v-if="checkable" /> -->
                 <!-- <th class="hidden lg:table-cell"></th> -->
-                <th>Type</th>
-                <th>Value</th>
-                <th>Language</th>
+                <th scope="col">Type</th>
+                <th scope="col">Value</th>
+                <th scope="col">Language</th>
 
-                <th />
+                <th scope="col" />
             </tr>
         </thead>
         <tbody>
-            <tr v-for="(item, index) in itemsPaginated" :key="index" class="bg-gray-50">
+            <tr v-for="(item, index) in itemsPaginated" :key="index">
                 <!-- <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.value" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
                 </td> -->
-                <td data-label="Type">
-                    <FormControl
-                        required
-                        v-model="item.type"
-                        :type="'select'"
-                        placeholder="[Enter Language]"
-                        :options="{ uncontrolled: 'uncontrolled', geoera: 'geoera' }"
-                    >
+                <td data-label="Type" scope="row">
+                    <FormControl required v-model="item.type" :type="'select'" placeholder="[Enter Language]"
+                        :options="props.subjectTypes">
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.type`]">
                             {{ errors[`subjects.${index}.type`].join(', ') }}
                         </div>
                     </FormControl>
                 </td>
 
-                <td data-label="Value">
-                    <SearchCategoryAutocomplete
-                        v-if="item.type !== 'uncontrolled'"
-                        v-model="item.value"
-                        @subject="
-                            (language) => {
-                                item.language = language;
-                            }
-                        "
-                    >
+                <td data-label="Value" scope="row">
+                    <SearchCategoryAutocomplete v-if="item.type !== 'uncontrolled'" v-model="item.value" @subject="(language) => {
+                            item.language = language;
+                        }
+                        ">
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
                             {{ errors[`subjects.${index}.value`].join(', ') }}
                         </div>
                     </SearchCategoryAutocomplete>
 
-                    <FormControl v-else required v-model="item.value" type="text" placeholder="[enter keyword value]" :borderless="true">
+                    <FormControl v-else required v-model="item.value" type="text" placeholder="[enter keyword value]"
+                        :borderless="true">
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
                             {{ errors[`subjects.${index}.value`].join(', ') }}
                         </div>
                     </FormControl>
                 </td>
 
-                <td data-label="Language">
-                    <FormControl
-                        required
-                        v-model="item.language"
-                        :type="'select'"
-                        placeholder="[Enter Lang]"
-                        :options="{ de: 'de', en: 'en' }"
-                        :is-read-only="item.type != 'uncontrolled'"
-                    >
+                <td data-label="Language" scope="row">
+                    <FormControl required v-model="item.language" :type="'select'" placeholder="[Enter Lang]"
+                        :options="{ de: 'de', en: 'en' }" :is-read-only="item.type != 'uncontrolled'">
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.language`]">
                             {{ errors[`subjects.${index}.language`].join(', ') }}
                         </div>
                     </FormControl>
                 </td>
-                <td class="before:hidden lg:w-1 whitespace-nowrap">
+                <td class="before:hidden lg:w-1 whitespace-nowrap" scope="row">
                     <BaseButtons type="justify-start lg:justify-end" no-wrap>
                         <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
-                        <BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small @click.prevent="removeItem(index)" />
+                        <BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small
+                            @click.prevent="removeItem(index)" />
                     </BaseButtons>
                 </td>
             </tr>
@@ -179,15 +169,8 @@ const removeItem = (key) => {
     <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
         <BaseLevel>
             <BaseButtons>
-                <BaseButton
-                    v-for="page in pagesList"
-                    :key="page"
-                    :active="page === currentPage"
-                    :label="page + 1"
-                    small
-                    :outline="styleService.darkMode"
-                    @click="currentPage = page"
-                />
+                <BaseButton v-for="page in pagesList" :key="page" :active="page === currentPage" :label="page + 1" small
+                    :outline="styleService.darkMode" @click="currentPage = page" />
             </BaseButtons>
             <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
         </BaseLevel>
@@ -197,3 +180,14 @@ const removeItem = (key) => {
         {{ errors.subjects.join(', ') }}
     </div>
 </template>
+
+<style scoped>
+
+/* tr:nth-child(even) {
+    background: gray;
+}
+
+tr:nth-child(od) {    
+    background: white;
+} */
+</style>

resources/js/Components/TablePersons.vue

@@ -7,13 +7,14 @@ import { mdiDragVariant } from '@mdi/js';
 import BaseIcon from '@/Components/BaseIcon.vue';
 // import CardBoxModal from '@/Components/CardBoxModal.vue';
 // import TableCheckboxCell from '@/Components/TableCheckboxCell.vue';
-import BaseLevel from '@/Components/BaseLevel.vue';
+// import BaseLevel from '@/Components/BaseLevel.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 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';
+import FormControl from '@/Components/FormControl.vue';
 
 const props = defineProps({
     checkable: Boolean,
@@ -21,6 +22,14 @@ const props = defineProps({
         type: Array<Person>,
         default: () => [],
     },
+    contributortypes: {
+        type: Object,
+        default: () => ({}),
+    },
+    errors: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
 const styleService = StyleService();
@@ -120,11 +129,15 @@ const removeAuthor = (key) => {
         <thead>
             <tr>
                 <!-- <th v-if="checkable" /> -->
-                <th /> 
+                <th />
                 <th scope="col">Sort</th>
                 <th class="hidden lg:table-cell"></th>
                 <th>Name</th>
                 <th>Email</th>
+                <th scope="col" v-if="Object.keys(contributortypes).length">
+                    <span>Type</span>
+                </th>
+
                 <!-- <th>Name Type</th> -->
                 <!-- <th>Progress</th> -->
                 <!-- <th>Created</th> -->
@@ -136,7 +149,9 @@ const removeAuthor = (key) => {
         <draggable id="galliwasery" tag="tbody" v-model="items" item-key="id">
             <template #item="{ index, element }">
                 <tr>
-                    <td class="drag-icon"><BaseIcon :path="mdiDragVariant"/></td>
+                    <td class="drag-icon">
+                        <BaseIcon :path="mdiDragVariant" />
+                    </td>
                     <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">
@@ -148,6 +163,20 @@ const removeAuthor = (key) => {
                     <td data-label="Email">
                         {{ element.email }}
                     </td>
+                    <td v-if="Object.keys(contributortypes).length">
+                        <!-- <select type="text" v-model="element.pivot.contributor_type">
+                            <option v-for="(option, i) in contributortypes" :value="option" :key="i">
+                                {{ option }}
+                            </option>
+                        </select> -->
+                        <FormControl required v-model="element.pivot_contributor_type" type="select"
+                            :options="contributortypes" placeholder="[relation type]">
+                            <div class="text-red-400 text-sm"
+                                v-if="errors && Array.isArray(errors[`contributors.${index}.pivot_contributor_type`])">
+                                {{ errors[`contributors.${index}.pivot_contributor_type`].join(', ') }}
+                            </div>
+                        </FormControl>
+                    </td>
                     <!-- <td data-label="Name Type">
                     {{ client.name_type }}
                 </td> -->

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

@@ -76,6 +76,14 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    contributorTypes: {
+        type: Object,
+        default: () => ({}),
+    },
+    subjectTypes: {
+        type: Object,
+        default: () => ({}),
+    },
     errors: {
         type: Object,
         default: () => ({}),
@@ -411,7 +419,7 @@ Removes a selected reference
 const removeReference = (key) => {
     form.references.splice(key, 1);
 };
-        /*
+/*
 
 // const onChangeFile = (event) => {
 //     // let uploadedFile = event.target.files[0];
@@ -720,7 +728,11 @@ Removes a selected keyword
                                 placeholder="search in person table...." v-on:person="onAddContributor">
                             </SearchAutocomplete>
 
-                            <TablePersons :persons="form.contributors" v-if="form.contributors.length > 0" />
+                            <TablePersons :persons="form.contributors" v-if="form.contributors.length > 0"
+                                :contributortypes="contributorTypes" :errors="form.errors"/>
+                            <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
+                                {{ form.errors.contributors.join(', ') }}
+                            </div>
                         </CardBox>
                     </div>
 
@@ -983,7 +995,7 @@ Removes a selected keyword
                                 {{ subject.value }} <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeKeyword(index)" />
                                 </li>
                             </ul> -->
-                            <TableKeywords :keywords="form.subjects" :errors="form.errors"
+                            <TableKeywords :keywords="form.subjects" :errors="form.errors" :subjectTypes="subjectTypes"
                                 v-if="form.subjects.length > 0" />
                         </CardBox>
                     </div>