[stable32] fix: manage existing breakout rooms from conversation settings

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -6,6 +6,7 @@
 <template>
 	<NcModal
 		:class="{ 'modal-mask__participants-step': isEditingParticipants }"
+		:container="container"
 		:labelId="dialogHeaderId"
 		@close="$emit('close')">
 		<div
@@ -109,6 +110,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		container: {
+			type: String,
+			default: 'body',
+		},
 	},
 
 	emits: ['close'],

src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue

@@ -62,6 +62,7 @@
 				v-if="hasSelected"
 				variant="primary"
 				container=".participants-editor__buttons"
+				placement="top"
 				:menuName="t('spreed', 'Assign')">
 				<NcActionButton
 					v-for="(item, index) in assignments"

src/components/ConversationSettings/BreakoutRoomsSettings.vue

@@ -9,6 +9,16 @@
 			{{ hintText }}
 		</p>
 		<NcButton
+			v-if="hasBreakoutRooms"
+			variant="secondary"
+			@click="showParticipantsEditor = true">
+			<template #icon>
+				<IconDotsCircle :size="20" />
+			</template>
+			{{ t('spreed', 'Manage breakout rooms') }}
+		</NcButton>
+		<NcButton
+			v-else
 			variant="secondary"
 			@click="openBreakoutRoomsEditor">
 			<template #icon>
@@ -20,22 +30,46 @@
 	<!-- Breakout rooms editor -->
 	<BreakoutRoomsEditor
 		v-if="showBreakoutRoomsEditor"
+		container=".breakout-rooms-settings"
 		:token="token"
 		@close="showBreakoutRoomsEditor = false" />
+
+	<!-- Participants editor -->
+	<NcModal
+		v-if="showParticipantsEditor"
+		container=".breakout-rooms-settings"
+		labelId="breakout-rooms-settings-editor"
+		@close="showParticipantsEditor = false">
+		<div class="breakout-rooms-settings__editor">
+			<h2 id="breakout-rooms-settings-editor" class="nc-dialog-alike-header">
+				{{ t('spreed', 'Manage breakout rooms') }}
+			</h2>
+			<BreakoutRoomsParticipantsEditor
+				:token="token"
+				:breakoutRooms="breakoutRooms"
+				@close="showParticipantsEditor = false" />
+		</div>
+	</NcModal>
 </template>
 
 <script>
 import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcModal from '@nextcloud/vue/components/NcModal'
 import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
+import BreakoutRoomsParticipantsEditor from '../BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue'
+import { CONVERSATION } from '../../constants.ts'
+import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 
 export default {
 	name: 'BreakoutRoomsSettings',
 
 	components: {
 		NcButton,
+		NcModal,
 		BreakoutRoomsEditor,
+		BreakoutRoomsParticipantsEditor,
 		IconDotsCircle,
 	},
 
@@ -49,16 +83,43 @@ export default {
 		},
 	},
 
+	setup() {
+		const breakoutRoomsStore = useBreakoutRoomsStore()
+
+		return {
+			breakoutRoomsStore,
+		}
+	},
+
 	data() {
 		return {
 			showBreakoutRoomsEditor: false,
+			showParticipantsEditor: false,
 		}
 	},
 
 	computed: {
 		hintText() {
 			return t('spreed', 'Breakout rooms') // FIXME
 		},
+
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		hasBreakoutRooms() {
+			return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
+		},
+
+		breakoutRooms() {
+			return this.breakoutRoomsStore.breakoutRooms(this.token)
+		},
+	},
+
+	created() {
+		if (this.hasBreakoutRooms) {
+			this.breakoutRoomsStore.fetchBreakoutRoomsParticipants(this.token)
+		}
 	},
 
 	methods: {
@@ -72,10 +133,15 @@ export default {
 
 <style lang="scss" scoped>
 .breakout-rooms-settings {
-	&__hint{
+	&__hint {
 		margin-bottom: calc(var(--default-grid-baseline) * 2);
 		color: var(--color-text-maxcontrast);
 	}
+
+	&__editor {
+		height: 100%;
+		padding: 20px;
+	}
 }
 
 </style>

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -103,7 +103,6 @@
 				<BreakoutRoomsParticipantsEditor
 					:token="mainToken"
 					:breakoutRooms="breakoutRooms"
-					:isCreatingRooms="false"
 					@close="closeParticipantsEditor" />
 			</div>
 		</NcModal>