Update comment list page

frontend/components/comment/CommentList.vue

@@ -0,0 +1,78 @@
+<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, 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:[`item.createdAt`]="{ item }">
+      <span>{{ item.createdAt | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('DD/MM/YYYY HH:mm') }}</span>
+    </template>
+    <template v-slot:[`item.documentText`]="{ item }">
+      {{ item.documentText | truncate(200) }}
+    </template>
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        :label="$t('generic.search')"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
+import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
+import { CommentReadDTO } from '@/services/application/comment.service'
+Vue.use(VueFilterDateFormat)
+Vue.use(VueFilterDateParse)
+
+export default Vue.extend({
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    items: {
+      type: Array as PropType<CommentReadDTO[]>,
+      default: () => [],
+      required: true
+    },
+    value: {
+      type: Array as PropType<CommentReadDTO[]>,
+      default: () => [],
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      search: '',
+      headers: [
+        { text: this.$t('dataset.text'), value: 'text' },
+        { text: this.$t('user.username'), value: 'username' },
+        { text: this.$t('comments.document'), value: 'documentText' },
+        { text: this.$t('comments.created_at'), value: 'createdAt' }
+      ]
+    }
+  }
+})
+</script>

frontend/components/comment/FormDelete.vue

@@ -0,0 +1,28 @@
+<template>
+  <confirm-form
+    :items="selected"
+    :title="$t('comments.removeComment')"
+    :message="$t('comments.removePrompt')"
+    item-key="text"
+    @ok="$emit('remove')"
+    @cancel="$emit('cancel')"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ConfirmForm from '@/components/organisms/utils/ConfirmForm.vue'
+
+export default Vue.extend({
+  components: {
+    ConfirmForm
+  },
+
+  props: {
+    selected: {
+      type: Array,
+      default: () => []
+    }
+  }
+})
+</script>

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

@@ -1,21 +1,85 @@
 <template>
   <v-card>
-    <comment-list />
+    <v-card-title>
+      <v-btn
+        class="text-capitalize ms-2"
+        :disabled="!canDelete"
+        outlined
+        @click.stop="dialogDelete=true"
+      >
+        {{ $t('generic.delete') }}
+      </v-btn>
+      <v-dialog v-model="dialogDelete">
+        <form-delete
+          :selected="selected"
+          @cancel="dialogDelete=false"
+          @remove="remove"
+        />
+      </v-dialog>
+    </v-card-title>
+    <comment-list
+      v-model="selected"
+      :items="items"
+      :is-loading="isLoading"
+    />
   </v-card>
 </template>
 
-<script>
-import CommentList from '@/components/containers/comments/CommentList'
+<script lang="ts">
+import Vue from 'vue'
+import CommentList from '@/components/comment/CommentList.vue'
+import { CommentReadDTO } from '@/services/application/comment.service'
+import FormDelete from '~/components/comment/FormDelete.vue'
 
-export default {
+export default Vue.extend({
   layout: 'project',
 
   components: {
-    CommentList
+    CommentList,
+    FormDelete
+  },
+
+  async fetch() {
+    this.isLoading = true
+    this.items = await this.$services.comment.listProjectComment(this.projectId)
+    this.isLoading = false
+  },
+
+  data() {
+    return {
+      dialogDelete: false,
+      items: [] as CommentReadDTO[],
+      selected: [] as CommentReadDTO[],
+      isLoading: false
+    }
+  },
+
+  computed: {
+    canDelete(): boolean {
+      return this.selected.length > 0
+    },
+    projectId() {
+      return this.$route.params.id
+    }
+  },
+
+  methods: {
+    async remove() {
+      await this.$services.comment.deleteBulk(this.projectId, this.selected)
+      this.$fetch()
+      this.dialogDelete = false
+      this.selected = []
+    }
   },
 
   validate({ params }) {
     return /^\d+$/.test(params.id)
   }
-}
+})
 </script>
+
+<style scoped>
+::v-deep .v-dialog {
+  width: 800px;
+}
+</style>