[ADF-968] Added Site Dropdown component to document list (#2093)

* [ADF-968] added demo project and new component

* [ADF-968] added default option choice

* [ADF-968] - moved site dropdown into documentlist

* [ADF-968] fixed test for new component

* [ADF-968] removed fdescribe for single cases

* [ADF-968] fixed test to check rendering

* [ADF-968] added conversion to Boolean forced by alfresco-js-api

* [ADF-968]- moved site service into core

* [ADF-968] reflected changes on js-api index

* [ADF-968] fixed wrongly merged path from rebase

* [ADF-968] fixed wrongly merged path from rebase

* [ADF-968] fixed import problem on demo shell demo

* [ADF-968] revert changes on package.json

* [ADF-968] removed wrong package-lock

* [ADF-968] applied changes from PR

* [ADF-968] reindented file html

demo-shell-ng2/app/components/files/files.component.css

@@ -41,3 +41,10 @@ adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
     border-radius: 100%;
     background: #00bcd4;
 }
+
+.adf-demo-site-container-style {
+    margin-top: 10px;
+    margin-left: 3%;
+    width: 100%;
+    min-width: 200px;
+}

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

@@ -1,6 +1,12 @@
 <div class="container">
+    <div class="adf-demo-site-container-style" id="demo-container">
+        <span> Choose A Site from DropDown </span>
+        <p></p>
+        <adf-sites-dropdown (change)="getSiteContent($event)">
+        </adf-sites-dropdown>
+    </div>
     <alfresco-upload-drag-area
-        [rootFolderId]="documentList.currentFolderId"
+        [parentId]="currentFolderId"
         [versioning]="versioning"
         [enabled]="documentList.hasCreatePermission()">
         <div *ngIf="errorMessage" class="error-message">
@@ -223,4 +229,3 @@
     <!--</div>-->
 
 </div>
-

demo-shell-ng2/app/components/files/files.component.ts

@@ -18,8 +18,8 @@
 import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
 import { MdDialog } from '@angular/material';
 import { ActivatedRoute, Params } from '@angular/router';
-import { AlfrescoContentService, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService, UploadService } from 'ng2-alfresco-core';
+import { AlfrescoContentService, FileUploadCompleteEvent, FolderCreatedEvent, NotificationService, SiteModel, UploadService } from 'ng2-alfresco-core';
-import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
+import { DocumentListComponent, DropdownSitesComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
 
 import { CreateFolderDialogComponent } from '../../dialogs/create-folder.dialog';
 

ng2-components/ng2-alfresco-core/index.ts

@@ -120,6 +120,7 @@ export * from './src/models/card-view-textitem.model';
 export * from './src/models/card-view-dateitem.model';
 export * from './src/models/file.model';
 export * from './src/models/permissions.enum';
+export * from './src/models/site.model';
 
 export * from './src/models/index';
 

ng2-components/ng2-alfresco-core/src/models/site.model.ts

@@ -0,0 +1,87 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class SiteModel {
+    role: string;
+    visibility: string;
+    guid: string;
+    description: string;
+    id: string;
+    preset: string;
+    title: string;
+    contents: SiteContentsModel[] = [];
+    members: SiteMembersModel[] = [];
+
+    constructor(obj?: any) {
+        if (obj && obj.entry) {
+            this.role = obj.entry.role || null;
+            this.visibility = obj.entry.visibility || null;
+            this.guid = obj.entry.guid || null;
+            this.description = obj.entry.description || null;
+            this.id = obj.entry.id || null;
+            this.preset = obj.entry.preset;
+            this.title = obj.entry.title;
+
+            if (obj.relations && obj.relations.containers) {
+                obj.relations.containers.list.entries.forEach((content) => {
+                    this.contents.push(new SiteContentsModel(content.entry));
+                });
+            }
+
+            if (obj.relations && obj.relations.members) {
+                obj.relations.members.list.entries.forEach((member) => {
+                    this.members.push(new SiteMembersModel(member.entry));
+                });
+            }
+        }
+    }
+
+}
+
+export class SiteContentsModel {
+    id: string;
+    folderId: string;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.id = obj.id || null;
+            this.folderId = obj.folderId || null;
+        }
+    }
+}
+
+export class SiteMembersModel {
+    role: string;
+    firstName: string;
+    emailNotificationsEnabled: boolean = false;
+    company: any;
+    id: string;
+    enable: boolean = false;
+    email: string;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.role = obj.role;
+            this.firstName = obj.firstName || null;
+            this.emailNotificationsEnabled = obj.emailNotificationsEnabled;
+            this.company = obj.company || null;
+            this.id = obj.id || null;
+            this.enable = obj.enable;
+            this.email = obj.email;
+        }
+    }
+}

ng2-components/ng2-alfresco-core/src/services/sites-api.service.spec.ts

@@ -15,157 +15,141 @@
  * limitations under the License.
  */
 
-import { async, inject, TestBed } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 import { AlfrescoApiService } from './alfresco-api.service';
+import { AlfrescoSettingsService } from './alfresco-settings.service';
 import { AppConfigModule } from './app-config.service';
-import { NodesApiService } from './nodes-api.service';
+import { AuthenticationService } from './authentication.service';
 import { SitesApiService } from './sites-api.service';
 import { StorageService } from './storage.service';
 import { UserPreferencesService } from './user-preferences.service';
 
-class TestConfig {
+declare let jasmine: any;
-    service: any = null;
-    setup: any = {
-        rejectGetSites: false
-    };
 
-    constructor(setup: any = {}) {
+describe('Sites service', () => {
-        Object.assign(this.setup, setup);
 
-        const { alfrescoApiServiceMock } = this;
+    let service;
-
-        const alfrescoApiServiceProvider = {
-            provide: AlfrescoApiService,
-            useValue: alfrescoApiServiceMock
-        };
 
+    beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
                 AppConfigModule.forRoot('app.config.json', {
-                    pagination: {
+                    ecmHost: 'http://localhost:9876/ecm',
-                        size: 20
+                    files: {
+                        excluded: ['.DS_Store', 'desktop.ini', '.git', '*.git']
                     }
                 })
             ],
             providers: [
-                alfrescoApiServiceProvider,
                 SitesApiService,
-                NodesApiService,
+                AlfrescoApiService,
                 UserPreferencesService,
+                AuthenticationService,
+                AlfrescoSettingsService,
                 StorageService
             ]
-        });
+        }).compileComponents();
+    }));
 
-        inject([ SitesApiService ], (service: SitesApiService) => {
-            this.service = service;
-        })();
-    }
-
-    private get alfrescoApiServiceMock(): any {
-        const { setup } = this;
-
-        const nodePagingSample = {
-            list: {
-                entries: [
-                    { entry: {} },
-                    { entry: {} }
-                ],
-                pagination: {}
-            }
-        };
-
-        const sitesApiMock = {
-            getSites: jasmine.createSpy('getSites').and.callFake(() => {
-                return new Promise((resolve, reject) => {
-                    setup.rejectGetSites
-                        ? reject()
-                        : resolve(nodePagingSample);
-                });
-            })
-        };
-
-        return {
-            getInstance: () => {
-                return {
-                    core: { sitesApi: sitesApiMock }
-                };
-            }
-        };
-    }
-
-    get getSitesSpy(): any {
-        return this.service.sitesApi.getSites;
-    }
-
-    get getSitesArgs(): any[] {
-        return this.getSitesSpy.calls.mostRecent().args;
-    }
-}
-
-describe('Sites API', () => {
-    describe('getSites', () => {
-        describe('Provide a NodePaging', () => {
     beforeEach(() => {
-                this.config = new TestConfig();
+        service = TestBed.get(SitesApiService);
+        jasmine.Ajax.install();
     });
 
-            it('provides a node paging with entries', async(() => {
+    afterEach(() => {
-                this.config.service.getSites().subscribe((paging) => {
+        jasmine.Ajax.uninstall();
-                    const { list: { entries, pagination } } = paging;
-
-                    expect(entries).toEqual(jasmine.any(Array));
-                    expect(pagination).toEqual(jasmine.any(Object));
-                    expect(entries.length).toBe(2);
-                });
-            }));
     });
 
-        describe('Manage query options', () => {
+    it('Should get a list of users sites', (done) => {
-            beforeEach(() => {
+        service.getSites().subscribe((data) => {
-                this.config = new TestConfig();
+            expect(data[0].title).toBe('FAKE');
-
+            done();
-                this.getCalledArgs = () => {
-                    return this.config.getSitesArgs;
-                };
         });
 
-            it('has default options', async(() => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
-                this.config.service.getSites();
+            status: 200,
-
+            contentType: 'json',
-                const [ { maxItems, skipCount } ] = this.getCalledArgs();
+            responseText: {
-
+                'list': {
-                expect(maxItems).toBe(20);
+                    'pagination': {
-                expect(skipCount).toBe(0);
+                        'count': 1,
-            }));
+                        'hasMoreItems': false,
-
+                        'totalItems': 1,
-            it('combines custom and default options', async(() => {
+                        'skipCount': 0,
-                this.config.service.getSites({
+                        'maxItems': 100
-                    maxItems: 5
+                    },
+                    'entries': [
+                        {
+                            'entry': {
+                                'role': 'SiteManager',
+                                'visibility': 'PUBLIC',
+                                'guid': 'b4cff62a-664d-4d45-9302-98723eac1319',
+                                'description': 'This is a Sample Alfresco Team site.',
+                                'id': 'swsdp',
+                                'title': 'FAKE'
+                            }
+                        }
+                    ]
+                }
+            }
+        });
     });
 
-                const [ { maxItems, skipCount } ] = this.getCalledArgs();
+    it('Should get single sites via siteId', (done) => {
-
+        service.getSite('fake-site-id').subscribe((data) => {
-                expect(maxItems).toBe(5);
+            expect(data.title).toBe('FAKE-SINGLE-TITLE');
-                expect(skipCount).toBe(0);
+            done();
-            }));
         });
 
-        describe('Error handling', () => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
-            beforeEach(() => {
+            status: 200,
-                const config = new TestConfig({
+            contentType: 'json',
-                    rejectGetSites: true
+            responseText: {
+                'entry': {
+                    'role': 'SiteManager',
+                    'visibility': 'PUBLIC',
+                    'guid': 'b4cff62a-664d-4d45-9302-98723eac1319',
+                    'description': 'This is a Sample Alfresco Team site.',
+                    'id': 'swsdp',
+                    'preset': 'site-dashboard',
+                    'title': 'FAKE-SINGLE-TITLE'
+                }
+            }
+        });
     });
 
-                this.service = config.service;
+    it('deleteSite should perform a call against the server', (done) => {
-                this.spy = spyOn(config.service, 'handleError')
+        service.deleteSite('fake-site-id').subscribe(() => {
-                    .and.callThrough();
+            expect(jasmine.Ajax.requests.mostRecent().method).toBe('DELETE');
+            expect(jasmine.Ajax.requests.mostRecent().url)
+                .toContain('alfresco/api/-default-/public/alfresco/versions/1/sites/fake-site-id');
+            done();
         });
 
-            it('handles error on failure', async(() => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
-                this.service.getSites().subscribe(() => {
+            status: 204
-                    expect(this.spy).toHaveBeenCalled();
         });
-            }));
+    });
+
+    it('getSites catch errors call', (done) => {
+        service.getSites().subscribe(() => {
+        }, () => {
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 403
+        });
+    });
+
+    it('getSite catch errors call', (done) => {
+        service.getSite('error-id').subscribe(() => {
+        }, () => {
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 403
         });
     });
 });

ng2-components/ng2-alfresco-core/src/services/sites-api.service.ts

@@ -16,10 +16,10 @@
  */
 
 import { Injectable } from '@angular/core';
-import { MinimalNodeEntryEntity, NodePaging } from 'alfresco-js-api';
+import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
+import { SiteModel } from '../models/site.model';
 import { AlfrescoApiService } from './alfresco-api.service';
-import { NodesApiService } from './nodes-api.service';
 import { UserPreferencesService } from './user-preferences.service';
 
 @Injectable()
@@ -27,36 +27,54 @@ export class SitesApiService {
 
     constructor(
         private apiService: AlfrescoApiService,
-        private nodesApi: NodesApiService,
+        private preferences: UserPreferencesService) { }
-        private preferences: UserPreferencesService) {}
 
-    private get sitesApi() {
+    getSites(opts: any = {}): any {
-       return this.apiService.getInstance().core.sitesApi;
-    }
-
-    getSites(options: any = {}): Observable<NodePaging> {
-        const { sitesApi, handleError } = this;
         const defaultOptions = {
             maxItems: this.preferences.paginationSize,
             skipCount: 0,
-            include: [ 'properties' ]
+            include: ['properties']
         };
-        const queryOptions = Object.assign({}, defaultOptions, options);
+        const queryOptions = Object.assign({}, defaultOptions, opts);
-        const promise = sitesApi.getSites(queryOptions);
+        return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.getSites(queryOptions))
-
+            .map((res: any) => res.list.entries)
-        return Observable
+            .map((objList) => this.convertToModel(objList))
-            .fromPromise(promise)
+            .catch(this.handleError);
-            .catch(handleError);
     }
 
-    getSiteDocumentLibrary(siteId: string): Observable<MinimalNodeEntryEntity> {
+    getSite(siteId: string, opts?: any): any {
-        const { nodesApi } = this;
+        return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.getSite(siteId, opts))
-
+            .map((res: any) => new SiteModel(res))
-        return nodesApi
+            .catch(this.handleError);
-            .getNode(siteId, { relativePath: '/documentLibrary' });
     }
 
-    private handleError(error: any): Observable<any> {
+    deleteSite(siteId: string, permanentFlag: boolean = true): any {
-        return Observable.of(error);
+        let options: any = {};
+        options.permanent = permanentFlag;
+        return Observable.fromPromise(this.apiService.getInstance().core.sitesApi.deleteSite(siteId, options)
+            .catch(this.handleError));
+    }
+
+    getSiteContent(siteId: string): Observable<any> {
+        return this.getSite(siteId, { relations: ['containers'] });
+    }
+
+    getSiteMembers(siteId: string): Observable<any> {
+        return this.getSite(siteId, { relations: ['members'] });
+    }
+
+    private handleError(error: Response): any {
+        console.error(error);
+        return Observable.throw(error || 'Server error');
+    }
+
+    private convertToModel(objList: any[]) {
+        let convertedList: SiteModel[] = [];
+        if (objList && objList.length > 0) {
+            objList.forEach((element: any) => {
+                convertedList.push(new SiteModel(element));
+            });
+        }
+        return convertedList;
     }
 }

ng2-components/ng2-alfresco-documentlist/README.md

@@ -18,6 +18,8 @@
 - [Breadcrumb Component](#breadcrumb-component)
   * [Properties](#properties-1)
   * [Events](#events-1)
+- [Dropdown Site Component](#dropdown-site-component)
+  * [Events](#events-2)
 - [Menu Actions](#menu-actions)
 - [Custom columns](#custom-columns)
   * [DataColumn Properties](#datacolumn-properties)
@@ -33,11 +35,13 @@
     + [Folder actions](#folder-actions)
   * [Context Menu](#context-menu)
   * [Navigation mode](#navigation-mode)
-  * [Events](#events-2)
+  * [Events](#events-3)
 - [Advanced usage and customization](#advanced-usage-and-customization)
   * [Custom row filter](#custom-row-filter)
   * [Custom image resolver](#custom-image-resolver)
   * [Hiding columns on small screens](#hiding-columns-on-small-screens)
+  * [Custom row permissions style](#custom-row-permissions-style)
+    + [Examples](#examples)
   * [Custom 'empty folder' template](#custom-empty-folder-template)
   * [Customizing default actions](#customizing-default-actions)
 - [Build from sources](#build-from-sources)
@@ -357,6 +361,22 @@ DocumentList provides simple breadcrumb element to indicate the current position
 | --- | --- | --- |
 | navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) |emitted when user clicks on a breadcrumb  |
 
+## Dropdown Site Component
+
+DocumentList provides simple dropdown element to show sites for the current logged in user.
+
+```html
+ <adf-sites-dropdown  
+  (change)="getSiteContent($event)">
+ </adf-sites-dropdown>
+```
+
+### Events
+
+| Name | Returned Type | Description |
+| --- | --- | --- |
+| change | [SiteModel](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-documentlist/src/models/site.model.ts) | emitted when user select a site. When default option is selected an empty model is emitted  |
+
 ## Menu Actions
 
 DocumentList provides simple creation menu actions that provide the action to create a new folder.

ng2-components/ng2-alfresco-documentlist/index.ts

@@ -28,6 +28,7 @@ import { ContentColumnComponent } from './src/components/content-column/content-
 import { DocumentListComponent } from './src/components/document-list.component';
 import { DocumentMenuActionComponent } from './src/components/document-menu-action.component';
 import { EmptyFolderContentDirective } from './src/components/empty-folder/empty-folder-content.directive';
+import { DropdownSitesComponent } from './src/components/site-dropdown/sites-dropdown.component';
 import { MaterialModule } from './src/material.module';
 
 import { DocumentActionsService } from './src/services/document-actions.service';
@@ -43,6 +44,7 @@ export * from './src/components/content-action/content-action.component';
 export * from './src/components/content-action/content-action-list.component';
 export * from './src/components/empty-folder/empty-folder-content.directive';
 export * from './src/components/breadcrumb/breadcrumb.component';
+export * from './src/components/site-dropdown/sites-dropdown.component';
 
 // data
 export * from './src/data/share-datatable-adapter';
@@ -67,6 +69,7 @@ export const DOCUMENT_LIST_DIRECTIVES: any[] = [
     ContentActionListComponent,
     EmptyFolderContentDirective,
     BreadcrumbComponent,
+    DropdownSitesComponent,
     DropdownBreadcrumbComponent
 ];
 

ng2-components/ng2-alfresco-documentlist/src/components/site-dropdown/sites-dropdown.component.html

@@ -0,0 +1,11 @@
+<div id="site-dropdown-container" class="adf-site-dropdown-container">
+    <md-select class="adf-site-dropdown-list-element" id="site-dropdown"
+        placeholder="{{'DROPDOWN.PLACEHOLDER_LABEL' | translate}}"
+        [(ngModel)]="siteSelected"
+        (ngModelChange)="selectedSite()">
+        <md-option id="default_site_option" [value]="DEFAULT_VALUE">{{'DROPDOWN.DEFAULT_OPTION' | translate}}</md-option>
+        <md-option *ngFor="let site of siteList" [value]="site.guid">
+            {{ site.title }}
+        </md-option>
+    </md-select>
+</div>

ng2-components/ng2-alfresco-documentlist/src/components/site-dropdown/sites-dropdown.component.scss

@@ -0,0 +1,10 @@
+@import 'theming';
+
+.adf-site-dropdown {
+
+    &-list-element {
+        width: 300px;
+    }
+
+
+}

ng2-components/ng2-alfresco-documentlist/src/components/site-dropdown/sites-dropdown.component.spec.ts

@@ -0,0 +1,160 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MdOptionModule, MdSelectModule } from '@angular/material';
+import { By } from '@angular/platform-browser';
+import { CoreModule } from 'ng2-alfresco-core';
+import { DropdownSitesComponent } from './sites-dropdown.component';
+
+declare let jasmine: any;
+
+let sitesList = {
+    'list': {
+        'pagination': {
+            'count': 2,
+            'hasMoreItems': false,
+            'totalItems': 2,
+            'skipCount': 0,
+            'maxItems': 100
+        },
+        'entries': [
+            {
+                'entry': {
+                    'role': 'SiteManager',
+                    'visibility': 'PUBLIC',
+                    'guid': 'fake-1',
+                    'description': 'fake-test-site',
+                    'id': 'fake-test-site',
+                    'preset': 'site-dashboard',
+                    'title': 'fake-test-site'
+                }
+            },
+            {
+                'entry': {
+                    'role': 'SiteManager',
+                    'visibility': 'PUBLIC',
+                    'guid': 'fake-2',
+                    'description': 'This is a Sample Alfresco Team site.',
+                    'id': 'swsdp',
+                    'preset': 'site-dashboard',
+                    'title': 'fake-test-2'
+                }
+            }
+        ]
+    }
+};
+
+describe('DropdownSitesComponent', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DropdownSitesComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                MdSelectModule,
+                MdOptionModule
+            ],
+            declarations: [
+                DropdownSitesComponent
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DropdownSitesComponent);
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+    });
+
+    describe('Rendering tests', () => {
+
+        beforeEach(() => {
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+            fixture.destroy();
+        });
+
+        it('Dropdown sites should be renedered', async(() => {
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#site-dropdown-container')).toBeDefined();
+                expect(element.querySelector('#site-dropdown')).toBeDefined();
+                expect(element.querySelector('#site-dropdown-container')).not.toBeNull();
+                expect(element.querySelector('#site-dropdown')).not.toBeNull();
+            });
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: sitesList
+            });
+        }));
+
+        it('should load sites on init', async(() => {
+            fixture.detectChanges();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: sitesList
+            });
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null);
+                fixture.detectChanges();
+                let options: any = debug.queryAll(By.css('md-option'));
+                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');
+            });
+        }));
+
+        it('should raise an event when a site is selected', (done) => {
+            fixture.detectChanges();
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: sitesList
+            });
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null);
+                fixture.detectChanges();
+                let options: any = debug.queryAll(By.css('md-option'));
+                options[1].triggerEventHandler('click', null);
+                fixture.detectChanges();
+            });
+
+            component.change.subscribe((site) => {
+                expect(site.guid).toBe('fake-1');
+                done();
+            });
+        });
+    });
+});

ng2-components/ng2-alfresco-documentlist/src/components/site-dropdown/sites-dropdown.component.ts

@@ -0,0 +1,60 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { AlfrescoTranslationService, SiteModel, SitesApiService } from 'ng2-alfresco-core';
+
+@Component({
+    selector: 'adf-sites-dropdown',
+    styleUrls: ['./sites-dropdown.component.scss'],
+    templateUrl: './sites-dropdown.component.html'
+})
+export class DropdownSitesComponent implements OnInit {
+
+    @Output()
+    change: EventEmitter<SiteModel> = new EventEmitter();
+
+    public DEFAULT_VALUE = 'default';
+
+    siteList = [];
+
+    public siteSelected: string;
+
+    constructor(translateService: AlfrescoTranslationService,
+                private sitesService: SitesApiService) {
+        if (translateService) {
+            translateService.addTranslationFolder('ng2-alfresco-documentlist', 'assets/ng2-alfresco-documentlist');
+        }
+    }
+
+    ngOnInit() {
+        this.sitesService.getSites().subscribe((result) => {
+            this.siteList = result;
+        });
+    }
+
+    selectedSite() {
+        let siteFound;
+        if (this.siteSelected === this.DEFAULT_VALUE) {
+            siteFound = new SiteModel();
+        }else {
+           siteFound = this.siteList.find( site => site.guid === this.siteSelected);
+        }
+        this.change.emit(siteFound);
+    }
+
+}

ng2-components/ng2-alfresco-documentlist/src/i18n/en.json

@@ -11,5 +11,9 @@
         "EMPTY": {
             "HEADER": "This folder is empty"
         }
+    },
+    "DROPDOWN": {
+        "PLACEHOLDER_LABEL": "Site List",
+        "DEFAULT_OPTION": "No Site Chosen"
     }
 }