|
|
<template> <v-data-table :value="value" :headers="headers" :items="items" :options.sync="options" :server-items-length="total" :search="search" :loading="isLoading" :loading-text="$t('generic.loading')" :no-data-text="$t('vuetify.noDataAvailable')" :footer-props="{ showFirstLastPage: true, 'items-per-page-options': [10, 50, 100], 'items-per-page-text': $t('vuetify.itemsPerPageText'), 'page-text': $t('dataset.pageText') }" item-key="id" show-select @input="$emit('input', $event)" > <template #top> <v-text-field v-model="search" :prepend-inner-icon="mdiMagnify" :label="$t('generic.search')" single-line hide-details filled /> </template> <template #[`item.text`]="{ item }"> <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span> <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span> </template> <template #[`item.meta`]="{ item }"> {{ JSON.stringify(item.meta, null, 4) }} </template> <template #[`item.commentCount`]="{ item }"> <span> {{ item.commentCount }} </span> </template> <template #[`item.action`]="{ item }"> <v-btn small color="primary text-capitalize" @click="toLabeling(item)"> {{ $t('dataset.annotate') }} </v-btn> </template> </v-data-table> </template>
<script lang="ts"> import Vue, { PropType } from 'vue' import { mdiMagnify } from '@mdi/js' import { DataOptions } from 'vuetify/types' import { ExampleDTO } from '~/services/application/example/exampleData'
export default Vue.extend({ props: { isLoading: { type: Boolean, default: false, required: true }, items: { type: Array as PropType<ExampleDTO[]>, default: () => [], required: true }, value: { type: Array as PropType<ExampleDTO[]>, default: () => [], required: true }, total: { type: Number, default: 0, required: true } },
data() { return { search: this.$route.query.q, options: {} as DataOptions, mdiMagnify } },
computed: { headers() { return [ { text: 'ID', value: 'id', sortable: false }, { text: this.$t('dataset.text'), value: 'text', sortable: false }, { text: this.$t('dataset.metadata'), value: 'meta', sortable: false }, { text: this.$t('comments.comments'), value: 'commentCount', sortable: false }, { text: this.$t('dataset.action'), value: 'action', sortable: false } ] } },
watch: { options: { handler() { this.$emit('update:query', { query: { limit: this.options.itemsPerPage.toString(), offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(), q: this.search } }) }, deep: true }, search() { this.$emit('update:query', { query: { limit: this.options.itemsPerPage.toString(), offset: '0', q: this.search } }) this.options.page = 1 } },
methods: { toLabeling(item: ExampleDTO) { const index = this.items.indexOf(item) const offset = (this.options.page - 1) * this.options.itemsPerPage const page = (offset + index + 1).toString() this.$emit('click:labeling', { page, q: this.search }) } } }) </script>
|