feat: Add validation for note title field to limit input length - EXO…

…-74191 - Meeds-io/MIPs#128 (#1113)
Meeds-io · Sep 18, 2024 · 28934a5 · 28934a5
1 parent 180d9c2
commit 28934a5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>