Merge pull request #1433 from ayanamizuta/feature/annotate_from_commentList

Feature/annotate from comment list

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>

frontend/domain/models/comment/comment.ts

@@ -41,18 +41,17 @@ export class CommentItem {
     public id: number,
     public user: number,
     public username: string,
-    public document: number,
-    public documentText: string,
+    public example: number,
     public text: string,
     public createdAt: string
   ) {}
 
   static valueOf(
-    { id, user, username, document, document_text, text, created_at }:
-    { id: number, user: number, username: string, document: number,
-      document_text: string, text: string, created_at: string }
+    { id, user, username, example, text, created_at }:
+    { id: number, user: number, username: string, example: number,
+      text: string, created_at: string }
   ): CommentItem {
-    return new CommentItem(id, user, username, document, document_text, text, created_at)
+    return new CommentItem(id, user, username, example, text, created_at)
   }
 
   by(userId: number) {
@@ -64,8 +63,7 @@ export class CommentItem {
       id: this.id,
       user: this.user,
       username: this.username,
-      document: this.document,
-      document_text: this.documentText,
+      document: this.example,
       text: this.text,
       created_at: this.createdAt
     }

frontend/domain/models/comment/commentRepository.ts

@@ -4,8 +4,7 @@ export interface CommentItemResponse {
   id: number,
   user: number,
   username: string,
-  document: number,
-  document_text: string,
+  example: number,
   text: string,
   created_at: string
 }

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
+      })
     }
   },
 

frontend/services/application/comment/commentApplicationService.ts

@@ -23,7 +23,7 @@ export class CommentApplicationService {
 
   public update(projectId: string, docId: number, item: CommentReadDTO): Promise<CommentItem> {
     const comment = new CommentItem(
-      item.id, item.user, item.username, docId, item.documentText, item.text, item.createdAt
+      item.id, item.user, item.username, docId, item.text, item.createdAt
     )
     return this.repository.update(projectId, docId, comment)
   }

frontend/services/application/comment/commentData.ts

@@ -5,7 +5,7 @@ export class CommentReadDTO {
   id: number;
   user: number;
   username: string;
-  documentText: string;
+  example: number;
   text: string;
   createdAt: string;
 
@@ -13,7 +13,7 @@ export class CommentReadDTO {
     this.id = item.id;
     this.user = item.user;
     this.username = item.username;
-    this.documentText = item.documentText;
+    this.example = item.example;
     this.text = item.text;
     this.createdAt = item.createdAt;
   }