<script setup lang="ts"> import { computed, ref } from 'vue'; // import { MainService } from '@/Stores/main'; import { StyleService } from '@/Stores/style.service'; import { mdiTrashCan } from '@mdi/js'; // import CardBoxModal from '@/Components/CardBoxModal.vue'; // import TableCheckboxCell from '@/Components/TableCheckboxCell.vue'; import BaseLevel from '@/Components/BaseLevel.vue'; import BaseButtons from '@/Components/BaseButtons.vue'; 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, keywords: { type: Array<Subject>, default: () => [], }, subjectTypes: { type: Object, default: () => ({}), }, errors: { type: Object, default: () => ({}), }, }); const styleService = StyleService(); // const mainService = MainService(); const items = computed(() => props.keywords); // const isModalActive = ref(false); // const isModalDangerActive = ref(false); const perPage = ref(5); const currentPage = ref(0); // const checkedRows = ref([]); 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)); const currentPageHuman = computed(() => currentPage.value + 1); const pagesList = computed(() => { const pagesList: Array<number> = []; for (let i = 0; i < numPages.value; i++) { pagesList.push(i); } return pagesList; }); const removeItem = (key: number) => { items.value.splice(key, 1); }; </script> <template> <!-- <CardBoxModal v-model="isModalActive" title="Sample modal"> <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p> <p>This is sample modal</p> </CardBoxModal> <CardBoxModal v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel> <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p> <p>This is sample modal</p> </CardBoxModal> --> <!-- <div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800"> <span v-for="checkedRow in checkedRows" :key="checkedRow.id" class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700"> {{ checkedRow.name }} </span> </div> --> <table> <thead> <tr> <!-- <th v-if="checkable" /> --> <!-- <th class="hidden lg:table-cell"></th> --> <th scope="col">Type</th> <th scope="col">Value</th> <th scope="col">Language</th> <th scope="col" /> </tr> </thead> <tbody> <tr v-for="(item, index) in itemsPaginated" :key="index"> <td data-label="Type" scope="row"> <FormControl required v-model="item.type" @update:modelValue="() => {item.external_key = undefined; item.value= '';}" :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" scope="row"> <SearchCategoryAutocomplete v-if="item.type !== 'uncontrolled'" v-model="item.value" @subject=" (result) => { item.language = result.language; item.external_key = result.uri; } " > <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="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" 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)" /> </BaseButtons> </td> </tr> </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> <BaseButtons> <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> </div> <div class="text-red-400 text-sm" v-if="errors.subjects && Array.isArray(errors.subjects)"> {{ errors.subjects.join(', ') }} </div> </template> <style scoped> /* tr:nth-child(even) { background: gray; } tr:nth-child(od) { background: white; } */ </style>