diff --git a/lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts b/lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts
index 920b488bab..f2c30b8685 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts
+++ b/lib/content-services/src/lib/content-node-selector/content-node-dialog.service.ts
@@ -136,10 +136,8 @@ export class ContentNodeDialogService {
complete: this.close.bind(this)
});
- const title = this.getTitleTranslation(action, contentEntry.name);
-
const data: ContentNodeSelectorComponentData = {
- title: title,
+ title: this.getTitleTranslation(action, contentEntry.name),
actionName: action,
currentFolderId: contentEntry.parentId,
imageResolver: this.imageResolver.bind(this),
@@ -181,7 +179,7 @@ export class ContentNodeDialogService {
});
const data: ContentNodeSelectorComponentData = {
- title: `${action} '${contentEntry.name}' to ...`,
+ title: this.getTitleTranslation(action, contentEntry.name),
actionName: action,
currentFolderId: contentEntry.id,
imageResolver: this.imageResolver.bind(this),
@@ -208,7 +206,7 @@ export class ContentNodeDialogService {
});
const data: ContentNodeSelectorComponentData = {
- title: `${action} '${contentEntry.name}' to ...`,
+ title: this.getTitleTranslation(action, contentEntry.name),
actionName: action,
currentFolderId: contentEntry.id,
imageResolver: this.imageResolver.bind(this),
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
index 4116ae40e4..8223627c71 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
@@ -1,7 +1,7 @@
- {{data?.title}}
+ {{title}}
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
index a5b17c8143..2ad6dfca51 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.spec.ts
@@ -33,8 +33,8 @@ describe('ContentNodeSelectorDialogComponent', () => {
let component: ContentNodeSelectorComponent;
let fixture: ComponentFixture;
const data: any = {
- title: 'Move along citizen...',
- actionName: 'move',
+ title: 'Choose along citizen...',
+ actionName: 'choose',
select: new EventEmitter(),
rowFilter: (shareDataRow: ShareDataRow) => shareDataRow.node.entry.name === 'impossible-name',
imageResolver: () => 'piccolo',
@@ -71,14 +71,14 @@ describe('ContentNodeSelectorDialogComponent', () => {
it('should show the INJECTED title', () => {
const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
expect(titleElement).not.toBeNull();
- expect(titleElement.nativeElement.innerText).toBe('Move along citizen...');
+ expect(titleElement.nativeElement.innerText).toBe('Choose along citizen...');
});
it('should have the INJECTED actionName on the name of the choose button', () => {
const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
- expect(component.buttonActionName).toBe('NODE_SELECTOR.MOVE');
+ expect(component.buttonActionName).toBe('NODE_SELECTOR.CHOOSE');
expect(actionButton).not.toBeNull();
- expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.MOVE');
+ expect(actionButton.nativeElement.innerText).toBe('NODE_SELECTOR.CHOOSE');
});
it('should pass through the injected currentFolderId to the documentList', () => {
@@ -155,5 +155,17 @@ describe('ContentNodeSelectorDialogComponent', () => {
const actionButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-actions-choose"]'));
expect(actionButton.nativeElement.disabled).toBeFalsy();
});
+ });
+
+ describe('Title', () => {
+
+ it('should be updated when a node is chosen', () => {
+ component.onSelect([new Node({ id: 'fake', name: 'fake-node' })]);
+ fixture.detectChanges();
+
+ const titleElement = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-title"]'));
+ expect(titleElement).not.toBeNull();
+ expect(titleElement.nativeElement.innerText).toBe('NODE_SELECTOR.CHOOSE_ITEM');
+ });
});
});
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts
index 79907d972a..7de8f4adfb 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts
@@ -17,6 +17,7 @@
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
+import { TranslationService } from '@alfresco/adf-core';
import { Node } from '@alfresco/js-api';
import { ContentNodeSelectorComponentData } from './content-node-selector.component-data.interface';
@@ -28,11 +29,16 @@ import { ContentNodeSelectorComponentData } from './content-node-selector.compon
})
export class ContentNodeSelectorComponent {
+ title: string;
+ action: string;
buttonActionName: string;
chosenNode: Node[];
- constructor(@Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
- this.buttonActionName = data.actionName ? `NODE_SELECTOR.${data.actionName.toUpperCase()}` : 'NODE_SELECTOR.CHOOSE';
+ constructor(public translation: TranslationService,
+ @Inject(MAT_DIALOG_DATA) public data: ContentNodeSelectorComponentData) {
+ this.action = data.actionName.toUpperCase();
+ this.buttonActionName = data.actionName ? `NODE_SELECTOR.${this.action}` : 'NODE_SELECTOR.CHOOSE';
+ this.title = data.title;
}
close() {
@@ -41,10 +47,21 @@ export class ContentNodeSelectorComponent {
onSelect(nodeList: Node[]) {
this.chosenNode = nodeList;
+ this.updateTitle(nodeList);
}
onClick(): void {
this.data.select.next(this.chosenNode);
this.data.select.complete();
}
+
+ updateTitle(nodeList: Node[]): void {
+ if (this.action === 'CHOOSE' && nodeList) {
+ this.title = this.getTitleTranslation(this.action, nodeList[0].name);
+ }
+ }
+
+ getTitleTranslation(action: string, name: string): string {
+ return this.translation.instant(`NODE_SELECTOR.${action}_ITEM`, { name });
+ }
}
diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index 1d87351151..49d07dd133 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -71,6 +71,7 @@
"NODE_SELECTOR": {
"CANCEL": "Cancel",
"CHOOSE": "Choose",
+ "CHOOSE_ITEM": "Choose '{{ name }}' to...",
"COPY": "Copy",
"COPY_ITEM": "Copy '{{ name }}' to...",
"MOVE": "Move",