From 1e018b9476d67581bfbb1fff50dc3aadb6cc8f3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Baptiste=20Mah=C3=A9?= Date: Wed, 1 Apr 2020 15:56:21 +0200 Subject: [PATCH] [AAE-2200] Fix upload dialog title (#5583) * [AAE-2200] Fix dialog title * [AAE-2200] Title from translation ressources and refactor * [AAE-2200] Add unit test for title * [AAE-2200] Fix lint in test --- .../content-node-dialog.service.ts | 8 +++---- .../content-node-selector.component.html | 2 +- .../content-node-selector.component.spec.ts | 22 ++++++++++++++----- .../content-node-selector.component.ts | 21 ++++++++++++++++-- lib/content-services/src/lib/i18n/en.json | 1 + 5 files changed, 41 insertions(+), 13 deletions(-) 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",