Divide dialog form into dialog and form

frontend/components/comment/FormCRUD.vue

@@ -0,0 +1,83 @@
+<template>
+  <base-card
+    :title="$t('comments.comments')"
+    :cancel-text="$t('generic.close')"
+    @cancel="$emit('cancel')"
+  >
+    <template #content>
+      <form-create
+        @add-comment="add"
+      />
+      <comment
+        v-for="comment in comments"
+        :key="comment.id"
+        :comment="comment"
+        :user-id="user.id"
+        @delete-comment="remove"
+        @update-comment="maybeUpdate"
+      />
+    </template>
+  </base-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+import BaseCard from '@/components/molecules/BaseCard.vue'
+import Comment from './Comment.vue'
+import FormCreate from './FormCreate.vue'
+import { CommentReadDTO } from '~/services/application/comment.service'
+
+export default Vue.extend({
+  components: {
+    BaseCard,
+    Comment,
+    FormCreate
+  },
+
+  async fetch() {
+    this.user = await this.$services.user.getMyProfile()
+  },
+
+  data() {
+    return {
+      user: {},
+      comments: [] as CommentReadDTO[],
+    }
+  },
+
+  computed: {
+    ...mapGetters('documents', ['currentDoc'])
+  },
+
+  watch: {
+    currentDoc: {
+      handler(val) {
+        if (val !== undefined) {
+          this.list()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  methods: {
+    async list() {
+      this.comments = await this.$services.comment.list(this.$route.params.id, this.currentDoc.id)
+    },
+    async add(message: string) {
+      await this.$services.comment.create(this.$route.params.id, this.currentDoc.id, message)
+      this.list()
+    },
+    async remove(item: CommentReadDTO) {
+      await this.$services.comment.delete(this.$route.params.id, this.currentDoc.id, item)
+      this.list()
+    },
+    async maybeUpdate(item: CommentReadDTO) {
+      await this.$services.comment.update(this.$route.params.id, this.currentDoc.id, item)
+      this.list()
+    }
+  }
+})
+</script>

frontend/components/comment/FormCreate.vue

@@ -1,89 +1,33 @@
 <template>
-  <div style="display:inline;">
-    <v-tooltip bottom>
-      <template v-slot:activator="{ on }">
-        <v-btn
-          class="text-capitalize ps-1 pe-1"
-          min-width="36"
-          icon
-          v-on="on"
-          @click="dialog=true"
-        >
-          <v-icon>
-            mdi-chat
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>{{ $t('annotation.commentTooltip') }}</span>
-    </v-tooltip>
-    <v-dialog
-      v-model="dialog"
-      width="800"
+  <v-form v-model="valid">
+    <v-textarea
+      v-model="message"
+      auto-grow
+      hide-details
+      outlined
+      rows="1"
+      name="CommentInput"
+      :label="$t('comments.message')"
+      :rules="commentRules"
+    />
+    <v-btn
+      class="white--text text-capitalize mt-3"
+      color="primary"
+      depressed
+      :disabled="!valid"
+      @click="addComment"
     >
-      <base-card
-        :title="$t('comments.comments')"
-        :cancel-text="$t('generic.close')"
-        @cancel="dialog=false"
-      >
-        <template #content>
-          <v-form v-model="valid">
-            <v-textarea
-              v-model="message"
-              auto-grow
-              hide-details
-              outlined
-              rows="1"
-              name="CommentInput"
-              :label="$t('comments.message')"
-              :rules="commentRules"
-            />
-            <v-btn
-              class="white--text text-capitalize mt-3"
-              color="primary"
-              depressed
-              :disabled="!valid"
-              @click="add"
-            >
-              {{ $t('comments.send') }}
-            </v-btn>
-          </v-form>
-          <comment
-            v-for="comment in comments"
-            :key="comment.id"
-            :comment="comment"
-            :user-id="user.id"
-            @delete-comment="remove"
-            @update-comment="maybeUpdate"
-          />
-        </template>
-      </base-card>
-    </v-dialog>
-  </div>
+      {{ $t('comments.send') }}
+    </v-btn>
+  </v-form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters } from 'vuex'
-import BaseCard from '@/components/molecules/BaseCard.vue'
-import { CommentItem } from '@/models/comment'
-import Comment from './Comment.vue'
-import { CommentReadDTO } from '~/services/application/comment.service'
 
 export default Vue.extend({
-  components: {
-    BaseCard,
-    Comment
-  },
-
-  async fetch() {
-    this.user = await this.$services.user.getMyProfile()
-  },
-
   data() {
     return {
-      dialog: false,
-      user: {},
-      comments: [] as CommentReadDTO[],
       commentRules: [
         (v: string) => !!v.trim() || 'Comment is required'
       ],
@@ -92,38 +36,10 @@ export default Vue.extend({
     }
   },
 
-  computed: {
-    ...mapGetters('documents', ['currentDoc'])
-  },
-
-  watch: {
-    currentDoc: {
-      handler(val) {
-        if (val !== undefined) {
-          this.list()
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-
   methods: {
-    async list() {
-      this.comments = await this.$services.comment.list(this.$route.params.id, this.currentDoc.id)
-    },
-    async add() {
-      await this.$services.comment.create(this.$route.params.id, this.currentDoc.id, this.message)
-      this.list()
+    addComment() {
+      this.$emit('add-comment', this.message)
       this.message = ''
-    },
-    async remove(item: CommentItem) {
-      await this.$services.comment.delete(this.$route.params.id, this.currentDoc.id, item)
-      this.list()
-    },
-    async maybeUpdate(item: CommentItem) {
-      await this.$services.comment.update(this.$route.params.id, this.currentDoc.id, item)
-      this.list()
     }
   }
 })

frontend/layouts/annotation.vue

@@ -58,11 +58,35 @@
             />
             <guideline-button />
             <clear-annotations-button />
-            <form-create-comment />
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  class="text-capitalize ps-1 pe-1"
+                  min-width="36"
+                  icon
+                  v-on="on"
+                  @click="dialogComment=true"
+                >
+                  <v-icon>
+                    mdi-chat
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>{{ $t('annotation.commentTooltip') }}</span>
+            </v-tooltip>
+            
             <settings
               v-model="options"
               :errors="errors"
             />
+            <v-dialog
+              v-model="dialogComment"
+              width="800"
+            >
+              <form-create-comment
+                @cancel="dialogComment=false"
+              />
+            </v-dialog>
           </v-col>
           <v-spacer />
           <v-col>
@@ -113,7 +137,7 @@ import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 import FilterButton from '@/components/containers/annotation/FilterButton'
 import ApproveButton from '@/components/containers/annotation/ApproveButton'
-import FormCreateComment from '../components/comment/FormCreate.vue'
+import FormCreateComment from '../components/comment/FormCRUD.vue'
 import Pagination from '~/components/containers/annotation/Pagination'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
@@ -149,6 +173,7 @@ export default {
 
   data() {
     return {
+      dialogComment: false,
       drawerLeft: null,
       limit: 10,
       options: {