diff options
-rw-r--r-- | src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue | 79 | ||||
-rw-r--r-- | src/components/RightSidebar/RightSidebar.vue | 37 | ||||
-rw-r--r-- | src/store/breakoutRoomsStore.js | 3 |
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) } |