geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- add controlled geoera vocabular for tethys keywords
All checks were successful
CI Pipeline / japa-tests (push) Successful in 54s
Details

Browse source 
- add new SearchCategoryAutocomplete.vue for autocomplete search with filtered categories
- npm updates
This commit is contained in:
Kaimbacher 2023-05-24 16:58:52 +02:00
parent 440fdb9fa7
commit 092a8a1c12
8 changed files with 562 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/js/Components/TableKeywords.vue
View file

@ -12,6 +12,7 @@ import BaseButton from '@/Components/BaseButton.vue';
import { Subject } from '@/Dataset';
// import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import SearchCategoryAutocomplete from '@/Components/SearchCategoryAutocomplete.vue';
const props = defineProps({
checkable: Boolean,
@ -35,7 +36,9 @@ 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(() => {
return items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1));
});
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
@ -99,8 +102,8 @@ const removeItem = (key) => {
<tr>
<!-- <th v-if="checkable" /> -->
<!-- <th class="hidden lg:table-cell"></th> -->
<th>Value</th>
<th>Type</th>
<th>Value</th>
<th>Language</th>
<th />
@ -112,36 +115,60 @@ const removeItem = (key) => {
<!-- <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' }"
>
<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">
<FormControl required v-model="item.value" type="text" placeholder="[enter keyword value]" :borderless="true">
<!-- <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
{{ form.errors[`titles.${index}.value`].join(', ') }}
</div> -->
<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">
<div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
{{ errors[`subjects.${index}.value`].join(', ') }}
</div>
</FormControl>
</td>
<td data-label="Type">
{{ item.type }}
</td>
<td data-label="Type">
<td data-label="Language">
<FormControl
required
v-model="item.language"
:type="'select'"
placeholder="[Enter Language]"
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>
<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="removeItem(index)" />
<BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small @click.prevent="removeItem(index)" />
</BaseButtons>
</td>
</tr>