feat(frontend): Add editing of comment

This commit is contained in:
2025-05-16 19:02:14 +02:00
parent cdbf527ea6
commit 502d4a7297
2 changed files with 78 additions and 75 deletions

View File

@@ -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'))
}
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 editComment(comment: CommentDto) {
isEditingComment.value = true
currentEditedComment.value = comment
commentTextAreaValue.value = comment.message || ''
}
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 cancelEditComment() {
isEditingComment.value = false
currentEditedComment.value = null
commentTextAreaValue.value = ''
}
function isCommentByUser(comment: CommentDto) {
return comment.createdBy.id === userDto.value.id
}
return {
createComment,
getCommentsByApplicationFormId,
updateComment,
deleteCommentById
commentTextAreaValue,
submitComment,
updateEditComment,
editComment,
cancelEditComment,
isEditingComment,
isCommentByUser
}
}