Enh(BreakoutRoomsEditor): Add amount validation

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue

@@ -30,6 +30,9 @@
 			<template v-if="!isEditingParticipants">
 				<div class="breakout-rooms-editor__main">
 					<label class="breakout-rooms-editor__caption" for="room-number">{{ t('spreed', 'Number of breakout rooms') }} </label>
+					<p v-if="isInvalidAmount" class="breakout-rooms-editor__error-hint">
+						{{ t('spreed', 'You can create up to 20 breakout rooms.') }}
+					</p>
 					<NcTextField id="room-number"
 						:value="amount.toString()"
 						class="breakout-rooms-editor__number-input"
@@ -61,10 +64,16 @@
 					</fieldset>
 				</div>
 				<div class="breakout-rooms-editor__buttons">
-					<NcButton v-if="mode === '2'" type="primary" @click="isEditingParticipants = true">
+					<NcButton v-if="mode === '2'"
+						type="primary"
+						:disabled="isInvalidAmount"
+						@click="isEditingParticipants = true">
 						{{ t('spreed', 'Assign participants to rooms') }}
 					</NcButton>
-					<NcButton v-else type="primary" @click="handleCreateRooms">
+					<NcButton v-else
+						type="primary"
+						:disabled="isInvalidAmount"
+						@click="handleCreateRooms">
 						{{ t('spreed', 'Create rooms') }}
 					</NcButton>
 				</div>
@@ -114,6 +123,7 @@ export default {
 			amount: 2,
 			attendeeMap: '',
 			isEditingParticipants: false,
+			isInvalidAmount: false,
 		}
 	},
 
@@ -147,6 +157,7 @@ export default {
 		// now it breaks validation. Another option: Create NcNumberField component
 		setAmount(value) {
 			this.amount = parseFloat(value)
+			this.isInvalidAmount = this.amount > 20 || this.amount < 1
 		},
 	},
 }
@@ -171,6 +182,11 @@ export default {
 		margin: calc(var(--default-grid-baseline)*3) 0 calc(var(--default-grid-baseline)*2) 0;
 	}
 
+	&__error-hint {
+		color: var(--color-error);
+		font-size: 0.8rem;
+	}
+
 	&__participants-step {
 		height: 100%;