You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

154 lines
3.6 KiB

2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
  1. <template>
  2. <v-data-table
  3. :value="value"
  4. :headers="headers"
  5. :items="items"
  6. :options.sync="options"
  7. :server-items-length="total"
  8. :search="search"
  9. :loading="isLoading"
  10. :loading-text="$t('generic.loading')"
  11. :no-data-text="$t('vuetify.noDataAvailable')"
  12. :footer-props="{
  13. showFirstLastPage: true,
  14. 'items-per-page-options': [10, 50, 100],
  15. 'items-per-page-text': $t('vuetify.itemsPerPageText'),
  16. 'page-text': $t('dataset.pageText')
  17. }"
  18. item-key="id"
  19. show-select
  20. @input="$emit('input', $event)"
  21. >
  22. <template #top>
  23. <v-text-field
  24. v-model="search"
  25. :prepend-inner-icon="mdiMagnify"
  26. :label="$t('generic.search')"
  27. single-line
  28. hide-details
  29. filled
  30. />
  31. </template>
  32. <template #[`item.text`]="{ item }">
  33. <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
  34. <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
  35. </template>
  36. <template #[`item.meta`]="{ item }">
  37. {{ JSON.stringify(item.meta, null, 4) }}
  38. </template>
  39. <template #[`item.commentCount`]="{ item }">
  40. <span> {{ item.commentCount }} </span>
  41. </template>
  42. <template #[`item.action`]="{ item }">
  43. <v-btn small color="primary text-capitalize" @click="toLabeling(item)">
  44. {{ $t('dataset.annotate') }}
  45. </v-btn>
  46. </template>
  47. </v-data-table>
  48. </template>
  49. <script lang="ts">
  50. import Vue, { PropType } from 'vue'
  51. import { mdiMagnify } from '@mdi/js'
  52. import { DataOptions } from 'vuetify/types'
  53. import { ExampleDTO } from '~/services/application/example/exampleData'
  54. export default Vue.extend({
  55. props: {
  56. isLoading: {
  57. type: Boolean,
  58. default: false,
  59. required: true
  60. },
  61. items: {
  62. type: Array as PropType<ExampleDTO[]>,
  63. default: () => [],
  64. required: true
  65. },
  66. value: {
  67. type: Array as PropType<ExampleDTO[]>,
  68. default: () => [],
  69. required: true
  70. },
  71. total: {
  72. type: Number,
  73. default: 0,
  74. required: true
  75. }
  76. },
  77. data() {
  78. return {
  79. search: this.$route.query.q,
  80. options: {} as DataOptions,
  81. mdiMagnify
  82. }
  83. },
  84. computed: {
  85. headers() {
  86. return [
  87. {
  88. text: 'ID',
  89. value: 'id',
  90. sortable: false
  91. },
  92. {
  93. text: this.$t('dataset.text'),
  94. value: 'text',
  95. sortable: false
  96. },
  97. {
  98. text: this.$t('dataset.metadata'),
  99. value: 'meta',
  100. sortable: false
  101. },
  102. {
  103. text: this.$t('comments.comments'),
  104. value: 'commentCount',
  105. sortable: false
  106. },
  107. {
  108. text: this.$t('dataset.action'),
  109. value: 'action',
  110. sortable: false
  111. }
  112. ]
  113. }
  114. },
  115. watch: {
  116. options: {
  117. handler() {
  118. this.$emit('update:query', {
  119. query: {
  120. limit: this.options.itemsPerPage.toString(),
  121. offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(),
  122. q: this.search
  123. }
  124. })
  125. },
  126. deep: true
  127. },
  128. search() {
  129. this.$emit('update:query', {
  130. query: {
  131. limit: this.options.itemsPerPage.toString(),
  132. offset: '0',
  133. q: this.search
  134. }
  135. })
  136. this.options.page = 1
  137. }
  138. },
  139. methods: {
  140. toLabeling(item: ExampleDTO) {
  141. const index = this.items.indexOf(item)
  142. const offset = (this.options.page - 1) * this.options.itemsPerPage
  143. const page = (offset + index + 1).toString()
  144. this.$emit('click:labeling', { page, q: this.search })
  145. }
  146. }
  147. })
  148. </script>