feat: Notes publication drawer in edit mode - EXO-72749_EXO-73246 - M…

…eeds-io/MIPs#161 (#1153) Enhance reusability of notes publication drawer and implement the edit mode of publication drawer
Meeds-io · Oct 15, 2024 · d37c7c3 · d37c7c3
1 parent 0cbecfe
commit d37c7c3
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 12 deletions.
diff --git a/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/notes-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -86,6 +86,9 @@
     <script>
       <path>/javascript/notesRichEditor.bundle.js</path>
     </script>
+    <depends>
+      <module>NotesPublication</module>
+    </depends>
     <depends>
       <module>commonVueComponents</module>
     </depends>
@@ -114,6 +117,32 @@
     </depends>
   </module>
 
+  <module>
+    <name>NotesPublication</name>
+    <load-group>NotesGRP</load-group>
+    <script>
+      <path>/javascript/notesPublication.bundle.js</path>
+    </script>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>imageCropper</module>
+    </depends>
+  </module>
+
   <portlet>
     <name>NotesEditor</name>
     <module>

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,6 +212,13 @@
   }
 }
 
+#editorPublicationDrawer {
+  .post-feed-target {
+    max-width: 335px;
+  }
+
+}
+
 #editorMetadataDrawer, #editorPublicationDrawer {
 
   .add-image-area, .image-preview {

diff --git a/...ote-publication/NotePublicationDrawer.vue → ...tion/components/NotePublicationDrawer.vue b/...ote-publication/NotePublicationDrawer.vue → ...tion/components/NotePublicationDrawer.vue
@@ -46,6 +46,7 @@
             vertical
             flat>
             <div
+              v-if="!editMode"
               :class="{
                 'col-6': expanded,
                 'flex-grow-1': expanded || stepper === 1,
@@ -85,11 +86,12 @@
             <div
               :class="{
                 'col-6': expanded,
-                'mt-8': !expanded && stepper < 2,
-                'mt-4': !expanded && stepper === 2,
+                'mt-8': !expanded && stepper < 2 && !editMode,
+                'mt-4': !expanded && stepper === 2 && !editMode,
               }"
               class="flex-grow-0 flex-shrink-0">
               <v-stepper-step
+                v-if="!editMode"
                 :step="2"
                 :editable="!expanded"
                 width="100%"
@@ -101,27 +103,33 @@
                 </div>
               </v-stepper-step>
               <v-slide-y-transition>
-                <div v-show="expanded || stepper === 2">
+                <div v-show="expanded || stepper === (2 - editMode)">
                   <div
-                    class="d-flex flex-column mt-8">
+                    :class="{'mt-8': !editMode}"
+                    class="d-flex flex-column">
                     <v-scroll-y-transition hide-on-leave>
                       <div class="mb-2">
                         <div class="d-flex">
                           <v-switch
                             v-model="publicationSettings.post"
                             :disabled="isPublishing"
+                            :aria-label="$t('notes.publication.post.in.feed.label')"
                             :ripple="false"
                             color="primary"
                             class="mt-n1 me-1" />
-                          <span class="d-flex">
-                            {{ $t('notes.publication.post.in.feed.label') }}
+                          <div class="d-flex flex-wrap">
+                            <p class="me-2">
+                              {{ $t('notes.publication.post.in.feed.label') }}
+                            </p>
                             <exo-space-avatar
                               :space-id="spaceId"
                               size="21"
-                              extra-class="ms-2 mb-auto"
+                              :extra-class="['mb-auto text-truncate', {
+                                'post-feed-target': !expanded
+                              }]"
                               bold-title
                               popover />
-                          </span>
+                          </div>
                         </div>
                       </div>
                     </v-scroll-y-transition>
@@ -187,7 +195,7 @@ export default {
   },
   computed: {
     saveButtonLabel() {
-      return (this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
+      return (!this.editMode && this.stepper === 1 && !this.expanded) && this.$t('notes.publication.publish.next.label')
                                                   || this.$t('notes.publication.publish.save.label');
     },
     summaryLengthError() {
@@ -217,6 +225,9 @@ export default {
     },
     open(noteObject) {
       this.noteObject = noteObject;
+      if (this.editMode) {
+        this.publicationSettings.post = this.noteObject?.activityPosted;
+      }
       this.cloneProperties();
       this.$refs.publicationDrawer.open();
       this.toggleExpand();
@@ -253,6 +264,10 @@ export default {
       }, 1000);
     },
     save() {
+      if (this.editMode) {
+        this.$emit('publish', this.publicationSettings);
+        return;
+      }
       if (!this.expanded && this.stepper === 1) {
         this.stepper += 1;
         return;

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-publication/initComponents.js
@@ -0,0 +1,11 @@
+import NotePublicationDrawer from './components/NotePublicationDrawer.vue';
+import NoteMetadataPropertiesForm from '../notes-rich-editor/components/note-properties/NoteMetadataPropertiesForm.vue';
+
+const components = {
+  'note-publication-drawer': NotePublicationDrawer,
+  'note-metadata-properties-form': NoteMetadataPropertiesForm
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-publication/main.js b/notes-webapp/src/main/webapp/vue-app/notes-publication/main.js
@@ -0,0 +1,11 @@
+import './initComponents.js';
+
+// get overrided components if exists
+if (extensionRegistry) {
+  const components = extensionRegistry.loadComponents('notesPublication');
+  if (components && components.length > 0) {
+    components.forEach(cmp => {
+      Vue.component(cmp.componentName, cmp.componentOptions);
+    });
+  }
+}
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/initComponents.js
@@ -5,7 +5,6 @@ import NoteEditorTopBar from '../notes-rich-editor/components/NoteEditorTopBar.v
 import NoteFullRichEditor from './components/NoteFullRichEditor.vue';
 import NoteEditorMetadataDrawer from './components/note-properties/NoteEditorMetadataDrawer.vue';
 import NoteEditorFeaturedImageDrawer from './components/note-properties/NoteEditorFeaturedImageDrawer.vue';
-import NotePublicationDrawer from './components/note-publication/NotePublicationDrawer.vue';
 import NoteMetadataPropertiesForm from './components/note-properties/NoteMetadataPropertiesForm.vue';
 
 const components = {
@@ -16,7 +15,6 @@ const components = {
   'note-full-rich-editor': NoteFullRichEditor,
   'note-editor-metadata-drawer': NoteEditorMetadataDrawer,
   'note-editor-featured-image-drawer': NoteEditorFeaturedImageDrawer,
-  'note-publication-drawer': NotePublicationDrawer,
   'note-metadata-properties-form': NoteMetadataPropertiesForm
 };
 

diff --git a/notes-webapp/webpack.prod.js b/notes-webapp/webpack.prod.js
@@ -19,7 +19,9 @@ const config = {
     engagementCenterExtensions: './src/main/webapp/vue-app/engagementCenterExtensions/extensions.js',
     connectorEventExtensions: './src/main/webapp/vue-app/connectorEventExtensions/extensions.js',
     notePageView: './src/main/webapp/vue-app/note-page-view/main.js',
-    notesNotificationExtension: './src/main/webapp/vue-app/notification-extensions/main.js'
+    notesNotificationExtension: './src/main/webapp/vue-app/notification-extensions/main.js',
+    notesPublication: './src/main/webapp/vue-app/notes-publication/main.js',
+
   },
   output: {
     publicPath: '',