From d26c755d0de6292de0b8e4ed5b495f1f5fe12f2f Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 12 Sep 2017 17:08:34 +0100 Subject: [PATCH] breadcrumb enhancements (#2328) --- .../ng2-alfresco-documentlist/README.md | 3 +- .../breadcrumb/breadcrumb.component.html | 8 +- .../breadcrumb/breadcrumb.component.spec.ts | 113 +++++++++++++++++- .../breadcrumb/breadcrumb.component.ts | 62 +++++++--- .../dropdown-breadcrumb.component.spec.ts | 2 +- 5 files changed, 163 insertions(+), 25 deletions(-) diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index cc3160f01e..6ea5c8cee5 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/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 diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html index 2e83981bc0..5f3186f70b 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.html @@ -2,17 +2,17 @@
  • - {{ item.name }} + {{ item.name | translate }}
    - {{ item.name }} + {{ item.name | translate }}
    @@ -23,7 +23,7 @@
  • - {{ root }} + {{ root | translate }}
    • diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts index 5c62bad1a4..5fc4006eab 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts +++ b/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).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'); + }); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts index 76cfee41af..685f6314d8 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.ts +++ b/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; - - if (node && node.path) { - const route = (node.path.elements || []).slice(); - - route.push( { - id: node.id, - name: node.name - }); - - if (this.root && route.length > 0) { - route[0].name = this.root; - } - - this.route = route; - } + this.route = this.parseRoute(node); } } + parseRoute(node: MinimalNodeEntryEntity): PathElementEntity[] { + if (node && node.path) { + const route = (node.path.elements || []).slice(); + + route.push( { + 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(); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.spec.ts index c713899be3..2354bcf0a7 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.spec.ts +++ b/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).componentInstance; }); function openSelect() {