Add comment form to the ToolbarLabeling.vue

frontend/components/tasks/toolbar/ToolbarLabeling.vue

@@ -27,8 +27,14 @@
         </v-dialog>
 
         <button-comment
-          @click:comment="$emit('click:comment')"
+          @click:comment="dialogComment=true"
         />
+        <v-dialog v-model="dialogComment">
+          <form-comment
+            :doc-id="docId"
+            @click:cancel="dialogComment=false"
+          />
+        </v-dialog>
 
         <button-auto-labeling
           @click:auto="$emit('click:auto')"
@@ -61,6 +67,7 @@ import ButtonFilter from './buttons/ButtonFilter.vue'
 import ButtonGuideline from './buttons/ButtonGuideline.vue'
 import ButtonPagination from './buttons/ButtonPagination.vue'
 import ButtonReview from './buttons/ButtonReview.vue'
+import FormComment from './forms/FormComment.vue'
 import FormGuideline from './forms/FormGuideline.vue'
 
 export default Vue.extend({
@@ -72,10 +79,15 @@ export default Vue.extend({
     ButtonGuideline,
     ButtonPagination,
     ButtonReview,
+    FormComment,
     FormGuideline
   },
 
   props: {
+    docId: {
+      type: Number,
+      required: true
+    },
     filterOption: {
       type: String,
       default: ''
@@ -97,6 +109,7 @@ export default Vue.extend({
 
   data() {
     return {
+      dialogComment: false,
       dialogGuideline: false
     }
   },

frontend/components/tasks/toolbar/forms/FormComment.vue

@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters } from 'vuex'
 import BaseCard from '@/components/utils/BaseCard.vue'
 import Comment from '@/components/comment/Comment.vue'
 import FormCreate from '@/components/comment/FormCreate.vue'
@@ -35,6 +34,13 @@ export default Vue.extend({
     FormCreate
   },
 
+  props: {
+    docId: {
+      type: Number,
+      required: true
+    }
+  },
+
   async fetch() {
     this.user = await this.$services.user.getMyProfile()
   },
@@ -46,10 +52,6 @@ export default Vue.extend({
     }
   },
 
-  computed: {
-    ...mapGetters('documents', ['currentDoc'])
-  },
-
   watch: {
     currentDoc: {
       handler(val) {
@@ -64,18 +66,18 @@ export default Vue.extend({
 
   methods: {
     async list() {
-      this.comments = await this.$services.comment.list(this.$route.params.id, this.currentDoc.id)
+      this.comments = await this.$services.comment.list(this.$route.params.id, this.docId)
     },
     async add(message: string) {
-      await this.$services.comment.create(this.$route.params.id, this.currentDoc.id, message)
+      await this.$services.comment.create(this.$route.params.id, this.docId, message)
       this.list()
     },
     async remove(item: CommentReadDTO) {
-      await this.$services.comment.delete(this.$route.params.id, this.currentDoc.id, item)
+      await this.$services.comment.delete(this.$route.params.id, this.docId, item)
       this.list()
     },
     async maybeUpdate(item: CommentReadDTO) {
-      await this.$services.comment.update(this.$route.params.id, this.currentDoc.id, item)
+      await this.$services.comment.update(this.$route.params.id, this.docId, item)
       this.list()
     }
   }

frontend/repositories/comment/api.ts

@@ -14,28 +14,28 @@ export class FromApiCommentItemListRepository implements CommentItemListReposito
     return items.map(item => CommentItem.valueOf(item))
   }
 
-  async list(projectId: string, docId: string): Promise<CommentItem[]> {
+  async list(projectId: string, docId: number): Promise<CommentItem[]> {
     const url = `/projects/${projectId}/docs/${docId}/comments`
     const response = await this.request.get(url)
     const items: CommentItemResponse[] = response.data
     return items.map(item => CommentItem.valueOf(item))
   }
 
-  async create(projectId: string, docId: string, text: string): Promise<CommentItem> {
+  async create(projectId: string, docId: number, text: string): Promise<CommentItem> {
     const url = `/projects/${projectId}/docs/${docId}/comments`
     const response = await this.request.post(url, { projectId, docId, text })
     const responseItem: CommentItemResponse = response.data
     return CommentItem.valueOf(responseItem)
   }
 
-  async update(projectId: string, docId: string, item: CommentItem): Promise<CommentItem> {
+  async update(projectId: string, docId: number, item: CommentItem): Promise<CommentItem> {
     const url = `/projects/${projectId}/docs/${docId}/comments/${item.id}`
     const response = await this.request.put(url, item.toObject())
     const responseItem: CommentItemResponse = response.data
     return CommentItem.valueOf(responseItem)
   }
 
-  async delete(projectId: string, docId: string, commentId: number): Promise<void> {
+  async delete(projectId: string, docId: number, commentId: number): Promise<void> {
     const url = `/projects/${projectId}/docs/${docId}/comments/${commentId}`
     const response = await this.request.delete(url)
   }

frontend/repositories/comment/interface.ts

@@ -13,13 +13,13 @@ export interface CommentItemResponse {
 export interface CommentItemListRepository {
   listAll(projectId: string, q: string): Promise<CommentItem[]>
 
-  list(projectId: string, docId: string): Promise<CommentItem[]>
+  list(projectId: string, docId: number): Promise<CommentItem[]>
 
-  create(projectId: string, docId: string, text: string): Promise<CommentItem>
+  create(projectId: string, docId: number, text: string): Promise<CommentItem>
 
-  update(projectId: string, docId: string, item: CommentItem): Promise<CommentItem>
+  update(projectId: string, docId: number, item: CommentItem): Promise<CommentItem>
 
-  delete(projectId: string, docId: string, commentId: number): Promise<void>
+  delete(projectId: string, docId: number, commentId: number): Promise<void>
 
   deleteBulk(projectId: string, items: number[]): Promise<void>
 }

frontend/services/application/comment.service.ts

@@ -29,23 +29,23 @@ export class CommentApplicationService {
     return items.map(item => new CommentReadDTO(item))
   }
 
-  public async list(projectId: string, docId: string): Promise<CommentReadDTO[]> {
+  public async list(projectId: string, docId: number): Promise<CommentReadDTO[]> {
     const items = await this.repository.list(projectId, docId)
     return items.map(item => new CommentReadDTO(item))
   }
 
-  public create(projectId: string, docId: string, text: string): Promise<CommentItem> {
+  public create(projectId: string, docId: number, text: string): Promise<CommentItem> {
     return this.repository.create(projectId, docId, text)
   }
 
-  public update(projectId: string, docId: string, item: CommentReadDTO): Promise<CommentItem> {
+  public update(projectId: string, docId: number, item: CommentReadDTO): Promise<CommentItem> {
     const comment = new CommentItem(
-      item.id, item.user, item.username, parseInt(docId), item.documentText, item.text, item.createdAt
+      item.id, item.user, item.username, docId, item.documentText, item.text, item.createdAt
     )
     return this.repository.update(projectId, docId, comment)
   }
 
-  public delete(projectId: string, docId: string, item: CommentReadDTO): Promise<void> {
+  public delete(projectId: string, docId: number, item: CommentReadDTO): Promise<void> {
     return this.repository.delete(projectId, docId, item.id)
   }