breadcrumb enhancements (#2328)

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

@@ -1055,7 +1055,8 @@ Indicates the current position within a navigation hierarchy.
 | --- | --- | --- |
 | 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 root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example.  |
+| 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. You can use i18n resource key for the property value. |
+| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
 
 #### Events
 

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

@@ -2,17 +2,17 @@
     <li *ngFor="let item of route; let last = last"
         [class.active]="last"
         [ngSwitch]="last"
-        title="{{ item.name }}"
+        title="{{ item.name | translate }}"
         class="adf-breadcrumb-item">
 
         <a *ngSwitchDefault href="#" [attr.data-automation-id]="'breadcrumb_' + item.name"
            class="adf-breadcrumb-item-anchor"
            (click)="onRoutePathClick(item, $event)">
-            {{ item.name }}
+            {{ item.name | translate }}
         </a>
 
         <div *ngSwitchCase="true" class="adf-breadcrumb-item-current">
-            {{ item.name }}
+            {{ item.name | translate }}
         </div>
 
         <i class="material-icons adf-breadcrumb-item-chevron" *ngIf="!last">
@@ -23,7 +23,7 @@
 <div *ngIf="!folderNode && hasRoot">
     <li class="adf-breadcrumb-item">
         <div class="adf-breadcrumb-item-current">
-            {{ root }}
+            {{ root | translate }}
         </div>
     </li>
 </div>

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

@@ -61,7 +61,7 @@ describe('Breadcrumb', () => {
         element = fixture.nativeElement;
         component = fixture.componentInstance;
 
-        documentList = TestBed.createComponent(DocumentListComponent).componentInstance;
+        documentList = TestBed.createComponent<DocumentListComponent>(DocumentListComponent).componentInstance;
     });
 
     it('should prevent default click behavior', () => {
@@ -101,4 +101,115 @@ describe('Breadcrumb', () => {
             done();
         }, 0);
     });
+
+    it('should not parse the route when node not provided', () => {
+        expect(component.parseRoute(null)).toEqual([]);
+    });
+
+    it('should not parase the route when node has no path', () => {
+        const node: any = {};
+        expect(component.parseRoute(node)).toEqual([]);
+    });
+
+    it('should append the node to the route', () => {
+        const node: any = {
+            id: 'test-id',
+            name: 'test-name',
+            path: {
+                elements: [
+                    { id: 'element-id', name: 'element-name' }
+                ]
+            }
+        };
+        const route = component.parseRoute(node);
+
+        expect(route.length).toBe(2);
+        expect(route[1].id).toBe(node.id);
+        expect(route[1].name).toBe(node.name);
+    });
+
+    it('should trim the route if custom root id provided', () => {
+        const node: any = {
+            id: 'test-id',
+            name: 'test-name',
+            path: {
+                elements: [
+                    { id: 'element-1-id', name: 'element-1-name' },
+                    { id: 'element-2-id', name: 'element-2-name' },
+                    { id: 'element-3-id', name: 'element-3-name' }
+                ]
+            }
+        };
+        component.rootId = 'element-2-id';
+        const route = component.parseRoute(node);
+
+        expect(route.length).toBe(3);
+
+        expect(route[0].id).toBe('element-2-id');
+        expect(route[0].name).toBe('element-2-name');
+
+        expect(route[2].id).toBe(node.id);
+        expect(route[2].name).toBe(node.name);
+    });
+
+    it('should rename root node if custom name provided', () => {
+        const node: any = {
+            id: 'test-id',
+            name: 'test-name',
+            path: {
+                elements: [
+                    { id: 'element-1-id', name: 'element-1-name' },
+                    { id: 'element-2-id', name: 'element-2-name' },
+                    { id: 'element-3-id', name: 'element-3-name' }
+                ]
+            }
+        };
+        component.root = 'custom root';
+        const route = component.parseRoute(node);
+
+        expect(route.length).toBe(4);
+        expect(route[0].id).toBe('element-1-id');
+        expect(route[0].name).toBe('custom root');
+    });
+
+    it('should replace root id if nothing to trim in the path', () => {
+        const node: any = {
+            id: 'test-id',
+            name: 'test-name',
+            path: {
+                elements: [
+                    { id: 'element-1-id', name: 'element-1-name' },
+                    { id: 'element-2-id', name: 'element-2-name' },
+                    { id: 'element-3-id', name: 'element-3-name' }
+                ]
+            }
+        };
+        component.rootId = 'custom-id';
+        const route = component.parseRoute(node);
+
+        expect(route.length).toBe(4);
+        expect(route[0].id).toBe('custom-id');
+        expect(route[0].name).toBe('element-1-name');
+    });
+
+    it('should replace both id and name of the root element', () => {
+        const node: any = {
+            id: 'test-id',
+            name: 'test-name',
+            path: {
+                elements: [
+                    { id: 'element-1-id', name: 'element-1-name' },
+                    { id: 'element-2-id', name: 'element-2-name' },
+                    { id: 'element-3-id', name: 'element-3-name' }
+                ]
+            }
+        };
+        component.root = 'custom-name';
+        component.rootId = 'custom-id';
+        const route = component.parseRoute(node);
+
+        expect(route.length).toBe(4);
+        expect(route[0].id).toBe('custom-id');
+        expect(route[0].name).toBe('custom-name');
+    });
 });

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

@@ -31,10 +31,13 @@ import { DocumentListComponent } from '../document-list.component';
 export class BreadcrumbComponent implements OnChanges {
 
     @Input()
-    folderNode: MinimalNodeEntryEntity;
+    folderNode: MinimalNodeEntryEntity = null;
 
     @Input()
-    root: string;
+    root: string = null;
+
+    @Input()
+    rootId: string = null;
 
     @Input()
     target: DocumentListComponent;
@@ -50,26 +53,49 @@ export class BreadcrumbComponent implements OnChanges {
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.folderNode) {
-
             const node: MinimalNodeEntryEntity = changes.folderNode.currentValue;
-
+            this.route = this.parseRoute(node);
-            if (node && node.path) {
-                const route = <PathElementEntity[]> (node.path.elements || []).slice();
-
-                route.push(<PathElementEntity> {
-                    id: node.id,
-                    name: node.name
-                });
-
-                if (this.root && route.length > 0) {
-                    route[0].name = this.root;
-                }
-
-                this.route = route;
-            }
         }
     }
 
+    parseRoute(node: MinimalNodeEntryEntity): PathElementEntity[] {
+        if (node && node.path) {
+            const route = <PathElementEntity[]> (node.path.elements || []).slice();
+
+            route.push(<PathElementEntity> {
+                id: node.id,
+                name: node.name
+            });
+
+            const rootPos = this.getElementPosition(route, this.rootId);
+            if (rootPos > 0) {
+                route.splice(0, rootPos);
+            }
+
+            if (rootPos === -1 && this.rootId) {
+                route[0].id = this.rootId;
+            }
+
+            if (this.root) {
+                route[0].name = this.root;
+            }
+
+            return route;
+        }
+
+        return [];
+    }
+
+    private getElementPosition(route: PathElementEntity[], nodeId: string): number {
+        let result: number = -1;
+
+        if (route && route.length > 0 && nodeId) {
+            result = route.findIndex(el => el.id === nodeId);
+        }
+
+        return result;
+    }
+
     onRoutePathClick(route: PathElementEntity, event?: Event): void {
         if (event) {
             event.preventDefault();

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

@@ -75,7 +75,7 @@ describe('DropdownBreadcrumb', () => {
         element = fixture.nativeElement;
         component = fixture.componentInstance;
 
-        documentList = TestBed.createComponent(DocumentListComponent).componentInstance;
+        documentList = TestBed.createComponent<DocumentListComponent>(DocumentListComponent).componentInstance;
     });
 
     function openSelect() {