fix(comments): Mark comments as read

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

apps/comments/src/services/ReadComments.ts

@@ -0,0 +1,55 @@
+/**
+ * @copyright 2023 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import client from './DavClient.js'
+
+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 date the date object
+ */
+export const markCommentsAsRead = (
+	commentsType: string,
+	ressourceId: number,
+	date: Date,
+): Promise<Response> => {
+	const ressourcePath = ['', commentsType, ressourceId].join('/')
+	const readMarker = date.toUTCString()
+
+	return client.customRequest(ressourcePath, {
+		method: 'PROPPATCH',
+		data: `<?xml version="1.0"?>
+			<d:propertyupdate
+				xmlns:d="DAV:"
+				xmlns:oc="http://owncloud.org/ns">
+			<d:set>
+				<d:prop>
+					<oc:readMarker>${readMarker}</oc:readMarker>
+				</d:prop>
+			</d:set>
+			</d:propertyupdate>`,
+	})
+}

apps/comments/src/views/Comments.vue

@@ -22,7 +22,9 @@
   -->
 
 <template>
-	<div class="comments" :class="{ 'icon-loading': isFirstLoading }">
+	<div class="comments"
+		:class="{ 'icon-loading': isFirstLoading }"
+		v-observe-visibility="onVisibilityChange">
 		<!-- Editor -->
 		<Comment v-bind="editorData"
 			:auto-complete="autoComplete"
@@ -83,9 +85,11 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
+import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import VTooltip from 'v-tooltip'
 import Vue from 'vue'
+import VueObserveVisibility from 'vue-observe-visibility'
 
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -96,8 +100,10 @@ import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline
 import Comment from '../components/Comment.vue'
 import { getComments, DEFAULT_LIMIT } from '../services/GetComments.ts'
 import cancelableRequest from '../utils/cancelableRequest.js'
+import { markCommentsAsRead } from '../services/ReadComments.ts'
 
 Vue.use(VTooltip)
+Vue.use(VueObserveVisibility)
 
 export default {
 	name: 'Comments',
@@ -145,6 +151,16 @@ export default {
 	},
 
 	methods: {
+		async onVisibilityChange(isVisible) {
+			if (isVisible) {
+				try {
+					await markCommentsAsRead(this.commentsType, this.ressourceId, new Date())
+				} catch (e) {
+					showError(e.message || t('comments', 'Failed to mark comments as read'))
+				}
+			}
+		},
+
 		/**
 		 * Update current ressourceId and fetch new data
 		 *

package-lock.json

@@ -82,6 +82,7 @@
         "vue-localstorage": "^0.6.2",
         "vue-material-design-icons": "^5.0.0",
         "vue-multiselect": "^2.1.6",
+        "vue-observe-visibility": "^1.0.0",
         "vue-router": "^3.6.5",
         "vue-virtual-scroller": "^1.1.2",
         "vuedraggable": "^2.24.3",
@@ -3622,7 +3623,8 @@
     },
     "node_modules/@nextcloud/vue": {
       "version": "7.11.6",
-      "license": "AGPL-3.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.11.6.tgz",
+      "integrity": "sha512-HqstdUdQYHMFx/xD36OElbE0DvXmGSnPI9/stvRDlTYV+aG2XNQPn57k5cXjsQe5LAFv0SXwXVTzKA6q5+wuoA==",
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
@@ -22841,8 +22843,9 @@
       }
     },
     "node_modules/vue-observe-visibility": {
-      "version": "0.4.6",
-      "license": "MIT"
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz",
+      "integrity": "sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg=="
     },
     "node_modules/vue-resize": {
       "version": "1.0.1",
@@ -22917,6 +22920,11 @@
         "vue": "^2.6.11"
       }
     },
+    "node_modules/vue-virtual-scroller/node_modules/vue-observe-visibility": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+    },
     "node_modules/vue-virtual-scroller/node_modules/vue-resize": {
       "version": "0.4.5",
       "license": "MIT",
@@ -26348,6 +26356,8 @@
     },
     "@nextcloud/vue": {
       "version": "7.11.6",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-7.11.6.tgz",
+      "integrity": "sha512-HqstdUdQYHMFx/xD36OElbE0DvXmGSnPI9/stvRDlTYV+aG2XNQPn57k5cXjsQe5LAFv0SXwXVTzKA6q5+wuoA==",
       "requires": {
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
@@ -38682,7 +38692,9 @@
       "version": "2.1.7"
     },
     "vue-observe-visibility": {
-      "version": "0.4.6"
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz",
+      "integrity": "sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg=="
     },
     "vue-resize": {
       "version": "1.0.1",
@@ -38739,6 +38751,11 @@
         "vue-resize": "^0.4.5"
       },
       "dependencies": {
+        "vue-observe-visibility": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+          "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+        },
         "vue-resize": {
           "version": "0.4.5",
           "requires": {}

package.json

@@ -107,6 +107,7 @@
     "vue-localstorage": "^0.6.2",
     "vue-material-design-icons": "^5.0.0",
     "vue-multiselect": "^2.1.6",
+    "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vue-virtual-scroller": "^1.1.2",
     "vuedraggable": "^2.24.3",