forked from geolba/tethys.backend
- 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
This commit is contained in:
parent
3ea2e8ca94
commit
b1d587d9f5
9 changed files with 156 additions and 88 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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> -->
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue