frontend comment table view

frontend/components/containers/comments/CommentDeletionButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <confirm-dialog
+    :disabled="!isCommentSelected"
+    :items="selectedComments"
+    :title="$t('comments.removeComment')"
+    :message="$t('comments.removePrompt')"
+    :button-true-text="$t('generic.yes')"
+    :button-false-text="$t('generic.cancel')"
+    item-key="text"
+    @ok="handleRemoveComment()"
+  />
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+import ConfirmDialog from '@/components/organisms/utils/ConfirmDialog'
+
+export default {
+  components: {
+    ConfirmDialog
+  },
+
+  computed: {
+    ...mapState('comments', ['selectedComments']),
+    ...mapGetters('comments', ['isCommentSelected'])
+  },
+
+  methods: {
+    ...mapActions('comments', ['deleteComment']),
+
+    handleRemoveComment() {
+      this.deleteComment({
+        projectId: this.$route.params.id
+      })
+    }
+  }
+}
+</script>

frontend/components/containers/comments/CommentList.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-data-table
+    :value="selectedComments"
+    :headers="headers"
+    :items="comments"
+    :search="search"
+    :options.sync="options"
+    :server-items-length="totalComments"
+    :loading="loading"
+    :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="updateSelectedComments"
+  >
+    <template v-slot:item.created_at="{ item }">
+      <span>{{ item.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}</span>
+    </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>
+import Vue from 'vue'
+import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
+import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
+import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
+Vue.use(VueFilterDateFormat)
+Vue.use(VueFilterDateParse)
+
+export default {
+  async fetch() {
+    await this.getProjectCommentList({
+      projectId: this.$route.params.id
+    })
+  },
+  data() {
+    return {
+      search: this.$route.query.q,
+      options: {},
+      headers: [
+        {
+          text: this.$t('comments.created_at'),
+          align: 'left',
+          value: 'created_at'
+        },
+        {
+          text: this.$t('comments.document'),
+          value: 'document_text'
+        },
+        {
+          text: this.$t('user.username'),
+          value: 'username'
+        },
+        {
+          text: this.$t('dataset.text'),
+          value: 'text'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState('comments', ['comments', 'loading', 'selectedComments', 'totalComments']),
+    ...mapGetters('projects', ['getLink'])
+  },
+  watch: {
+    '$route.query': '$fetch',
+    options: {
+      handler(newvalue, oldvalue) {
+        this.$router.push({
+          query: {
+            limit: this.options.itemsPerPage,
+            offset: (this.options.page - 1) * this.options.itemsPerPage,
+            q: this.search
+          }
+        })
+      },
+      deep: true
+    },
+    search() {
+      this.$router.push({
+        query: {
+          limit: this.options.itemsPerPage,
+          offset: 0,
+          q: this.search
+        }
+      })
+      this.options.page = 1
+    }
+  },
+  methods: {
+    ...mapActions('comments', ['getProjectCommentList']),
+    ...mapMutations('comments', ['updateSelectedComments'])
+  }
+
+}
+</script>