fix(breakout-rooms): ease template, use server-provided room names

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

3 files changed, 27 insertions, 28 deletions

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index 39e2b5232..1510a8506 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" />
@@ -294,8 +294,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() {
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/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"