fix(comments): Provide resourceType as property instead of mixin

Also fix typos where `ressource` instead of `resource` was used.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/comments/src/comments-activity-tab.ts

@@ -41,7 +41,7 @@ export function registerCommentsPlugins() {
 				parent: context,
 				propsData: {
 					reloadCallback: reload,
-					ressourceId: fileInfo.id,
+					resourceId: fileInfo.id,
 				},
 			})
 			ActivityTabPluginInstance.$mount(el)
@@ -56,7 +56,7 @@ export function registerCommentsPlugins() {
 	})
 
 	window.OCA.Activity.registerSidebarEntries(async ({ fileInfo, limit, offset }) => {
-		const { data: comments } = await getComments({ commentsType: 'files', ressourceId: fileInfo.id }, { limit, offset })
+		const { data: comments } = await getComments({ resourceType: 'files', resourceId: fileInfo.id }, { limit, offset })
 		logger.debug('Loaded comments', { fileInfo, comments })
 		const { default: CommentView } = await import('./views/ActivityCommentEntry.vue')
 		const CommentsViewObject = Vue.extend(CommentView)
@@ -68,7 +68,7 @@ export function registerCommentsPlugins() {
 					parent: context,
 					propsData: {
 						comment,
-						ressourceId: fileInfo.id,
+						resourceId: fileInfo.id,
 						reloadCallback: reload,
 					},
 				})

apps/comments/src/mixins/CommentMixin.js

@@ -36,18 +36,21 @@ export default {
 			type: String,
 			default: '',
 		},
-		ressourceId: {
+		resourceId: {
 			type: [String, Number],
 			required: true,
 		},
+		resourceType: {
+			type: String,
+			default: 'files',
+		},
 	},
 
 	data() {
 		return {
 			deleted: false,
 			editing: false,
 			loading: false,
-			commentsType: 'files',
 		}
 	},
 
@@ -64,8 +67,8 @@ export default {
 		async onEditComment(message) {
 			this.loading = true
 			try {
-				await EditComment(this.commentsType, this.ressourceId, this.id, message)
-				logger.debug('Comment edited', { commentsType: this.commentsType, ressourceId: this.ressourceId, id: this.id, message })
+				await EditComment(this.resourceType, this.resourceId, this.id, message)
+				logger.debug('Comment edited', { resourceType: this.resourceType, resourceId: this.resourceId, id: this.id, message })
 				this.$emit('update:message', message)
 				this.editing = false
 			} catch (error) {
@@ -87,8 +90,8 @@ export default {
 		},
 		async onDelete() {
 			try {
-				await DeleteComment(this.commentsType, this.ressourceId, this.id)
-				logger.debug('Comment deleted', { commentsType: this.commentsType, ressourceId: this.ressourceId, id: this.id })
+				await DeleteComment(this.resourceType, this.resourceId, this.id)
+				logger.debug('Comment deleted', { resourceType: this.resourceType, resourceId: this.resourceId, id: this.id })
 				this.$emit('delete', this.id)
 			} catch (error) {
 				showError(t('comments', 'An error occurred while trying to delete the comment'))
@@ -101,8 +104,8 @@ export default {
 		async onNewComment(message) {
 			this.loading = true
 			try {
-				const newComment = await NewComment(this.commentsType, this.ressourceId, message)
-				logger.debug('New comment posted', { commentsType: this.commentsType, ressourceId: this.ressourceId, newComment })
+				const newComment = await NewComment(this.resourceType, this.resourceId, message)
+				logger.debug('New comment posted', { resourceType: this.resourceType, resourceId: this.resourceId, newComment })
 				this.$emit('new', newComment)
 
 				// Clear old content

apps/comments/src/mixins/CommentView.ts

@@ -6,10 +6,14 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
 	props: {
-		ressourceId: {
+		resourceId: {
 			type: Number,
 			required: true,
 		},
+		resourceType: {
+			type: String,
+			default: 'files',
+		},
 	},
 	data() {
 		return {
@@ -33,7 +37,7 @@ export default defineComponent({
 				params: {
 					search,
 					itemType: 'files',
-					itemId: this.ressourceId,
+					itemId: this.resourceId,
 					sorter: 'commenters|share-recipients',
 					limit: loadState('comments', 'maxAutoCompleteResults'),
 				},

apps/comments/src/services/CommentsInstance.js

@@ -47,19 +47,18 @@ export default class CommentInstance {
 	/**
 	 * Initialize a new Comments instance for the desired type
 	 *
-	 * @param {string} commentsType the comments endpoint type
+	 * @param {string} resourceType the comments endpoint type
 	 * @param  {object} options the vue options (propsData, parent, el...)
 	 */
-	constructor(commentsType = 'files', options) {
-		// Add comments type as a global mixin
-		Vue.mixin({
-			data() {
-				return {
-					commentsType,
-				}
+	constructor(resourceType = 'files', options = {}) {
+		// Merge options and set `resourceType` property
+		options = {
+			...options,
+			propsData: {
+				...(options.propsData ?? {}),
+				resourceType,
 			},
-		})
-
+		}
 		// Init Comments component
 		const View = Vue.extend(CommentsApp)
 		return new View(options)

apps/comments/src/services/DeleteComment.js

@@ -25,12 +25,12 @@ import client from './DavClient.js'
 /**
  * Delete a comment
  *
- * @param {string} commentsType the ressource type
- * @param {number} ressourceId the ressource ID
+ * @param {string} resourceType the resource type
+ * @param {number} resourceId the resource ID
  * @param {number} commentId the comment iD
  */
-export default async function(commentsType, ressourceId, commentId) {
-	const commentPath = ['', commentsType, ressourceId, commentId].join('/')
+export default async function(resourceType, resourceId, commentId) {
+	const commentPath = ['', resourceType, resourceId, commentId].join('/')
 
 	// Fetch newly created comment data
 	await client.deleteFile(commentPath)

apps/comments/src/services/EditComment.js

@@ -25,13 +25,13 @@ import client from './DavClient.js'
 /**
  * Edit an existing comment
  *
- * @param {string} commentsType the ressource type
- * @param {number} ressourceId the ressource ID
+ * @param {string} resourceType the resource type
+ * @param {number} resourceId the resource ID
  * @param {number} commentId the comment iD
  * @param {string} message the message content
  */
-export default async function(commentsType, ressourceId, commentId, message) {
-	const commentPath = ['', commentsType, ressourceId, commentId].join('/')
+export default async function(resourceType, resourceId, commentId, message) {
+	const commentPath = ['', resourceType, resourceId, commentId].join('/')
 
 	return await client.customRequest(commentPath, Object.assign({
 		method: 'PROPPATCH',

apps/comments/src/services/GetComments.ts

@@ -33,18 +33,18 @@ export const DEFAULT_LIMIT = 20
  * Retrieve the comments list
  *
  * @param {object} data destructuring object
- * @param {string} data.commentsType the ressource type
- * @param {number} data.ressourceId the ressource ID
+ * @param {string} data.resourceType the resource type
+ * @param {number} data.resourceId the resource ID
  * @param {object} [options] optional options for axios
  * @param {number} [options.offset] the pagination offset
  * @param {number} [options.limit] the pagination limit, defaults to 20
  * @param {Date} [options.datetime] optional date to query
  * @return {{data: object[]}} the comments list
  */
-export const getComments = async function({ commentsType, ressourceId }, options: { offset: number, limit?: number, datetime?: Date }) {
-	const ressourcePath = ['', commentsType, ressourceId].join('/')
+export const getComments = async function({ resourceType, resourceId }, options: { offset: number, limit?: number, datetime?: Date }) {
+	const resourcePath = ['', resourceType, resourceId].join('/')
 	const datetime = options.datetime ? `<oc:datetime>${options.datetime.toISOString()}</oc:datetime>` : ''
-	const response = await client.customRequest(ressourcePath, Object.assign({
+	const response = await client.customRequest(resourcePath, Object.assign({
 		method: 'REPORT',
 		data: `<?xml version="1.0"?>
 			<oc:filter-comments

apps/comments/src/services/NewComment.js

@@ -29,27 +29,27 @@ import client from './DavClient.js'
 /**
  * Retrieve the comments list
  *
- * @param {string} commentsType the ressource type
- * @param {number} ressourceId the ressource ID
+ * @param {string} resourceType the resource type
+ * @param {number} resourceId the resource ID
  * @param {string} message the message
  * @return {object} the new comment
  */
-export default async function(commentsType, ressourceId, message) {
-	const ressourcePath = ['', commentsType, ressourceId].join('/')
+export default async function(resourceType, resourceId, message) {
+	const resourcePath = ['', resourceType, resourceId].join('/')
 
-	const response = await axios.post(getRootPath() + ressourcePath, {
+	const response = await axios.post(getRootPath() + resourcePath, {
 		actorDisplayName: getCurrentUser().displayName,
 		actorId: getCurrentUser().uid,
 		actorType: 'users',
 		creationDateTime: (new Date()).toUTCString(),
 		message,
-		objectType: 'files',
+		objectType: resourceType,
 		verb: 'comment',
 	})
 
-	// Retrieve comment id from ressource location
+	// Retrieve comment id from resource location
 	const commentId = parseInt(response.headers['content-location'].split('/').pop())
-	const commentPath = ressourcePath + '/' + commentId
+	const commentPath = resourcePath + '/' + commentId
 
 	// Fetch newly created comment data
 	const comment = await client.stat(commentPath, {

apps/comments/src/services/ReadComments.ts

@@ -27,19 +27,19 @@ import type { Response } from 'webdav'
 /**
  * Mark comments older than the date timestamp as read
  *
- * @param commentsType the ressource type
- * @param ressourceId the ressource ID
+ * @param resourceType the resource type
+ * @param resourceId the resource ID
  * @param date the date object
  */
 export const markCommentsAsRead = (
-	commentsType: string,
-	ressourceId: number,
+	resourceType: string,
+	resourceId: number,
 	date: Date,
 ): Promise<Response> => {
-	const ressourcePath = ['', commentsType, ressourceId].join('/')
+	const resourcePath = ['', resourceType, resourceId].join('/')
 	const readMarker = date.toUTCString()
 
-	return client.customRequest(ressourcePath, {
+	return client.customRequest(resourcePath, {
 		method: 'PROPPATCH',
 		data: `<?xml version="1.0"?>
 			<d:propertyupdate

apps/comments/src/views/ActivityCommentAction.vue

@@ -23,9 +23,10 @@
 <template>
 	<Comment v-bind="editorData"
 		:auto-complete="autoComplete"
-		:user-data="userData"
+		:comments-type="resourceType"
 		:editor="true"
-		:ressource-id="ressourceId"
+		:user-data="userData"
+		:resource-id="resourceId"
 		class="comments-action"
 		@new="onNewComment" />
 </template>

apps/comments/src/views/ActivityCommentEntry.vue

@@ -25,8 +25,9 @@
 		tag="li"
 		v-bind="comment.props"
 		:auto-complete="autoComplete"
+		:comments-type="resourceType"
 		:message="commentMessage"
-		:ressource-id="ressourceId"
+		:resource-id="resourceId"
 		:user-data="genMentionsData(comment.props.mentions)"
 		class="comments-activity"
 		@delete="reloadCallback()" />

apps/comments/src/views/Comments.vue

@@ -28,9 +28,10 @@
 		<!-- Editor -->
 		<Comment v-bind="editorData"
 			:auto-complete="autoComplete"
-			:user-data="userData"
+			:comments-type="resourceType"
 			:editor="true"
-			:ressource-id="ressourceId"
+			:user-data="userData"
+			:resource-id="resourceId"
 			class="comments__writer"
 			@new="onNewComment" />
 
@@ -49,8 +50,9 @@
 					tag="li"
 					v-bind="comment.props"
 					:auto-complete="autoComplete"
+					:comments-type="resourceType"
 					:message.sync="comment.props.message"
-					:ressource-id="ressourceId"
+					:resource-id="resourceId"
 					:user-data="genMentionsData(comment.props.mentions)"
 					class="comments__list"
 					@delete="onDelete" />
@@ -123,7 +125,7 @@ export default {
 			loading: false,
 			done: false,
 
-			ressourceId: null,
+			resourceId: null,
 			offset: 0,
 			comments: [],
 
@@ -149,20 +151,20 @@ export default {
 		async onVisibilityChange(isVisible) {
 			if (isVisible) {
 				try {
-					await markCommentsAsRead(this.commentsType, this.ressourceId, new Date())
+					await markCommentsAsRead(this.resourceType, this.resourceId, new Date())
 				} catch (e) {
 					showError(e.message || t('comments', 'Failed to mark comments as read'))
 				}
 			}
 		},
 
 		/**
-		 * Update current ressourceId and fetch new data
+		 * Update current resourceId and fetch new data
 		 *
-		 * @param {number} ressourceId the current ressourceId (fileId...)
+		 * @param {number} resourceId the current resourceId (fileId...)
 		 */
-		async update(ressourceId) {
-			this.ressourceId = ressourceId
+		async update(resourceId) {
+			this.resourceId = resourceId
 			this.resetState()
 			this.getComments()
 		},
@@ -200,8 +202,8 @@ export default {
 
 				// Fetch comments
 				const { data: comments } = await request({
-					commentsType: this.commentsType,
-					ressourceId: this.ressourceId,
+					resourceType: this.resourceType,
+					resourceId: this.resourceId,
 				}, { offset: this.offset }) || { data: [] }
 
 				this.logger.debug(`Processed ${comments.length} comments`, { comments })