File download button for ng2 document list

- ability to download the file from the list
- ability to toggle download button via attributes

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&ph=true&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

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,12 +154,14 @@ export class DocumentList implements OnInit {
             $event.preventDefault();
         }
 
+        if (this.navigate) {
             var idx = this.route.indexOf(r);
             if (idx > -1) {
                 this.route.splice(idx + 1);
                 this.displayFolderContent(r.path);
             }
         }
+    }
 
     private getItemPath(item: DocumentEntity):string {
         var container = item.location.container;
@@ -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);
     }

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)]="thumbnails"> Thumbnails</label></div>
-                <div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Toggle Breadcrumb</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;
 }