refactor(vue3): clear comment form on submit

Signed-off-by: grnd-alt <git@belakkaf.net>

Author: grnd-alt

src/components/ActivityEntry.vue

@@ -23,10 +23,12 @@ import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
 import relativeDate from '../mixins/relativeDate.js'
 import formatReadableDate from '../mixins/readableDate.js'
+import { h } from 'vue'
 
+// Vue 2's `{ functional: true, render(createElement, context) }` signature no
+// longer exists in Vue 3, so this is a regular component instead.
 const InternalLink = {
 	name: 'InternalLink',
-	functional: true,
 	props: {
 		href: {
 			type: String,
@@ -37,8 +39,8 @@ const InternalLink = {
 			default: '',
 		},
 	},
-	render(createElement, context) {
-		return createElement('a', { attrs: { href: context.props.href }, style: { 'font-weight': 600 } }, context.props.name)
+	render() {
+		return h('a', { href: this.href, style: { 'font-weight': 600 } }, this.name)
 	},
 }
 export default {

src/components/card/CardSidebarTabComments.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
+	<div class="comments" v-v-infinite-scroll="[infiniteHandler, {distance: 10, canLoadMore: () => commentStore.hasMoreComments(card.id)}]">
 		<div class="comment--header">
 			<NcAvatar :user="currentUser.uid" />
 			<span class="username">
@@ -16,15 +16,13 @@
 			:reply="true"
 			:preview="true"
 			@cancel="cancelReply" />
-		<CommentForm v-model="newComment" @submit="createComment" />
+		<CommentForm v-model="newComment" @submit="createComment($event)" />
 
 		<ul v-if="commentStore.getCommentsForCard(card.id).length > 0" id="commentsFeed">
-			<div v-v-infinite-scroll="[infiniteHandler, {canLoadMore: () => commentStore.hasMoreComments(card.id)}]">
-				<CommentItem v-for="comment in commentStore.getCommentsForCard(card.id)"
-					:key="comment.id"
-					:comment="comment"
-					@do-reload="loadComments" />
-			</div>
+			<CommentItem v-for="comment in commentStore.getCommentsForCard(card.id)"
+				:key="comment.id"
+				:comment="comment"
+				@do-reload="loadComments" />
 			<!-- <InfiniteLoading :identifier="card.id" @infinite="infiniteHandler">
 				<template #spinner>
 					<div class="icon-loading" />
@@ -101,19 +99,13 @@ export default {
 		},
 	},
 	methods: {
-		async infiniteHandler($state) {
+		async infiniteHandler() {
 			this.error = null
 			try {
 				await this.loadMore()
-				if (this.commentStore.hasMoreComments(this.card.id)) {
-					$state.loaded()
-				} else {
-					$state.complete()
-				}
 			} catch (e) {
 				console.error('Failed to fetch more comments during infinite loading', e)
 				this.error = t('deck', 'Failed to load comments')
-				$state.complete()
 			}
 		},
 		async loadComments() {
@@ -132,14 +124,13 @@ export default {
 				this.error = t('deck', 'Failed to load comments')
 			}
 		},
-		async createComment(content) {
+		async createComment(comment) {
 			const commentObj = {
 				cardId: this.card.id,
-				comment: content,
+				comment,
 			}
 			await this.commentStore.createComment(commentObj)
 			this.commentStore.setReplyTo(null)
-			this.newComment = ''
 			await this.loadComments()
 		},
 		async loadMore() {

src/components/card/CommentForm.vue

@@ -41,22 +41,29 @@ export default {
 		NcRichContenteditable,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
-	emits: ['input', 'submit'],
+	emits: ['update:modelValue', 'submit'],
 	data() {
 		return {
-			commentText: this.value,
 			error: null,
 		}
 	},
 	computed: {
 		...mapState(useBoardStore, {
 			currentBoard: 'currentBoard',
 		}),
+		commentText: {
+			get() {
+				return this.modelValue
+			},
+			set(value) {
+				this.$emit('update:modelValue', value)
+			},
+		},
 		members() {
 			const obj = {}
 			this.currentBoard.users.forEach(user => {
@@ -70,12 +77,7 @@ export default {
 			return obj
 		},
 		hasContent() {
-			return this.commentText.trim().length > 0
-		},
-	},
-	watch: {
-		value(val) {
-			this.commentText = val
+			return this.modelValue.trim().length > 0
 		},
 	},
 	methods: {
@@ -84,7 +86,7 @@ export default {
 		},
 		validate(submit) {
 			this.error = null
-			const content = this.commentText
+			const content = this.modelValue
 			if (submit && content.length === 0) {
 				this.error = t('deck', 'The comment cannot be empty.')
 			}
@@ -101,7 +103,7 @@ export default {
 				const temp = document.createElement('div')
 				temp.innerHTML = content
 				const text = temp.textContent || temp.innerText || ''
-				this.$emit('input', text)
+				this.$emit('update:modelValue', '')
 				this.$emit('submit', text)
 			}
 		},

src/components/card/CommentItem.vue

@@ -72,7 +72,7 @@
 		<CommentForm v-if="edit"
 			v-model="commentMsg"
 			dir="auto"
-			@submit="updateComment" />
+			@submit="updateComment($event)" />
 	</li>
 </template>
 
@@ -84,17 +84,28 @@ import md5 from 'blueimp-md5'
 import relativeDate from '../../mixins/relativeDate.js'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
 import moment from 'moment'
+import { h } from 'vue'
 import { useCommentStore } from '../../stores/comment.js'
 
+// Vue 2's `{ functional: true, render(createElement, context) }` signature no
+// longer exists in Vue 3, so this is a regular component instead.
 const AtMention = {
 	name: 'AtMention',
-	functional: true,
-	render(createElement, context) {
-		const { user, displayName } = context.props
-		return createElement(
+	props: {
+		user: {
+			type: String,
+			required: true,
+		},
+		displayName: {
+			type: String,
+			default: '',
+		},
+	},
+	render() {
+		return h(
 			'span',
-			{ attrs: { 'data-at-embedded': true, contenteditable: false } },
-			[createElement(NcUserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })],
+			{ 'data-at-embedded': true, 'data-mention-id': this.user, contenteditable: false },
+			[h(NcUserBubble, { user: this.user, displayName: this.displayName })],
 		)
 	},
 }
@@ -195,9 +206,9 @@ export default {
 			this.commentMsg = ''
 			this.edit = false
 		},
-		async updateComment() {
+		async updateComment(message) {
 			const data = {
-				comment: { id: this.comment.id, message: this.commentMsg },
+				comment: { id: this.comment.id, message },
 				cardId: this.comment.objectId,
 			}
 			await this.commentStore.updateComment(data)

src/css/comments.scss

@@ -2,6 +2,11 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+ .comments {
+	height: 100%;
+	overflow: auto;
+ }
 .comment-form form {
 	display: flex;
 	flex-grow: 1;