Temp

Signed-off-by: Marco <marcoambrosini@icloud.com>

3 files changed, 83 insertions, 36 deletions

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 7b1af04a2..5da6af60c 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -21,26 +21,44 @@
 
 <template>
 	<div class="breakout-rooms">
-		<NcButton v-tooltip.auto="t('spreed', 'Delete breakout rooms')"
-			type="tertiary-no-background"
-			@click="deleteBreakoutRooms">
+		<!-- Configuration button -->
+		<NcButton v-if="!breakoutRoomsConfigured"
+			type="secondary"
+			@click="openBreakoutRoomsEditor">
 			<template #icon>
-				<Delete :size="20" />
+				<DotsCircle :size="20" />
 			</template>
+			{{ t('spreed', 'Setup breakout rooms for this conversation') }}
 		</NcButton>
-		<template v-for="breakoutRoom in breakoutRooms">
-			<NcAppNavigationItem :key="breakoutRoom.displayName"
-				:title="breakoutRoom.displayName"
-				:allow-collapse="true">
+		<template v-if="breakoutRoomsConfigured">
+			<NcButton v-tooltip.auto="t('spreed', 'Delete breakout rooms')"
+				type="tertiary-no-background"
+				@click="deleteBreakoutRooms">
 				<template #icon>
-					<!-- TODO: choose final icon -->
-					<GoogleCircles :size="20" />
+					<Delete :size="20" />
 				</template>
-				<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
-					<Participant :key="participant.actorId" :participant="participant" />
+			</NcButton>
+			<div v-if="false">
+				<template v-for="breakoutRoom in breakoutRooms">
+					<NcAppNavigationItem :key="breakoutRoom.displayName"
+						:title="breakoutRoom.displayName"
+						:allow-collapse="true">
+						<template #icon>
+							<!-- TODO: choose final icon -->
+							<GoogleCircles :size="20" />
+						</template>
+						<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
+							<Participant :key="participant.actorId" :participant="participant" />
+						</template>
+					</NcAppNavigationItem>
 				</template>
-			</NcAppNavigationItem>
+			</div>
 		</template>
+
+		<!-- Breakout rooms editor -->
+		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
+			:token="token"
+			@close="showBreakoutRoomsEditor = false" />
 	</div>
 </template>
 
@@ -50,6 +68,9 @@ import Participant from '../Participants/ParticipantsList/Participant/Participan
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { CONVERSATION } from '../../../constants.js'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
+import BreakoutRoomsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 
 export default {
 	name: 'BreakoutRoomsTab',
@@ -60,6 +81,8 @@ export default {
 		GoogleCircles,
 		Delete,
 		NcButton,
+		DotsCircle,
+		BreakoutRoomsEditor,
 	},
 
 	props: {
@@ -67,6 +90,17 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		conversation: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			showBreakoutRoomsEditor: false,
+		}
 	},
 
 	computed: {
@@ -77,7 +111,22 @@ export default {
 				this.$store.getters.conversation('py2qhwa7'),
 				this.$store.getters.conversation('sngyetkc'),
 			]
+			// return this.$store.getters.breakoutRooms()
 		},
+
+		breakoutRoomsConfigured() {
+			return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
+		},
+	},
+
+	mounted() {
+		/**
+		if (this.breakoutRoomsConfigured) {
+			this.$store.dispatch('getBreakoutRoomsAction', {
+				token: this.token,
+			})
+		}
+		 */
 	},
 
 	methods: {
@@ -101,6 +150,10 @@ export default {
 				}
 			)
 		},
+
+		openBreakoutRoomsEditor() {
+			this.showBreakoutRoomsEditor = true
+		},
 	},
 }
 </script>
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index b5855742a..cfc98c1b9 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -38,19 +38,6 @@
 		<template slot="description">
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
-		<NcAppSidebarTab v-if="getUserId && !isOneToOne"
-			id="breakout-rooms"
-			ref="breakout-rooms"
-			:order="1"
-			:name="breakoutRoomsText">
-			<template slot="icon">
-				<!-- TODO: choose final icon -->
-				<DotsCircle :size="20" />
-			</template>
-			<BreakoutRoomsTab v-if="showBreakoutRoomsTab"
-				:token="token"
-				:is-active="activeTab === 'breakout-rooms'" />
-		</NcAppSidebarTab>
 		<NcAppSidebarTab v-if="showChatInSidebar"
 			id="chat"
 			:order="1"
@@ -72,9 +59,21 @@
 				:can-search="canSearchParticipants"
 				:can-add="canAddParticipants" />
 		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="getUserId && !isOneToOne"
+			id="breakout-rooms"
+			ref="breakout-rooms"
+			:order="3"
+			:name="breakoutRoomsText">
+			<template slot="icon">
+				<DotsCircle :size="20" />
+			</template>
+			<BreakoutRoomsTab :token="token"
+				:conversation="conversation"
+				:is-active="activeTab === 'breakout-rooms'" />
+		</NcAppSidebarTab>
 		<NcAppSidebarTab v-if="!getUserId || showSIPSettings"
 			id="details-tab"
-			:order="3"
+			:order="4"
 			:name="t('spreed', 'Details')">
 			<template slot="icon">
 				<InformationOutline :size="20" />
@@ -97,7 +96,7 @@
 		<NcAppSidebarTab v-if="getUserId"
 			id="shared-items"
 			ref="sharedItemsTab"
-			:order="4"
+			:order="5"
 			:name="t('spreed', 'Shared items')">
 			<template slot="icon">
 				<FolderMultipleImage :size="20" />
@@ -261,12 +260,6 @@ export default {
 		breakoutRoomsText() {
 			return t('spreed', 'Breakout rooms')
 		},
-
-		showBreakoutRoomsTab() {
-			return this.conversation.breakoutRoomMode !== 0
-			// TODO: find out why the CONVERSATION constants object doesn't seem to be defined
-			// return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
-		},
 	},
 
 	watch: {
@@ -334,7 +327,7 @@ export default {
 		/**
 		 * Updates the conversationName value while editing the conversation's title.
 		 *
-		 * @param {string} title the conversation title emitted by the AppSidevar vue
+		 * @param {string} title the conversation title emitted by the AppSidebar vue
 		 * component.
 		 */
 		handleUpdateTitle(title) {
diff --git a/src/store/breakoutRoomsStore.js b/src/store/breakoutRoomsStore.js
index 22d047301..2fd622003 100644
--- a/src/store/breakoutRoomsStore.js
+++ b/src/store/breakoutRoomsStore.js
@@ -69,7 +69,8 @@ const actions = {
 
 	async getBreakoutRoomsAction(context, { token }) {
 		try {
-			await getBreakoutRooms(token)
+			const response = await getBreakoutRooms(token)
+			console.debug('response', response)
 		} catch (error) {
 			console.error(error)
 		}