feat(ConversationSettings): Add mention permission settings

Signed-off-by: Sanskar Soni <sanskarsoni300@gmail.com>

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -37,6 +37,7 @@
 			<NcAppSettingsSection id="conversation-settings"
 				:name="selfIsOwnerOrModerator ? t('spreed', 'Moderation') : t('spreed', 'Setup overview')">
 				<ListableSettings v-if="!isNoteToSelf && !isGuest" :token="token" :can-moderate="canFullModerate" />
+				<MentionsSettings v-if="!isNoteToSelf" :token="token" :can-moderate="canFullModerate" />
 				<LinkShareSettings v-if="!isNoteToSelf" :token="token" :can-moderate="canFullModerate" />
 				<RecordingConsentSettings v-if="!isNoteToSelf && recordingConsentAvailable" :token="token" :can-moderate="selfIsOwnerOrModerator" />
 				<ExpirationSettings :token="token" :can-moderate="selfIsOwnerOrModerator" />
@@ -113,6 +114,7 @@ import ListableSettings from './ListableSettings.vue'
 import LobbySettings from './LobbySettings.vue'
 import LockingSettings from './LockingSettings.vue'
 import MatterbridgeSettings from './Matterbridge/MatterbridgeSettings.vue'
+import MentionsSettings from './MentionsSettings.vue'
 import NotificationsSettings from './NotificationsSettings.vue'
 import RecordingConsentSettings from './RecordingConsentSettings.vue'
 import SipSettings from './SipSettings.vue'
@@ -137,6 +139,7 @@ export default {
 		LobbySettings,
 		LockingSettings,
 		MatterbridgeSettings,
+		MentionsSettings,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
 		NcCheckboxRadioSwitch,

src/components/ConversationSettings/MentionsSettings.vue

@@ -0,0 +1,141 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div v-if="canModerate">
+		<NcCheckboxRadioSwitch :checked="mentionPermissions === MENTION_PERMISSIONS.EVERYONE"
+			:disabled="isMentionPermissionsLoading"
+			type="switch"
+			@update:checked="toggleMentionPermissions">
+			{{ t('spreed', 'Allow participants to mention @all') }}
+		</NcCheckboxRadioSwitch>
+	</div>
+
+	<div v-else>
+		<h5 class="app-settings-section__subtitle">
+			{{ t('spreed', 'Mention permissions') }}
+		</h5>
+		<p>{{ summaryLabel }}</p>
+	</div>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
+import { CONVERSATION } from '../../constants.js'
+
+export default {
+	name: 'MentionsSettings',
+
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		token: {
+			type: String,
+			default: null,
+		},
+
+		canModerate: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ['input'],
+
+	data() {
+		return {
+			mentionPermissions: null,
+			isMentionPermissionsLoading: false,
+			lastNotification: null,
+			MENTION_PERMISSIONS: CONVERSATION.MENTION_PERMISSIONS,
+		}
+	},
+
+	computed: {
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		summaryLabel() {
+			switch (this.mentionPermissions) {
+			case CONVERSATION.MENTION_PERMISSIONS.MODERATORS:
+				return t('spreed', 'Only moderators are allowed to mention @all')
+			case CONVERSATION.MENTION_PERMISSIONS.EVERYONE:
+			default:
+				return t('spreed', 'All participants are allowed to mention @all')
+			}
+		}
+	},
+
+	watch: {
+		conversation: {
+			immediate: true,
+			handler() {
+				this.mentionPermissions = this.conversation.mentionPermissions
+			},
+		},
+	},
+
+	mounted() {
+		if (this.token) {
+			this.mentionPermissions = this.value || this.conversation.mentionPermissions
+		} else {
+			this.mentionPermissions = this.value
+		}
+	},
+
+	beforeDestroy() {
+		if (this.lastNotification) {
+			this.lastNotification.hideToast()
+			this.lastNotification = null
+		}
+	},
+
+	methods: {
+		t,
+		async toggleMentionPermissions(checked) {
+			const mentionPermissions = checked ? this.MENTION_PERMISSIONS.EVERYONE : this.MENTION_PERMISSIONS.MODERATORS
+			this.$emit('input', mentionPermissions)
+			if (!this.token) {
+				this.mentionPermissions = mentionPermissions
+				return
+			}
+			this.isMentionPermissionsLoading = true
+			try {
+				await this.$store.dispatch('setMentionPermissions', {
+					token: this.token,
+					mentionPermissions,
+				})
+
+				if (this.lastNotification) {
+					this.lastNotification.hideToast()
+					this.lastNotification = null
+				}
+				if (mentionPermissions === CONVERSATION.MENTION_PERMISSIONS.EVERYONE) {
+					this.lastNotification = showSuccess(t('spreed', 'Participants are now allowed to mention @all.'))
+				} else if (mentionPermissions === CONVERSATION.MENTION_PERMISSIONS.MODERATORS) {
+					this.lastNotification = showSuccess(t('spreed', 'Mentioning @all has been limited to moderators.'))
+				}
+				this.mentionPermissions = mentionPermissions
+			} catch (e) {
+				console.error('Error occurred when opening or limiting the conversation', e)
+				showError(t('spreed', 'Error occurred when opening or limiting the conversation'))
+				this.mentionPermissions = this.conversation.mentionPermissions
+			}
+			this.isMentionPermissionsLoading = false
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/constants.js

@@ -56,6 +56,11 @@ export const CONVERSATION = {
 		ALL: 2,
 	},
 
+	MENTION_PERMISSIONS: {
+		EVERYONE: 0,
+		MODERATORS: 1,
+	},
+
 	TYPE: {
 		ONE_TO_ONE: 1,
 		GROUP: 2,

src/services/conversationsService.js

@@ -306,6 +306,12 @@ const changeListable = async function(token, listable) {
 	})
 }
 
+const setMentionPermissions = async function(token, mentionPermissions) {
+	return axios.put(generateOcsUrl('apps/spreed/api/v4/room/{token}/mention-permissions', { token }), {
+		mentionPermissions,
+	})
+}
+
 /**
  * Set the default permissions for participants in a conversation.
  *
@@ -375,4 +381,5 @@ export {
 	setConversationPermissions,
 	setCallPermissions,
 	setMessageExpiration,
+	setMentionPermissions,
 }

src/store/conversationsStore.js

@@ -46,6 +46,7 @@ import {
 	setConversationPassword,
 	createPublicConversation,
 	createPrivateConversation,
+	setMentionPermissions,
 } from '../services/conversationsService.js'
 import {
 	clearConversationHistory,
@@ -75,6 +76,7 @@ const DUMMY_CONVERSATION = {
 	participantType: PARTICIPANT.TYPE.USER,
 	readOnly: CONVERSATION.STATE.READ_ONLY,
 	listable: CONVERSATION.LISTABLE.NONE,
+	mentions: CONVERSATION.MENTION_PERMISSIONS.EVERYONE,
 	hasCall: false,
 	canStartCall: false,
 	lobbyState: WEBINAR.LOBBY.NONE,
@@ -228,6 +230,10 @@ const mutations = {
 		Vue.set(state.conversations[token], 'callPermissions', permissions)
 	},
 
+	setMentionPermissions(state, { token, mentionPermissions }) {
+		Vue.set(state.conversations[token], 'mentionPermissions', mentionPermissions)
+	},
+
 	setCallRecording(state, { token, callRecording }) {
 		Vue.set(state.conversations[token], 'callRecording', callRecording)
 	},
@@ -974,6 +980,15 @@ const actions = {
 		}
 	},
 
+	async setMentionPermissions(context, { token, mentionPermissions }) {
+		try {
+			await setMentionPermissions(token, mentionPermissions)
+			context.commit('setMentionPermissions', { token, mentionPermissions })
+		} catch (error) {
+			console.error('Error while updating mention permissions: ', error)
+		}
+	},
+
 	async startCallRecording(context, { token, callRecording }) {
 		try {
 			await startCallRecording(token, callRecording)