feat: Move comment in FormEngine.vue into separate TheComment.vue component

legalconsenthub/components/FormEngine.vue

@@ -17,42 +17,20 @@
         />
       </div>
     </div>
-    <template v-if="applicationFormId && activeFormElement === formElement.id">
+    <TheComment
-      <template v-if="comments?.[formElement.id] && comments[formElement.id].length > 0">
+      v-if="applicationFormId && activeFormElement === formElement.id"
-        <UChatMessages :auto-scroll="false" :should-scroll-to-bottom="false">
+      :form-element-id="formElement.id"
-          <UChatMessage
+      :application-form-id="applicationFormId"
-            v-for="comment in comments[formElement.id]"
+      :comments="comments?.[formElement.id]"
-            :id="comment.id"
+    />
-            :key="comment.id"
-            :avatar="{ icon: 'i-lucide-bot' }"
-            :content="comment.message"
-            role="user"
-            :side="isCommentByUser(comment) ? 'right' : 'left'"
-            variant="subtle"
-            :actions="createChatMessageActions(comment)"
-          >
-            <template #leading="{ avatar }">
-              <div class="flex flex-col">
-                <UAvatar icon="i-lucide-bot" />
-                <p class="text-sm">{{ comment.createdBy.name }}</p>
-              </div>
-            </template>
-          </UChatMessage>
-        </UChatMessages>
-      </template>
-      <UTextarea v-model="commentTextAreaValue" class="w-full" />
-      <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElement.id)"> Submit </UButton>
-      <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> Edit comment </UButton>
-      <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> Cancel </UButton>
-    </template>
     <USeparator />
   </template>
 </template>
 
 <script setup lang="ts">
-import type { CommentDto, FormElementDto, FormOptionDto } from '~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~/.api-client'
-import { useCommentTextarea } from '~/composables/comment/useCommentTextarea'
 import { resolveComponent } from 'vue'
+import TheComment from '~/components/TheComment.vue'
 
 const props = defineProps<{
   modelValue: FormElementDto[]
@@ -69,17 +47,6 @@ const commentStore = useCommentStore()
 const { load: loadComments } = commentStore
 const { comments } = storeToRefs(commentStore)
 
-const commentActions = useCommentTextarea(props.applicationFormId)
-const {
-  submitComment,
-  updateEditComment,
-  cancelEditComment,
-  editComment,
-  isEditingComment,
-  isCommentByUser,
-  commentTextAreaValue
-} = commentActions
-
 if (props.applicationFormId) {
   console.log('Loading comments for application form:', props.applicationFormId)
   await loadComments(props.applicationFormId)
@@ -87,7 +54,6 @@ if (props.applicationFormId) {
 
 const activeFormElement = ref('')
 
-// TODO: Lazy loading?
 function getResolvedComponent(formElement: FormElementDto) {
   switch (formElement.type) {
     case 'CHECKBOX':
@@ -119,17 +85,4 @@ function toggleComments(formElementId: string) {
   activeFormElement.value = formElementId
   emit('click:comments', formElementId)
 }
-
-function createChatMessageActions(comment: CommentDto) {
-  const chatMessageActions = []
-
-  if (isCommentByUser(comment)) {
-    chatMessageActions.push({
-      label: 'Edit',
-      icon: 'i-lucide-pencil',
-      onClick: () => editComment(comment)
-    })
-  }
-  return chatMessageActions
-}
 </script>

legalconsenthub/components/TheComment.vue

@@ -0,0 +1,64 @@
+<template>
+  <template v-if="comments && comments.length > 0">
+    <UChatMessages :auto-scroll="false" :should-scroll-to-bottom="false">
+      <UChatMessage
+        v-for="comment in comments"
+        :id="comment.id"
+        :key="comment.id"
+        :avatar="{ icon: 'i-lucide-bot' }"
+        :content="comment.message"
+        role="user"
+        :side="isCommentByUser(comment) ? 'right' : 'left'"
+        variant="subtle"
+        :actions="createChatMessageActions(comment)"
+      >
+        <template #leading="{ avatar }">
+          <div class="flex flex-col">
+            <UAvatar icon="i-lucide-bot" />
+            <p class="text-sm">{{ comment.createdBy.name }}</p>
+          </div>
+        </template>
+      </UChatMessage>
+    </UChatMessages>
+  </template>
+  <UTextarea v-model="commentTextAreaValue" class="w-full" />
+  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)"> Submit </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> Edit comment </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> Cancel </UButton>
+</template>
+
+<script setup lang="ts">
+import type { CommentDto } from '~/.api-client'
+import { useCommentTextarea } from '~/composables/comment/useCommentTextarea'
+
+const props = defineProps<{
+  formElementId: string
+  applicationFormId: string
+  comments?: CommentDto[]
+}>()
+
+const commentActions = useCommentTextarea(props.applicationFormId)
+const {
+  submitComment,
+  updateEditComment,
+  cancelEditComment,
+  editComment,
+  isEditingComment,
+  isCommentByUser,
+  commentTextAreaValue
+} = commentActions
+
+function createChatMessageActions(comment: CommentDto) {
+  const chatMessageActions = []
+
+  if (isCommentByUser(comment)) {
+    chatMessageActions.push({
+      label: 'Edit',
+      icon: 'i-lucide-pencil',
+      onClick: () => editComment(comment)
+    })
+  }
+  return chatMessageActions
+}
+</script>
+