Some comments code cleanup

Signed-off-by: Julius Härtl <jus@bitgrid.net>
2020-01-25 09:52:30 +01:00
parent 739a92e9a3
commit ad069e5e14
10 changed files with 187 additions and 163 deletions
--- a/src/components/ActivityEntry.vue
+++ b/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;
--- a/src/components/card/CardSidebar.vue
+++ b/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,
--- a/src/components/card/CommentItem.vue
+++ b/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>
--- a/src/components/card/CommentsTabSidebar.vue
+++ b/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>
--- a/src/helpers/xml.js
+++ b/src/helpers/xml.js
@@ -19,7 +19,7 @@ const xmlToJson = (xml) => {
 				obj[nodeName] = xmlToJson(item)
 			} else {
 				if (typeof obj[nodeName].push === 'undefined') {
-					var old = obj[nodeName]
+					const old = obj[nodeName]
 					obj[nodeName] = []
 					obj[nodeName].push(old)
 				}
@@ -38,42 +38,41 @@ const parseXml = (xml) => {
 	}
 	return dom
 }
+
+const commentToObject = (tag) => {
+	return {
+		cardId: tag['d:prop']['oc:objectId']['#text'],
+		id: tag['d:prop']['oc:id']['#text'],
+		actorId: tag['d:prop']['oc:actorId']['#text'],
+		actorDisplayName: tag['d:prop']['oc:actorDisplayName']['#text'],
+		creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
+		message: tag['d:prop']['oc:message']['#text'],
+	}
+}
+
+// FIXME: make this generic and not depending on comments
 const xmlToTagList = (xml) => {

-	let json = xmlToJson(parseXml(xml))
-	let list = json['d:multistatus']['d:response']
+	const json = xmlToJson(parseXml(xml))
+	const list = json['d:multistatus']['d:response']

 	// no element
 	if (list === undefined) {
 		return []
 	}
-	let result = []
+	const result = []

 	// one element
 	if (Array.isArray(list) === false) {
-		let tag = list['d:propstat']
-		result.push({
-			cardId: tag['d:prop']['oc:objectId']['#text'],
-			id: tag['d:prop']['oc:id']['#text'],
-			uId: tag['d:prop']['oc:actorId']['#text'],
-			creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
-			message: tag['d:prop']['oc:message']['#text']
-		})
+		result.push(commentToObject(list['d:propstat']))

 	// two or more elements
 	} else {
-		for (let index in list) {
-			let tag = list[index]['d:propstat']
-			if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
+		for (const index in list) {
+			if (list[index]['d:propstat']['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
 				continue
 			}
-			result.push({
-				cardId: tag['d:prop']['oc:objectId']['#text'],
-				id: tag['d:prop']['oc:id']['#text'],
-				uId: tag['d:prop']['oc:actorId']['#text'],
-				creationDateTime: tag['d:prop']['oc:creationDateTime']['#text'],
-				message: tag['d:prop']['oc:message']['#text']
-			})
+			result.push(commentToObject(list[index]['d:propstat']))
 		}
 	}
 	return result
--- a/src/services/CommentApi.js
+++ b/src/services/CommentApi.js
@@ -38,7 +38,7 @@ export class CommentApi {
 			<oc:filter-comments xmlns:D="DAV:" xmlns:oc="http://owncloud.org/ns">
 				<oc:limit>${card.limit}</oc:limit>
 				<oc:offset>${card.offset}</oc:offset>
-			</oc:filter-comments>`
+			</oc:filter-comments>`,
 		}).then(
 			(response) => {
 				return Promise.resolve(response.data)
@@ -56,19 +56,19 @@ export class CommentApi {
 		return axios({
 			method: 'POST',
 			url: this.url(`${commentObj.cardId}`),
-			data: { actorType: 'users', message: `${commentObj.comment}`, verb: 'comment' }
+			data: { actorType: 'users', message: `${commentObj.comment}`, verb: 'comment' },
 		}).then(
 			(response) => {
-				let header = response.headers['content-location']
-				let headerArray = header.split('/')
-				let id = headerArray[headerArray.length - 1]
+				const header = response.headers['content-location']
+				const headerArray = header.split('/')
+				const id = headerArray[headerArray.length - 1]

-				let ret = {
+				const ret = {
 					cardId: (commentObj.cardId).toString(),
 					id: id,
 					uId: getCurrentUser().uid,
 					creationDateTime: (new Date()).toString(),
-					message: commentObj.comment
+					message: commentObj.comment,
 				}
 				return Promise.resolve(ret)
 			},
@@ -92,7 +92,7 @@ export class CommentApi {
 						<oc:message>${data.comment}</oc:message>
 					</d:prop>
 				</d:set>
-			</d:propertyupdate>`
+			</d:propertyupdate>`,
 		}).then(
 			(response) => {
 				return Promise.resolve(response.data)
@@ -109,7 +109,7 @@ export class CommentApi {
 	deleteComment(data) {
 		return axios({
 			method: 'DELETE',
-			url: this.url(`${data.cardId}/${data.commentId}`)
+			url: this.url(`${data.cardId}/${data.commentId}`),
 		}).then(
 			(response) => {
 				return Promise.resolve(response.data)
--- a/src/store/comment.js
+++ b/src/store/comment.js
@@ -28,7 +28,7 @@ const apiClient = new CommentApi()

 export default {
 	state: {
-		comments: {}
+		comments: {},
 	},
 	mutations: {
 		addComments(state, commentObj) {
@@ -47,26 +47,26 @@ export default {
 			state.comments[newComment.cardId].push(newComment)
 		},
 		updateComment(state, comment) {
-			let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
+			const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
 			if (existingIndex !== -1) {
 				state.comments[comment.cardId][existingIndex].message = comment.comment
 			}
 		},
 		deleteComment(state, comment) {
-			let existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
+			const existingIndex = state.comments[comment.cardId].findIndex(_comment => _comment.id === comment.commentId)
 			if (existingIndex !== -1) {
 				state.comments[comment.cardId].splice(existingIndex, 1)
 			}
-		}
+		},
 	},
 	actions: {
 		listComments({ commit }, card) {
 			apiClient.listComments(card)
 				.then((comments) => {
 					const commentsJson = xmlToTagList(comments)
-					let returnObj = {
+					const returnObj = {
 						cardId: card.id,
-						comments: commentsJson
+						comments: commentsJson,
 					}
 					commit('addComments', returnObj)
 				})
@@ -88,6 +88,6 @@ export default {
 				.then((retVal) => {
 					commit('updateComment', data)
 				})
-		}
-	}
+		},
+	},
 }
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -95,7 +95,7 @@ export default new Vuex.Store({
 		},
 		currentBoardLabels: state => {
 			return state.currentBoard ? state.currentBoard.labels : []
-		}
+		},
 	},
 	mutations: {
 		toggleShowArchived(state) {