Initialise BreakoutRoomsSettings

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

2 files changed, 176 insertions, 103 deletions

diff --git a/src/components/ConversationSettings/BreakoutRoomsSettings.vue b/src/components/ConversationSettings/BreakoutRoomsSettings.vue
new file mode 100644
index 000000000..754ba6333
--- /dev/null
+++ b/src/components/ConversationSettings/BreakoutRoomsSettings.vue
@@ -0,0 +1,96 @@
+<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<Fragment>
+		<div class="breakout-rooms-settings">
+			<p class="breakout-rooms-settings__hint">
+				{{ hintText }}
+			</p>
+			<NcButton type="secondary"
+				@click="openBreakoutRoomsEditor">
+				<template #icon>
+					<DotsCircle :size="20" />
+				</template>
+				{{ t('spreed', 'Setup breakout rooms for this conversation') }}
+			</NcButton>
+		</div>
+		<!-- Breakout rooms editor -->
+		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
+			@close="showBreakoutRoomsEditor = false" />
+	</Fragment>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
+import { Fragment } from 'vue-frag'
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
+
+export default {
+	name: 'BreakoutRoomsSettings',
+
+	components: {
+		NcButton,
+		BreakoutRoomsEditor,
+		Fragment,
+		DotsCircle,
+	},
+
+	props: {
+		/**
+		 * The conversation's token
+		 */
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			showBreakoutRoomsEditor: false,
+		}
+	},
+
+	computed: {
+		hintText() {
+			return t('spreed', 'Breakout rooms are blah blah blah blah blah blah blah blah blah blah blah blah blah blah')
+		},
+	},
+
+	methods: {
+		openBreakoutRoomsEditor() {
+			this.showBreakoutRoomsEditor = true
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.breakout-rooms-settings {
+	&__hint{
+		margin-bottom: calc(var(--default-grid-baseline) * 2);
+		color: var(--color-text-lighter);
+	}
+}
+
+</style>
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 5dd68dbee..cdd5bf186 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -20,96 +20,84 @@
 -->
 
 <template>
-	<Fragment>
-		<NcAppSettingsDialog role="dialog"
-			:aria-label="t('spreed', 'Conversation settings')"
-			:title="t('spreed', 'Conversation settings')"
-			:open.sync="showSettings"
-			:show-navigation="true"
-			:container="container">
-			<!-- description -->
-			<NcAppSettingsSection v-if="showDescription"
-				id="description"
-				:title="t('spreed', 'Description')">
-				<!-- Rename to "Basic info" when Name is moved over -->
-				<Description :editable="canFullModerate"
-					:description="description"
-					:editing="isEditingDescription"
-					:loading="isDescriptionLoading"
-					:placeholder="t('spreed', 'Enter a description for this conversation')"
-					@submit-description="handleUpdateDescription"
-					@update:editing="handleEditDescription" />
-			</NcAppSettingsSection>
-
-			<!-- Notifications settings and devices preview screen -->
-			<NcAppSettingsSection id="notifications"
-				:title="t('spreed', 'Personal')">
-				<NcCheckboxRadioSwitch :checked.sync="showDeviceChecker"
-					type="switch">
-					{{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }}
-				</NcCheckboxRadioSwitch>
-
-				<NotificationsSettings :conversation="conversation" />
-			</NcAppSettingsSection>
-
-			<NcAppSettingsSection id="conversation-settings"
-				:title="t('spreed', 'Moderation')">
-				<ListableSettings v-if="canFullModerate"
-					:token="token" />
-				<LinkShareSettings v-if="canFullModerate"
-					ref="linkShareSettings" />
-				<ExpirationSettings :token="token" />
-			</NcAppSettingsSection>
-
-			<NcAppSettingsSection v-if="canFullModerate"
-				id="meeting"
-				:title="t('spreed', 'Meeting')">
-				<LobbySettings :token="token" />
-				<SipSettings v-if="canUserEnableSIP" />
-			</NcAppSettingsSection>
-
-			<!-- Conversation permissions -->
-			<NcAppSettingsSection v-if="canFullModerate"
-				id="permissions"
-				:title="t('spreed', 'Permissions')">
-				<ConversationPermissionsSettings :token="token" />
-			</NcAppSettingsSection>
-
-			<!-- Breakout rooms -->
-			<NcAppSettingsSection v-if="canFullModerate"
-				id="breakout-rooms"
-				:title="t('spreed', 'Breakout Rooms')">
-				Put an explanatory paragraph here and create a dedicated component for this
-				<NcButton type="secondary"
-					@click="openBreakoutRoomsEditor">
-					<template #icon>
-						<DotsCircle :size="20" />
-					</template>
-					{{ t('spreed', 'Setup breakout rooms') }}
-				</NcButton>
-			</NcAppSettingsSection>
-
-			<!-- Matterbridge settings -->
-			<NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled"
-				id="matterbridge"
-				:title="t('spreed', 'Matterbridge')">
-				<MatterbridgeSettings />
-			</NcAppSettingsSection>
-
-			<!-- Destructive actions -->
-			<NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation"
-				id="dangerzone"
-				:title="t('spreed', 'Danger zone')">
-				<LockingSettings :token="token" />
-				<DangerZone :conversation="conversation"
-					:can-leave-conversation="canLeaveConversation"
-					:can-delete-conversation="canDeleteConversation" />
-			</NcAppSettingsSection>
-		</NcAppSettingsDialog>
-
-		<!-- Breakout rooms editor -->
-		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor" @close="showBreakoutRoomsEditor = false" />
-	</Fragment>
+	<NcAppSettingsDialog role="dialog"
+		:aria-label="t('spreed', 'Conversation settings')"
+		:title="t('spreed', 'Conversation settings')"
+		:open.sync="showSettings"
+		:show-navigation="true"
+		:container="container">
+		<!-- description -->
+		<NcAppSettingsSection v-if="showDescription"
+			id="description"
+			:title="t('spreed', 'Description')">
+			<!-- Rename to "Basic info" when Name is moved over -->
+			<Description :editable="canFullModerate"
+				:description="description"
+				:editing="isEditingDescription"
+				:loading="isDescriptionLoading"
+				:placeholder="t('spreed', 'Enter a description for this conversation')"
+				@submit-description="handleUpdateDescription"
+				@update:editing="handleEditDescription" />
+		</NcAppSettingsSection>
+
+		<!-- Notifications settings and devices preview screen -->
+		<NcAppSettingsSection id="notifications"
+			:title="t('spreed', 'Personal')">
+			<NcCheckboxRadioSwitch :checked.sync="showDeviceChecker"
+				type="switch">
+				{{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }}
+			</NcCheckboxRadioSwitch>
+
+			<NotificationsSettings :conversation="conversation" />
+		</NcAppSettingsSection>
+
+		<NcAppSettingsSection id="conversation-settings"
+			:title="t('spreed', 'Moderation')">
+			<ListableSettings v-if="canFullModerate"
+				:token="token" />
+			<LinkShareSettings v-if="canFullModerate"
+				ref="linkShareSettings" />
+			<ExpirationSettings :token="token" />
+		</NcAppSettingsSection>
+
+		<NcAppSettingsSection v-if="canFullModerate"
+			id="meeting"
+			:title="t('spreed', 'Meeting')">
+			<LobbySettings :token="token" />
+			<SipSettings v-if="canUserEnableSIP" />
+		</NcAppSettingsSection>
+
+		<!-- Conversation permissions -->
+		<NcAppSettingsSection v-if="canFullModerate"
+			id="permissions"
+			:title="t('spreed', 'Permissions')">
+			<ConversationPermissionsSettings :token="token" />
+		</NcAppSettingsSection>
+
+		<!-- Breakout rooms -->
+		<NcAppSettingsSection v-if="canFullModerate"
+			id="breakout-rooms"
+			:title="t('spreed', 'Breakout Rooms')">
+			<BreakoutRoomsSettings :token="token" />
+		</NcAppSettingsSection>
+
+		<!-- Matterbridge settings -->
+		<NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled"
+			id="matterbridge"
+			:title="t('spreed', 'Matterbridge')">
+			<MatterbridgeSettings />
+		</NcAppSettingsSection>
+
+		<!-- Destructive actions -->
+		<NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation"
+			id="dangerzone"
+			:title="t('spreed', 'Danger zone')">
+			<LockingSettings :token="token" />
+			<DangerZone :conversation="conversation"
+				:can-leave-conversation="canLeaveConversation"
+				:can-delete-conversation="canDeleteConversation" />
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
@@ -132,10 +120,7 @@ import Description from '../Description/Description.vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
-import { Fragment } from 'vue-frag'
-import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
+import BreakoutRoomsSettings from './BreakoutRoomsSettings.vue'
 
 export default {
 	name: 'ConversationSettingsDialog',
@@ -155,10 +140,7 @@ export default {
 		Description,
 		NcCheckboxRadioSwitch,
 		ConversationPermissionsSettings,
-		NcButton,
-		DotsCircle,
-		Fragment,
-		BreakoutRoomsEditor,
+		BreakoutRoomsSettings,
 	},
 
 	data() {
@@ -168,7 +150,6 @@ export default {
 			isEditingDescription: false,
 			isDescriptionLoading: false,
 			showDeviceChecker: false,
-			showBreakoutRoomsEditor: false,
 		}
 	},
 
@@ -276,10 +257,6 @@ export default {
 		handleEditDescription(payload) {
 			this.isEditingDescription = payload
 		},
-
-		openBreakoutRoomsEditor() {
-			this.showBreakoutRoomsEditor = true
-		},
 	},
 }
 </script>