From f0dcaa02fbf8ffda9001eff42836790f3c783131 Mon Sep 17 00:00:00 2001 From: Vito Date: Thu, 8 Mar 2018 18:05:00 +0000 Subject: [PATCH] =?UTF-8?q?[ADF-2361]=20added=20breadcrumb=20transform=20f?= =?UTF-8?q?unction=20to=20the=20breadcrumb=20comp=E2=80=A6=20(#3050)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ADF-2361] added breadcrumb transform function to the breadcrumb component * [ADF-2361] added PR review changes --- docs/breadcrumb.component.md | 1 + .../breadcrumb/breadcrumb.component.spec.ts | 24 +++++++++++++++++++ .../breadcrumb/breadcrumb.component.ts | 21 +++++++++++++--- ...content-node-selector-panel.component.html | 1 + ...tent-node-selector-panel.component.spec.ts | 5 ++-- .../content-node-selector-panel.component.ts | 2 +- 6 files changed, 48 insertions(+), 6 deletions(-) diff --git a/docs/breadcrumb.component.md b/docs/breadcrumb.component.md index 3097013461..1acfaed233 100644 --- a/docs/breadcrumb.component.md +++ b/docs/breadcrumb.component.md @@ -25,6 +25,7 @@ Indicates the current position within a navigation hierarchy. | root | `string` | `null` | (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 an i18n resource key for the property value. | | rootId | `string` | `null` | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. | | target | `DocumentListComponent` | | (optional) Document List component to operate with. The list will update when the breadcrumb is clicked. | +| transform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. | ### Events diff --git a/lib/content-services/breadcrumb/breadcrumb.component.spec.ts b/lib/content-services/breadcrumb/breadcrumb.component.spec.ts index ad240556f8..0bb40a4bc4 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.spec.ts +++ b/lib/content-services/breadcrumb/breadcrumb.component.spec.ts @@ -205,4 +205,28 @@ describe('Breadcrumb', () => { expect(route[0].id).toBe('custom-id'); expect(route[0].name).toBe('custom-name'); }); + + it('should apply the transformation function when there is one', () => { + const node: any = { + id: null, + name: null, + 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.transform = ((transformNode) => { + transformNode.id = 'test-id'; + transformNode.name = 'test-name'; + return transformNode; + }); + let change = new SimpleChange(null, node, true); + component.ngOnChanges({'folderNode': change}); + expect(component.route.length).toBe(4); + expect(component.route[3].id).toBe('test-id'); + expect(component.route[3].name).toBe('test-name'); + }); }); diff --git a/lib/content-services/breadcrumb/breadcrumb.component.ts b/lib/content-services/breadcrumb/breadcrumb.component.ts index 9679c7690e..c6301bb2c1 100644 --- a/lib/content-services/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/breadcrumb/breadcrumb.component.ts @@ -15,7 +15,14 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + ViewEncapsulation, + OnInit } from '@angular/core'; import { MinimalNodeEntryEntity, PathElementEntity } from 'alfresco-js-api'; import { DocumentListComponent } from '../document-list'; @@ -28,7 +35,7 @@ import { DocumentListComponent } from '../document-list'; 'class': 'adf-breadcrumb' } }) -export class BreadcrumbComponent implements OnChanges { +export class BreadcrumbComponent implements OnInit, OnChanges { /** Active node, builds UI based on folderNode.path.elements collection. */ @Input() @@ -53,6 +60,9 @@ export class BreadcrumbComponent implements OnChanges { @Input() target: DocumentListComponent; + @Input() + transform: (node) => any; + route: PathElementEntity[] = []; get hasRoot(): boolean { @@ -63,9 +73,14 @@ export class BreadcrumbComponent implements OnChanges { @Output() navigate: EventEmitter = new EventEmitter(); + ngOnInit() { + this.transform = this.transform ? this.transform : null ; + } + ngOnChanges(changes: SimpleChanges): void { if (changes.folderNode) { - const node: MinimalNodeEntryEntity = changes.folderNode.currentValue; + let node: MinimalNodeEntryEntity = null; + node = this.transform ? this.transform(changes.folderNode.currentValue) : changes.folderNode.currentValue; this.route = this.parseRoute(node); } } diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/content-node-selector/content-node-selector-panel.component.html index e3a3233421..a632e7dd46 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.html +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.html @@ -40,6 +40,7 @@ class="adf-content-node-selector-content-breadcrumb" (navigate)="clear()" [target]="documentList" + [transform]="breadcrumbTransform" [folderNode]="breadcrumbFolderNode" data-automation-id="content-node-selector-content-breadcrumb"> diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts index a7ea7a4385..8763dc671b 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.spec.ts @@ -261,7 +261,7 @@ describe('ContentNodeSelectorComponent', () => { }); it('should make changes to breadcrumb\'s folderNode if breadcrumbTransform is defined', (done) => { - const transformedFolderNode = { path: { elements: [{id: 'testId', name: 'testName'}] } }; + const transformedFolderNode = { id: 'trans-node', name: 'trans-node-name', path: { elements: [{id: 'testId', name: 'testName'}] } }; component.breadcrumbTransform = (() => { return transformedFolderNode; }); @@ -272,7 +272,8 @@ describe('ContentNodeSelectorComponent', () => { expect(component.breadcrumbTransform).not.toBeNull(); const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent)); - expect(breadcrumb.componentInstance.folderNode).toBe(transformedFolderNode); + expect(breadcrumb.componentInstance.route[0].name).toBe('testName'); + expect(breadcrumb.componentInstance.route[0].id).toBe('testId'); done(); }); }); diff --git a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts index 3cbdfc4f7c..3f8f9de4fd 100644 --- a/lib/content-services/content-node-selector/content-node-selector-panel.component.ts +++ b/lib/content-services/content-node-selector/content-node-selector-panel.component.ts @@ -174,7 +174,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit { folderNode = this.documentList.folderNode; } - return this.breadcrumbTransform ? this.breadcrumbTransform(folderNode) : folderNode; + return folderNode; } /**