Implement editing

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

src/components/card/CardSidebarTabComments.vue

@@ -7,33 +7,7 @@
 			</span>
 		</div>
 
-		<div class="comment-form">
+		<CommentForm v-model="newComment" @submit="createComment" />
-			<form @submit.prevent="createComment">
-				<At ref="at"
-					v-model="newComment"
-					:members="members"
-					name-key="primaryKey"
-					:tab-select="true">
-					<template v-slot:item="s">
-						<Avatar :user="s.item.uid" />
-						<span v-text="s.item.displayname" />
-					</template>
-					<template v-slot:embeddedItem="scope">
-						<span>
-							<UserBubble v-if="scope.current.primaryKey"
-								:data-mention-id="scope.current.primaryKey"
-								:user="scope.current.primaryKey"
-								:display-name="scope.current.displayname" />
-						</span>
-					</template>
-					<div ref="contentEditable" contenteditable />
-				</At>
-				<input v-tooltip="t('deck', 'Save')"
-					class="icon-confirm"
-					type="submit"
-					value="">
-			</form>
-		</div>
 
 		<ul v-if="getCommentsForCard(card.id).length > 0" id="commentsFeed">
 			<CommentItem v-for="comment in getCommentsForCard(card.id)"
@@ -56,20 +30,18 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar, UserBubble } from '@nextcloud/vue'
+import { Avatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem'
+import CommentForm from './CommentForm'
 import InfiniteLoading from 'vue-infinite-loading'
-import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions'
 
 export default {
 	name: 'CardSidebarTabComments',
 	components: {
 		Avatar,
 		CommentItem,
+		CommentForm,
 		InfiniteLoading,
-		At,
-		UserBubble,
 	},
 	props: {
 		card: {
@@ -117,8 +89,7 @@ export default {
 			await this.$store.dispatch('fetchComments', { cardId: this.card.id })
 			this.isLoading = false
 		},
-		async createComment() {
+		async createComment(content) {
-			const content = this.contentEditableToParsed()
 			const commentObj = {
 				cardId: this.card.id,
 				comment: content,
@@ -132,37 +103,10 @@ export default {
 			await this.$store.dispatch('fetchMore', { cardId: this.card.id })
 			this.isLoading = false
 		},
-
-		/**
-		 * All credits for this go to the talk app
-		 * https://github.com/nextcloud/spreed/blob/e69740b372e17eec4541337b47baa262a5766510/src/components/NewMessageForm/NewMessageForm.vue#L100-L143
-		 */
-		contentEditableToParsed() {
-			const mentions = this.$refs.contentEditable.querySelectorAll('span[data-at-embedded]')
-			mentions.forEach(mention => {
-				// FIXME Adding a space after the mention should be improved to
-				// do it or not based on the next element instead of always
-				// adding it.
-				mention.replaceWith('@' + mention.firstElementChild.attributes['data-mention-id'].value + ' ')
-			})
-
-			return rawToParsed(this.$refs.contentEditable.innerHTML)
-		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
 	@import "../../css/comments";
-
-	.atwho-wrap {
-		width: 100%;
-		& > div[contenteditable] {
-			width: 100%;
-
-			&::v-deep > span > div {
-				vertical-align: middle;
-			}
-		}
-	}
 </style>

src/components/card/CommentItem.vue

@@ -1,12 +1,12 @@
 <template>
 	<li class="comment">
-		<template v-if="!edit">
+		<template>
 			<div class="comment--header">
 				<Avatar :user="comment.actorId" />
 				<span class="has-tooltip username">
 					{{ comment.actorDisplayName }}
 				</span>
-				<Actions @click.stop.prevent>
+				<Actions v-if="!edit" @click.stop.prevent>
 					<ActionButton icon="icon-rename" @click="showUpdateForm()">
 						{{ t('deck', 'Update') }}
 					</ActionButton>
@@ -14,37 +14,31 @@
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
+				<Actions v-else @click.stop.prevent>
+					<ActionButton icon="icon-close" @click="hideUpdateForm" />
+				</Actions>
 			</div>
-			<RichText :text="richText" :arguments="richArgs" />
+			<RichText v-if="!edit"
+				class="comment--content"
+				:text="richText"
+				:arguments="richArgs"
+				:autolink="true" />
+			<CommentForm v-else v-model="commentMsg" @submit="updateComment" />
 		</template>
-		<form v-else @submit.prevent="updateComment">
-			<input v-model="commentMsg"
-				type="text"
-				autofocus
-				required>
-			<input v-tooltip="t('deck', 'Save')"
-				class="icon-confirm"
-				type="submit"
-				value="">
-			<input type="submit"
-				value=""
-				class="icon-close"
-				@click.stop.prevent="hideUpdateForm">
-		</form>
 	</li>
 </template>
 
 <script>
 import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
-import escapeHtml from 'escape-html'
 import RichText from '@juliushaertl/vue-richtext'
-
+import CommentForm from './CommentForm'
 export default {
 	name: 'CommentItem',
 	components: {
 		Avatar,
 		Actions,
 		ActionButton,
+		CommentForm,
 		RichText,
 	},
 	props: {
@@ -64,15 +58,15 @@ export default {
 		richText() {
 			let message = this.parsedMessage
 			this.comment.mentions.forEach((mention, index) => {
-				message = message.replace('@' + mention.mentionId + '', `{user${index}}`)
+				// FIXME: currently only [a-z\-_0-9] are allowed inside of placeholders
+				message = message.split('@' + mention.mentionId + '').join(`{user-${mention.mentionId}}`)
 			})
 			return message
 		},
 		richArgs() {
 			const mentions = [...this.comment.mentions]
-			// TODO mentions are set once per user, so when mentioning the same user multiple times this doesn't work
 			const result = mentions.reduce(function(result, item, index) {
-				const itemKey = 'user' + index
+				const itemKey = 'user-' + item.mentionId
 				result[itemKey] = {
 					component: UserBubble,
 					props: {
@@ -87,7 +81,7 @@ export default {
 		parsedMessage() {
 			const div = document.createElement('div')
 			div.innerHTML = this.comment.message
-			return escapeHtml(div.textContent || div.innerText || '')
+			return (div.textContent || div.innerText || '')
 		},
 	},
 
@@ -101,13 +95,13 @@ export default {
 			this.commentMsg = ''
 			this.edit = false
 		},
-		updateComment() {
+		async updateComment() {
 			const data = {
 				comment: this.commentMsg,
 				cardId: this.comment.cardId,
 				commentId: this.comment.id,
 			}
-			this.$store.dispatch('updateComment', data)
+			await this.$store.dispatch('updateComment', data)
 			this.hideUpdateForm()
 		},
 		deleteComment(commentId) {
@@ -123,4 +117,8 @@ export default {
 
 <style scoped lang="scss">
 	@import "../../css/comments";
+
+	.comment--content::v-deep a {
+		text-decoration: underline;
+	}
 </style>

src/services/CommentApi.js

@@ -44,6 +44,29 @@ export class CommentApi {
 		return xmlToTagList(response.data)
 	}
 
+	async fetchComment({ cardId, commentId }) {
+		const response = await axios({
+			method: 'PROPFIND',
+			url: this.url(`${cardId}/${commentId}`),
+			data: `<?xml version="1.0"?>
+				<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
+					<d:prop>
+						<oc:id />
+						<oc:message />
+						<oc:actorType />
+						<oc:actorId />
+						<oc:actorDisplayName />
+						<oc:creationDateTime />
+						<oc:objectType />
+						<oc:objectId />
+						<oc:isUnread />
+						<oc:mentions />
+					</d:prop>
+				</d:propfind>`,
+		})
+		return xmlToTagList(response.data)
+	}
+
 	async createComment({ cardId, comment }) {
 		const response = await axios({
 			method: 'POST',

src/store/comment.js

@@ -25,7 +25,7 @@ import Vue from 'vue'
 
 const apiClient = new CommentApi()
 
-const COMMENT_FETCH_LIMIT = 3
+const COMMENT_FETCH_LIMIT = 10
 
 export default {
 	state: {
@@ -61,10 +61,10 @@ export default {
 				state.comments[cardId].comments.push(...newComments)
 			}
 		},
-		updateComment(state, comment) {
+		updateComment(state, { cardId, comment }) {
-			const existingIndex = state.comments[comment.cardId].comments.findIndex(_comment => _comment.id === comment.commentId)
+			const existingIndex = state.comments[cardId].comments.findIndex(c => c.id === comment.id)
 			if (existingIndex !== -1) {
-				state.comments[comment.cardId].comments[existingIndex].message = comment.comment
+				Object.assign(state.comments[cardId].comments[existingIndex], comment)
 			}
 		},
 		deleteComment(state, comment) {
@@ -82,14 +82,15 @@ export default {
 				offset: offset || 0,
 			})
 
-			if (comments.length < COMMENT_FETCH_LIMIT) {
-				commit('endReached', { cardId })
-				return
-			}
 			commit('addComments', {
 				cardId,
 				comments,
 			})
+
+			if (comments.length < COMMENT_FETCH_LIMIT) {
+				commit('endReached', { cardId })
+
+			}
 		},
 		async fetchMore({ commit, dispatch, getters }, { cardId }) {
 			// fetch newer comments first
@@ -107,7 +108,8 @@ export default {
 		},
 		async updateComment({ commit }, data) {
 			await apiClient.updateComment(data)
-			commit('updateComment', data)
+			const commentData = await apiClient.fetchComment(data)
+			await commit('updateComment', { cardId: data.cardId, comment: commentData[0] })
 		},
 	},
 }