From 549755ecf45decbc85849850d3811282220b8bda Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Sat, 16 Apr 2016 08:55:07 +0100
Subject: [PATCH] File download button for ng2 document list

- ability to download the file from the list
- ability to toggle download button via attributes
---
 .../app/components/alfresco.service.ts        |  4 ++
 .../app/components/document-list.component.ts | 38 ++++++++++++++++---
 demo-shell-ng2/app/components/page1.view.ts   | 12 ++++--
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/demo-shell-ng2/app/components/alfresco.service.ts b/demo-shell-ng2/app/components/alfresco.service.ts
index cb58c6e2e0..854ed14a45 100644
--- a/demo-shell-ng2/app/components/alfresco.service.ts
+++ b/demo-shell-ng2/app/components/alfresco.service.ts
@@ -28,6 +28,10 @@ export class AlfrescoService {
         return this._host + '/alfresco/service/api/node/' + document.nodeRef.replace('://', '/') + '/content/thumbnails/doclib?c=queue&amp;ph=true&amp;lastModified=1';
     }
 
+    getContentUrl(document: DocumentEntity) {
+        return this._host + '/alfresco/service/' + document.contentUrl;
+    }
+
     private handleError (error: Response) {
         // in a real world app, we may send the error to some remote logging infrastructure
         // instead of just logging it to the console
diff --git a/demo-shell-ng2/app/components/document-list.component.ts b/demo-shell-ng2/app/components/document-list.component.ts
index 441ffd0684..b36cd3a7a9 100644
--- a/demo-shell-ng2/app/components/document-list.component.ts
+++ b/demo-shell-ng2/app/components/document-list.component.ts
@@ -26,6 +26,15 @@ import {DocumentEntity} from "./core/entities/document.entity";
             :host .document-header:hover {
                 text-decoration: underline;
             }
+            
+            :host .download-button {
+                color: #777;
+                text-decoration: none;
+            }
+            
+            :host .download-button:hover {
+                color: #555;
+            }
         `
     ],
     template: `
@@ -36,10 +45,13 @@ import {DocumentEntity} from "./core/entities/document.entity";
             </li>
         </ol>
         <div *ngIf="folder" class="list-group">
-            <a href="#" *ngIf="!breadcrumb && canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
+            <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
                 <i class="fa fa-level-up"></i> ...
             </a>
             <a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item clearfix">
+                <a *ngIf="downloads && !document.isFolder" href="{{getContentUrl(document)}}" (click)="onDownloadClick($event)" class="download-button pull-right" download target="_blank">
+                    <i class="fa fa-download fa-2x"></i>
+                </a>
                 <i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"></i>
                 <img *ngIf="thumbnails && !document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
                 <h4 class="list-group-item-heading document-header">
@@ -64,6 +76,8 @@ export class DocumentList implements OnInit {
     @Input('folder-icon-class') folderIconClass: string = 'fa fa-folder-o fa-4x';
     // example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
     @Input() thumbnails: boolean = true;
+    // example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
+    @Input() downloads: boolean = true;
 
     rootFolder = {
         name: 'Document Library',
@@ -76,7 +90,9 @@ export class DocumentList implements OnInit {
     route: any[] = [];
 
     canNavigateParent(): boolean {
-        return this.currentFolderPath !== this.rootFolder.path;
+        return this.navigate &&
+            !this.breadcrumb &&
+            this.currentFolderPath !== this.rootFolder.path;
     }
 
     constructor (
@@ -112,6 +128,10 @@ export class DocumentList implements OnInit {
         }
     }
 
+    onDownloadClick(event) {
+        event.stopPropagation();
+    }
+
     onItemClick(item: DocumentEntity, $event) {
         if ($event) {
             $event.preventDefault();
@@ -134,10 +154,12 @@ export class DocumentList implements OnInit {
             $event.preventDefault();
         }
 
-        var idx = this.route.indexOf(r);
-        if (idx > -1) {
-            this.route.splice(idx + 1);
-            this.displayFolderContent(r.path);
+        if (this.navigate) {
+            var idx = this.route.indexOf(r);
+            if (idx > -1) {
+                this.route.splice(idx + 1);
+                this.displayFolderContent(r.path);
+            }
         }
     }
 
@@ -148,6 +170,10 @@ export class DocumentList implements OnInit {
         return item.location.site + '/' + relativePath;
     }
     
+    getContentUrl(document: DocumentEntity) {
+        return this._alfrescoService.getContentUrl(document);
+    }
+    
     getDocumentThumbnailUrl(document:  DocumentEntity) {
         return this._alfrescoService.getDocumentThumbnailUrl(document);
     }
diff --git a/demo-shell-ng2/app/components/page1.view.ts b/demo-shell-ng2/app/components/page1.view.ts
index 8843b96e53..b6fb3bd78a 100644
--- a/demo-shell-ng2/app/components/page1.view.ts
+++ b/demo-shell-ng2/app/components/page1.view.ts
@@ -5,13 +5,17 @@ import {DocumentList} from "./document-list.component";
     template: `
         <div class="container">
             <div class="row">
-                <div><label><input type="checkbox" [(ngModel)]="thumbnails"> Toggle Thumbnails</label></div>
-                <div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Toggle Breadcrumb</label></div>
+                <div><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></div>
+                <div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></div>
+                <div><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></div>
+                <div><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></div>
             </div>
             <div class="row">
                 <alfresco-document-list #list 
                     [thumbnails]="thumbnails"
-                    [breadcrumb]="breadcrumb">
+                    [breadcrumb]="breadcrumb"
+                    [navigate]="navigation"
+                    [downloads]="downloads">
                 </alfresco-document-list>
             </div>
         </div>
@@ -21,4 +25,6 @@ import {DocumentList} from "./document-list.component";
 export class Page1View {
     thumbnails: boolean = true;
     breadcrumb: boolean = false;
+    navigation: boolean = true;
+    downloads: boolean = true;
 }