fix(comments): comment deleting with activities installed

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>

Signed-off-by: Grigory V <scratchx@gmx.com>

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

@@ -7,6 +7,10 @@ import Vue from 'vue'
 import logger from './logger.js'
 import { getComments } from './services/GetComments.js'
 
+import { PiniaVuePlugin, createPinia } from 'pinia'
+
+Vue.use(PiniaVuePlugin)
+
 let ActivityTabPluginView
 let ActivityTabPluginInstance
 
@@ -16,16 +20,19 @@ let ActivityTabPluginInstance
 export function registerCommentsPlugins() {
 	window.OCA.Activity.registerSidebarAction({
 		mount: async (el, { context, fileInfo, reload }) => {
+			const pinia = createPinia()
+
 			if (!ActivityTabPluginView) {
 				const { default: ActivityCommmentAction } = await import('./views/ActivityCommentAction.vue')
-				ActivityTabPluginView = Vue.extend(ActivityCommmentAction)
+				ActivityTabPluginView = ActivityCommmentAction
 			}
 			ActivityTabPluginInstance = new ActivityTabPluginView({
 				parent: context,
 				propsData: {
 					reloadCallback: reload,
 					resourceId: fileInfo.id,
 				},
+				pinia,
 			})
 			ActivityTabPluginInstance.$mount(el)
 			logger.info('Comments plugin mounted in Activity sidebar action', { fileInfo })
@@ -42,7 +49,7 @@ export function registerCommentsPlugins() {
 		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)
+		const CommentsViewObject = CommentView
 
 		return comments.map((comment) => ({
 			timestamp: moment(comment.props.creationDateTime).toDate().getTime(),

apps/comments/src/components/Comment.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<component :is="tag"
-		v-show="!deleted"
+		v-show="!deleted && !isLimbo"
 		:class="{'comment--loading': loading}"
 		class="comment">
 		<!-- Comment header toolbar -->
@@ -121,6 +121,8 @@ import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconEdit from 'vue-material-design-icons/Pencil.vue'
 
 import CommentMixin from '../mixins/CommentMixin.js'
+import { mapStores } from 'pinia'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
 
 // Dynamic loading
 const NcRichContenteditable = () => import('@nextcloud/vue/dist/Components/NcRichContenteditable.js')
@@ -193,6 +195,7 @@ export default {
 	},
 
 	computed: {
+		...mapStores(useDeletedCommentLimbo),
 
 		/**
 		 * Is the current user the author of this comment
@@ -225,6 +228,12 @@ export default {
 		timestamp() {
 			return Date.parse(this.creationDateTime)
 		},
+
+		isLimbo() {
+			console.log('checking for limbo', this.id)
+
+			return this.deletedCommentLimboStore.checkForId(this.id)
+		},
 	},
 
 	watch: {

apps/comments/src/mixins/CommentMixin.js

@@ -7,6 +7,8 @@ import { showError, showUndo, TOAST_UNDO_TIMEOUT } from '@nextcloud/dialogs'
 import NewComment from '../services/NewComment.js'
 import DeleteComment from '../services/DeleteComment.js'
 import EditComment from '../services/EditComment.js'
+import { mapStores } from 'pinia'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
 import logger from '../logger.js'
 
 export default {
@@ -37,6 +39,10 @@ export default {
 		}
 	},
 
+	computed: {
+		...mapStores(useDeletedCommentLimbo),
+	},
+
 	methods: {
 		// EDITION
 		onEdit() {
@@ -64,11 +70,15 @@ export default {
 
 		// DELETION
 		onDeleteWithUndo() {
+			console.log('DELETE WITH UNDO')
+			this.$emit('delete')
 			this.deleted = true
+			this.deletedCommentLimboStore.addId(this.id)
 			const timeOutDelete = setTimeout(this.onDelete, TOAST_UNDO_TIMEOUT)
 			showUndo(t('comments', 'Comment deleted'), () => {
 				clearTimeout(timeOutDelete)
 				this.deleted = false
+				this.deletedCommentLimboStore.removeId(this.id)
 			})
 		},
 		async onDelete() {
@@ -80,6 +90,7 @@ export default {
 				showError(t('comments', 'An error occurred while trying to delete the comment'))
 				console.error(error)
 				this.deleted = false
+				this.deletedCommentLimboStore.removeId(this.id)
 			}
 		},
 

apps/comments/src/services/CommentsInstance.js

@@ -6,9 +6,11 @@
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
+import { PiniaVuePlugin, createPinia } from 'pinia'
 import CommentsApp from '../views/Comments.vue'
 import logger from '../logger.js'
 
+Vue.use(PiniaVuePlugin)
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
 
@@ -34,13 +36,16 @@ export default class CommentInstance {
 	 * @param  {object} options the vue options (propsData, parent, el...)
 	 */
 	constructor(resourceType = 'files', options = {}) {
+		const pinia = createPinia()
+
 		// Merge options and set `resourceType` property
 		options = {
 			...options,
 			propsData: {
 				...(options.propsData ?? {}),
 				resourceType,
 			},
+			pinia,
 		}
 		// Init Comments component
 		const View = Vue.extend(CommentsApp)

apps/comments/src/store/deletedCommentLimbo.js

@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useDeletedCommentLimbo = defineStore('deletedCommentLimbo', {
+	state: () => ({
+		idsInLimbo: [],
+	}),
+	actions: {
+		addId(id) {
+			console.log('ADDING ID TO LIMBO', id, this.idsInLimbo)
+			this.idsInLimbo.push(id)
+		},
+
+		removeId(id) {
+			console.log('REMOVING ID FROM LIMBO', id, this.idsInLimbo)
+			const index = this.idsInLimbo.indexOf(id)
+			if (index > -1) {
+				this.idsInLimbo.splice(index, 1)
+			}
+		},
+
+		checkForId(id) {
+			this.idsInLimbo.includes(id)
+		}
+	},
+})