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

exoplatform · Oct 16, 2024 · 4d3e29b · 4d3e29b
1 parent 6a826fa
commit 4d3e29b
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 11 deletions.
diff --git a/apps/portlet-documents/src/main/resources/locale/portlet/attachments_en.properties b/apps/portlet-documents/src/main/resources/locale/portlet/attachments_en.properties
@@ -108,3 +108,10 @@ attachments.valid.title.error.message=These chars are not allowed <>:"/|?*
 
 activity.attach.file.reminder.title=New way to attach documents to a message
 activity.attach.file.reminder.description=Attach documents to your message directly using the attach icon
+
+#####################################################################################
+#                                    notes attachments                              #
+#####################################################################################
+
+notes.open.attachments.list=Open the list of attachments
+
diff --git a/apps/portlet-documents/src/main/resources/locale/portlet/attachments_fr.properties b/apps/portlet-documents/src/main/resources/locale/portlet/attachments_fr.properties
@@ -108,3 +108,9 @@ attachments.valid.title.error.message=Ces caract\u00e8res ne sont pas autoris\u0
 
 activity.attach.file.reminder.title=Nouvelle mani\u00e8re d'attacher des documents aux messages
 activity.attach.file.reminder.description=A partir de maintenant, joignez des documents \u00e0 votre message directement depuis l'option propos\u00e9e \u00e0 la fin de l'\u00e9diteur.
+
+#####################################################################################
+#                                    notes attachments                              #
+#####################################################################################
+
+notes.open.attachments.list=Ouvrir la liste des pi\u00e8ces jointes
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,25 @@
-
+<template>
+  <span v-if="displayAttachmentIcon">
+    <v-btn
+      :aria-label="$t('notes.open.attachments.list')"
+      icon
+      @click="openAttachmentsList">
+       <v-icon
+         size="20"
+         class="noteAttachmentsIcon">
+         fa-solid fa-paperclip
+       </v-icon>
+    </v-btn>
+    <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 +41,10 @@ export default {
     isEmptyNoteTranslation: {
       type: Boolean,
       default: false
+    },
+    editMode: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -35,7 +59,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 +93,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 +131,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'));
 }
diff --git a/apps/resources-wcm/src/main/webapp/skin/less/ecms/portlets/attachments/attachmentsApp.less b/apps/resources-wcm/src/main/webapp/skin/less/ecms/portlets/attachments/attachmentsApp.less
@@ -732,4 +732,7 @@
   }
 }
 
-.make-icons-size();
+.make-icons-size();
+.noteAttachmentsIcon {
+  color: @greyColorLighten1Default !important;
+}