Some comments code cleanup

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

src/components/ActivityEntry.vue

@@ -59,6 +59,8 @@ export default {
 <style scoped lang="scss">
 	.activity {
 		display: flex;
+		padding: 10px;
+
 		.activity--icon {
 			width: 16px;
 			height: 16px;

src/components/card/CardSidebar.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<app-sidebar v-if="currentCard !== null && currentBoard && copiedCard !== null"
+	<AppSidebar v-if="currentCard !== null && currentBoard && copiedCard !== null"
 		:actions="toolbarActions"
 		:title="currentCard.title"
 		:subtitle="subtitle"
@@ -159,7 +159,7 @@ export default {
 		ActionButton,
 		Avatar,
 		CollectionList,
-		CommentsTabSidebar
+		CommentsTabSidebar,
 	},
 	mixins: [
 		Color,

src/components/card/CommentItem.vue

@@ -1,45 +1,60 @@
 <template>
-	<li>
-		<form v-if="edit" @submit.prevent="updateComment">
-			<input v-model="commentMsg" type="text" autofocus
+	<li class="comment">
+		<template v-if="!edit">
+			<div class="comment--header">
+				<Avatar :user="comment.actorId" />
+				<span class="has-tooltip username">
+					{{ comment.actorDisplayName }}
+				</span>
+				<Actions @click.stop.prevent>
+					<ActionButton icon="icon-rename" @click="showUpdateForm()">
+						{{ t('deck', 'Update') }}
+					</ActionButton>
+					<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">
+						{{ t('deck', 'Delete') }}
+					</ActionButton>
+				</Actions>
+			</div>
+			<!-- FIXME: Check if input is sanitized -->
+			<p class="comment--content" v-html="comment.message" /><p />
+		</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"
+			<input v-tooltip="t('deck', 'Save')"
+				class="icon-confirm"
+				type="submit"
 				value="">
-			<input type="submit" value="" class="icon-close"
+			<input type="submit"
+				value=""
+				class="icon-close"
 				@click.stop.prevent="hideUpdateForm">
 		</form>
-
-		<template v-else>
-			{{ comment.uId }}: {{ comment.message }}
-			<Actions @click.stop.prevent>
-				<ActionButton icon="icon-rename" @click="showUpdateForm()">{{ t('deck', 'Update') }}</ActionButton>
-				<ActionButton icon="icon-delete" @click="deleteComment(comment.id)">{{ t('deck', 'Delete') }}</ActionButton>
-			</Actions>
-		</template>
 	</li>
 </template>
 
 <script>
-import { Avatar } from 'nextcloud-vue'
-import { Actions } from 'nextcloud-vue/dist/Components/Actions'
-import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+import { Avatar, Actions, ActionButton } from '@nextcloud/vue'
+
 export default {
 	name: 'CommentItem',
 	components: {
 		Avatar,
 		Actions,
-		ActionButton
+		ActionButton,
 	},
 	props: {
 		comment: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
 			edit: false,
-			commentMsg: ''
+			commentMsg: '',
 		}
 	},
 
@@ -54,28 +69,25 @@ export default {
 			this.edit = false
 		},
 		updateComment() {
-			let data = {
+			const data = {
 				comment: this.commentMsg,
 				cardId: this.comment.cardId,
-				commentId: this.comment.id
+				commentId: this.comment.id,
 			}
 			this.$store.dispatch('updateComment', data)
 			this.hideUpdateForm()
 		},
 		deleteComment(commentId) {
-			let data = {
+			const data = {
 				commentId: commentId,
-				cardId: this.comment.cardId
+				cardId: this.comment.cardId,
 			}
 			this.$store.dispatch('deleteComment', data)
-		}
-	}
+		},
+	},
 }
 </script>
 
-<style lang="scss">
-	form {
-		display: flex
-	}
-
+<style scoped lang="scss">
+	@import "../../css/comments";
 </style>

src/components/card/CommentsTabSidebar.vue

@@ -1,28 +1,21 @@
 <template>
 	<div>
-		<div id="userDiv">
-			<avatar :user="card.owner.uid" />
+		<div class="comment--header">
+			<Avatar :user="card.owner.uid" />
 			<span class="has-tooltip username">
 				{{ card.owner.displayname }}
 			</span>
 		</div>
 
-		<!-- <div id="commentForm">
+		<div class="comment-form">
 			<form @submit.prevent="createComment()">
-				<input :placeholder="t('deck', 'New comment') + ' ...'" v-model="newComment" type="text"
-					autofocus required>
-				<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
-					value="">
-			</form>
-		</div>
- -->
-
-		<div id="commentForm" class="editor">
-			<form @submit.prevent="createComment()">
-				<editor-content :editor="editor" :placeholder="t('deck', 'New comment') + ' ...'"
+				<EditorContent :editor="editor"
+					:placeholder="t('deck', 'New comment') + ' ...'"
 					class="editor__content"
 					required />
-				<input v-tooltip="t('deck', 'Save')" class="icon-confirm" type="submit"
+				<input v-tooltip="t('deck', 'Save')"
+					class="icon-confirm"
+					type="submit"
 					value="">
 			</form>
 		</div>
@@ -34,8 +27,7 @@
 					:key="user.uid"
 					:class="{ 'is-selected': navigatedUserIndex === index }"
 					class="suggestion-list__item"
-					@click="selectUser(user)"
-				>
+					@click="selectUser(user)">
 					{{ user.displayname }}
 				</div>
 			</template>
@@ -44,16 +36,20 @@
 			</div>
 		</div>
 
-		<p v-for="comment in comments[card.id]">{{ comment.id }}</p>
-
-		<div v-if="isLoading" class="icon icon-loading" />
-
-		<ul id="commentsFeed">
-			<CommentItem v-for="comment in comments[card.id]" :comment="comment" :key="comment.id"
+		<ul id="commentsFeed" v-if="comments[card.id] && comments[card.id].length > 0">
+			<CommentItem v-for="comment in comments[card.id]"
+				:key="comment.id"
+				:comment="comment"
 				@doReload="loadComments" />
+			<a @click="loadMore">
+				Load More
+			</a>
 		</ul>
-		<button @click="loadMore">Load More</button>
-
+		<div v-else-if="isLoading" class="icon icon-loading" />
+		<div class="emptycontent" v-else>
+			<div class="icon-comment"></div>
+			<p>Keine Kommentare bisher. Beginne die Diskussion!</p>
+		</div>
 	</div>
 </template>
 
@@ -64,25 +60,21 @@ import { Editor, EditorContent } from 'tiptap'
 import { Mention } from 'tiptap-extensions'
 
 import { mapState } from 'vuex'
-import { Avatar } from 'nextcloud-vue'
-import { Actions } from 'nextcloud-vue/dist/Components/Actions'
-import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+import { Avatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem'
 
 export default {
 	name: 'CommentsTabSidebar',
 	components: {
 		Avatar,
-		Actions,
-		ActionButton,
 		CommentItem,
-    	EditorContent
+		EditorContent,
 	},
 	props: {
 		card: {
 			type: Object,
-			default: undefined
-		}
+			default: undefined,
+		},
 	},
 	data() {
 		return {
@@ -100,7 +92,7 @@ export default {
 						},
 						// is called when a suggestion starts
 						onEnter: ({
-							items, query, range, command, virtualNode
+							items, query, range, command, virtualNode,
 						}) => {
 							this.query = query
 							this.filteredUsers = items
@@ -113,7 +105,7 @@ export default {
 						},
 						// is called when a suggestion has changed
 						onChange: ({
-							items, query, range, virtualNode
+							items, query, range, virtualNode,
 						}) => {
 							this.query = query
 							this.filteredUsers = items
@@ -159,30 +151,30 @@ export default {
 							}
 							const fuse = new Fuse(items, {
 								threshold: 0.2,
-								keys: ['uid', 'displayname']
+								keys: ['uid', 'displayname'],
 							})
 							return fuse.search(query)
-						}
-					})
+						},
+					}),
 				],
 				content: '',
 				onUpdate: ({ getHTML }) => {
 					this.newComment = getHTML().replace(/(<p>|<\/p>)/g, '')
-				}
+				},
 			}),
 			query: null,
 			suggestionRange: null,
 			filteredUsers: [],
 			navigatedUserIndex: 0,
 			insertMention: () => {},
-			observer: null
+			observer: null,
 
 		}
 	},
 	computed: {
 		...mapState({
 			comments: state => state.comment.comments,
-			currentBoard: state => state.currentBoard
+			currentBoard: state => state.currentBoard,
 		}),
 
 		hasResults() {
@@ -190,7 +182,7 @@ export default {
 		},
 		showSuggestions() {
 			return this.query || this.hasResults
-		}
+		},
 
 	},
 	watch: {
@@ -198,8 +190,8 @@ export default {
 			immediate: true,
 			handler() {
 				this.loadComments()
-			}
-		}
+			},
+		},
 	},
 	created() {
 	},
@@ -214,13 +206,14 @@ export default {
 			})
 		},
 		createComment() {
-			let commentObj = {
+			const commentObj = {
 				cardId: this.card.id,
-				comment: this.newComment
+				comment: this.newComment,
 			}
 			this.$store.dispatch('createComment', commentObj)
 			this.loadComments()
 			this.newComment = ''
+			this.editor.setContent('')
 		},
 		loadMore() {
 			this.offset = this.offset + this.limit
@@ -250,8 +243,8 @@ export default {
 				range: this.suggestionRange,
 				attrs: {
 					id: user.uid,
-					label: user.displayname
-				}
+					label: user.displayname,
+				},
 			})
 			this.editor.focus()
 		},
@@ -268,7 +261,7 @@ export default {
 				placement: 'bottom-start',
 				inertia: true,
 				duration: [400, 200],
-				showOnInit: true
+				showOnInit: true,
 			})
 			// we have to update tippy whenever the DOM is updated
 			if (MutationObserver) {
@@ -278,7 +271,7 @@ export default {
 				this.observer.observe(this.$refs.suggestions, {
 					childList: true,
 					subtree: true,
-					characterData: true
+					characterData: true,
 				})
 			}
 		},
@@ -290,30 +283,11 @@ export default {
 			if (this.observer) {
 				this.observer.disconnect()
 			}
-		}
-	}
+		},
+	},
 }
 </script>
 
 <style scoped lang="scss">
-	#commentForm form {
-		display: flex;
-		flex-grow: 1;
-	}
-
-	.editor__content {
-		flex-grow: 1;
-
-		.ProseMirror {
-			width: 100%;
-		}
-	}
-	#userDiv {
-		margin-bottom: 20px;
-	}
-	.username {
-		padding: 12px 9px;
-		flex-grow: 1;
-	}
-
+	@import "../../css/comments";
 </style>