fix(comments): Fix issues thrown by comments sidebar tab code

When the comments tab is used instead of the merged activity+comments, then some issues are throws due to prop altering and duplicated names (resourceId as prop and data).

This is fixed as well as some other vue related errors in the sidebar

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

diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js
index 1a367cc18ee8a58c42b2f61322df70a718c4a27e..73038412bd3067adf2e65248ec4977e469e5d856 100644 (file)
--- a/apps/comments/src/comments-tab.js
+++ b/apps/comments/src/comments-tab.js
@@ -49,6 +49,9 @@ if (loadState('comments', 'activityEnabled', false) && OCA?.Activity?.registerSi
                        TabInstance = new OCA.Comments.View('files', {
                                // Better integration with vue parent component
                                parent: context,
+                               propsData: {
+                                       resourceId: fileInfo.id,
+                               },
                        })
                        // Only mount after we have all the info we need
                        await TabInstance.update(fileInfo.id)

diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 7936610ad123592bfbf563bed7ac65fc96e9f18a..037f8d6a3f0f8887cdec2a7ea4a4d326d3296eab 100644 (file)
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -31,7 +31,7 @@
                        :resource-type="resourceType"
                        :editor="true"
                        :user-data="userData"
-                       :resource-id="resourceId"
+                       :resource-id="currentResourceId"
                        class="comments__writer"
                        @new="onNewComment" />
 
@@ -52,7 +52,7 @@
                                        :auto-complete="autoComplete"
                                        :resource-type="resourceType"
                                        :message.sync="comment.props.message"
-                                       :resource-id="resourceId"
+                                       :resource-id="currentResourceId"
                                        :user-data="genMentionsData(comment.props.mentions)"
                                        class="comments__list"
                                        @delete="onDelete" />
@@ -125,7 +125,7 @@ export default {
                        loading: false,
                        done: false,
 
-                       resourceId: null,
+                       currentResourceId: this.resourceId,
                        offset: 0,
                        comments: [],
 
@@ -145,13 +145,19 @@ export default {
                },
        },
 
+       watch: {
+               resourceId() {
+                       this.currentResourceId = this.resourceId
+               },
+       },
+
        methods: {
                t,
 
                async onVisibilityChange(isVisible) {
                        if (isVisible) {
                                try {
-                                       await markCommentsAsRead(this.resourceType, this.resourceId, new Date())
+                                       await markCommentsAsRead(this.resourceType, this.currentResourceId, new Date())
                                } catch (e) {
                                        showError(e.message || t('comments', 'Failed to mark comments as read'))
                                }
@@ -164,7 +170,7 @@ export default {
                 * @param {number} resourceId the current resourceId (fileId...)
                 */
                async update(resourceId) {
-                       this.resourceId = resourceId
+                       this.currentResourceId = resourceId
                        this.resetState()
                        this.getComments()
                },
@@ -203,7 +209,7 @@ export default {
                                // Fetch comments
                                const { data: comments } = await request({
                                        resourceType: this.resourceType,
-                                       resourceId: this.resourceId,
+                                       resourceId: this.currentResourceId,
                                }, { offset: this.offset }) || { data: [] }
 
                                this.logger.debug(`Processed ${comments.length} comments`, { comments })

diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index e727f35a787303bce53e9ab6a5d75cccac912982..9a28930f388ab54371be02c10b16a5cead2eae12 100644 (file)
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -33,7 +33,7 @@
                @opened="handleOpened"
                @closing="handleClosing"
                @closed="handleClosed">
-               <template #subname>
+               <template v-if="fileInfo" #subname>
                        <NcIconSvgWrapper v-if="fileInfo.isFavourited"
                                :path="mdiStar"
                                :name="t('files', 'Favorite')"
@@ -222,7 +222,7 @@ export default {
                 * @return {string}
                 */
                size() {
-                       return formatFileSize(this.fileInfo.size)
+                       return formatFileSize(this.fileInfo?.size)
                },
 
                /**
@@ -337,7 +337,7 @@ export default {
                },
 
                getPreviewIfAny(fileInfo) {
-                       if (fileInfo.hasPreview && !this.isFullScreen) {
+                       if (fileInfo?.hasPreview && !this.isFullScreen) {
                                return generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
                        }
                        return this.getIconUrl(fileInfo)
@@ -351,7 +351,7 @@ export default {
                 * @return {string} Url to the icon for mimeType
                 */
                getIconUrl(fileInfo) {
-                       const mimeType = fileInfo.mimetype || 'application/octet-stream'
+                       const mimeType = fileInfo?.mimetype || 'application/octet-stream'
                        if (mimeType === 'httpd/unix-directory') {
                                // use default folder icon
                                if (fileInfo.mountType === 'shared' || fileInfo.mountType === 'shared-root') {