feat(frontend): Add editing of comment

legalconsenthub/components/FormEngine.vue

@@ -25,8 +25,9 @@
             :avatar="{ icon: 'i-lucide-bot' }"
             :content="comment.message"
             role="user"
-            :side="comment.createdBy.id === userDto.id ? 'right' : 'left'"
+            :side="isCommentByUser(comment) ? 'right' : 'left'"
             variant="subtle"
+            :actions="createChatMessageActions(comment)"
           >
             <template #leading="{ avatar }">
               <div class="flex flex-col">
@@ -38,16 +39,17 @@
         </UChatMessages>
       </template>
       <UTextarea v-model="commentTextAreaValue" class="w-full" />
-      <UButton class="my-3 lg:my-4" @click="submitComment(applicationFormId, formElement.id, commentTextAreaValue)">
-        Submit
-      </UButton>
+      <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 { CreateCommentDto, FormElementDto, FormOptionDto } from '~/.api-client'
+import type { FormElementDto, FormOptionDto } from '~/.api-client'
+import { useComment } from '~/composables/comment/useComment'
 import { resolveComponent } from 'vue'
 
 const props = defineProps<{
@@ -62,9 +64,19 @@ const emit = defineEmits<{
 }>()
 
 const commentStore = useCommentStore()
-const { load: loadComments, createComment } = commentStore
+const { load: loadComments } = commentStore
 const { comments } = storeToRefs(commentStore)
-const { userDto } = useAuth()
+
+const commentActions = useComment(props.applicationFormId)
+const {
+  submitComment,
+  updateEditComment,
+  cancelEditComment,
+  editComment,
+  isEditingComment,
+  isCommentByUser,
+  commentTextAreaValue
+} = commentActions
 
 if (props.applicationFormId) {
   console.log('Loading comments for application form:', props.applicationFormId)
@@ -72,7 +84,6 @@ if (props.applicationFormId) {
 }
 
 const activeFormElement = ref('')
-const commentTextAreaValue = ref('')
 
 // TODO: Lazy loading?
 function getResolvedComponent(formElement: FormElementDto) {
@@ -107,17 +118,16 @@ function toggleComments(formElementId: string) {
   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' })
+function createChatMessageActions(comment: CommentDto) {
+  const chatMessageActions = []
+
+  if (isCommentByUser(comment)) {
+    chatMessageActions.push({
+      label: 'Edit',
+      icon: 'i-lucide-pencil',
+      onClick: () => editComment(comment)
+    })
   }
+  return chatMessageActions
 }
 </script>

legalconsenthub/composables/comment/useComment.ts

@@ -1,73 +1,66 @@
-import { type CreateCommentDto, type CommentDto, type PagedCommentDto, ResponseError } from '~/.api-client'
-import { useCommentApi } from './useCommentApi'
+import type { CreateCommentDto, CommentDto } from '~/.api-client'
 
-export function useComment() {
-  const commentApi = useCommentApi()
+export function useComment(applicationFormId: string) {
+  const commentStore = useCommentStore()
+  const { createComment, updateComment } = commentStore
+  const { userDto } = useAuth()
+  const isEditingComment = ref(false)
+  const currentEditedComment = ref<CommentDto | null>(null)
+  const commentTextAreaValue = ref('')
 
-  async function createComment(
-    applicationFormId: string,
-    formElementId: string,
-    createCommentDto: CreateCommentDto
-  ): Promise<CommentDto> {
+  async function submitComment(formElementId: string) {
+    const newCommentDto: CreateCommentDto = {
+      message: commentTextAreaValue.value,
+      createdBy: userDto.value
+    }
     try {
-      return await commentApi.createComment(applicationFormId, formElementId, createCommentDto)
-    } catch (e: unknown) {
-      if (e instanceof ResponseError) {
-        console.error('Failed creating comment:', e.response)
-      } else {
-        console.error('Failed creating comment:', e)
-      }
-      return Promise.reject(e)
+      await createComment(applicationFormId, formElementId, newCommentDto)
+      commentTextAreaValue.value = ''
+      useToast().add({ title: 'Comment created successfully', color: 'success' })
+    } catch (e) {
+      useToast().add({ title: 'Error creating comment', color: 'error' })
+      console.error('Error creating comment:', e)
     }
   }
 
-  async function getCommentsByApplicationFormId(applicationFormId: string): Promise<PagedCommentDto> {
+  async function updateEditComment() {
+    if (!currentEditedComment.value) return
+    const updatedComment: CommentDto = { ...currentEditedComment.value, message: commentTextAreaValue.value }
     try {
-      return await commentApi.getCommentsByApplicationFormId(applicationFormId)
-    } catch (e: unknown) {
-      if (e instanceof ResponseError) {
-        console.error('Failed retrieving comments:', e.response)
-      } else {
-        console.error('Failed retrieving comments:', e)
-      }
-      return Promise.reject(e)
+      await updateComment(currentEditedComment.value.id, updatedComment)
+      commentTextAreaValue.value = ''
+      currentEditedComment.value = null
+      isEditingComment.value = false
+      useToast().add({ title: 'Comment updated successfully', color: 'success' })
+    } catch (e) {
+      useToast().add({ title: 'Error updating comment', color: 'error' })
+      console.error('Error updating comment:', e)
     }
   }
 
-  async function updateComment(id?: string, commentDto?: CommentDto): Promise<CommentDto> {
-    if (!id || !commentDto) {
-      return Promise.reject(new Error('ID or comment DTO missing'))
+  function editComment(comment: CommentDto) {
+    isEditingComment.value = true
+    currentEditedComment.value = comment
+    commentTextAreaValue.value = comment.message || ''
   }
 
-    try {
-      return await commentApi.updateComment(id, commentDto)
-    } catch (e: unknown) {
-      if (e instanceof ResponseError) {
-        console.error(`Failed updating comment with ID ${id}:`, e.response)
-      } else {
-        console.error(`Failed updating comment with ID ${id}:`, e)
-      }
-      return Promise.reject(e)
-    }
+  function cancelEditComment() {
+    isEditingComment.value = false
+    currentEditedComment.value = null
+    commentTextAreaValue.value = ''
   }
 
-  async function deleteCommentById(id: string): Promise<void> {
-    try {
-      return await commentApi.deleteCommentById(id)
-    } catch (e: unknown) {
-      if (e instanceof ResponseError) {
-        console.error(`Failed deleting comment with ID ${id}:`, e.response)
-      } else {
-        console.error(`Failed deleting comment with ID ${id}:`, e)
-      }
-      return Promise.reject(e)
-    }
+  function isCommentByUser(comment: CommentDto) {
+    return comment.createdBy.id === userDto.value.id
   }
 
   return {
-    createComment,
-    getCommentsByApplicationFormId,
-    updateComment,
-    deleteCommentById
+    commentTextAreaValue,
+    submitComment,
+    updateEditComment,
+    editComment,
+    cancelEditComment,
+    isEditingComment,
+    isCommentByUser
   }
 }