feat: Implement note publication drawer - EXO-72738 - Meeds-io/MIPs#161

Implement note publication drawer
Meeds-io · Oct 7, 2024 · efc0931 · efc0931
1 parent 707ca5a
commit efc0931
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 23 deletions.
diff --git a/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java b/notes-service/src/main/java/org/exoplatform/wiki/service/rest/NotesRestService.java
@@ -761,8 +761,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           }
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT_AND_TITLE, identity);
+          note_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
@@ -783,8 +783,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_TITLE, identity);
+          note_.setLang(note.getLang());
           note_.setTitle(note.getTitle());
           note_.setProperties(notePageProperties);
         }
@@ -799,8 +799,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_CONTENT, identity);
+          note_.setLang(note.getLang());
           note_.setContent(note.getContent());
           note_.setProperties(notePageProperties);
         }
@@ -815,8 +815,8 @@ public Response updateNoteById(@Parameter(description = "Note id", required = tr
           note_.setProperties(notePageProperties);
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
         } else {
-          note_.setLang(note.getLang());
           note_ = noteService.updateNote(note_, PageUpdateType.EDIT_PAGE_PROPERTIES, identity);
+          note_.setLang(note.getLang());
           note_.setProperties(notePageProperties);
         }
         noteService.createVersionOfNote(note_, identity.getUserId());

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
@@ -68,6 +68,8 @@ notes.featuredImage.size.error.message=Featured image size should be less or equ
 notes.publication.publish.label=Publish
 notes.publication.label=Choose your publication options
 notes.publication.check.properties.label=Check the teaser
+notes.publication.publish.next.label=Next
+
 
 
 popup.confirm=Confirm

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
@@ -67,6 +67,7 @@ notes.featuredImage.size.error.message=La taille de l'illustration doit être in
 notes.publication.publish.label=Publier
 notes.publication.label=Choisir les options de publication
 notes.publication.check.properties.label=Vérifier l'accroche
+notes.publication.publish.next.label=Suivant
 
 popup.confirm=Confirmer
 popup.msg.confirmation=Confirmation

diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -212,7 +212,7 @@
   }
 }
 
-#editorMetadataDrawer {
+#editorMetadataDrawer, #editorPublicationDrawer {
 
   .add-image-area, .image-preview {
     background-color: @primaryBackground !important;

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
@@ -80,6 +80,10 @@
       :has-featured-image="hasFeaturedImage" />
     <note-publication-drawer
       ref="editorPublicationDrawer"
+      :has-featured-image="hasFeaturedImage"
+      :is-publishing="isPublishing"
+      @publish="postAndPublishNote"
+      @metadata-updated="metadataUpdated"
       @closed="publicationDrawerClosed" />
   </div>
 </template>
@@ -94,7 +98,8 @@ export default {
       instanceReady: false,
       noteTitleMaxLength: 500,
       updatingProperties: false,
-      enablePostKeys: 0
+      enablePostKeys: 0,
+      isPublishing: false
     };
   },
   props: {
@@ -234,6 +239,15 @@ export default {
     saveNoteButtonDisabled() {
       return this.updatingProperties || this.saveButtonDisabled;
     },
+    newPageDraft() {
+      return !this.noteObject?.id || (this.noteObject?.draftPage && !this.noteObject?.targetPageId);
+    },
+    editMode() {
+      return this.noteObject?.id && !this.newPageDraft;
+    },
+    isTranslation() {
+      return !!this.noteObject?.lang;
+    },
     newPublicationDrawerEnabled() {
       return eXo?.env?.portal?.newPublicationDrawerEnabled;
     }
@@ -249,6 +263,9 @@ export default {
     document.addEventListener('note-custom-plugins', this.openCustomPluginsDrawer);
   },
   methods: {
+    setPublishing(publishing) {
+      this.isPublishing = publishing;
+    },
     metadataUpdated(properties) {
       this.updatingProperties = true;
       this.noteObject.properties = properties;
@@ -343,12 +360,20 @@ export default {
         }, 200);
       }
     },
-    postNote(toPublish) {
-      if (this.newPublicationDrawerEnabled && this.publicationEnabled) {
+    postNote() {
+      if (this.newPublicationDrawerEnabled && this.publicationEnabled
+          && !this.isTranslation && !this.editMode) {
         this.openPublicationDrawer(this.noteObject);
         return;
       }
-      this.$emit('post-note', toPublish);
+      this.postAndPublishNote();
+    },
+    postAndPublishNote(note) {
+      if (this.newPublicationDrawerEnabled) {
+        this.noteObject = note;
+        this.updateData();
+      }
+      this.$emit('post-note', false);
     },
     resetEditorData() {
       this.noteObject.title = null;
@@ -521,7 +546,7 @@ export default {
       return this.$refs.featuredImageDrawer.isClosed();
     },
     openPublicationDrawer() {
-      this.$refs.editorPublicationDrawer.open();
+      this.$refs.editorPublicationDrawer.open(this.noteObject);
     },
     publicationDrawerClosed() {
       this.enablePostKeys ++;
@@ -536,7 +561,7 @@ export default {
       }}));
     },
     displayNoteTitleMaxLengthCheckAlert(newTitle, oldTitle) {
-      if (newTitle.length > this.noteTitleMaxLength) {
+      if (newTitle?.length > this.noteTitleMaxLength) {
         this.noteObject.title = oldTitle;
         this.displayAlert({
           type: 'warning',

diff --git a/.../webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue b/.../webapp/vue-app/notes-rich-editor/components/note-properties/NoteEditorMetadataDrawer.vue
@@ -44,7 +44,7 @@
             :current-properties="currentNoteProperties"
             :has-featured-image="hasFeaturedImage"
             :summary-max-length="summaryMaxLength"
-            @properties-updated="propertiesUpdated"/>
+            @properties-updated="propertiesUpdated" />
         </div>
       </template>
       <template slot="footer">
@@ -73,7 +73,8 @@ export default {
     return {
       noteObject: null,
       drawer: false,
-      currentNoteProperties: null,
+      currentNoteProperties: {},
+      propertiesToSave: null,
       summaryMaxLength: 1300,
     };
   },
@@ -96,7 +97,15 @@ export default {
   },
   methods: {
     propertiesUpdated(properties) {
-      this.noteObject.properties = properties;
+      if (!this.noteObject?.properties) {
+        this.noteObject.properties = {};
+      }
+      if (!this.noteObject?.properties?.featuredImage) {
+        this.noteObject.properties.featuredImage = {};
+      }
+
+      this.updateCurrentNoteObjectProperties(properties);
+      this.propertiesToSave = properties;
     },
     resetProperties() {
       this.cancelChanges();
@@ -115,14 +124,27 @@ export default {
     },
     cancelChanges() {
       this.close();
-      this.$refs.propertiesForm.cancelChanges();
+      setTimeout(() => {
+        this.$refs.propertiesForm.cancelChanges();
+      }, 1000);
     },
     close() {
       this.$refs.metadataDrawer.close();
     },
     save() {
-      this.$emit('metadata-updated', this.noteObject.properties);
+      this.$emit('metadata-updated', this.propertiesToSave);
       this.close();
+    },
+    updateCurrentNoteObjectProperties(properties) {
+      this.noteObject.properties.noteId = Number(properties.noteId);
+      this.noteObject.properties.summary = properties.summary;
+      this.noteObject.properties.draft = properties.draft;
+
+      this.noteObject.properties.featuredImage.id = properties?.featuredImage?.id;
+      this.noteObject.properties.featuredImage.uploadId = properties?.featuredImage?.uploadId;
+      this.noteObject.properties.featuredImage.mimeType = properties?.featuredImage?.mimeType;
+      this.noteObject.properties.featuredImage.altText = properties?.featuredImage?.altText;
+      this.noteObject.properties.featuredImage.toDelete = properties?.featuredImage?.toDelete;
     }
   }
 };

diff --git a/...ebapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue b/...ebapp/vue-app/notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue
@@ -175,12 +175,15 @@ export default {
     }
   },
   watch: {
-    note() {
-      this.noteObject = structuredClone(this.note);
+    'currentProperties.summary': function () {
+      this.summaryContent = this.currentProperties.summary;
     },
     'noteObject.lang': function () {
       this.imageData = null;
     },
+    note() {
+      this.noteObject = structuredClone(this.note);
+    },
     hasFeaturedImage() {
       this.hasFeaturedImageValue = this.hasFeaturedImage;
     },
@@ -226,7 +229,8 @@ export default {
           uploadId: this.uploadId,
           mimeType: this.mimeType,
           altText: this.featuredImageAltText,
-          toDelete: this.removeFeaturedImage || (!this.uploadId && !savedFeaturedImageId)
+          toDelete: this.removeFeaturedImage ||
+              (this.isDraft && !this.uploadId && !savedFeaturedImageId)
         },
         draft: this.isDraft || !this.notedId
       };
@@ -237,7 +241,10 @@ export default {
       this.mimeType = mimeType;
     },
     openFeaturedImageDrawer() {
-      this.$root.$emit('open-featured-image-drawer', {altText: this.featuredImageAltText || this.savedFeaturedImageAltText});
+      this.$root.$emit('open-featured-image-drawer', {
+        altText: this.featuredImageAltText || this.savedFeaturedImageAltText,
+        src: this.featuredImageLink
+      });
     },
     removeNoteFeaturedImage() {
       this.featuredImage = null;