Implement navigation in participants editor

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

2 files changed, 76 insertions, 39 deletions

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
index a2cdd20b9..0aaf4db7b 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -25,33 +25,42 @@
 		<div class="breakout-rooms-editor">
 			<h2>{{ modalTitle }}</h2>
 			<template v-if="!isEditingParticipants">
-				<NcInputField :label="t('spreed', 'Number of breakout rooms')" type="number" :value.sync="amount" />
-				<NcCheckboxRadioSwitch :checked.sync="mode"
-					value="1"
-					name="mode_radio"
-					type="radio">
-					{{ t('spreed', 'Automatically assign participants') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :checked.sync="mode"
-					value="2"
-					name="mode_radio"
-					type="radio">
-					{{ t('spreed', 'Manually assign participants') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch :checked.sync="mode"
-					value="3"
-					name="mode_radio"
-					type="radio">
-					{{ t('spreed', 'Allow participants to choose') }}
-				</NcCheckboxRadioSwitch>
+				<div class="breakout-rooms-editor__main">
+					<label for="room-number">{{ t('spreed', 'Number of breakout rooms') }} </label>
+					<input id="room-number" v-model.number="amount" type="number">
+					<NcCheckboxRadioSwitch :checked.sync="mode"
+						value="1"
+						name="mode_radio"
+						type="radio">
+						{{ t('spreed', 'Automatically assign participants') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="mode"
+						value="2"
+						name="mode_radio"
+						type="radio">
+						{{ t('spreed', 'Manually assign participants') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="mode"
+						value="3"
+						name="mode_radio"
+						type="radio">
+						{{ t('spreed', 'Allow participants to choose') }}
+					</NcCheckboxRadioSwitch>
+				</div>
 				<div class="breakout-rooms-editor__buttons">
-					<NcButton type="primary" @click="handleCreateRooms">
+					<NcButton v-if="mode === '2'" type="primary" @click="isEditingParticipants = true">
+						{{ t('spreed', 'Assign participants to rooms') }}
+					</NcButton>
+					<NcButton v-else type="primary" @click="handleCreateRooms">
 						{{ t('spreed', 'Create rooms') }}
 					</NcButton>
 				</div>
 			</template>
 			<template v-else>
-				<BreakoutRoomsParticipantsEditor :token="token" />
+				<BreakoutRoomsParticipantsEditor :token="token"
+					:room-number="amount"
+					@back="isEditingParticipants = false"
+					@create-rooms="handleCreateRooms" />
 			</template>
 		</div>
 	</ncmodal>
@@ -59,7 +68,6 @@
 
 <script>
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcInputField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
@@ -69,7 +77,6 @@ export default {
 
 	components: {
 		NcModal,
-		NcInputField,
 		NcCheckboxRadioSwitch,
 		NcButton,
 		BreakoutRoomsParticipantsEditor,
@@ -84,10 +91,10 @@ export default {
 
 	data() {
 		return {
-			mode: 'auto',
+			mode: '1',
 			amount: 1,
 			attendeeMap: '',
-			isEditingParticipants: true,
+			isEditingParticipants: false,
 		}
 	},
 
@@ -100,7 +107,8 @@ export default {
 	},
 
 	methods: {
-		handleCreateRooms() {
+		handleCreateRooms(payload) {
+			console.debug(payload)
 			this.$store.dispatch('configureBreakoutRoomsAction', {
 				token: this.token,
 				mode: this.mode,
@@ -112,14 +120,24 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .breakout-rooms-editor {
 	display: flex;
 	flex-direction: column;
 	padding: 20px;
 	justify-content: flex-start;
 	align-items: flex-start;
-	height: calc(100% - 80px);
+	height: calc(100% - 40px);
+	&__main {
+		height: 100%;
+	 }
+
+	&__buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: calc(var(--default-grid-baseline) * 2);
+		width: 100%;
+	}
 }
 
 ::v-deep .modal-container {
diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
index e9d51f42b..82ebb82c2 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -55,14 +55,21 @@
 			</template>
 		</div>
 		<div class="participants-editor__buttons">
+			<NcButton type="tertiary" @click="goBack">
+				<template #icon>
+					<!-- TODO: choose final icon -->
+					<ArrowLeft :size="20" />
+				</template>
+				{{ t('spreed', 'Back') }}
+			</NcButton>
 			<NcButton v-if="hasAssigned" type="tertiary" @click="resetAssignments">
 				<template #icon>
 					<Reload :size="20" />
 				</template>
 				{{ t('spreed', 'Reset') }}
 			</NcButton>
-			<NcActions v-if="hasUnassigned"
-				:menu-title="t('spreed', 'Assign participants to room')">
+			<NcActions v-if="hasSelected"
+				:menu-title="t('spreed', 'Assign participants')">
 				<NcActionButton v-for="(item, index) in assignments"
 					:key="index"
 					:close-after-click="true"
@@ -89,6 +96,7 @@ import Reload from 'vue-material-design-icons/Reload.vue'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import SelectableParticipant from './SelectableParticipant.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 
 export default {
 	name: 'BreakoutRoomsParticipantsEditor',
@@ -101,6 +109,7 @@ export default {
 		NcAppNavigationItem,
 		SelectableParticipant,
 		NcButton,
+		ArrowLeft,
 	},
 
 	props: {
@@ -111,7 +120,7 @@ export default {
 
 		roomNumber: {
 			type: Number,
-			default: 3,
+			required: true,
 		},
 	},
 
@@ -152,6 +161,11 @@ export default {
 		hasAssigned() {
 			return this.assignments.flat().length > 0
 		},
+
+		// True if there's one or more unassigned participants
+		hasUnassigned() {
+			return this.unassignedParticipants.length > 0
+		},
 	},
 
 	created() {
@@ -173,14 +187,19 @@ export default {
 			return t('spreed', 'Room {roomNumber}', { roomNumber })
 		},
 
-		// This is not fast. Loop over all the participants, for each participant loop again in assignments.
-		// And it is called each time in v-for on each re-render.
-		// Also - this is not a vue-way
-		// filteredParticipants(index) {
-		// 	return this.participants.filter(participant => {
-		// 		return this.assignments[index].includes(participant.attendeeId)
-		// 	})
-		// },
+		handleCreateRooms() {
+			this.$emit('create-rooms', this.assignments)
+		},
+
+		resetAssignments() {
+			this.selectedParticipants = []
+			this.assignments = []
+			this.initialiseAssignments()
+		},
+
+		goBack() {
+			this.$emit('back')
+		},
 	},
 }
 </script>