feat: comments script setup (#1930)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1930
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/tasks/partials/comments.vue

@@ -151,22 +151,19 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
 
-import AsyncEditor from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/AsyncEditor'
 
-import TaskCommentService from '../../../services/taskComment'
-import TaskCommentModel from '../../../models/taskComment'
+import TaskCommentService from '@/services/taskComment'
+import TaskCommentModel from '@/models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
-import {mapState} from 'vuex'
+import {success} from '@/message'
 
-export default defineComponent({
-	name: 'comments',
-	components: {
-		Editor: AsyncEditor,
-	},
-	props: {
+const props = defineProps({
 	taskId: {
 		type: Number,
 		required: true,
@@ -174,69 +171,65 @@ export default defineComponent({
 	canWrite: {
 		default: true,
 	},
-	},
-	data() {
-		return {
-			comments: [],
+})
 
-			showDeleteModal: false,
-			commentToDelete: new TaskCommentModel(),
+const {t} = useI18n()
+const store = useStore()
 
-			isCommentEdit: false,
-			commentEdit: new TaskCommentModel(),
+const comments = ref<TaskCommentModel[]>([])
 
-			taskCommentService: new TaskCommentService(),
-			newComment: new TaskCommentModel(),
-			editorActive: true,
+const showDeleteModal = ref(false)
+const commentToDelete = reactive(new TaskCommentModel())
 
-			saved: null,
-			saving: null,
-			creating: false,
-		}
-	},
-	watch: {
-		taskId: {
-			handler: 'loadComments',
-			immediate: true,
-		},
-	},
-	computed: {
-		...mapState({
-			userAvatar: state => state.auth.info.getAvatarUrl(48),
-			enabled: state => state.config.taskCommentsEnabled,
-		}),
-		actions() {
-			if (!this.canWrite) {
+const isCommentEdit = ref(false)
+const commentEdit = reactive(new TaskCommentModel())
+
+const newComment = reactive(new TaskCommentModel())
+
+const saved = ref(null)
+const saving = ref(null)
+
+const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
+const enabled = computed(() => store.state.config.taskCommentsEnabled)
+const actions = computed(() => {
+	if (!props.canWrite) {
 		return {}
 	}
-			return Object.fromEntries(this.comments.map((c) => ([
-				c.id,
+	return Object.fromEntries(comments.value.map((comment) => ([
+		comment.id,
 		[{
-					action: () => this.toggleDelete(c.id),
-					title: this.$t('misc.delete'),
+			action: () => toggleDelete(comment.id),
+			title: t('misc.delete'),
 		}],
 	])))
-		},
-	},
+})
 
-	methods: {
-		attachmentUpload(...args) {
-			return uploadFile(this.taskId, ...args)
-		},
+function attachmentUpload(...args) {
+	return uploadFile(props.taskId, ...args)
+}
 
-		async loadComments(taskId) {
-			if (!this.enabled) {
+const taskCommentService = shallowReactive(new TaskCommentService())
+async function loadComments(taskId) {
+	if (!enabled.value) {
 		return
 	}
 
-			this.newComment.taskId = taskId
-			this.commentEdit.taskId = taskId
-			this.commentToDelete.taskId = taskId
-			this.comments = await this.taskCommentService.getAll({taskId})
-		},
+	newComment.taskId = taskId
+	commentEdit.taskId = taskId
+	commentToDelete.taskId = taskId
+	comments.value = await taskCommentService.getAll({taskId})
+}
 
-		async addComment() {
-			if (this.newComment.comment === '') {
+watch(
+	() => props.taskId,
+	loadComments,
+	{immediate: true},
+)
+
+const editorActive = ref(true)
+const creating = ref(false)
+async function addComment() {
+	if (newComment.comment === '') {
 		return
 	}
 
@@ -245,66 +238,64 @@ export default defineComponent({
 	// which made it impossible to detect change from the outside. Therefore the component would
 	// not update if new content from the outside was made available.
 	// See https://github.com/NikulinIlya/vue-easymde/issues/3
-			this.editorActive = false
-			this.$nextTick(() => (this.editorActive = true))
-			this.creating = true
+	editorActive.value = false
+	nextTick(() => (editorActive.value = true))
+	creating.value = true
 
 	try {
-				const comment = await this.taskCommentService.create(this.newComment)
-				this.comments.push(comment)
-				this.newComment.comment = ''
-				this.$message.success({message: this.$t('task.comment.addedSuccess')})
+		const comment = await taskCommentService.create(newComment)
+		comments.value.push(comment)
+		newComment.comment = ''
+		success({message: t('task.comment.addedSuccess')})
 	} finally {
-				this.creating = false
+		creating.value = false
 	}
-		},
+}
 
-		toggleEdit(comment) {
-			this.isCommentEdit = !this.isCommentEdit
-			this.commentEdit = comment
-		},
+function toggleEdit(comment: TaskCommentModel) {
+	isCommentEdit.value = !isCommentEdit.value
+	Object.assign(commentEdit, comment)
+}
 
-		toggleDelete(commentId) {
-			this.showDeleteModal = !this.showDeleteModal
-			this.commentToDelete.id = commentId
-		},
+function toggleDelete(commentId) {
+	showDeleteModal.value = !showDeleteModal.value
+	commentToDelete.id = commentId
+}
 
-		async editComment() {
-			if (this.commentEdit.comment === '') {
+async function editComment() {
+	if (commentEdit.comment === '') {
 		return
 	}
 
-			this.saving = this.commentEdit.id
+	saving.value = commentEdit.id
 
-			this.commentEdit.taskId = this.taskId
+	commentEdit.taskId = props.taskId
 	try {
-				const comment = await this.taskCommentService.update(this.commentEdit)
-				for (const c in this.comments) {
-					if (this.comments[c].id === this.commentEdit.id) {
-						this.comments[c] = comment
+		const comment = await taskCommentService.update(commentEdit)
+		for (const c in comments.value) {
+			if (comments.value[c].id === commentEdit.id) {
+				comments.value[c] = comment
 			}
 		}
-				this.saved = this.commentEdit.id
+		saved.value = commentEdit.id
 		setTimeout(() => {
-					this.saved = null
+			saved.value = null
 		}, 2000)
 	} finally {
-				this.isCommentEdit = false
-				this.saving = null
+		isCommentEdit.value = false
+		saving.value = null
 	}
-		},
+}
 
-		async deleteComment(commentToDelete) {
+async function deleteComment(commentToDelete: TaskCommentModel) {
 	try {
-				await this.taskCommentService.delete(commentToDelete)
-				const index = this.comments.findIndex(({id}) => id === commentToDelete.id)
-				this.comments.splice(index, 1)
+		await taskCommentService.delete(commentToDelete)
+		const index = comments.value.findIndex(({id}) => id === commentToDelete.id)
+		comments.value.splice(index, 1)
 	} finally {
-				this.showDeleteModal = false
+		showDeleteModal.value = false
 	}
-		},
-	},
-})
+}
 </script>
 
 <style lang="scss" scoped>