Merge pull request #8733 from nextcloud/feature/8339/show-request-for-assistance-in-breakout-rooms-tab

Breakout-rooms: assistance request display and removal for moderators

src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue

@@ -1,109 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @author Marco Ambrosini <marcoambrosini@icloud.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>
-		<template v-for="breakoutRoom in breakoutRooms">
-			<NcAppNavigationItem :key="breakoutRoom.displayName"
-				class="breakout-rooms__room"
-				:title="breakoutRoom.displayName"
-				:allow-collapse="true"
-				:open="true">
-				<template #icon>
-					<!-- TODO: choose final icon -->
-					<GoogleCircles :size="20" />
-				</template>
-				<template #actions>
-					<NcActionButton @click="openSendMessageForm(breakoutRoom.token)">
-						<template #icon>
-							<Send :size="16" />
-						</template>
-						{{ t('spreed', 'Send message to room') }}
-					</NcActionButton>
-				</template>
-				<!-- Send message dialog -->
-				<SendMessageDialog v-if="openedDialog === breakoutRoom.token"
-					:display-name="breakoutRoom.displayName"
-					:token="breakoutRoom.token"
-					@close="closeSendMessageForm(breakoutRoom.token)" />
-				<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
-					<Participant :key="participant.actorId" :participant="participant" />
-				</template>
-			</NcAppNavigationItem>
-		</template>
-	</div>
-</template>
-
-<script>
-
-// Components
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import Participant from '../RightSidebar/Participants/ParticipantsList/Participant/Participant.vue'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import SendMessageDialog from './SendMessageDialog.vue'
-
-// Icons
-import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
-import Send from 'vue-material-design-icons/Send.vue'
-
-export default {
-	name: 'BreakoutRoomsList',
-
-	components: {
-		// Components
-		NcAppNavigationItem,
-		Participant,
-		NcActionButton,
-		SendMessageDialog,
-
-		// Icons
-		GoogleCircles,
-		Send,
-	},
-
-	props: {
-		breakoutRooms: {
-			type: Array,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			openedDialog: undefined,
-		}
-	},
-
-	methods: {
-		openSendMessageForm(token) {
-			this.openedDialog = token
-		},
-
-		closeSendMessageForm() {
-			this.openedDialog = undefined
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -0,0 +1,165 @@
+<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.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>
+	<NcAppNavigationItem :key="roomName"
+		:force-display-actions="true"
+		class="breakout-rooms__room"
+		:title="roomName"
+		:allow-collapse="true"
+		:inline-actions="1"
+		:open="true">
+		<template #icon>
+			<!-- TODO: choose final icon -->
+			<GoogleCircles :size="20" />
+		</template>
+		<template #actions>
+			<NcActionButton v-if="showAssistanceButton"
+				@click="dismissRequestAssistance">
+				<template #icon>
+					<HandBackLeft :size="16" />
+				</template>
+				{{ t('spreed', 'Dismiss request for assistance') }}
+			</NcActionButton>
+			<NcActionButton @click="openSendMessageForm">
+				<template #icon>
+					<Send :size="16" />
+				</template>
+				{{ t('spreed', 'Send message to room') }}
+			</NcActionButton>
+		</template>
+		<!-- Send message dialog -->
+		<SendMessageDialog v-if="isDialogOpened"
+			:display-name="roomName"
+			:token="roomToken"
+			@close="closeSendMessageForm" />
+		<template v-for="participant in roomParticipants">
+			<Participant :key="participant.actorId" :participant="participant" />
+		</template>
+	</NcAppNavigationItem>
+</template>
+
+<script>
+// Components
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
+import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+
+// Icons
+import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
+import Send from 'vue-material-design-icons/Send.vue'
+
+// Constants
+import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
+
+import { showWarning } from '@nextcloud/dialogs'
+
+export default {
+	name: 'BreakoutRoomItem',
+
+	components: {
+		// Components
+		NcAppNavigationItem,
+		Participant,
+		NcActionButton,
+		SendMessageDialog,
+
+		// Icons
+		GoogleCircles,
+		HandBackLeft,
+		Send,
+	},
+
+	props: {
+		breakoutRoom: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			isDialogOpened: false,
+		}
+	},
+
+	computed: {
+		participantType() {
+			return this.breakoutRoom.participantType
+		},
+
+		roomName() {
+			return this.breakoutRoom.displayName
+		},
+
+		roomToken() {
+			return this.breakoutRoom.token
+		},
+
+		roomParticipants() {
+			return this.$store.getters.participantsList(this.roomToken)
+		},
+
+		canFullModerate() {
+			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+
+		canModerate() {
+			return this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR
+		},
+
+		showAssistanceButton() {
+			return this.canModerate && this.breakoutRoom.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
+		},
+	},
+
+	watch: {
+		showAssistanceButton(newValue) {
+			if (newValue) {
+				showWarning(t('spreed', 'Assistance requested in {roomName}', {
+					roomName: this.roomName,
+				}))
+			}
+		},
+	},
+
+	methods: {
+		openSendMessageForm() {
+			this.isDialogOpened = true
+		},
+
+		closeSendMessageForm() {
+			this.isDialogOpened = false
+		},
+
+		dismissRequestAssistance() {
+			this.$store.dispatch('resetRequestAssistanceAction', { token: this.roomToken })
+		},
+	},
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue

@@ -79,7 +79,12 @@
 
 		<template v-if="breakoutRoomsConfigured">
 			<!-- Breakout rooms list -->
-			<BreakoutRoomsList v-if="breakoutRooms" :breakout-rooms="breakoutRooms" />
+			<ul v-if="breakoutRooms">
+				<template v-for="breakoutRoom in breakoutRooms">
+					<BreakoutRoomItem :key="breakoutRoom.token"
+						:breakout-room="breakoutRoom" />
+				</template>
+			</ul>
 
 			<!-- Breakout rooms editor -->
 			<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
@@ -100,7 +105,7 @@
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import BreakoutRoomsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
-import BreakoutRoomsList from '../../BreakoutRoomsEditor/BreakoutRoomsList.vue'
+import BreakoutRoomItem from './BreakoutRoomItem.vue'
 
 // Icons
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -123,7 +128,7 @@ export default {
 		NcButton,
 		BreakoutRoomsEditor,
 		SendMessageDialog,
-		BreakoutRoomsList,
+		BreakoutRoomItem,
 
 		// Icons
 		Delete,

src/constants.js

@@ -71,8 +71,12 @@ export const CONVERSATION = {
 	},
 
 	BREAKOUT_ROOM_STATUS: {
+		// Main room
 		STOPPED: 0,
 		STARTED: 1,
+		// Breakout rooms
+		STATUS_ASSISTANCE_RESET: 0,
+		STATUS_ASSISTANCE_REQUESTED: 2,
 	},
 }
 export const ATTENDEE = {

src/services/breakoutRoomsService.js

@@ -112,7 +112,7 @@ const getBreakoutRoomsParticipants = async function(token) {
  * @return {Promise<AxiosResponse<any>>} The array of conversations
  */
 const requestAssistance = async function(token) {
-	return await axios.post(generateOcsUrl('/apps/spreed/api/v1/room/{token}/breakout-rooms/{token}/request-assistance', {
+	return await axios.post(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/request-assistance', {
 		token,
 	})
 	)
@@ -125,7 +125,7 @@ const requestAssistance = async function(token) {
  * @return {Promise<AxiosResponse<any>>} The array of conversations
  */
 const resetRequestAssistance = async function(token) {
-	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/room/{token}/breakout-rooms/{token}/request-assistance', {
+	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/request-assistance', {
 		token,
 	})
 	)