Merge pull request #7689 from nextcloud/feature/7359/implement-message-expiration-setting

Add UI option to set the message expiration

4 files changed, 161 insertions, 0 deletions

diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 5963658ac..d0452fc4e 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -66,6 +66,7 @@
 		<AppSettingsSection v-if="canFullModerate"
 			id="conversation-settings"
 			:title="t('spreed', 'Conversation settings')">
+			<ExpirationSettings :token="token" />
 			<ListableSettings :token="token" />
 			<LockingSettings :token="token" />
 		</AppSettingsSection>
@@ -105,6 +106,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { PARTICIPANT, CONVERSATION } from '../../constants.js'
 import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
 import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
+import ExpirationSettings from './ExpirationSettings.vue'
 import LinkShareSettings from './LinkShareSettings.vue'
 import ListableSettings from './ListableSettings.vue'
 import LockingSettings from './LockingSettings.vue'
@@ -126,6 +128,7 @@ export default {
 	components: {
 		AppSettingsDialog,
 		AppSettingsSection,
+		ExpirationSettings,
 		LinkShareSettings,
 		LobbySettings,
 		ListableSettings,
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
new file mode 100644
index 000000000..26aebc658
--- /dev/null
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -0,0 +1,135 @@
+<!--
+  - @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+  -
+  - @author Joas Schilling <coding@schilljs.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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/>.
+-->
+
+<template>
+	<div>
+		<div class="app-settings-section__hint">
+			{{ t('spreed', 'Expire chat messages after a certain time. Note files shared into the chat will only be unshared from the conversation but are not deleted for the owner.') }}
+		</div>
+		<Multiselect :value="selectedOption"
+			:options="expirationOptions"
+			:allow-empty="false"
+			track-by="id"
+			label="label"
+			:close-on-select="true"
+			@update:value="changeExpiration" />
+	</div>
+</template>
+
+<script>
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+
+export default {
+	name: 'ExpirationSettings',
+
+	components: {
+		Multiselect,
+	},
+
+	props: {
+		token: {
+			type: String,
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			overwriteExpiration: undefined,
+			defaultExpirationOptions: [
+				{ id: 0, label: t('spreed', 'Off') },
+				{ id: 2419200, label: n('spreed', '%n week', '%n weeks', 4) },
+				{ id: 604800, label: n('spreed', '%n week', '%n weeks', 1) },
+				{ id: 86400, label: n('spreed', '%n day', '%n days', 1) },
+				{ id: 28800, label: n('spreed', '%n hour', '%n hours', 8) },
+				{ id: 3600, label: n('spreed', '%n hour', '%n hours', 1) },
+			],
+		}
+	},
+
+	computed: {
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		expirationOptions() {
+			const expirationOptions = [...this.defaultExpirationOptions]
+
+			const found = expirationOptions.find((option) => {
+				return option.id === this.conversation.messageExpiration
+			})
+			if (!found) {
+				expirationOptions.push({ id: this.conversation.messageExpiration, label: t('spreed', 'Custom expiration time') })
+			}
+
+			return expirationOptions
+		},
+
+		selectedOption() {
+			if (this.overwriteExpiration) {
+				return this.overwriteExpiration
+			}
+
+			const option = this.expirationOptions.find((option) => {
+				return option.id === this.conversation.messageExpiration
+			})
+			if (option) {
+				return option
+			}
+
+			return this.expirationOptions[this.expirationOptions.length - 1]
+		},
+	},
+
+	methods: {
+		async changeExpiration(expiration) {
+			this.overwriteExpiration = expiration
+
+			try {
+				await this.$store.dispatch('setMessageExpiration', {
+					token: this.token,
+					seconds: expiration.id,
+				})
+
+				if (expiration.id === 0) {
+					showSuccess(t('spreed', 'Message expiration disabled'))
+				} else {
+					showSuccess(t('spreed', 'Message expiration set: {duration}', {
+						duration: expiration.label,
+					}))
+				}
+			} catch (error) {
+				showError(t('spreed', 'Error when trying to set the messages expiration'))
+				console.error(error)
+			}
+
+			this.overwriteExpiration = undefined
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .mx-input {
+	margin: 0;
+}
+</style>
diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
index f05c85fc7..3845cb8c3 100644
--- a/src/services/conversationsService.js
+++ b/src/services/conversationsService.js
@@ -390,6 +390,18 @@ const setCallPermissions = async (token, permissions) => {
 		})
 }
 
+/**
+ * Set the message expiration
+ *
+ * @param {string} token conversation token
+ * @param {number} seconds the seconds for the message expiration, 0 to disable
+ */
+const setMessageExpiration = async (token, seconds) => {
+	return await axios.post(generateOcsUrl('apps/spreed/api/v4/room/{token}/message-expiration', { token }), {
+		seconds,
+	})
+}
+
 const validatePassword = async (password) => {
 	return await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), {
 		password,
@@ -422,5 +434,6 @@ export {
 	clearConversationHistory,
 	setConversationPermissions,
 	setCallPermissions,
+	setMessageExpiration,
 	validatePassword,
 }
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index 7f473799f..52e3e284a 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -40,6 +40,7 @@ import {
 	setNotificationCalls,
 	setConversationPermissions,
 	setCallPermissions,
+	setMessageExpiration,
 } from '../services/conversationsService.js'
 import { getCurrentUser } from '@nextcloud/auth'
 // eslint-disable-next-line import/extensions
@@ -160,6 +161,10 @@ const mutations = {
 	setCallPermissions(state, { token, permissions }) {
 		Vue.set(state.conversations[token], 'callPermissions', permissions)
 	},
+
+	setMessageExpiration(state, { token, seconds }) {
+		Vue.set(state.conversations[token], 'messageExpiration', seconds)
+	},
 }
 
 const actions = {
@@ -500,6 +505,11 @@ const actions = {
 		context.commit('setConversationPermissions', { token, permissions })
 	},
 
+	async setMessageExpiration({ commit }, { token, seconds }) {
+		await setMessageExpiration(token, seconds)
+		commit('setMessageExpiration', { token, seconds })
+	},
+
 	async setCallPermissions(context, { token, permissions }) {
 		await setCallPermissions(token, permissions)
 		context.commit('setCallPermissions', { token, permissions })