breadcrumb fixes (#2181)

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

@@ -18,6 +18,7 @@
                 <adf-toolbar-title>
                     <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
                         class="files-breadcrumb"
+                        root="Personal Files"
                         [target]="documentList"
                         [folderNode]="documentList.folderNode">
                     </adf-breadcrumb>

demo-shell-ng2/app/vendor.ts

@@ -33,6 +33,9 @@ import 'ng2-alfresco-userinfo';
 import 'ng2-alfresco-viewer';
 import 'ng2-alfresco-webscript';
 
+// Load the Angular Material 2 stylesheet
+import '@angular/material/prebuilt-themes/indigo-pink.css';
+
 // Polyfill(s) for dialogs
 require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';

ng2-components/ng2-alfresco-documentlist/README.md

@@ -359,7 +359,7 @@ DocumentList provides simple breadcrumb element to indicate the current position
 | --- | --- | --- |
 | target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
 | folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
-| root | String |  (optional) Name of the folder where you want start the breadcrumb. Note the root will always be shown as first element and it will continue to be displayed until you are not in a subfolder of it. |
+| root | String |  (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example.  |
 
 ### Events
 

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts

@@ -44,7 +44,7 @@ export class BreadcrumbComponent implements OnChanges {
     @Output()
     navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 
-    public ngOnChanges(changes: SimpleChanges): void {
+    ngOnChanges(changes: SimpleChanges): void {
         if (changes.folderNode) {
 
             let node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
@@ -57,8 +57,8 @@ export class BreadcrumbComponent implements OnChanges {
                     name: node.name
                 });
 
-                if (this.root) {
+                if (this.root && route.length > 0) {
-                    route = this.checkRoot(route);
+                    route[0].name = this.root;
                 }
 
                 this.route = route;
@@ -66,25 +66,7 @@ export class BreadcrumbComponent implements OnChanges {
         }
     }
 
-    private checkRoot(route: PathElementEntity[]): PathElementEntity[] {
+    onRoutePathClick(route: PathElementEntity, event?: Event): void {
-        let isRoot = false;
-        route = route.filter((currentElement) => {
-            if (currentElement.name === this.root) {
-                isRoot = true;
-            }
-            return isRoot;
-        });
-
-        if (route.length === 0) {
-            route.push(<PathElementEntity> {
-                id: undefined,
-                name: this.root
-            });
-        }
-        return route;
-    }
-
-    public onRoutePathClick(route: PathElementEntity, event?: Event): void {
         if (event) {
             event.preventDefault();
         }