[stable26] Allow to mark conversation as unread

src/components/LeftSidebar/ConversationsList/Conversation.spec.js

@@ -530,10 +530,22 @@ describe('Conversation.vue', () => {
 
 			expect(toggleFavoriteAction).toHaveBeenCalledWith(expect.anything(), item)
 		})
+		test('marks conversation as unread', async () => {
+			const markConversationUnreadAction = jest.fn().mockResolvedValueOnce()
+			testStoreConfig.modules.conversationsStore.actions.markConversationUnread = markConversationUnreadAction
+
+			const action = shallowMountAndGetAction('Mark as unread')
+			expect(action.exists()).toBe(true)
+
+			await action.find('button').trigger('click')
+
+			expect(markConversationUnreadAction).toHaveBeenCalledWith(expect.anything(), { token: item.token })
+		})
 		test('marks conversation as read', async () => {
 			const clearLastReadMessageAction = jest.fn().mockResolvedValueOnce()
 			testStoreConfig.modules.conversationsStore.actions.clearLastReadMessage = clearLastReadMessageAction
 
+			item.unreadMessages = 1
 			const action = shallowMountAndGetAction('Mark as read')
 			expect(action.exists()).toBe(true)
 

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -62,13 +62,22 @@
 				@click.stop.prevent="handleCopyLink">
 				{{ t('spreed', 'Copy link') }}
 			</NcActionButton>
-			<NcActionButton :close-after-click="true"
+			<NcActionButton v-if="item.unreadMessages"
+				:close-after-click="true"
 				@click.prevent.exact="markConversationAsRead">
 				<template #icon>
 					<EyeOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as read') }}
 			</NcActionButton>
+			<NcActionButton v-else
+				:close-after-click="true"
+				@click.prevent.exact="markConversationAsUnread">
+				<template #icon>
+					<EyeOffOutline :size="16" />
+				</template>
+				{{ t('spreed', 'Mark as unread') }}
+			</NcActionButton>
 			<NcActionButton :close-after-click="true"
 				@click.prevent.exact="showConversationSettings">
 				<Cog slot="icon"
@@ -116,6 +125,7 @@ import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import ExitToApp from 'vue-material-design-icons/ExitToApp.vue'
+import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import Star from 'vue-material-design-icons/Star.vue'
 
@@ -134,14 +144,16 @@ export default {
 	name: 'Conversation',
 
 	components: {
+		ConversationIcon,
+		NcActionButton,
+		NcListItem,
+		// Icons
 		ArrowRight,
 		Cog,
-		ConversationIcon,
 		Delete,
 		ExitToApp,
+		EyeOffOutline,
 		EyeOutline,
-		NcActionButton,
-		NcListItem,
 		Star,
 	},
 
@@ -350,6 +362,10 @@ export default {
 			this.$store.dispatch('clearLastReadMessage', { token: this.item.token })
 		},
 
+		markConversationAsUnread() {
+			this.$store.dispatch('markConversationUnread', { token: this.item.token })
+		},
+
 		showConversationSettings() {
 			emit('show-conversation-settings', { token: this.item.token })
 		},

src/services/conversationsService.js

@@ -206,6 +206,20 @@ const clearConversationHistory = async function(token) {
 	return response
 }
 
+/**
+ * Set conversation as unread
+ *
+ * @param {string} token The token of the conversation to be set as unread
+ */
+const setConversationUnread = async function(token) {
+	try {
+		const response = axios.delete(generateOcsUrl('apps/spreed/api/v1/chat/{token}/read', { token }))
+		return response
+	} catch (error) {
+		console.debug('Error while setting the conversation as unread: ', error)
+	}
+}
+
 /**
  * Add a conversation to the favorites
  *
@@ -433,6 +447,7 @@ export {
 	setConversationName,
 	setConversationDescription,
 	clearConversationHistory,
+	setConversationUnread,
 	setConversationPermissions,
 	setCallPermissions,
 	setMessageExpiration,