Move to OCS requests in comments api service

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

src/components/card/CommentItem.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="reply" class="reply">
-		{{ t('deck', 'In reply to') }} <UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+		<span class="reply--hint">{{ t('deck', 'In reply to') }} <UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" /></span>
 		<RichText class="comment--content"
 			:text="richText(comment)"
 			:arguments="richArgs(comment)"
@@ -13,14 +13,14 @@
 				<span class="has-tooltip username">
 					{{ comment.actorDisplayName }}
 				</span>
-				<Actions v-show="canEdit && !edit">
+				<Actions v-show="!edit" :force-menu="true">
 					<ActionButton icon="icon-reply" @click="replyTo()">
 						{{ t('deck', 'Reply') }}
 					</ActionButton>
-					<ActionButton icon="icon-rename" @click="showUpdateForm()">
+					<ActionButton v-if="canEdit" icon="icon-rename" @click="showUpdateForm()">
 						{{ t('deck', 'Update') }}
 					</ActionButton>
-					<ActionButton icon="icon-delete" @click="deleteComment()">
+					<ActionButton v-if="canEdit" icon="icon-delete" @click="deleteComment()">
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
@@ -33,12 +33,13 @@
 				</div>
 			</div>
 			<CommentItem v-if="comment.replyTo" :reply="true" :comment="comment.replyTo" />
-			<RichText v-show="!edit"
+			<div v-show="!edit" ref="richTextElement">
-				ref="richTextElement"
+				<RichText
-				class="comment--content"
+					class="comment--content"
-				:text="richText(comment)"
+					:text="richText(comment)"
-				:arguments="richArgs(comment)"
+					:arguments="richArgs(comment)"
-				:autolink="true" />
+					:autolink="true" />
+			</div>
 			<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
 		</template>
 	</li>
@@ -152,14 +153,14 @@ export default {
 			const data = {
 				comment: this.commentMsg,
 				cardId: this.comment.objectId,
-				commentId: this.comment.id,
+				id: this.comment.id,
 			}
 			await this.$store.dispatch('updateComment', data)
 			this.hideUpdateForm()
 		},
 		deleteComment() {
 			const data = {
-				commentId: this.comment.id,
+				id: this.comment.id,
 				cardId: this.comment.objectId,
 			}
 			this.$store.dispatch('deleteComment', data)
@@ -173,8 +174,14 @@ export default {
 
 	.reply {
 		border-left: 3px solid var(--color-primary-element);
-		padding-left: 10px;
+		padding-left: 5px;
-		margin-left: 44px;
+		margin-left: 2px;
+
+		.reply--hint {
+			font-size: 0.9em;
+			color: var(--color-text-lighter);
+			vertical-align: top;
+		}
 
 		.comment--content {
 			margin: 0;

src/services/CommentApi.js

@@ -21,8 +21,7 @@
  */
 
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
-import xmlToTagList from '../helpers/xml'
 
 export class CommentApi {
 
@@ -32,53 +31,30 @@ export class CommentApi {
 	}
 
 	async loadComments({ cardId, limit, offset }) {
-		const api = await axios.get(generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments`), {
+		const api = await axios.get(generateOcsUrl(`apps/deck/api/v1.0/cards`, 2) + `${cardId}/comments`, {
 			headers: { 'OCS-APIRequest': 'true' },
 		})
-		return api.data
+		return api.data.ocs.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, replyTo }) {
-		const api = await axios.post(generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments`), {
+		const api = await axios.post(generateOcsUrl(`apps/deck/api/v1.0/cards`, 2) + `${cardId}/comments`, {
 			message: `${comment}`,
 			parentId: replyTo ? replyTo.id : null,
 		})
-		return api.data
+		return api.data.ocs.data
 	}
 
-	async updateComment({ cardId, commentId, comment }) {
+	async updateComment({ cardId, id, comment }) {
-		const api = await axios.put(generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments/${commentId}`), {
+		const api = await axios.put(generateOcsUrl(`apps/deck/api/v1.0/cards`, 2) + `${cardId}/comments/${id}`, {
 			message: `${comment}`,
 		})
-		return api.data
+		return api.data.ocs.data
 	}
 
-	async deleteComment({ cardId, commentId }) {
+	async deleteComment({ cardId, id }) {
-		const api = await axios.delete(generateUrl(`/apps/deck/api/v1.0/boards/0/stacks/0/cards/${cardId}/comments/${commentId}`))
+		const api = await axios.delete(generateOcsUrl(`apps/deck/api/v1.0/cards`, 2) + `${cardId}/comments/${id}`)
-		return api.data
+		return api.data.ocs.data
 	}
 
 	async markCommentsAsRead(cardId) {

src/store/comment.js

@@ -53,7 +53,7 @@ export default {
 			if (state.comments[cardId] === undefined) {
 				Vue.set(state.comments, cardId, {
 					hasMore: comments.length > 0,
-					comments,
+					comments: [ ...comments ],
 				})
 			} else {
 				const newComments = comments.filter((comment) => {