Simple breadcrumb for ng2 document list

demo-shell-ng2/app/components/document-list.component.ts

@@ -7,30 +7,48 @@ import {DocumentEntity} from "./core/entities/document.entity";
     selector: 'alfresco-document-list',
     styles: [
         `
+            :host .breadcrumb {
+                margin-bottom: 4px;
+            }
+            
             :host .folder-icon {
                 float: left;
                 margin-right: 10px;
             }
+            
             :host .file-icon {
                 width: 52px;
                 height: 52px;
                 float: left;
                 margin-right: 10px;
             }
+            
+            :host .document-header:hover {
+                text-decoration: underline;
+            }
         `
     ],
     template: `
+        <ol *ngIf="breadcrumb" class="breadcrumb">
+            <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
+                <span *ngSwitchWhen="true">{{r.name}}</span>
+                <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
+            </li>
+        </ol>
         <div *ngIf="folder" class="list-group">
-            <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
+            <a href="#" *ngIf="!breadcrumb && 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">
                 <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">
+                <h4 class="list-group-item-heading document-header">
                     {{document.displayName}}
                 </h4>
                 <p class="list-group-item-text">{{document.description}}</p>
+                <small>
+                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}
+                </small>
             </a>
         </div>
     `,
@@ -40,20 +58,25 @@ export class DocumentList implements OnInit {
 
     // example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
     @Input() navigate: boolean = true;
+    // example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
+    @Input() breadcrumb: boolean = false;
     // example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
     @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;
 
-    rootFolderPath: string = 'swsdp/documentLibrary';
+    rootFolder = {
+        name: 'Document Library',
+        path: 'swsdp/documentLibrary'
+    };
     currentFolderPath: string = 'swsdp/documentLibrary';
     folder: FolderEntity;
     errorMessage;
 
-    private route: string[] = [];
+    route: any[] = [];
 
     canNavigateParent(): boolean {
-        return this.currentFolderPath !== this.rootFolderPath;
+        return this.currentFolderPath !== this.rootFolder.path;
     }
 
     constructor (
@@ -61,8 +84,8 @@ export class DocumentList implements OnInit {
     ) {}
 
     ngOnInit() {
-        this.route.push(this.rootFolderPath);
+        this.route.push(this.rootFolder);
-        this.displayFolderContent(this.rootFolderPath);
+        this.displayFolderContent(this.rootFolder.path);
     }
 
     private displayFolderContent(path) {
@@ -82,9 +105,9 @@ export class DocumentList implements OnInit {
 
         if (this.navigate) {
             this.route.pop();
-            var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolderPath;
+            var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
             if (parent) {
-                this.displayFolderContent(parent);
+                this.displayFolderContent(parent.path);
             }
         }
     }
@@ -97,12 +120,27 @@ export class DocumentList implements OnInit {
         if (this.navigate && item) {
             if (item.isFolder) {
                 var path = this.getItemPath(item);
-                this.route.push(path);
+                this.route.push({
+                    name: item.displayName,
+                    path: path
+                });
                 this.displayFolderContent(path);
             }
         }
     }
 
+    goToRoute(r, $event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        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;
         var path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';

demo-shell-ng2/app/components/page1.view.ts

@@ -5,12 +5,14 @@ import {DocumentList} from "./document-list.component";
     template: `
         <div class="container">
             <div class="row">
-                <label>
+                <div><label><input type="checkbox" [(ngModel)]="thumbnails"> Toggle Thumbnails</label></div>
-                    <input type="checkbox" [(ngModel)]="thumbnails"> Toggle Thumbnails
+                <div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Toggle Breadcrumb</label></div>
-                </label>
             </div>
             <div class="row">
-                <alfresco-document-list #list [thumbnails]="thumbnails"></alfresco-document-list>
+                <alfresco-document-list #list 
+                    [thumbnails]="thumbnails"
+                    [breadcrumb]="breadcrumb">
+                </alfresco-document-list>
             </div>
         </div>
     `,
@@ -18,4 +20,5 @@ import {DocumentList} from "./document-list.component";
 })
 export class Page1View {
     thumbnails: boolean = true;
+    breadcrumb: boolean = false;
 }