Update breakout rooms actions

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -55,6 +55,17 @@
 			</template>
 		</div>
 		<div class="participants-editor__buttons">
+			<NcButton v-if="breakoutRoomsConfigured"
+				class="delete"
+				:title="deleteButtonLabel"
+				:aria-label="deleteButtonLabel"
+				type="error"
+				@click="deleteBreakoutRooms">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				{{ deleteButtonLabel }}
+			</NcButton>
 			<NcButton v-if="!isReorganizingAttendees"
 				type="tertiary"
 				@click="goBack">
@@ -94,6 +105,7 @@
 
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
 
@@ -104,7 +116,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import SelectableParticipant from './SelectableParticipant.vue'
 
-import { ATTENDEE, PARTICIPANT } from '../../constants.js'
+import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../constants.js'
 
 export default {
 	name: 'BreakoutRoomsParticipantsEditor',
@@ -118,6 +130,7 @@ export default {
 		SelectableParticipant,
 		NcButton,
 		ArrowLeft,
+		Delete,
 	},
 
 	props: {
@@ -194,6 +207,18 @@ export default {
 		resetButtonLabel() {
 			return t('spreed', 'Reset')
 		},
+
+		conversation() {
+			return this.$store.getters.conversation(this.token)
+		},
+
+		breakoutRoomsConfigured() {
+			return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
+		},
+
+		deleteButtonLabel() {
+			return t('spreed', 'Delete breakout rooms')
+		},
 	},
 
 	created() {
@@ -289,6 +314,27 @@ export default {
 			})
 			this.$emit('close')
 		},
+
+		deleteBreakoutRooms() {
+			OC.dialogs.confirmDestructive(
+				t('spreed', 'Current breakout rooms and settings will be lost'),
+				t('spreed', 'Delete breakout rooms'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('spreed', 'Delete breakout rooms'),
+					confirmClasses: 'error',
+					cancel: t('spreed', 'Cancel'),
+				},
+				(decision) => {
+					if (!decision) {
+						return
+					}
+					this.$store.dispatch('deleteBreakoutRoomsAction', {
+						token: this.token,
+					})
+				}
+			)
+		},
 	},
 }
 </script>
@@ -330,4 +376,8 @@ export default {
 	position: absolute !important;
 	left: 0;
 }
+
+.delete {
+	margin-right: auto;
+}
 </style>

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -0,0 +1,281 @@
+<template>
+	<!-- Series of buttons at the top of the tab, these affect all
+		 breakout rooms -->
+	<div v-if="canModerate || isInBreakoutRoom" class="breakout-rooms-actions">
+		<div class="breakout-rooms-actions__row">
+			<NcButton v-if="breakoutRoomsNotStarted && canModerate"
+				:title="startLabel"
+				:aria-label="startLabel"
+				type="primary"
+				:wide="true"
+				:disabled="!isInCall"
+				@click="startBreakoutRooms">
+				<template #icon>
+					<Play :size="20" />
+				</template>
+				{{ startLabel }}
+			</NcButton>
+			<NcButton v-else-if="canModerate"
+				:title="stopLabel"
+				:aria-label="stopLabel"
+				type="error"
+				:wide="true"
+				@click="stopBreakoutRooms">
+				<template #icon>
+					<StopIcon :size="20" />
+				</template>
+				{{ stopLabel }}
+			</NcButton>
+		</div>
+		<div class="breakout-rooms-actions__row">
+			<NcButton v-if="canModerate && !isInBreakoutRoom"
+				:title="sendMessageLabel"
+				:aria-label="sendMessageLabel"
+				type="secondary"
+				:wide="true"
+				@click="openSendMessageDialog">
+				<template #icon>
+					<Send :size="18" />
+				</template>
+				{{ sendMessageLabel }}
+			</NcButton>
+			<NcButton v-if="isInBreakoutRoom"
+				:title="backToMainRoomLabel"
+				:aria-label="backToMainRoomLabel"
+				:wide="true"
+				type="secondary"
+				@click="switchToParentRoom">
+				<template #icon>
+					<ArrowLeft :size="20" />
+				</template>
+				{{ backToMainRoomLabel }}
+			</NcButton>
+			<NcActions v-if="canModerate" class="right">
+				<NcActionButton v-if="canModerate && isInBreakoutRoom"
+					:title="sendMessageLabel"
+					:aria-label="sendMessageLabel"
+					@click="openSendMessageDialog">
+					<template #icon>
+						<Send :size="20" />
+					</template>
+				</NcActionButton>
+				<NcActionButton v-if="canModerate"
+					:title="manageBreakoutRoomsTitle"
+					:aria-label="manageBreakoutRoomsTitle"
+					@click="openParticipantsEditor">
+					<template #icon>
+						<Cog :size="20" />
+					</template>
+				</NcActionButton>
+			</NcActions>
+		</div>
+
+		<!-- Participants editor -->
+		<NcModal v-if="showParticipantsEditor"
+			@close="closeParticipantsEditor">
+			<div class="breakout-rooms-actions__editor">
+				<h2> {{ manageBreakoutRoomsTitle }} </h2>
+				<BreakoutRoomsParticipantsEditor :token="token"
+					:breakout-rooms="breakoutRooms"
+					:is-creating-rooms="false"
+					@close="closeParticipantsEditor"
+					v-on="$listeners" />
+			</div>
+		</NcModal>
+
+		<!-- Send message dialog -->
+		<SendMessageDialog v-if="sendMessageDialogOpened"
+			:token="token"
+			:broadcast="true"
+			@close="closeSendMessageDialog" />
+	</div>
+</template>
+
+<script>
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Cog from 'vue-material-design-icons/Cog.vue'
+import Play from 'vue-material-design-icons/Play.vue'
+import Send from 'vue-material-design-icons/Send.vue'
+import StopIcon from 'vue-material-design-icons/Stop.vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
+import BreakoutRoomsParticipantsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue'
+import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+
+import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
+import isInCall from '../../../mixins/isInCall.js'
+import { EventBus } from '../../../services/EventBus.js'
+
+export default {
+	name: 'BreakoutRoomsActions',
+
+	components: {
+		// Components
+		NcButton,
+		BreakoutRoomsParticipantsEditor,
+		SendMessageDialog,
+		NcModal,
+		NcActions,
+		NcActionButton,
+
+		// Icons
+		Play,
+		Cog,
+		StopIcon,
+		ArrowLeft,
+		Send,
+	},
+
+	mixins: [isInCall],
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+
+		conversation: {
+			type: Object,
+			required: true,
+		},
+
+		breakoutRooms: {
+			type: Array,
+			required: true,
+		},
+
+		breakoutRoomsConfigured: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			showParticipantsEditor: false,
+			sendMessageDialogOpened: false,
+		}
+	},
+
+	computed: {
+		canFullModerate() {
+			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+
+		canModerate() {
+			return !this.isOneToOne && (this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
+		},
+
+		breakoutRoomsNotStarted() {
+			if (this.isInBreakoutRoom) {
+				return this.parentRoom.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
+			} else {
+				return this.conversation.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
+			}
+		},
+
+		isInBreakoutRoom() {
+			return this.conversation.objectType === 'room'
+		},
+
+		parentRoom() {
+			if (!this.isInBreakoutRoom) {
+				return undefined
+			} else {
+				return this.$store.getters.conversation(this.conversation.objectId)
+			}
+		},
+
+		manageBreakoutRoomsTitle() {
+			return t('spreed', 'Manage breakout rooms')
+		},
+
+		backToMainRoomLabel() {
+			return t('spreed', 'Back to main room')
+		},
+
+		participantType() {
+			return this.conversation.participantType
+		},
+
+		sendMessageLabel() {
+			return t('spreed', 'Message all rooms')
+		},
+
+		startLabel() {
+			return t('spreed', 'Start session')
+		},
+
+		stopLabel() {
+			return t('spreed', 'Stop session')
+		},
+	},
+
+	methods: {
+		startBreakoutRooms() {
+			if (this.isInBreakoutRoom) {
+				this.$store.dispatch('startBreakoutRoomsAction', this.parentRoom.token)
+			} else {
+				this.$store.dispatch('startBreakoutRoomsAction', this.token)
+			}
+
+		},
+
+		stopBreakoutRooms() {
+			if (this.isInBreakoutRoom) {
+				this.$store.dispatch('stopBreakoutRoomsAction', this.parentRoom.token)
+			} else {
+				this.$store.dispatch('stopBreakoutRoomsAction', this.token)
+			}
+		},
+
+		openSendMessageDialog() {
+			this.sendMessageDialogOpened = true
+		},
+
+		closeSendMessageDialog() {
+			this.sendMessageDialogOpened = false
+		},
+
+		openParticipantsEditor() {
+			this.showParticipantsEditor = true
+		},
+
+		closeParticipantsEditor() {
+			this.showParticipantsEditor = false
+		},
+
+		async switchToParentRoom() {
+			EventBus.$emit('switch-to-conversation', {
+				token: this.parentRoom.token,
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.breakout-rooms-actions {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: calc(var(--default-grid-baseline) * 3);
+
+	&__row {
+		display: flex;
+		margin-bottom: var(--default-grid-baseline);
+		gap: var(--default-grid-baseline);
+	}
+
+	&__editor {
+		padding: 20px;
+	}
+}
+
+.right {
+	justify-content: right;
+}
+</style>