Add ability to delete breakout rooms

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

4 files changed, 68 insertions, 8 deletions

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 6c4688bf4..7b1af04a2 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -21,6 +21,13 @@
 
 <template>
 	<div class="breakout-rooms">
+		<NcButton v-tooltip.auto="t('spreed', 'Delete breakout rooms')"
+			type="tertiary-no-background"
+			@click="deleteBreakoutRooms">
+			<template #icon>
+				<Delete :size="20" />
+			</template>
+		</NcButton>
 		<template v-for="breakoutRoom in breakoutRooms">
 			<NcAppNavigationItem :key="breakoutRoom.displayName"
 				:title="breakoutRoom.displayName"
@@ -41,6 +48,8 @@
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
 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'
 
 export default {
 	name: 'BreakoutRoomsTab',
@@ -49,6 +58,15 @@ export default {
 		NcAppNavigationItem,
 		Participant,
 		GoogleCircles,
+		Delete,
+		NcButton,
+	},
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
 	},
 
 	computed: {
@@ -62,9 +80,26 @@ export default {
 		},
 	},
 
-	watch: {
-		breakoutRooms() {
-			this.$forceUpdate()
+	methods: {
+		deleteBreakoutRooms() {
+			OC.dialogs.confirmDestructive(
+				t('spreed', 'Current breakout rooms settings and configuration 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,
+					})
+				}
+			)
 		},
 	},
 }
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 0e8c56e03..b5855742a 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -47,7 +47,9 @@
 				<!-- TODO: choose final icon -->
 				<DotsCircle :size="20" />
 			</template>
-			<BreakoutRoomsTab v-if="showBreakoutRoomsTab" :is-active="activeTab === 'breakout-rooms'" />
+			<BreakoutRoomsTab v-if="showBreakoutRoomsTab"
+				:token="token"
+				:is-active="activeTab === 'breakout-rooms'" />
 		</NcAppSidebarTab>
 		<NcAppSidebarTab v-if="showChatInSidebar"
 			id="chat"
@@ -260,9 +262,10 @@ export default {
 			return t('spreed', 'Breakout rooms')
 		},
 
-		// TODO: compute actual value
 		showBreakoutRoomsTab() {
-			return true
+			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
 		},
 	},
 
@@ -298,6 +301,11 @@ export default {
 				this.$refs.participantsTab.$el.scrollTop = 0
 			}
 		},
+
+		$slots() {
+			console.debug('Sidebar slots changed, re rendering')
+			this.$forceUpdate()
+		},
 	},
 
 	mounted() {
diff --git a/src/services/breakoutRoomsService.js b/src/services/breakoutRoomsService.js
index ebc848834..7b8969110 100644
--- a/src/services/breakoutRoomsService.js
+++ b/src/services/breakoutRoomsService.js
@@ -31,10 +31,15 @@ const configureBreakoutRooms = async function(token, mode, amount, attendeeMap)
 }
 
 const deleteBreakoutRooms = async function(token) {
-	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/sbreakout-rooms/{token}', { token }))
+	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}', { token }))
+}
+
+const getBreakoutRooms = async function(token) {
+	return await axios.get(generateOcsUrl('/apps/spreed/api/v1/room/{token}/breakout-rooms', { token }))
 }
 
 export {
 	configureBreakoutRooms,
 	deleteBreakoutRooms,
+	getBreakoutRooms,
 }
diff --git a/src/store/breakoutRoomsStore.js b/src/store/breakoutRoomsStore.js
index 38ab61394..22d047301 100644
--- a/src/store/breakoutRoomsStore.js
+++ b/src/store/breakoutRoomsStore.js
@@ -41,7 +41,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { configureBreakoutRooms, deleteBreakoutRooms } from '../services/breakoutRoomsService.js'
+import {
+	configureBreakoutRooms,
+	deleteBreakoutRooms,
+	getBreakoutRooms,
+} from '../services/breakoutRoomsService.js'
 import { showError } from '@nextcloud/dialogs'
 
 const actions = {
@@ -62,6 +66,14 @@ const actions = {
 			showError(t('spreed', 'An error occurred while deleting breakout rooms'))
 		}
 	},
+
+	async getBreakoutRoomsAction(context, { token }) {
+		try {
+			await getBreakoutRooms(token)
+		} catch (error) {
+			console.error(error)
+		}
+	},
 }
 
 export default { actions }