From 26a717f98163ba072de921b9b0322bc508c1d3fa Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 16 Jul 2024 15:13:30 +0200
Subject: [PATCH] fix(bans): handle max length of internal note

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../RightSidebar/Participants/Participant.vue | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 8e2a9abd2669..881b76926094 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -318,17 +318,21 @@
 					{{ t('spreed', 'Also ban from this conversation') }}
 				</NcCheckboxRadioSwitch>
 				<template v-if="isBanParticipant">
-					<NcTextField v-if="isBanParticipant"
+					<NcTextArea v-if="isBanParticipant"
 						class="participant-dialog__input"
 						:label="t('spreed', 'Internal note (reason to ban)')"
+						:error="!!maxLengthWarning"
 						:value.sync="internalNote" />
+					<span v-if="maxLengthWarning" class="participant-dialog__error-hint">
+						{{ maxLengthWarning }}
+					</span>
 				</template>
 			</template>
 			<template #actions>
 				<NcButton type="tertiary" :disabled="isLoading" @click="isRemoveDialogOpen = false">
 					{{ t('spreed', 'Dismiss') }}
 				</NcButton>
-				<NcButton type="error" :disabled="isLoading" @click="removeParticipant">
+				<NcButton type="error" :disabled="isLoading || !!maxLengthWarning" @click="removeParticipant">
 					{{ t('spreed', 'Remove') }}
 				</NcButton>
 			</template>
@@ -376,7 +380,7 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
@@ -411,7 +415,7 @@ export default {
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcDialog,
-		NcTextField,
+		NcTextArea,
 		ParticipantPermissionsEditor,
 		// Icons
 		Account,
@@ -801,6 +805,16 @@ export default {
 					|| this.participant.actorType === ATTENDEE.ACTOR_TYPE.EMAILS)
 		},
 
+		maxLengthWarning() {
+			if (this.internalNote.length <= 4000) {
+				return ''
+			}
+			return t('spreed', 'The text must be less than or equal to {maxLength} characters long. Your current text is {charactersCount} characters long.', {
+				maxLength: 4000,
+				charactersCount: this.internalNote.length,
+			})
+		},
+
 		removeParticipantLabel() {
 			switch (this.participant.actorType) {
 			case ATTENDEE.ACTOR_TYPE.GROUPS:
@@ -1261,6 +1275,9 @@ export default {
 	&__input {
 		margin-block-end: 6px;
 	}
+	&__error-hint {
+		color: var(--color-error);
+	}
 }
 
 .utils {