[ACA-45] Drag and Drop a New Version (#5710)

* added a new input: file

* unit test - having singleFile option and a file as input, the type of the input for uploading should be button instead of file

* added a click event for the upload button and also handle if having a file as input, the type of the input should be 'button' instead of 'file'

* handling allowed for upload also for 'update' permissions over a dropped file. also emitting a new event for updating file version if i'm dropping a single file over another file.

* unit tests for handling dropping a file over another

* added a new input (file type)

* passing a file to adf-version-upload component

* new input as file and toggle new version if having that as input + unit test

* added new input as file for new version

* added new input to allow dropping a file over another to update it's version

* added a new variable for handling dropping a file over another one and also handle a new event when we update the file version

* pass a new dropped file to the dialog

* new message

* new method to allow isDropTarget for a file instead only to folders.

* new emitter for updating a file's version

* allows updating a file's version by dropping another file over it.

* refactor allowDropFiles

* update docs for drag&drop file into another file

* update for drag&drop a file over another file functionality

* made the allowDropFiles checking optional for isDropTarget property, only checking if the value is passed to the share-data-row

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>

demo-shell/resources/i18n/en.json

@@ -119,7 +119,7 @@
   "DOCUMENT_LIST": {
     "MULTISELECT_CHECKBOXES": "Multiselect (with checkboxes)",
     "THUMBNAILS": "Enable Thumbnails",
-    "ALLOW_DROP_FILES": "Enable Drop Files in a folder",
+    "ALLOW_DROP_FILES": "Enable Drop Files in a folder or a file",
     "MULTIPLE_FILE_UPLOAD": "Multiple File Upload",
     "FOLDER_UPLOAD": "Folder upload",
     "CUSTOM_FILTER": "Custom extensions filter",

demo-shell/src/app/components/files/files.component.html

@@ -41,7 +41,8 @@
                               [versioning]="versioning"
                               [adf-check-allowable-operation]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
-                              (beginUpload)="onBeginUpload($event)">
+                              (beginUpload)="onBeginUpload($event)"
+                              (updateFileVersion)="onUploadNewVersion($event)">
             <div *ngIf="errorMessage" class="app-error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
@@ -565,8 +566,8 @@
         </section>
 
         <section>
-            <mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" [(ngModel)]="allowDropFiles"
-                              (click)="toggleAllowDropFiles()">
+            <mat-slide-toggle id="adf-document-list-enable-drop-files" [color]="'primary'" [checked]="allowDropFiles"
+                              (change)="toggleAllowDropFiles()">
                 {{'DOCUMENT_LIST.ALLOW_DROP_FILES' | translate}}
             </mat-slide-toggle>
         </section>

demo-shell/src/app/components/files/files.component.ts

@@ -75,9 +75,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     toolbarColor = 'default';
 
     selectionModes = [
-        { value: 'none', viewValue: 'None' },
-        { value: 'single', viewValue: 'Single' },
-        { value: 'multiple', viewValue: 'Multiple' }
+        {value: 'none', viewValue: 'None'},
+        {value: 'single', viewValue: 'Single'},
+        {value: 'multiple', viewValue: 'Multiple'}
     ];
 
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
@@ -237,6 +237,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     toggleAllowDropFiles() {
+        this.allowDropFiles = !this.allowDropFiles;
         this.documentList.reload();
     }
 
@@ -322,7 +323,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     getCurrentDocumentListNode(): MinimalNodeEntity[] {
         if (this.documentList.folderNode) {
-            return [{ entry: this.documentList.folderNode }];
+            return [{entry: this.documentList.folderNode}];
         } else {
             return [];
         }
@@ -427,7 +428,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
         if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
             this.dialog.open(VersionManagerDialogAdapterComponent, {
-                data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
+                data: {contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload},
                 panelClass: 'adf-version-manager-dialog',
                 width: '630px'
             });
@@ -591,6 +592,27 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.logService.log(event);
     }
 
+    onUploadNewVersion(ev) {
+        const contentEntry = ev.detail.data.node.entry;
+        const showComments = this.showVersionComments;
+        const allowDownload = this.allowVersionDownload;
+        const newFileVersion = ev.detail.files[0].file;
+
+        if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
+            this.dialog.open(VersionManagerDialogAdapterComponent, {
+                data: {
+                    contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload,
+                    newFileVersion: newFileVersion, showComparison: true
+                },
+                panelClass: 'adf-version-manager-dialog',
+                width: '630px'
+            });
+        } else {
+            const translatedErrorMessage: any = this.translateService.instant('OPERATION.ERROR.PERMISSION');
+            this.openSnackMessage(translatedErrorMessage);
+        }
+    }
+
     getFileFiltering(): string {
         return this.acceptedFilesTypeShow ? this.acceptedFilesType : '*';
     }

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html

@@ -19,7 +19,7 @@
 </section>
 
 <section mat-dialog-content *ngIf="!readOnly">
-    <adf-version-manager [node]="contentEntry" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
+    <adf-version-manager [node]="contentEntry" [newFileVersion]="newFileVersion" [allowDownload]="allowDownload" [showComments]="showComments" (uploadError)="uploadError($event)"></adf-version-manager>
 </section>
 <section mat-dialog-content *ngIf="readOnly">
     <adf-version-list [node]="contentEntry" [showActions]="false" ></adf-version-list>

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts

@@ -27,6 +27,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 export class VersionManagerDialogAdapterComponent {
 
     public contentEntry: MinimalNodeEntryEntity;
+    public newFileVersion: File;
 
     showComments = true;
     allowDownload = true;
@@ -36,6 +37,7 @@ export class VersionManagerDialogAdapterComponent {
                 private snackBar: MatSnackBar,
                 private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
         this.contentEntry = data.contentEntry;
+        this.newFileVersion = data.hasOwnProperty('newFileVersion') ? data.newFileVersion : this.newFileVersion;
         this.showComments = data.hasOwnProperty('showComments') ? data.showComments : this.showComments;
         this.allowDownload = data.hasOwnProperty('allowDownload') ? data.allowDownload : this.allowDownload;
     }