Merge pull request #12201 from nextcloud/fix/11921/breakout-rooms-fix

fix(breakout-rooms): enforce rooms order, minor fixes

6 files changed, 42 insertions, 39 deletions

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index 48997669f..8f1506221 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -177,6 +177,10 @@ export default {
 	justify-content: flex-start;
 	align-items: flex-start;
 
+	h2 {
+		margin-top: 0;
+	}
+
 	&__number-input{
 		display: block;
 		margin-bottom: calc(var(--default-grid-baseline)*4);
@@ -209,11 +213,4 @@ export default {
 		width: 100%;
 	}
 }
-
-.modal-mask__participants-step {
-	:deep(.modal-container) {
-		overflow: hidden !important;
-		height: 100% !important;
-	}
-}
 </style>
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 39e2b5232..334342e53 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -22,7 +22,8 @@
 <template>
 	<div class="participants-editor">
 		<ul class="participants-editor__scroller">
-			<BreakoutRoomItem class="participants-editor__section"
+			<BreakoutRoomItem key="unassigned"
+				class="participants-editor__section"
 				:name="t('spreed', 'Unassigned participants')">
 				<SelectableParticipant v-for="participant in unassignedParticipants"
 					:key="participant.attendeeId"
@@ -30,17 +31,16 @@
 					:checked.sync="selectedParticipants"
 					:participant="participant" />
 			</BreakoutRoomItem>
-			<template v-for="(item, index) in assignments">
-				<BreakoutRoomItem :key="index"
-					class="participants-editor__section"
-					:name="roomName(index)">
-					<SelectableParticipant v-for="attendeeId in item"
-						:key="attendeeId"
-						:value="assignments"
-						:checked.sync="selectedParticipants"
-						:participant="attendeesById[attendeeId]" />
-				</BreakoutRoomItem>
-			</template>
+			<BreakoutRoomItem v-for="(item, index) in assignments"
+				:key="index"
+				class="participants-editor__section"
+				:name="roomName(index)">
+				<SelectableParticipant v-for="attendeeId in item"
+					:key="attendeeId"
+					:value="assignments"
+					:checked.sync="selectedParticipants"
+					:participant="attendeesById[attendeeId]" />
+			</BreakoutRoomItem>
 		</ul>
 		<div class="participants-editor__buttons">
 			<NcButton v-if="breakoutRoomsConfigured"
@@ -74,7 +74,7 @@
 				:menu-name="t('spreed', 'Assign')">
 				<NcActionButton v-for="(item, index) in assignments"
 					:key="index"
-					:close-after-click="true"
+					close-after-click
 					@click="assignAttendees(index)">
 					<template #icon>
 						<DotsCircle :size="20" />
@@ -88,7 +88,8 @@
 				{{ confirmButtonLabel }}
 			</NcButton>
 		</div>
-		<NcDialog :open.sync="showDialog"
+		<NcDialog v-if="showDialog"
+			:open.sync="showDialog"
 			:name="t('spreed','Delete breakout rooms')"
 			:message="dialogMessage"
 			container=".participants-editor">
@@ -294,8 +295,8 @@ export default {
 		},
 
 		roomName(index) {
-			const roomNumber = index + 1
-			return t('spreed', 'Room {roomNumber}', { roomNumber })
+			return this.breakoutRooms[index]?.displayName
+				?? t('spreed', 'Room {roomNumber}', { roomNumber: index + 1 })
 		},
 
 		resetAssignments() {
@@ -357,10 +358,10 @@ export default {
 	width: 100%;
 	flex-direction: column;
 	gap: var(--default-grid-baseline);
-	height: calc(100% - 42px);
+	height: calc(100% - 57px); // heading 30px * 1.5 line-height + 12px margin-bottom
 
 	&__section {
-		margin: calc(var(--default-grid-baseline) * 2) 0 var(--default-grid-baseline) 0;
+		margin: calc(var(--default-grid-baseline) * 2) 0 calc(var(--default-grid-baseline) * 4);
 
 	}
 
@@ -373,6 +374,7 @@ export default {
 		display: flex;
 		justify-content: flex-end;
 		gap: calc(var(--default-grid-baseline) * 2);
+		padding-top: 10px;
 	}
 }
 
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index a1bf482a5..247d92b4e 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -159,15 +159,15 @@ export default {
 		},
 
 		participantType() {
-			return this.breakoutRoom.participantType
+			return this.breakoutRoom?.participantType
 		},
 
 		roomName() {
-			return this.isParticipantsEditor ? this.name : this.breakoutRoom.displayName
+			return this.isParticipantsEditor ? this.name : this.breakoutRoom?.displayName
 		},
 
 		roomToken() {
-			return this.breakoutRoom.token
+			return this.breakoutRoom?.token
 		},
 
 		showJoinButton() {
@@ -189,7 +189,7 @@ export default {
 			if (this.isParticipantsEditor) {
 				return false
 			}
-			return this.canModerate && this.breakoutRoom.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
+			return this.canModerate && this.breakoutRoom?.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
 		},
 
 		toggleParticipantsListLabel() {
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index 9abbedbe7..9e95afdc5 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -291,6 +291,10 @@ export default {
 	&__editor {
 		height: 100%;
 		padding: 20px;
+
+		h2 {
+			margin-top: 0;
+		}
 	}
 }
 
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 55ece4c68..3b9b1d58b 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -28,15 +28,14 @@
 			:breakout-rooms-configured="breakoutRoomsConfigured" />
 		<!-- Breakout rooms list -->
 		<ul v-if="showBreakoutRoomsList">
-			<template v-for="breakoutRoom in breakoutRooms">
-				<BreakoutRoomItem :key="breakoutRoom.token"
-					:breakout-room="breakoutRoom"
-					:main-conversation="mainConversation">
-					<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
-						<Participant :key="participant.actorId" :participant="participant" />
-					</template>
-				</BreakoutRoomItem>
-			</template>
+			<BreakoutRoomItem v-for="breakoutRoom in breakoutRooms"
+				:key="breakoutRoom.token"
+				:breakout-room="breakoutRoom"
+				:main-conversation="mainConversation">
+				<Participant v-for="participant in $store.getters.participantsList(breakoutRoom.token)"
+					:key="participant.actorId"
+					:participant="participant" />
+			</BreakoutRoomItem>
 		</ul>
 		<NcEmptyContent v-else
 			class="breakout-rooms__empty-content"
diff --git a/src/stores/breakoutRooms.ts b/src/stores/breakoutRooms.ts
index f21c4f96e..cd0a53c81 100644
--- a/src/stores/breakoutRooms.ts
+++ b/src/stores/breakoutRooms.ts
@@ -62,7 +62,8 @@ export const useBreakoutRoomsStore = defineStore('breakoutRooms', {
 
 	getters: {
 		breakoutRooms: (state) => (token: string): BreakoutRoom[] => {
-			return Object.values(Object(state.rooms[token]))
+			const roomsArray: BreakoutRoom[] = Object.values(Object(state.rooms[token]))
+			return roomsArray.sort((roomA, roomB) => roomA.id - roomB.id)
 		},
 
 		getParentRoomToken: (state) => (token: string): string | undefined => {