diff --git a/docs/content-node-selector-panel.component.md b/docs/content-node-selector-panel.component.md index afea02f65e..c1ce4f389d 100644 --- a/docs/content-node-selector-panel.component.md +++ b/docs/content-node-selector-panel.component.md @@ -25,12 +25,52 @@ Opens a [Content Node Selector](content-node-selector.component.md) in its own d | rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) | | imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) | | pageSize | number | 10 | Number of items shown per page in the list | +| isSelectionValid | ValidationFunction | defaultValidation | Function used to decide if the selected node has permission to be the chosen. The defaultValidation always returns true. | +| breadcrumbTransform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful in case a 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. | + +#### Using breadcrumbTransform example + +Before opening the Content Node Selector, you can add a breadcrumbTransform function to the ContentNodeSelectorComponentData to make changes to what is displayed on the breadcrumb. For example, something like this: +``` + const data: ContentNodeSelectorComponentData = { + title: title, + actionName: action, + currentFolderId: contentEntry.parentId, + imageResolver: this.imageResolver.bind(this), + rowFilter : this.rowFilter.bind(this, contentEntry.id), + isSelectionValid: this.hasEntityCreatePermission.bind(this), + breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function + select: select + }; + + this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px'); +``` +where the transform function could be something like this: +``` + private changeBreadcrumbPath(node: MinimalNodeEntryEntity) { + + if (node && node.path && node.path.elements) { + const elements = node.path.elements; + + if (elements.length > 1) { + if (elements[1].name === 'Sites') { + elements.splice(1, 1); + } + } + } + + return node; + } +``` +and here is the display of the breadcrumb before and after transform: +![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png) + ### Events | Name | Description | | ---- | ----------- | -| select | Emitted when the user has selected an item | +| select | Emitted when the user has chosen an item | ## Details diff --git a/docs/content-node-selector.component.md b/docs/content-node-selector.component.md index db45add79b..2fde6e04f7 100644 --- a/docs/content-node-selector.component.md +++ b/docs/content-node-selector.component.md @@ -43,9 +43,14 @@ to work with the Dialog's ```ts interface ContentNodeSelectorComponentData { title: string; - currentFolderId?: string; + actionName?: string; + currentFolderId: string; + dropdownHideMyFiles?: boolean; + dropdownSiteList?: SitePaging; rowFilter?: RowFilter; imageResolver?: ImageResolver; + isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean; + breadcrumbTransform?: (node) => any; select: EventEmitter; } ``` diff --git a/docs/docassets/images/breadcrumbTransform.png b/docs/docassets/images/breadcrumbTransform.png new file mode 100644 index 0000000000..2b7f855ea7 Binary files /dev/null and b/docs/docassets/images/breadcrumbTransform.png differ 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 b4c8b1302f..2e80953f04 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 @@ -260,6 +260,36 @@ describe('ContentNodeSelectorComponent', () => { done(); }, 300); }); + + it('should keep breadcrumb\'s folderNode unchanged if breadcrumbTransform is NOT defined', (done) => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(component.breadcrumbTransform).toBeNull(); + + const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent)); + expect(breadcrumb.componentInstance.folderNode).toBe(expectedDefaultFolderNode); + done(); + }); + }); + + it('should make changes to breadcrumb\'s folderNode if breadcrumbTransform is defined', (done) => { + const transformedFolderNode = { path: { elements: [{id: 'testId', name: 'testName'}] } }; + component.breadcrumbTransform = (() => { + return transformedFolderNode; + }); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(component.breadcrumbTransform).not.toBeNull(); + + const breadcrumb = fixture.debugElement.query(By.directive(DropdownBreadcrumbComponent)); + expect(breadcrumb.componentInstance.folderNode).toBe(transformedFolderNode); + done(); + }); + }); }); describe('Search functionality', () => { 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 b5d2cd061c..2a3ca3bd65 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 @@ -70,6 +70,9 @@ export class ContentNodeSelectorPanelComponent implements OnInit { @Input() isSelectionValid: ValidationFunction = defaultValidation; + @Input() + breadcrumbTransform: (node) => any; + @Output() select: EventEmitter = new EventEmitter(); @@ -123,6 +126,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit { ngOnInit() { this.folderIdToShow = this.currentFolderId; this.paginationStrategy = PaginationStrategy.Infinite; + + this.breadcrumbTransform = this.breadcrumbTransform ? this.breadcrumbTransform : null ; } /** @@ -159,11 +164,15 @@ export class ContentNodeSelectorPanelComponent implements OnInit { * Returns the actually selected|entered folder node or null in case of searching for the breadcrumb */ get breadcrumbFolderNode(): MinimalNodeEntryEntity | null { + let folderNode: MinimalNodeEntryEntity; + if (this.showingSearchResults && this.chosenNode) { - return this.chosenNode; + folderNode = this.chosenNode; } else { - return this.documentList.folderNode; + folderNode = this.documentList.folderNode; } + + return this.breadcrumbTransform ? this.breadcrumbTransform(folderNode) : folderNode; } /** diff --git a/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts b/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts index e97dccf832..58e71fd70d 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts +++ b/lib/content-services/content-node-selector/content-node-selector.component-data.interface.ts @@ -27,5 +27,6 @@ export interface ContentNodeSelectorComponentData { rowFilter?: any; imageResolver?: any; isSelectionValid?: (entry: MinimalNodeEntryEntity) => boolean; + breadcrumbTransform?: (node) => any; select: Subject; } diff --git a/lib/content-services/content-node-selector/content-node-selector.component.html b/lib/content-services/content-node-selector/content-node-selector.component.html index 5473e7eb2f..26d6f8015a 100644 --- a/lib/content-services/content-node-selector/content-node-selector.component.html +++ b/lib/content-services/content-node-selector/content-node-selector.component.html @@ -12,6 +12,7 @@ [rowFilter]="rowFilter || data?.rowFilter" [imageResolver]="imageResolver || data?.imageResolver" [isSelectionValid]="data?.isSelectionValid" + [breadcrumbTransform]="data?.breadcrumbTransform" (select)="onSelect($event)">