Implement api endpoints for comment reply handling

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/CommentItem.vue

@@ -1,5 +1,12 @@
 <template>
-	<li class="comment">
+	<div v-if="reply" class="reply">
+		{{ t('deck', 'In reply to') }} <UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+		<RichText class="comment--content"
+			:text="richText(comment)"
+			:arguments="richArgs(comment)"
+			:autolink="true" />
+	</div>
+	<li v-else class="comment">
 		<template>
 			<div class="comment--header">
 				<Avatar :user="comment.actorId" />
@@ -7,10 +14,13 @@
 					{{ comment.actorDisplayName }}
 				</span>
 				<Actions v-show="canEdit && !edit">
+					<ActionButton icon="icon-reply" @click="replyTo()">
+						{{ t('deck', 'Reply') }}
+					</ActionButton>
 					<ActionButton icon="icon-rename" @click="showUpdateForm()">
 						{{ t('deck', 'Update') }}
 					</ActionButton>
-					<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">
+					<ActionButton icon="icon-delete" @click="deleteComment()">
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
@@ -18,11 +28,12 @@
 					<ActionButton icon="icon-close" @click="hideUpdateForm" />
 				</Actions>
 			</div>
+			<CommentItem v-if="comment.replyTo" :reply="true" :comment="comment.replyTo" />
 			<RichText v-show="!edit"
 				ref="richTextElement"
 				class="comment--content"
-				:text="richText"
-				:arguments="richArgs"
+				:text="richText(comment)"
+				:arguments="richArgs(comment)"
 				:autolink="true" />
 			<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
 		</template>
@@ -53,6 +64,7 @@ export default {
 	name: 'CommentItem',
 	components: {
 		Avatar,
+		UserBubble,
 		Actions,
 		ActionButton,
 		CommentForm,
@@ -63,6 +75,10 @@ export default {
 			type: Object,
 			default: undefined,
 		},
+		reply: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -76,40 +92,48 @@ export default {
 			return this.comment.actorId === getCurrentUser().uid
 		},
 		richText() {
-			let message = this.parsedMessage
-			this.comment.mentions.forEach((mention, index) => {
-				// Currently only [a-z\-_0-9] are allowed inside of placeholders so we use a hash of the mention id as a unique identifier
-				const hash = md5(mention.mentionId)
-				message = message.split('@' + mention.mentionId + '').join(`{user-${hash}}`)
-				message = message.split('@"' + mention.mentionId + '"').join(`{user-${hash}}`)
+			return (comment) => {
+				let message = this.parsedMessage(comment.message)
+				comment.mentions.forEach((mention, index) => {
+					// Currently only [a-z\-_0-9] are allowed inside of placeholders so we use a hash of the mention id as a unique identifier
+					const hash = md5(mention.mentionId)
+					message = message.split('@' + mention.mentionId + '').join(`{user-${hash}}`)
+					message = message.split('@"' + mention.mentionId + '"').join(`{user-${hash}}`)
 
-			})
-			return message
+				})
+				return message
+			}
 		},
 		richArgs() {
-			const mentions = [...this.comment.mentions]
-			const result = mentions.reduce(function(result, item, index) {
-				const itemKey = 'user-' + md5(item.mentionId)
-				result[itemKey] = {
-					component: AtMention,
-					props: {
-						user: item.mentionId,
-						displayName: item.mentionDisplayName,
-					},
-				}
+			return (comment) => {
+				const mentions = [...comment.mentions]
+				const result = mentions.reduce((result, item, index) => {
+					const itemKey = 'user-' + md5(item.mentionId)
+					result[itemKey] = {
+						component: AtMention,
+						props: {
+							user: item.mentionId,
+							displayName: item.mentionDisplayName,
+						},
+					}
+					return result
+				}, {})
 				return result
-			}, {})
-			return result
+			}
 		},
 		parsedMessage() {
-			const div = document.createElement('div')
-			div.innerHTML = this.comment.message
-			return (div.textContent || div.innerText || '')
+			return (message) => {
+				const div = document.createElement('div')
+				div.innerHTML = message
+				return (div.textContent || div.innerText || '')
+			}
 		},
 	},
 
 	methods: {
-
+		replyTo() {
+			this.$store.dispatch('setReplyTo', this.comment)
+		},
 		showUpdateForm() {
 			this.commentMsg = this.$refs.richTextElement.$el.innerHTML
 			this.edit = true
@@ -121,16 +145,16 @@ export default {
 		async updateComment() {
 			const data = {
 				comment: this.commentMsg,
-				cardId: this.comment.cardId,
+				cardId: this.comment.objectId,
 				commentId: this.comment.id,
 			}
 			await this.$store.dispatch('updateComment', data)
 			this.hideUpdateForm()
 		},
-		deleteComment(commentId) {
+		deleteComment() {
 			const data = {
-				commentId: commentId,
-				cardId: this.comment.cardId,
+				commentId: this.comment.id,
+				cardId: this.comment.objectId,
 			}
 			this.$store.dispatch('deleteComment', data)
 		},
@@ -141,6 +165,15 @@ export default {
 <style scoped lang="scss">
 	@import "../../css/comments";
 
+	.reply {
+		border-left: 3px solid var(--color-primary-element);
+		padding-left: 10px;
+		margin-left: 44px;
+
+		.comment--content {
+			margin: 0;
+		}
+	}
 	.comment--content::v-deep a {
 		text-decoration: underline;
 	}