feat(frontend,backend): Create and load comments

legalconsenthub/components/FormEngine.vue

@@ -1,30 +1,79 @@
 <template>
   <template v-for="(formElement, index) in props.modelValue" :key="formElement.id">
-    <UFormField>
-      <component
-        :is="getResolvedComponent(formElement)"
-        :form-options="formElement.options"
-        :disabled="props.disabled"
-        @update:form-options="updateFormOptions($event, index)"
-      />
-    </UFormField>
+    <div class="group py-3 lg:py-4">
+      <div class="flex justify-between">
+        <component
+          :is="getResolvedComponent(formElement)"
+          :form-options="formElement.options"
+          :disabled="props.disabled"
+          @update:form-options="updateFormOptions($event, index)"
+        />
+        <UIcon
+          name="i-lucide-message-square-more"
+          class="size-5 cursor-pointer hidden group-hover:block"
+          @click="toggleComments(formElement.id)"
+        />
+      </div>
+    </div>
+    <template v-if="applicationFormId && activeFormElement === formElement.id">
+      <template v-if="comments?.[formElement.id] && comments[formElement.id].length > 0">
+        <UChatMessages :auto-scroll="false" :should-scroll-to-bottom="false">
+          <UChatMessage
+            v-for="comment in comments[formElement.id]"
+            :id="comment.id"
+            :key="comment.id"
+            :avatar="{ icon: 'i-lucide-bot' }"
+            :content="comment.message"
+            role="user"
+            :side="comment.createdBy.id === userDto.id ? 'right' : 'left'"
+            variant="subtle"
+          >
+            <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 class="my-3 lg:my-4" @click="submitComment(applicationFormId, formElement.id, commentTextAreaValue)">
+        Submit
+      </UButton>
+    </template>
     <USeparator />
   </template>
 </template>
 
 <script setup lang="ts">
-import type { FormElementDto, FormOptionDto } from '~/.api-client'
+import type { CreateCommentDto, FormElementDto, FormOptionDto } from '~/.api-client'
 import { resolveComponent } from 'vue'
 
 const props = defineProps<{
   modelValue: FormElementDto[]
+  applicationFormId?: string
   disabled?: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: FormElementDto[]): void
+  (e: 'update:modelValue', formElementDto: FormElementDto[]): void
+  (e: 'click:comments', formElementId: string): void
 }>()
 
+const commentStore = useCommentStore()
+const { load: loadComments, createComment } = commentStore
+const { comments } = storeToRefs(commentStore)
+const { userDto } = useAuth()
+
+if (props.applicationFormId) {
+  console.log('Loading comments for application form:', props.applicationFormId)
+  await loadComments(props.applicationFormId)
+}
+
+const activeFormElement = ref('')
+const commentTextAreaValue = ref('')
+
 // TODO: Lazy loading?
 function getResolvedComponent(formElement: FormElementDto) {
   switch (formElement.type) {
@@ -48,4 +97,27 @@ function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: numbe
   updatedModelValue[formElementIndex] = { ...updatedModelValue[formElementIndex], options: formOptions }
   emit('update:modelValue', updatedModelValue)
 }
+
+function toggleComments(formElementId: string) {
+  if (activeFormElement.value === formElementId) {
+    activeFormElement.value = ''
+    return
+  }
+  activeFormElement.value = formElementId
+  emit('click:comments', formElementId)
+}
+
+async function submitComment(applicationFormId: string, formElementId: string, newComment: string) {
+  const newCommentDto: CreateCommentDto = {
+    message: newComment,
+    createdBy: userDto.value
+  }
+  try {
+    await createComment(applicationFormId, formElementId, newCommentDto)
+    commentTextAreaValue.value = ''
+    useToast().add({ title: 'Comment created successfully', color: 'success' })
+  } catch {
+    useToast().add({ title: 'Error creating comment', color: 'error' })
+  }
+}
 </script>