Add document list component

frontend/components/document/DocumentList.vue

@@ -0,0 +1,165 @@
+<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': [5, 50, 100],
+      'items-per-page-text': $t('vuetify.itemsPerPageText'),
+      'page-text': $t('dataset.pageText')
+    }"
+    item-key="id"
+    show-select
+    @input="$emit('input', $event)"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        :label="$t('generic.search')"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+    <template v-slot:[`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 v-slot:[`item.commentCount`]="{ item }">
+      <span> {{ item.commentCount }} </span>
+    </template>
+    <template v-slot:[`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 _ from 'lodash'
+import { DataOptions } from 'vuetify/types'
+import { DocumentDTO } from '~/services/application/document.service'
+
+export default Vue.extend({
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    items: {
+      type: Array as PropType<DocumentDTO[]>,
+      default: () => [],
+      required: true
+    },
+    value: {
+      type: Array as PropType<DocumentDTO[]>,
+      default: () => [],
+      required: true
+    },
+    total: {
+      type: Number,
+      default: 0,
+      required: true
+    },
+    pageLink: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      search: this.$route.query.q,
+      options: {} as DataOptions,
+    }
+  },
+
+  computed: {
+    headers() {
+      return [
+        {
+          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: {
+    '$route.query': _.debounce(function() {
+        // @ts-ignore
+        this.$emit('change-query')
+      }, 1000
+    ),
+    options: {
+      handler() {
+        this.$router.push({
+          query: {
+            limit: this.options.itemsPerPage.toString(),
+            offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(),
+            q: this.search
+          }
+        })
+      },
+      deep: true
+    },
+    search() {
+      this.$router.push({
+        query: {
+          limit: this.options.itemsPerPage.toString(),
+          offset: '0',
+          q: this.search
+        }
+      })
+      this.options.page = 1
+    }
+  },
+
+  methods: {
+    toLabeling(item: DocumentDTO) {
+      const index = this.items.indexOf(item)
+      const offset = (this.options.page - 1) * this.options.itemsPerPage
+      const page = (offset + index + 1).toString()
+      this.$router.push({
+        path: this.localePath(this.pageLink),
+        query: {
+          page,
+          q: this.search
+        }
+      })
+    }
+  }
+})
+</script>

frontend/pages/projects/_id/dataset/index.vue

@@ -1,33 +1,67 @@
 <template>
   <v-card>
     <v-card-title class="mb-2">
-      <document-action-menu />
+      <!-- <document-action-menu />
       <document-deletion-button class="ms-2" />
       <v-spacer />
-      <document-bulk-deletion-button />
+      <document-bulk-deletion-button /> -->
     </v-card-title>
-    <document-list />
+    <document-list
+      v-model="selected"
+      :items="item.items"
+      :is-loading="isLoading"
+      :page-link="pageLink"
+      :total="item.count"
+      @change-query="$fetch"
+    />
   </v-card>
 </template>
 
-<script>
-import DocumentList from '@/components/containers/documents/DocumentList'
-import DocumentActionMenu from '@/components/containers/documents/DocumentActionMenu'
-import DocumentDeletionButton from '@/components/containers/documents/DocumentDeletionButton'
-import DocumentBulkDeletionButton from '@/components/containers/documents/DocumentBulkDeletionButton'
+<script lang="ts">
+import Vue from 'vue'
+import DocumentList from '@/components/document/DocumentList.vue'
+import { DocumentListDTO, DocumentDTO } from '@/services/application/document.service'
 
-export default {
+export default Vue.extend({
   layout: 'project',
 
   components: {
     DocumentList,
-    DocumentActionMenu,
-    DocumentDeletionButton,
-    DocumentBulkDeletionButton
+  },
+
+  async fetch() {
+    this.isLoading = true
+    this.item = await this.$services.document.list(this.projectId, this.$route.query)
+    this.isLoading = false
+  },
+
+  data() {
+    return {
+      dialogCreate: false,
+      dialogDelete: false,
+      pageLink: '',
+      item: {} as DocumentListDTO,
+      selected: [] as DocumentDTO[],
+      isLoading: false
+    }
+  },
+
+  computed: {
+    canDelete(): boolean {
+      return this.selected.length > 0
+    },
+    projectId(): string {
+      return this.$route.params.id
+    }
+  },
+
+  async created() {
+    this.pageLink = await this.$services.project.getPageLink(this.projectId)
   },
 
   validate({ params, query }) {
+    // @ts-ignore
     return /^\d+$/.test(params.id) && /^\d+|$/.test(query.limit) && /^\d+|$/.test(query.offset)
   }
-}
+})
 </script>