diff options
author | Marco <marcoambrosini@icloud.com> | 2023-01-24 10:29:38 +0000 |
---|---|---|
committer | Marco <marcoambrosini@icloud.com> | 2023-01-24 15:10:55 +0000 |
commit | 9f1c55f7bddfc7d30fe6270f452832399aafb286 (patch) | |
tree | 380de5137f297048a0e7451f3949b6ebcfdf0c67 | |
parent | 68170691b1f65509790cc72d8d581a2898dd6365 (diff) |
Implement navigation in participants editor
Signed-off-by: Marco <marcoambrosini@icloud.com>
-rw-r--r-- | src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue | 74 | ||||
-rw-r--r-- | src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue | 41 |
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> |