From 28934a543060b93404809a6f62158b8d6bc8646a Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 18 Sep 2024 09:00:50 +0100
Subject: [PATCH] feat: Add validation for note title field to limit input
 length - EXO-74191 - Meeds-io/MIPs#128  (#1113)

---
 .../portlet/notes/notesPortlet_en.properties  |  1 +
 .../portlet/notes/notesPortlet_fr.properties  |  1 +
 .../main/webapp/skin/less/notes/notes.less    |  1 -
 .../components/NoteFullRichEditor.vue         | 19 +++++++++++++++++--
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
index 2ff2f1675..91cd4959c 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_en.properties
@@ -1,5 +1,6 @@
 #Portlet notes
 notes.title.placeholderContentInput=Title
+notes.title.max.length.warning.message=The title cannot be longer than {0} chars
 notes.body.placeholderContentInput=Body
 notes.label.noteHome=Home
 notes.label.addPage=Add Page
diff --git a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
index 38f6f68ee..cf1220d99 100644
--- a/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
+++ b/notes-webapp/src/main/resources/locale/portlet/notes/notesPortlet_fr.properties
@@ -1,5 +1,6 @@
 #Portlet notes
 notes.title.placeholderContentInput=Titre
+notes.title.max.length.warning.message=Le titre est limité à {0} caractères
 notes.body.placeholderContentInput=Contenu
 notes.label.noteHome=Accueil
 notes.label.addPage=Ajouter
diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
index 5c89e0a9e..9aae3f39f 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -73,7 +73,6 @@
 
       .notes-content-form {
         min-height: calc(~"100vh - 140px");
-
         .notes-content-wrapper > div[role="application"] {
           border-color: transparent;
           flex: 0 1 100%;
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 c9f62a8a4..4f7df1e42 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,6 +53,7 @@
             v-model="noteObject.title"
             :placeholder="titlePlaceholder"
             type="text"
+            :maxlength="noteTitleMaxLength"
             class="py-0 px-1 mt-5 mb-0">
         </div>
         <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
@@ -87,7 +88,8 @@ export default {
       noteObject: null,
       editor: null,
       initialized: false,
-      instanceReady: false
+      instanceReady: false,
+      noteTitleMaxLength: 500
     };
   },
   props: {
@@ -190,6 +192,13 @@ 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);
+      }
       this.updateData();
     },
     'noteObject.content': function () {
@@ -218,7 +227,7 @@ export default {
   computed: {
     hasFeaturedImage() {
       return !!this.noteObject?.properties?.featuredImage?.id;
-    }
+    },
   },
   created() {
     this.cloneNoteObject();
@@ -496,6 +505,12 @@ export default {
     openMetadataDrawer() {
       this.$refs.editorMetadataDrawer.open(this.noteObject);
     },
+    displayAlert(detail) {
+      document.dispatchEvent(new CustomEvent('alert-message', {detail: {
+        alertType: detail?.type,
+        alertMessage: detail?.message,
+      }}));
+    },
   }
 };
 </script>