feat: Implement insert content/notes attachments - EXO-73275 (#2407)

exoplatform · Oct 15, 2024 · dfc4eb5 · dfc4eb5
1 parent 5561e95
commit dfc4eb5
Show file tree

Hide file tree

Showing 12 changed files with 484 additions and 13 deletions.
diff --git a/apps/portlet-documents/src/main/webapp/vue-app/attachment/components/Attachment.vue b/apps/portlet-documents/src/main/webapp/vue-app/attachment/components/Attachment.vue
@@ -13,6 +13,11 @@
         :default-folder="defaultFolder"
         :current-space="currentSpace"
         :attach-to-entity="attachToEntity"
+        :display-uploaded-files="displayUploadedFilesList"
+        :source-app="sourceApp"
+        :show-custom-drawer-overlay="showCustomDrawerOverlay"
+        :display-create-document-input="displayCreateDocumentInput"
+        :create-entity-type-folder="createEntityTypeFolder"
         :files="files" />
       <attachments-list-drawer
         ref="attachmentsListDrawer"
@@ -39,12 +44,19 @@ export default {
       drawerList: false,
       attachToEntity: true,
       supportedDocuments: null,
-      openAttachmentsInEditor: false
+      openAttachmentsInEditor: false,
+      displayUploadedFiles: false,
+      createEntityTypeFolder: true,
+      showCustomDrawerOverlay: false,
+      displayCreateDocumentInput: true
     };
   },
   computed: {
     entityHasAttachments() {
       return this.attachments && this.attachments.length;
+    },
+    displayUploadedFilesList() {
+      return this.displayUploadedFiles;
     }
   },
   created() {
@@ -139,6 +151,10 @@ export default {
       this.entityType = config.entityType;
       this.entityId = config.entityId;
       this.openAttachmentsInEditor = config.openAttachmentsInEditor || false;
+      this.displayUploadedFiles = config.displayUploadedFiles;
+      this.createEntityTypeFolder = config.createEntityTypeFolder;
+      this.showCustomDrawerOverlay = config.showCustomDrawerOverlay;
+      this.displayCreateDocumentInput = config.displayCreateDocumentInput;
     },
     startLoadingList() {
       if (this.drawerList && this.$refs.attachmentsListDrawer) {

diff --git a/apps/portlet-documents/src/main/webapp/vue-app/attachment/components/AttachmentsDrawer.vue b/apps/portlet-documents/src/main/webapp/vue-app/attachment/components/AttachmentsDrawer.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="attachments-drawer">
+    <v-overlay
+      v-if="showCustomDrawerOverlay"
+      z-index="1200"
+      :value="drawer"
+      @click.native="closeDrawersByOverlay" />
     <exo-drawer
       ref="attachmentsAppDrawer"
+      v-model="drawer"
       :confirm-close="newUploadedFilesInProgress"
       :confirm-close-labels="confirmAbortUploadLabels"
       class="attachmentsAppDrawer"
@@ -23,7 +29,7 @@
             {{ $t('attachments.alert.sharing.availableFor') }} <b>{{ currentSpaceDisplayName }}</b> {{ $t('attachments.alert.sharing.members') }}
           </div>
           <attachment-create-document-input
-            v-if="(!entityType && ! entityId) || !attachToEntity"
+            v-if="(!entityType && !entityId) || !attachToEntity && displayCreateDocumentInput"
             :attachments="attachments"
             :max-files-count="maxFilesCount"
             :max-files-size="maxFileSize"
@@ -45,15 +51,19 @@
             :max-files-count="maxFilesCount"
             :current-space="currentSpace"
             :current-drive="currentDrive"
+            :default-folder="defaultFolder"
+            :display-uploaded-files="displayUploadedFiles"
             :entity-id="entityId"
             :entity-type="entityType" />
         </div>
         <attachments-drive-explorer-drawer
+          ref="attachmentsDriveExplorerDrawer"
           :entity-id="entityId"
           :entity-type="entityType"
           :default-drive="defaultDrive"
           :extension-refs="$refs"
           :default-folder="defaultFolder"
+          :create-entity-type-folder="createEntityTypeFolder"
           :attached-files="attachments" />
         <div
           v-for="action in attachmentsComposerActions"
@@ -130,6 +140,22 @@ export default {
       type: {},
       default: () => null
     },
+    displayUploadedFiles: {
+      type: Boolean,
+      default: false
+    },
+    createEntityTypeFolder: {
+      type: Boolean,
+      default: true
+    },
+    showCustomDrawerOverlay: {
+      type: Boolean,
+      default: false
+    },
+    displayCreateDocumentInput: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -157,7 +183,8 @@ export default {
       attachmentsChanged: false,
       newUploadedFiles: [],
       creationType: '',
-      saveMode: 'keep'
+      saveMode: 'keep',
+      drawer: false
     };
   },
   computed: {
@@ -220,7 +247,6 @@ export default {
     },
   },
   created() {
-    
     this.$root.$on('open-attachments-app-drawer', () => {
       this.attachmentsChanged = false;
       this.openAttachmentsAppDrawer();
@@ -264,6 +290,8 @@ export default {
       this.$root.$emit('entity-attachments-updated');
       document.dispatchEvent(new CustomEvent('entity-attachments-updated'));
     });
+    document.addEventListener('end-loading-attachment-drawer', this.endLoading);
+    document.addEventListener('start-loading-attachment-drawer', this.startLoading);
   },
   methods: {
     startLoading() {
@@ -294,6 +322,7 @@ export default {
       this.$root.$emit('reset-attachments-upload-input');
       document.removeEventListener('paste', this.onPaste, false);
       this.$refs.attachmentsAppDrawer.close();
+      document.dispatchEvent(new CustomEvent('attachments-app-drawer-closed'));
     },
     uploadAddedAttachments() {
       if (this.newUploadedFilesAdded) { //added new uploaded files
@@ -626,6 +655,19 @@ export default {
         };
         document.dispatchEvent(new CustomEvent('exo-statistic-message', {detail: fileAnalytics}));
       }
+    },
+    closeDrawersByOverlay() {
+      if (!this.isDriveExplorerDrawerClosed()) {
+        this.closeAttachmentsDriveExplorerDrawer();
+        return;
+      }
+      this.closeAttachmentsAppDrawer();
+    },
+    isDriveExplorerDrawerClosed() {
+      return this.$refs.attachmentsDriveExplorerDrawer.isClosed();
+    },
+    closeAttachmentsDriveExplorerDrawer() {
+      this.$refs.attachmentsDriveExplorerDrawer.closeAttachmentsDriveExplorerDrawer();
     }
   }
 };

diff --git a/...e-app/attachment/components/attachments-drive-explorer/AttachmentsDriveExplorerDrawer.vue b/...e-app/attachment/components/attachments-drive-explorer/AttachmentsDriveExplorerDrawer.vue
@@ -363,6 +363,10 @@ export default {
       type: String,
       default: ''
     },
+    createEntityTypeFolder: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -609,7 +613,7 @@ export default {
         }
         this.openDrive(this.defaultDrive, null, parentFolder).then(() => {
           const defaultFolder = self.folders.find(folder => folder.name === self.defaultFolder.split('/').pop());
-          if (self.entityType) {
+          if (self.entityType && self.createEntityTypeFolder) {
             this.createEntityTypeAndIdFolders(defaultFolder);
           }
           //if both default drive and default folder exist
@@ -1125,7 +1129,10 @@ export default {
     resetDriveExplorer() {
       this.selectedFiles = [];
       this.removedFiles = [];
-    }
+    },
+    isClosed() {
+      return this.$refs.driveExplorerDrawer.$el.classList.contains('v-navigation-drawer--close');
+    },
   }
 };
 </script>
diff --git a/...ain/webapp/vue-app/attachment/components/attachments-upload-components/AttachmentItem.vue b/...ain/webapp/vue-app/attachment/components/attachments-upload-components/AttachmentItem.vue
@@ -160,6 +160,10 @@ export default {
       type: {},
       default: () => null
     },
+    defaultFolder: {
+      type: String,
+      default: ''
+    },
   },
   data() {
     return {
@@ -286,6 +290,9 @@ export default {
           color: '#476A9C',
         };
       }
+    },
+    attachmentDefaultFolderName() {
+      return this.defaultFolder || null ;
     }
   },
   watch: {
@@ -305,6 +312,10 @@ export default {
       }
     },
     openSelectDestinationFolderForFile(attachment) {
+      if (attachment && !attachment.fileDrive && this.currentDrive && this.attachmentDefaultFolderName) {
+        attachment.fileDrive = this.currentDrive;
+        attachment.pathDestinationFolderForFile = this.attachmentDefaultFolderName;
+      }
       this.$root.$emit('change-attachment-destination-path', attachment);
     },
     absoluteDateModified(options) {

diff --git a/.../vue-app/attachment/components/attachments-upload-components/AttachmentsUploadedFiles.vue b/.../vue-app/attachment/components/attachments-upload-components/AttachmentsUploadedFiles.vue
@@ -112,6 +112,7 @@
             :allow-to-preview="false"
             :current-space="currentSpace"
             :current-drive="currentDrive"
+            :default-folder="defaultFolder"
             :entity-id="entityId"
             :allow-to-detach="allowToDetach"
             allow-to-edit />
@@ -156,8 +157,19 @@ export default {
       type: String,
       default: ''
     },
+    defaultFolder: {
+      type: String,
+      default: ''
+    },
+    displayUploadedFiles: {
+      type: Boolean,
+      default: false
+    }
   },
   created() {
+    if (this.displayUploadedFiles) {
+      this.updateUploadedFilesList();
+    }
     this.$root.$on('refresh-uploaded-files-list', () => {
       this.$forceUpdate();
       this.endLoadingAttachmentDrawer();
@@ -171,6 +183,21 @@ export default {
       return !!this.entityId && !!this.entityType;
     },
   },
+  watch: {
+    displayUploadedFiles(newVal) {
+      if (newVal) {
+        this.updateUploadedFilesList();
+      }
+    },
+    attachments: {
+      handler() {
+        if (this.displayUploadedFiles) {
+          this.updateUploadedFilesList();
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     openSelectDestinationFolderDrawer() {
       this.$root.$emit('open-drive-explorer-drawer', this.currentDrive);
@@ -180,6 +207,13 @@ export default {
       if (!isLoadingDrawer) {
         this.$root.$emit('end-loading-attachment-drawer');
       }
+    },
+    updateUploadedFilesList() {
+      this.attachments.forEach((attachment) => {
+        if (!this.newUploadedFiles.find((item) => item.id === attachment.id)) {
+          this.newUploadedFiles.push(attachment);  // Push only if the attachment is not already there
+        }
+      });
     }
   }
 };