From 76cf4f178e6003e61db1520bf1fe2978bd1c37e6 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Sat, 24 Feb 2018 18:00:41 +0000 Subject: [PATCH] [ADF-2312] Sites Dropdown component - default select option (#2994) * fix gallery view sort drop down empty values restore recent in main pace trashcan example demo shell add multi select * add selectable default value * remove change delete directive * remove fdescribe * missing return type --- .../app/components/files/files.component.html | 4 +- docs/sites-dropdown.component.md | 3 +- .../sites-dropdown.component.html | 6 +-- .../sites-dropdown.component.spec.ts | 53 +++++++++++++++---- .../site-dropdown/sites-dropdown.component.ts | 40 ++++++++------ lib/core/directives/node-delete.directive.ts | 4 +- 6 files changed, 75 insertions(+), 35 deletions(-) diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 438d68b070..a5a848f355 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -9,7 +9,7 @@
- +
diff --git a/docs/sites-dropdown.component.md b/docs/sites-dropdown.component.md index a5d32b70f9..2c57598042 100644 --- a/docs/sites-dropdown.component.md +++ b/docs/sites-dropdown.component.md @@ -23,7 +23,8 @@ Displays a dropdown menu to show and interact with the sites of the current user | hideMyFiles | boolean | false | Hide the "My Files" option added to the list by default | | siteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | null | A custom list of sites to be displayed by the dropdown. If no value is given, the sites of the current user are displayed by default. A list of objects only with properties 'title' and 'guid' is enough to be able to display the dropdown. | | placeholder | string | 'DROPDOWN.PLACEHOLDER_LABEL' | The placeholder text/the key from translation files for the placeholder text to be shown by default | - +| value | string | null | Id of the select site | + ### Events | Name | Returned Type | Description | diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.html b/lib/content-services/site-dropdown/sites-dropdown.component.html index 0663175877..5539e10793 100644 --- a/lib/content-services/site-dropdown/sites-dropdown.component.html +++ b/lib/content-services/site-dropdown/sites-dropdown.component.html @@ -6,10 +6,10 @@ placeholder="{{placeholder | translate}}" floatPlaceholder="never" data-automation-id="site-my-files-select" - [(ngModel)]="siteSelected" - (ngModelChange)="selectedSite()"> + [(value)]="selected" + (selectionChange)="selectedSite($event)"> {{'DROPDOWN.MY_FILES_OPTION' | translate}} - + {{ site.entry.title | translate}} diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts b/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts index 821f0fa419..b9f403a98f 100644 --- a/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts +++ b/lib/content-services/site-dropdown/sites-dropdown.component.spec.ts @@ -122,7 +122,11 @@ describe('DropdownSitesComponent', () => { it('should show the "My files" option by default', async(() => { component.hideMyFiles = false; fixture.detectChanges(); - jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', responseText: sitesList }); + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: sitesList + }); openSelectbox(); @@ -135,7 +139,11 @@ describe('DropdownSitesComponent', () => { it('should hide the "My files" option if the developer desires that way', async(() => { component.hideMyFiles = true; fixture.detectChanges(); - jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', responseText: sitesList }); + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: sitesList + }); openSelectbox(); @@ -147,7 +155,11 @@ describe('DropdownSitesComponent', () => { it('should show the default placeholder label by default', async(() => { fixture.detectChanges(); - jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', responseText: sitesList }); + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: sitesList + }); openSelectbox(); @@ -160,7 +172,11 @@ describe('DropdownSitesComponent', () => { it('should show custom placeholder label when the \'placeholder\' input property is given a value', async(() => { component.placeholder = 'NODE_SELECTOR.SELECT_LOCATION'; fixture.detectChanges(); - jasmine.Ajax.requests.mostRecent().respondWith({ status: 200, contentType: 'json', responseText: sitesList }); + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: sitesList + }); openSelectbox(); @@ -203,9 +219,8 @@ describe('DropdownSitesComponent', () => { }); component.change.subscribe(() => { - expect(options[0].attributes['ng-reflect-value']).toBe('default'); - expect(options[1].attributes['ng-reflect-value']).toBe('-my-'); - expect(options[2].attributes['ng-reflect-value']).toBe('-mysites-'); + expect(options[1].nativeElement.innerText).toContain('PERSONAL_FILES'); + expect(options[2].nativeElement.innerText).toContain('FILE_LIBRARIES'); }); })); @@ -228,9 +243,8 @@ describe('DropdownSitesComponent', () => { }); component.change.subscribe(() => { - expect(options[0].attributes['ng-reflect-value']).toBe('default'); - expect(options[1].attributes['ng-reflect-value']).toBe('fake-1'); - expect(options[2].attributes['ng-reflect-value']).toBe('fake-2'); + expect(options[1].nativeElement.innerText).toContain('fake-test-site'); + expect(options[2].nativeElement.innerText).toContain('fake-test-2'); done(); }); @@ -249,7 +263,7 @@ describe('DropdownSitesComponent', () => { debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null); fixture.detectChanges(); let options: any = debug.queryAll(By.css('mat-option')); - options[1].triggerEventHandler('click', null); + options[1].nativeElement.click(); fixture.detectChanges(); }); @@ -258,5 +272,22 @@ describe('DropdownSitesComponent', () => { done(); }); }); + + it('should be possiblle to select the default value', (done) => { + component.value = 'swsdp'; + fixture.detectChanges(); + jasmine.Ajax.requests.mostRecent().respondWith({ + status: 200, + contentType: 'json', + responseText: sitesList + }); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + expect(component.selected.entry.title).toBe('fake-test-2'); + done(); + }); + }); + }); }); diff --git a/lib/content-services/site-dropdown/sites-dropdown.component.ts b/lib/content-services/site-dropdown/sites-dropdown.component.ts index 38ef9c85e4..003297ad11 100644 --- a/lib/content-services/site-dropdown/sites-dropdown.component.ts +++ b/lib/content-services/site-dropdown/sites-dropdown.component.ts @@ -18,6 +18,7 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; import { SitesService } from '@alfresco/adf-core'; import { SitePaging, SiteEntry } from 'alfresco-js-api'; +import { Observable } from 'rxjs/Observable'; @Component({ selector: 'adf-sites-dropdown', @@ -40,6 +41,10 @@ export class DropdownSitesComponent implements OnInit { @Input() siteList: SitePaging = null; + /** Id of the select site */ + @Input() + value: string = null; + /** Text or a translation key to act as a placeholder. */ @Input() placeholder: string = 'DROPDOWN.PLACEHOLDER_LABEL'; @@ -50,33 +55,38 @@ export class DropdownSitesComponent implements OnInit { @Output() change: EventEmitter = new EventEmitter(); + selected: SiteEntry = null; + public MY_FILES_VALUE = 'default'; - public siteSelected: string; - - constructor(private sitesService: SitesService) {} + constructor(private sitesService: SitesService) { + } ngOnInit() { if (!this.siteList) { - this.setDefaultSiteList(); + this.setDefaultSiteList().subscribe((result) => { + this.selected = this.siteList.list.entries.find(site => site.entry.id === this.value); + }, + (error) => { + }); } + } - selectedSite() { - let siteFound; - if (this.siteSelected === this.MY_FILES_VALUE) { - siteFound = { entry: {}}; - } else { - siteFound = this.siteList.list.entries.find( site => site.entry.guid === this.siteSelected); - } - this.change.emit(siteFound); + selectedSite(event: any) { + this.change.emit(event.value); } - setDefaultSiteList() { - this.sitesService.getSites().subscribe((result) => { + private setDefaultSiteList(): Observable { + let sitesObservable = this.sitesService.getSites(); + + sitesObservable.subscribe((result) => { this.siteList = result; }, - (error) => {}); + (error) => { + }); + + return sitesObservable; } } diff --git a/lib/core/directives/node-delete.directive.ts b/lib/core/directives/node-delete.directive.ts index 5d04c224ac..4497a05be3 100644 --- a/lib/core/directives/node-delete.directive.ts +++ b/lib/core/directives/node-delete.directive.ts @@ -57,9 +57,7 @@ export class NodeDeleteDirective implements OnChanges { @Input('adf-delete') selection: MinimalNodeEntity[] | DeletedNodeEntity[]; - /** If true then the nodes are deleted immediately rather than being - * put in the trash. - */ + /** If true then the nodes are deleted immediately rather than being put in the trash */ @Input() permanent: boolean = false;