From 4e1829d888864918bc795b88d043ca49a8515a54 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Thu, 19 Sep 2024 10:28:33 +0100
Subject: [PATCH] feat: Displaying the note title limit warning message only
 when trying to add more than the limit - EXO-74261 - Meeds-io/MIPs#129
 (#1118)

---
 .../components/NoteFullRichEditor.vue         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index 6d5b4642d..94d93de24 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -53,7 +53,7 @@
             v-model="noteObject.title"
             :placeholder="titlePlaceholder"
             type="text"
-            :maxlength="noteTitleMaxLength"
+            :maxlength="noteTitleMaxLength + 1"
             class="py-0 px-1 mt-5 mb-0">
         </div>
         <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
@@ -191,13 +191,10 @@ export default {
     }
   },
   watch: {
-    'noteObject.title': function() {
-      if (this.noteObject.title.length >= this.noteTitleMaxLength) {
-        const messageObject = {
-          type: 'warning',
-          message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
-        };
-        this.displayAlert(messageObject);
+    'noteObject.title': function(newVal, oldVal) {
+      if (newVal.length > this.noteTitleMaxLength) {
+        this.displayNoteTitleMaxLengthCheckAlert();
+        this.noteObject.title = oldVal;
       }
       this.updateData();
     },
@@ -512,6 +509,13 @@ export default {
         alertMessage: detail?.message,
       }}));
     },
+    displayNoteTitleMaxLengthCheckAlert(){
+      const messageObject = {
+        type: 'warning',
+        message: this.$t('notes.title.max.length.warning.message', {0: this.noteTitleMaxLength})
+      };
+      this.displayAlert(messageObject);
+    }
   }
 };
 </script>