From b1503712e7a7d40afe88ec87c2ea81787862487a Mon Sep 17 00:00:00 2001
From: ayanamizuta <ayanamizuta832@gmail.com>
Date: Tue, 6 Jul 2021 16:12:25 +0900
Subject: [PATCH] add annotation link in commentList page

---
 frontend/components/comment/CommentList.vue   | 30 +++++++++++++++----
 .../pages/projects/_id/comments/index.vue     | 18 +++++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/components/comment/CommentList.vue b/frontend/components/comment/CommentList.vue
index 9151bb43..6a2e18d7 100644
--- a/frontend/components/comment/CommentList.vue
+++ b/frontend/components/comment/CommentList.vue
@@ -20,9 +20,6 @@
     <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"
@@ -33,6 +30,15 @@
         filled
       />
     </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>
 
@@ -41,6 +47,7 @@ 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/commentData'
+import { ExampleDTO } from '~/services/application/example/exampleData'
 Vue.use(VueFilterDateFormat)
 Vue.use(VueFilterDateParse)
 
@@ -51,6 +58,11 @@ export default Vue.extend({
       default: false,
       required: true
     },
+    examples: {
+      type: Array as PropType<ExampleDTO[]>,
+      default: () => [],
+      required: true
+    },
     items: {
       type: Array as PropType<CommentReadDTO[]>,
       default: () => [],
@@ -69,10 +81,18 @@ export default Vue.extend({
       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' }
+        { text: this.$t('comments.created_at'), value: 'createdAt' },
+        { text: this.$t('dataset.action'), value: 'action' },
       ]
     }
+  },
+
+  methods: {
+    toLabeling(item: CommentReadDTO) {
+      const index = this.examples.findIndex((example: ExampleDTO) => example.id === item.example)
+      const page = (index + 1).toString()
+      this.$emit('click:labeling', { page, q: this.search })
+    }
   }
 })
 </script>
diff --git a/frontend/pages/projects/_id/comments/index.vue b/frontend/pages/projects/_id/comments/index.vue
index 3ce919f0..3388547d 100644
--- a/frontend/pages/projects/_id/comments/index.vue
+++ b/frontend/pages/projects/_id/comments/index.vue
@@ -19,8 +19,10 @@
     </v-card-title>
     <comment-list
       v-model="selected"
+      :examples="examples.items"
       :items="items"
       :is-loading="isLoading"
+      @click:labeling="movePage"
     />
   </v-card>
 </template>
@@ -29,6 +31,8 @@
 import Vue from 'vue'
 import CommentList from '@/components/comment/CommentList.vue'
 import { CommentReadDTO } from '~/services/application/comment/commentData'
+import { ExampleListDTO } from '~/services/application/example/exampleData'
+import { ProjectDTO } from '~/services/application/project/projectData'
 import FormDelete from '~/components/comment/FormDelete.vue'
 
 export default Vue.extend({
@@ -41,15 +45,20 @@ export default Vue.extend({
 
   async fetch() {
     this.isLoading = true
+    this.project = await this.$services.project.findById(this.projectId)
     this.items = await this.$services.comment.listProjectComment(this.projectId)
+    const example = await this.$services.example.fetchOne(this.projectId,'1','','') // to fetch the count of examples
+    this.examples = await this.$services.example.list(this.projectId, {limit: example.count.toString()})
     this.isLoading = false
   },
 
   data() {
     return {
       dialogDelete: false,
+      project: {} as ProjectDTO,
       items: [] as CommentReadDTO[],
       selected: [] as CommentReadDTO[],
+      examples: {} as ExampleListDTO,
       isLoading: false
     }
   },
@@ -69,6 +78,15 @@ export default Vue.extend({
       this.$fetch()
       this.dialogDelete = false
       this.selected = []
+    },
+    updateQuery(query: object) {
+      this.$router.push(query)
+    },
+    movePage(query: object) {
+      this.updateQuery({
+        path: this.localePath(this.project.pageLink),
+        query
+      })
     }
   },