Mark comments as read

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.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",