[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

demo-shell/src/app/components/files/files.component.html

@@ -9,7 +9,7 @@
             </mat-expansion-panel-header>
 
             <adf-document-list
-                [currentFolderId]="'-sharedlinks-'"
+                [currentFolderId]="'-recent-'"
                 locationFormat="/files"
                 [cardview]="true"
                 [showHeader]="false"

docs/sites-dropdown.component.md

@@ -23,6 +23,7 @@ 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
 

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"
+            [(value)]="selected"
-            (ngModelChange)="selectedSite()">
+            (selectionChange)="selectedSite($event)">
             <mat-option *ngIf="!hideMyFiles" data-automation-id="site-my-files-option" id="default_site_option" [value]="MY_FILES_VALUE">{{'DROPDOWN.MY_FILES_OPTION' | translate}}</mat-option>
-            <mat-option *ngFor="let site of siteList?.list.entries" [value]="site.entry.guid">
+            <mat-option *ngFor="let site of siteList?.list.entries" [value]="site">
                 {{ site.entry.title | translate}}
             </mat-option>
         </mat-select>

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].nativeElement.innerText).toContain('PERSONAL_FILES');
-                expect(options[1].attributes['ng-reflect-value']).toBe('-my-');
+                expect(options[2].nativeElement.innerText).toContain('FILE_LIBRARIES');
-                expect(options[2].attributes['ng-reflect-value']).toBe('-mysites-');
             });
         }));
 
@@ -228,9 +243,8 @@ describe('DropdownSitesComponent', () => {
             });
 
             component.change.subscribe(() => {
-                expect(options[0].attributes['ng-reflect-value']).toBe('default');
+                expect(options[1].nativeElement.innerText).toContain('fake-test-site');
-                expect(options[1].attributes['ng-reflect-value']).toBe('fake-1');
+                expect(options[2].nativeElement.innerText).toContain('fake-test-2');
-                expect(options[2].attributes['ng-reflect-value']).toBe('fake-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();
+            });
+        });
+
     });
 });

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<SiteEntry> = 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);
     }
 
-    setDefaultSiteList() {
+    selectedSite(event: any) {
-        this.sitesService.getSites().subscribe((result) => {
+        this.change.emit(event.value);
+    }
+
+    private setDefaultSiteList(): Observable<SitePaging> {
+        let sitesObservable = this.sitesService.getSites();
+
+        sitesObservable.subscribe((result) => {
                 this.siteList = result;
             },
-            (error) => {});
+            (error) => {
+            });
+
+        return sitesObservable;
     }
 
 }

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
+    /** If true then the nodes are deleted immediately rather than being put in the trash */
-     * put in the trash.
-     */
     @Input()
     permanent: boolean = false;