doccano/frontend/components/links/LinksList.vue

<template>
  <v-data-table
    :value="value"
    :headers="headers"
    :items="items"
    :search="search"
    :loading="isLoading"
    :loading-text="$t('generic.loading')"
    :no-data-text="$t('vuetify.noDataAvailable')"
    :footer-props="{
      'showFirstLastPage': true,
      'items-per-page-options': [5, 10, 15, $t('generic.all')],
      '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.color`]="props">
      <v-chip
        :color="props.item.color"
        :text-color="$contrastColor(props.item.color)"
      >
        {{ props.item.color }}
      </v-chip>
    </template>
    <template #[`item.actions`]="{ item }">
      <v-icon
        small
        @click="$emit('edit', item)"
      >
        {{ mdiPencil }}
      </v-icon>
    </template>
  </v-data-table>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { mdiPencil, mdiMagnify } from '@mdi/js'
import { LinkTypeDTO } from '~/services/application/links/linkData'

export default Vue.extend({
  props: {
    isLoading: {
      type: Boolean,
      default: false,
      required: true
    },
    items: {
      type: Array as PropType<LinkTypeDTO[]>,
      default: () => [],
      required: true
    },
    value: {
      type: Array as PropType<LinkTypeDTO[]>,
      default: () => [],
      required: true
    }
  },

  data() {
    return {
      search: '',
      mdiPencil,
      mdiMagnify
    }
  },

  computed: {
    headers() {
      return [
        { text: this.$t('generic.name'),  value: 'name' },
        { text: this.$t('labels.color'),  value: 'color' },
        { text: 'Actions',                value: 'actions', sortable: false },
      ]
    }
  }
})
</script>