feat: Implement display Notes/Content attachments - EXO-73250 (#2413)

exoplatform · Oct 14, 2024 · 0506d84 · 0506d84
1 parent 0c1b0ce
commit 0506d84
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 10 deletions.
diff --git a/...portlet-documents/src/main/webapp/vue-app/attachment/components/AttachmentsListDrawer.vue b/...portlet-documents/src/main/webapp/vue-app/attachment/components/AttachmentsListDrawer.vue
@@ -18,6 +18,7 @@
     </template>
     <template slot="titleIcons">
       <v-btn
+        v-if="displayOpenAttachmentDrawerButton"
         icon
         color="primary"
         @click="openAttachmentsAppDrawer()">
@@ -41,6 +42,7 @@
               :is-file-editable="isFileEditable(attachment)"
               :allow-to-edit="false"
               :attachment="attachment"
+              :allow-to-detach="allowToDetach"
               :can-access="attachment.acl && attachment.acl.canAccess"
               allow-to-preview />
           </span>
@@ -72,6 +74,14 @@ export default {
     openAttachmentsInEditor: {
       type: Boolean,
       default: () => false
+    },
+    allowToDetach: {
+      type: Boolean,
+      default: true
+    },
+    displayOpenAttachmentDrawerButton: {
+      type: Boolean,
+      default: true
     }
   },
   created() {

diff --git a/...portlet-documents/src/main/webapp/vue-app/attachment/components/notes/NotesAttachment.vue b/...portlet-documents/src/main/webapp/vue-app/attachment/components/notes/NotesAttachment.vue
@@ -1,5 +1,20 @@
-
+<template>
+  <span v-if="displayAttachmentIcon">
+    <v-icon
+      size="16"
+      @click="openAttachmentsList">
+    fa-solid fa-paperclip
+    </v-icon>
+    <attachments-list-drawer
+      ref="attachmentsListDrawer"
+      :attachments="attachments"
+      :allow-to-detach="false"
+      :display-open-attachment-drawer-button="false"
+      :open-attachments-in-editor="false" />
+  </span>
+</template>
 <script>
+
 export default {
   props: {
     entityId: {
@@ -21,6 +36,10 @@ export default {
     isEmptyNoteTranslation: {
       type: Boolean,
       default: false
+    },
+    editMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -35,7 +54,19 @@ export default {
       initDone: false
     };
   },
+  watch: {
+    entityId() {
+      if (!this.editMode) {
+        this.originalAttachmentsList = [];
+        this.attachments = [];
+        this.initEntityAttachmentsList();
+      }
+    }
+  },
   computed: {
+    displayAttachmentIcon() {
+      return !this.editMode && this.attachments.length > 0;
+    },
     attachmentAppConfiguration() {
       return {
         'entityId': this.entityId,
@@ -57,9 +88,12 @@ export default {
     },
     processAutoSave() {
       return this.attachmentListUpdated && !this.attachToEntity;
-    }
+    },
   },
   created() {
+    if (!this.editMode) {
+      this.initEntityAttachmentsList();
+    }
     document.addEventListener('open-notes-attachments', this.openAttachmentDrawer);
     document.addEventListener('attachments-app-drawer-closed', this.handleDrawerClosedEvent);
     document.addEventListener('note-draft-auto-save-done', (event) => {
@@ -92,6 +126,9 @@ export default {
       }
       document.dispatchEvent(new CustomEvent('open-attachments-app-drawer', {detail: this.attachmentAppConfiguration}));
     },
+    openAttachmentsList() {
+      this.$root.$emit('open-attachments-list-drawer');
+    },
     handleDrawerClosedEvent() {
       if (!this.isDrawerClosedEventHandled) {
         this.emitEditorExtensionsDataUpdatedEvent(event);

diff --git a/apps/portlet-documents/src/main/webapp/vue-app/attachment/extensions.js b/apps/portlet-documents/src/main/webapp/vue-app/attachment/extensions.js
@@ -3,7 +3,7 @@ export function installExtensions() {
   CKEDITOR.plugins.addExternal('uploadImage', '/eXoWCMResources/eXoPlugins/uploadImage/', 'plugin.js');
   CKEDITOR.plugins.addExternal('selectImage', '/eXoWCMResources/eXoPlugins/selectImage/', 'plugin.js');
 
-  installNoteEditorExtensions();
+  installNotesExtensions();
   extensionRegistry.registerComponent('ActivityContent', 'activity-content-extensions', {
     id: 'attachments',
     isEnabled: (params) => {
@@ -133,14 +133,13 @@ export function installExtensions() {
       match: fieldName => fieldName === 'origin.keyword',
     },
   });
-
-  extensionRegistry.registerComponent('NewsDetails', 'news-details-attachments', {
-    id: 'attachment-list',
-    vueComponent: Vue.options.components['content-attachment-list'],
-    rank: 10,
+  extensionRegistry.registerComponent('NewsDetails', 'content-details-extension', {
+    id: 'content-attachment-list',
+    vueComponent: Vue.options.components['notes-attachment'],
+    rank: 40,
   });
 }
-function installNoteEditorExtensions() {
+function installNotesExtensions() {
   extensionRegistry.registerExtension('NotesEditor', 'ckeditor-extensions', {
     id: 'attachFile',
     extraPlugin: 'attachFile',
@@ -152,5 +151,11 @@ function installNoteEditorExtensions() {
     vueComponent: Vue.options.components['notes-attachment'],
     rank: 10,
   });
-  document.dispatchEvent(new CustomEvent('notes-editor-extensions-updated'));
+
+  extensionRegistry.registerComponent('NotesOverview', 'notes-overview-extensions', {
+    id: 'notes-attachment-list',
+    vueComponent: Vue.options.components['notes-attachment'],
+    rank: 50,
+  });
+  document.dispatchEvent(new CustomEvent('notes-extensions-updated'));
 }