[ADF-1300] Download as Zip feature and dialog (#2174)

* Download API demo

- download single selected file
- download multiple selected files as ZIP
- download one or multiple selected folders as ZIP
- download all mixed content as ZIP (file + folder)

* download dialog (first cut)

* code cleanup

demo-shell-ng2/app/app.module.ts

@@ -40,10 +40,12 @@ import { ChartsModule } from 'ng2-charts';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
-import { CreateFolderDialogComponent } from './dialogs/create-folder.dialog';
 import { MaterialModule } from './material.module';
 import { DebugAppConfigService } from './services/debug-app-config.service';
 
+import { CreateFolderDialogComponent } from './dialogs/create-folder.dialog';
+import { DownloadZipDialogComponent } from './dialogs/download-zip.dialog';
+
 import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 import {
@@ -120,6 +122,7 @@ if (process.env.ENV === 'production') {
         FilesComponent,
         FormNodeViewerComponent,
         CreateFolderDialogComponent,
+        DownloadZipDialogComponent,
         SettingsComponent,
         FormDemoComponent,
         FormListDemoComponent
@@ -129,7 +132,8 @@ if (process.env.ENV === 'production') {
     ],
     bootstrap: [ AppComponent ],
     entryComponents: [
-        CreateFolderDialogComponent
+        CreateFolderDialogComponent,
+        DownloadZipDialogComponent
     ]
 })
 export class AppModule { }

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

@@ -27,9 +27,17 @@
                         [folderNode]="documentList.folderNode">
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
-                <button md-icon-button (click)="onCreateFolderClicked($event)">
+
+                <button md-icon-button
+                    (click)="onCreateFolderClicked($event)">
                     <md-icon>create_new_folder</md-icon>
                 </button>
+                <button md-icon-button
+                    [disabled]="!hasSelection(documentList.selection)"
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                </button>
                 <button md-icon-button
                         adf-node-permission="delete"
                         [adf-nodes]="documentList.selection">
@@ -145,12 +153,6 @@
                     handler="delete">
                 </content-action>
                 <!-- document actions -->
-                <content-action
-                    icon="file_download"
-                    target="document"
-                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
-                    handler="download">
-                </content-action>
                 <content-action
                     icon="content_copy"
                     target="document"

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

@@ -18,13 +18,18 @@
 import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
 import { MdDialog } from '@angular/material';
 import { ActivatedRoute, Params } from '@angular/router';
-import { AlfrescoContentService, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService, PermissionsEnum, SiteModel, UploadService } from 'ng2-alfresco-core';
+import { DownloadEntry, MinimalNodeEntity } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, AlfrescoContentService, FileUploadCompleteEvent,
+    FolderCreatedEvent, NotificationService, PermissionsEnum, SiteModel, UploadService
+} from 'ng2-alfresco-core';
 import { DocumentListComponent, DropdownSitesComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
 
 import { CreateFolderDialogComponent } from '../../dialogs/create-folder.dialog';
+import { DownloadZipDialogComponent } from './../../dialogs/download-zip.dialog';
 
 @Component({
-    selector: 'files-component',
+    selector: 'adf-files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']
 })
@@ -79,6 +84,7 @@ export class FilesComponent implements OnInit {
     permissionsStyle: PermissionStyleModel[] = [];
 
     constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
                 private notificationService: NotificationService,
                 private uploadService: UploadService,
                 private contentService: AlfrescoContentService,
@@ -164,4 +170,76 @@ export class FilesComponent implements OnInit {
     getSiteContent(site: SiteModel) {
         this.currentFolderId = site && site.guid ? site.guid : '-my-';
     }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const nodesApi = this.apiService.getInstance().core.nodesApi;
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
 }

demo-shell-ng2/app/dialogs/download-zip.dialog.ts

@@ -0,0 +1,145 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+
+import { DownloadEntry, MinimalNodeEntity } from 'alfresco-js-api';
+import { AlfrescoApiService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'adf-download-zip-dialog',
+    template: `
+        <h1 md-dialog-title>Download as ZIP</h1>
+        <div md-dialog-content>
+            <md-progress-bar color="primary" mode="indeterminate"></md-progress-bar>
+        </div>
+        <div md-dialog-actions>
+            <span class="spacer"></span>
+            <button md-button color="primary" (click)="cancelDownload()">Cancel</button>
+        </div>
+    `,
+    styles: [`
+        .spacer { flex: 1 1 auto; }
+
+        .adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
+            text-transform: uppercase;
+        }
+    `],
+    host: { 'class': 'adf-download-zip-dialog' },
+    encapsulation: ViewEncapsulation.None
+})
+export class DownloadZipDialogComponent implements OnInit {
+
+    // flag for async threads
+    private cancelled = false;
+
+    constructor(private apiService: AlfrescoApiService,
+                private dialogRef: MdDialogRef<DownloadZipDialogComponent>,
+                @Inject(MD_DIALOG_DATA) private data: { nodeIds?: string[] }) {
+    }
+
+    private get downloadsApi() {
+        return this.apiService.getInstance().core.downloadsApi;
+    }
+
+    private get nodesApi() {
+        return this.apiService.getInstance().core.nodesApi;
+    }
+
+    private get contentApi() {
+        return this.apiService.getInstance().content;
+    }
+
+    ngOnInit() {
+        if (this.data && this.data.nodeIds && this.data.nodeIds.length > 0) {
+            // change timeout to have a delay for demo purposes
+            setTimeout(() => {
+                if (!this.cancelled) {
+                    this.downloadZip(this.data.nodeIds);
+                } else {
+                    console.log('Cancelled');
+                }
+            }, 0);
+        }
+    }
+
+    cancelDownload() {
+        this.cancelled = true;
+        this.dialogRef.close(false);
+    }
+
+    // Download as ZIP prototype
+    // js-api@alpha 1.8.0-c422a3b69b1b96f72abc61ab370eff53590f8ee4
+    downloadZip(nodeIds: string[]) {
+        if (nodeIds && nodeIds.length > 0) {
+
+            const promise: any = this.downloadsApi.createDownload({ nodeIds });
+
+            promise.on('progress', progress => console.log('Progress', progress));
+            promise.on('error', error => console.log('Error', error));
+            promise.on('abort', data => console.log('Abort', data));
+
+            promise.on('success', (data: DownloadEntry) => {
+                console.log('Success', data);
+                if (data && data.entry && data.entry.id) {
+                    const url = this.contentApi.getContentUrl(data.entry.id, true);
+                    // the call is needed only to get the name of the package
+                    this.nodesApi.getNode(data.entry.id).then((downloadNode: MinimalNodeEntity) => {
+                        console.log(downloadNode);
+                        const fileName = downloadNode.entry.name;
+                        // this.download(url, fileName);
+                        this.waitAndDownload(data.entry.id, url, fileName);
+                    });
+                }
+            });
+        }
+    }
+
+    waitAndDownload(downloadId: string, url: string, fileName: string) {
+        if (this.cancelled) {
+            return;
+        }
+
+        this.downloadsApi.getDownload(downloadId).then((d: DownloadEntry) => {
+            if (d.entry) {
+                if (d.entry.status === 'DONE') {
+                    this.download(url, fileName);
+                } else {
+                    setTimeout(() => {
+                        this.waitAndDownload(downloadId, url, fileName);
+                    }, 1000);
+                }
+            }
+        });
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        this.dialogRef.close(true);
+    }
+}

demo-shell-ng2/app/material.module.ts

@@ -16,13 +16,20 @@
  */
 
 import { NgModule } from '@angular/core';
-import { MdDialogModule, MdInputModule, MdSelectModule, MdSlideToggleModule } from '@angular/material';
+import {
+    MdDialogModule,
+    MdInputModule,
+    MdProgressBarModule,
+    MdSelectModule,
+    MdSlideToggleModule
+} from '@angular/material';
 
 const MATERIAL_MODULES = [
     MdSlideToggleModule,
     MdInputModule,
     MdSelectModule,
-    MdDialogModule
+    MdDialogModule,
+    MdProgressBarModule
 ];
 
 @NgModule({