Add seed data files for directory

seed-files/app.module.ts

+// Core modules for the application
+import { NgModule } from '@angular/core';
+import { Http, RequestOptions } from '@angular/http';
+import { BrowserModule } from '@angular/platform-browser';
+
+// Libraries
+import { AuthHttp, AuthConfig } from 'angular2-jwt';
+import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
+
+// Modules
+import { appRouting, appRoutingProviders } from './app.routing';
+import { AppCommonModule } from './commons/modules/common.module';
+import { HeaderModule } from './components/header/header.module';
+
+// Providers
+import { AdminGuard } from './commons/guards/admin.guard';
+import { AclGuard } from './commons/guards/acl.guard';
+import { FlashMessageEvent } from './commons/services/flashmessage/flashmessage.event';
+
+// Services
+import { FlashMessageService } from './commons/services/flashmessage/flashmessage.service';
+import { TitleService } from './commons/services/title/title.service';
+import { AclService } from './commons/services/acl/acl.service';
+import { FirebaseService } from './commons/services/firebase/firebase.service';
+import { OperatorGuard } from './commons/guards/operator.guard';
+import { IntercomService } from './commons/services/plugins/intercom.service';
+import { HotjarService } from './commons/services/plugins/hotjar.service';
+
+// Components
+import { AppComponent } from './app.component';
+import { NoContentComponent } from './modules/no-content/no-content.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { MainAppComponent } from './main.app.component';
+
+export function authHttpServiceFactory(http: Http, options: RequestOptions) {
+    return new AuthHttp(new AuthConfig({
+        tokenName: 'token',
+        tokenGetter: () => localStorage.getItem('token') ? localStorage.getItem('token').split(' ')[1] : null,
+        globalHeaders: [ { 'Content-Type': 'application/json' } ],
+        noJwtError: true
+    }), http, options);
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        appRouting,
+        HeaderModule,
+        AngularFireModule.initializeApp(<FirebaseAppConfig>FIREBASE),
+        AppCommonModule.forRoot(),
+    ],
+    declarations: [ AppComponent, FooterComponent, NoContentComponent, MainAppComponent ],
+    providers: [
+        AdminGuard,
+        OperatorGuard,
+        AclService,
+        AclGuard,
+        FlashMessageService,
+        FlashMessageEvent,
+        appRoutingProviders,
+        TitleService,
+        FirebaseService,
+        IntercomService,
+        HotjarService,
+        {
+            provide: AuthHttp,
+            useFactory: authHttpServiceFactory,
+            deps: [ Http, RequestOptions ]
+        }
+    ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}

seed-files/common.module.ts

+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+
+// Library Modules
+
+// Services
+import { UserService } from '../services/user/user.service';
+import { LocalStorageService } from '../services/local-storage/localStorage.service';
+import { Utils } from '../utils/common.util';
+
+// Components
+import { SpinnerComponent } from '../../elements/spinner/spinner.component';
+import { SubmitButtonComponent } from '../../elements/submit-button/submit-button.component';
+
+// Misc
+import { AclDirective, OwnerDirective } from '../directives/acl.directive';
+import { UserRelationService } from '../services/user/user.relation';
+import { FormattedDatePipeModule } from '../pipes/date/date.pipe.module';
+import { FindNamePipeModule } from '../pipes/findName/findName.pipe.module';
+import { LoadingBarModule } from '../../elements/loading-bar/loading-bar.module';
+
+/**
+ * common.module
+ */
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule,
+        ReactiveFormsModule,
+    ],
+    declarations: [
+        SpinnerComponent,
+        SubmitButtonComponent,
+        AclDirective,
+        OwnerDirective,
+    ],
+    providers: [
+        Utils
+    ],
+    exports: [
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        HttpModule,
+        SpinnerComponent,
+        SubmitButtonComponent,
+        ReactiveFormsModule,
+        AclDirective,
+        OwnerDirective,
+        FormattedDatePipeModule,
+        FindNamePipeModule,
+        LoadingBarModule,
+    ]
+})
+export class AppCommonModule {
+
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: AppCommonModule,
+            providers: [ UserService, UserRelationService, LocalStorageService ],
+        };
+    }
+}

seed-files/modules/directory/directory/components/abstract-directory.ts

+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Rx';
+import { SearchService } from '../../../commons/services/search/search.service';
+import { Group } from '../../../commons/interfaces/group/group.interface';
+import { Company } from '../../../commons/interfaces/company/company.interface';
+import { User } from '../../../commons/interfaces/user/user.interface';
+
+export abstract class AbstractDirectory {
+    protected searchService: SearchService;
+    protected currentSearch: string = '';
+    protected queryInProgress = false;
+    protected offset = 0;
+    protected limit = 20;
+    query = {};
+    protected route;
+
+    activeItem: boolean | User | Company | Group = false;
+    searchResults = [];
+
+    protected hasNext = true;
+
+    constructor(searchService: SearchService) {
+    }
+
+    autoSelectItem() {
+        this.route.params.subscribe((params: any) => {
+            this.currentSearch = params[ 'search' ] || '';
+            this.findSelectedItemById(params[ 'id' ]);
+        });
+    }
+
+    hasMore() {
+        return this.hasNext || this.offset === 0;
+    }
+
+    load() {
+    }
+
+    loadPagination() {
+        if (this.queryInProgress) return;
+        this.load();
+    }
+
+    newSearch(search) {
+        if (search === this.currentSearch) return;
+        this.currentSearch = search;
+        this.resetSearch();
+        this.load();
+    }
+
+    mapResults(results) {
+        this.queryInProgress = false;
+        this.searchResults = this.searchResults.concat(...results);
+        this.offset += results.length;
+        this.hasNext = results.length === this.limit;
+        return Observable.of(true);
+    }
+
+    resetSearch() {
+        this.searchResults = [];
+        this.activeItem = false;
+        this.hasNext = true;
+        this.offset = 0;
+    }
+
+    newSelectedItem(item) {
+        this.activeItem = item;
+    }
+
+    findSelectedItemById(id) {
+        this.activeItem = this.searchResults.filter((result: User | Company | Group) => result.id === id)[0];
+    }
+}

seed-files/modules/directory/directory/components/companies/company-directory.component.ts

+import { Component, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { AbstractDirectory } from '../abstract-directory';
+import { AclService } from '../../../../commons/services/acl/acl.service';
+import { SubMenuService } from '../../../../components/sub-menu/sub-menu.service';
+import { SearchService } from '../../../../commons/services/search/search.service';
+import { AuthenticationService } from '../../../../commons/services/authentication/authentication.service';
+import { Filter } from '../../../../commons/interfaces/filters/filters.interface';
+
+@Component({
+    selector: 'company-directory',
+    templateUrl: './company-directory.template.html'
+})
+export class CompanyDirectoryComponent extends AbstractDirectory implements OnDestroy {
+    filterName: string = 'companies';
+    searchFilters: Array<Filter>;
+    loadingMoreItems: boolean = false;
+    list = [
+        { name: 'sites' }
+        // { name: 'services', isProperty: true } // TODO (gabs) : Remove attributes relating to the new data types
+    ];
+
+    constructor(protected searchService: SearchService,
+                private router: Router,
+                protected route: ActivatedRoute,
+                private subMenuService: SubMenuService,
+                private authenticationService: AuthenticationService,
+                aclService: AclService) {
+        super(searchService);
+        route.data.subscribe((data: any) => {
+            this.searchResults = data.searchFilters.companies;
+            this.searchFilters = data.searchFilters.filter;
+            this.offset = this.searchFilters.length;
+            this.hasNext = this.offset === this.limit;
+        });
+        if (aclService.isOperator()) this.buildSubMenu();
+        this.autoSelectItem();
+    }
+
+    ngOnDestroy() {
+        this.subMenuService.initialMenuState();
+    }
+
+    updateQuery(query) {
+        this.query = query;
+        this.resetSearch();
+        this.load();
+    }
+
+    load() {
+        if (!this.hasMore()) return;
+        this.loadingMoreItems = true;
+        this.queryInProgress = true;
+        const currentSearch = JSON.parse(JSON.stringify(this.currentSearch));
+        const currentQuery = JSON.stringify(this.query);
+        this.searchService.searchFiltersCompanies(this.query, { limit: this.limit, offset: this.offset, query: this.currentSearch })
+            .filter(() => currentSearch === this.currentSearch && currentQuery === JSON.stringify(this.query))
+            .switchMap(results => this.mapResults(results.companies))
+            .subscribe(() => this.loadingMoreItems = false);
+    }
+
+    buildSubMenu() {
+        const actions = [
+            { id: 1, action: this.onClickCreate.bind(this), title: 'Create a company' },
+        ];
+        this.subMenuService.replaceActionItem(actions);
+    }
+
+    onClickCreate() {
+        this.router.navigate([ '/company', 'create' ]);
+    }
+}

seed-files/modules/directory/directory/components/companies/company-directory.module.ts

+import { NgModule } from '@angular/core';
+
+// Routing
+import { companyDirectoryRouting } from './company-directory.routing';
+
+// Libraries
+import { InfiniteScrollModule } from 'angular2-infinite-scroll/angular2-infinite-scroll';
+
+// Modules
+import { AppCommonModule } from '../../../../commons/modules/common.module';
+import { FiltersModule } from '../filters/filters.module';
+import { ResultListModule } from '../result-list/result-list-module';
+import { ProfilePicModule } from '../../../../elements/profile-pic/profile-pic.module';
+import { CoverPicModule } from '../../../../components/cover-pic/cover-pic.module';
+
+// Providers
+import { SearchCompanyResolver, SearchFiltersCompanyResolver } from '../../../../commons/services/search/search.resolver';
+
+// Components
+import { CompanyDirectoryComponent } from './company-directory.component';
+
+@NgModule({
+    imports: [
+        companyDirectoryRouting,
+        AppCommonModule,
+        FiltersModule,
+        ResultListModule,
+        ProfilePicModule,
+        CoverPicModule
+    ],
+    declarations: [
+        CompanyDirectoryComponent
+    ],
+    providers: [
+        SearchCompanyResolver,
+        SearchFiltersCompanyResolver
+    ]
+})
+export class CompanyDirectoryModule {}

seed-files/modules/directory/directory/components/companies/company-directory.routing.ts

+import { RouterModule, Routes } from '@angular/router';
+import { CompanyDirectoryComponent } from './company-directory.component';
+import { SearchCompanyResolver, SearchFiltersCompanyResolver } from '../../../../commons/services/search/search.resolver';
+
+export const companyDirectoryRoutes: Routes = [
+    {
+        path: '', component: CompanyDirectoryComponent,
+        data: {
+            title: 'Directory Company'
+        },
+        resolve: {
+            searchFilters: SearchFiltersCompanyResolver
+        }
+    }
+];
+export const companyDirectoryRouting = RouterModule.forChild(companyDirectoryRoutes);

seed-files/modules/directory/directory/components/companies/company-directory.template.html

+<div class="content directory">
+    <div class="directory-filters">
+        <filters [filters]="searchFilters" (updateQuery)="updateQuery($event)" [list]="list" type="companies"></filters>
+    </div>
+    <div class="directory-list">
+        <result-list [(searchResults)]="searchResults"
+                     [filterName]="filterName"
+                     [queryInProgress]="queryInProgress"
+                     (activeItem)="activeItem"
+                     (newSearch)="newSearch($event)"
+                     (loadPage)="loadPagination($event)"
+                     (newSelectedItem)="newSelectedItem($event)">
+        </result-list>
+    </div>
+    <div class="directory-display">
+        <div class="panel">
+            <div class="display-holder u-textCenter u-spacerTop" *ngIf="!activeItem">
+                <div class="display-holder_content">
+                    <img class="u-spacerBottom" src="/assets/images/directory/holder.png" alt="">
+                    <p class="t-bold">Select a company to view more detail about it</p>
+                </div>
+            </div>
+            <div class="display-content" *ngIf="activeItem">
+                <div class="cover u-posRelative directory-profile u-spacerBottom">
+                    <cover-pic size="auto" [img]="activeItem.coverImageUrl"></cover-pic>
+                    <div class="directory-details u-textCenter u-posRelative">
+                        <div class="profile-pic">
+                            <profile-pic [img]="activeItem.profileImageUrl" [size]="'medium'"></profile-pic>
+                        </div>
+                        <h2 class="t-white">{{activeItem.name}}</h2>
+                        <p class="t-white t-large u-noMargin">{{activeItem.businessArea}}</p>
+                        <p class="t-white t-light u-noMargin">{{activeItem.company?.name}}</p>
+                    </div>
+                </div>
+                <div class="directory-info u-spacerBottom u-spacerTop">
+                    <div class="directory-address u-spacerTop b-color" *ngIf="activeItem.address">
+                        <p>
+                            {{activeItem.address.line1}}<br>
+                            <span *ngIf="activeItem.address.line2">{{activeItem.address.line2}}<br></span>
+                            {{activeItem.address.city}}<br>
+                            {{activeItem.address.postalCode}}<br>
+                            {{activeItem.address.country}}
+                        </p>
+                    </div>
+                    <div class="directory-other u-spacerTop">
+                        <ul *ngIf="activeItem.website || activeItem.phoneNumber" class="u-spacerTop">
+                            <li *ngIf="activeItem.phoneNumber" class="phone u-posRelative">
+                                <i class="icon o-call-solid t-primary"></i>
+                                <a href="tel:{{activeItem.phoneNumber}}" class="u-posRelative">{{activeItem.phoneNumber}}</a>
+                            </li>
+                            <li *ngIf="activeItem.website" class="t-bold">
+                                <a href="{{activeItem.website}}" target="_blank">Visit Website</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="directory-intro clearfix">
+                    <h3 class="t-light">Introduction</h3>
+                    <h4 class="t-underline b-color">About {{activeItem.name}}</h4>
+                    <p>{{activeItem.introduction}}</p>
+                </div>
+                <div class="directory-options clearfix u-spacerBottom">
+                    <a [routerLink]="['/company', activeItem.id]">
+                        <div class="profile-pic u-inlineBlock">
+                            <profile-pic [img]="activeItem.profileImageUrl"></profile-pic>
+                        </div>
+                        View Company Page
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

seed-files/modules/directory/directory/components/filters/filter-group/filter-group.component.ts

+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FiltersEventAdd } from '../filters.event';
+import { SearchService } from '../../../../../commons/services/search/search.service';
+
+@Component({
+    selector: 'filter-group',
+    templateUrl: 'filter-group.template.html'
+})
+export class FilterGroupComponent {
+    @Input()
+    get items() {
+        return this._items;
+    }
+
+    set items(items) {
+        this._items = items.map((item) => {
+            this.filtered.map((filter) => {
+                if (filter.name === item.name) {
+                    item.checked = true;
+                }
+            });
+            return item;
+        });
+    }
+
+    @Input() isCollapsed = false;
+    @Input() remove;
+    @Input() query;
+    @Input() name: string;
+    @Input() type: string;
+    @Input() isProperty = false;
+    @Output() applyFilter = new EventEmitter();
+    hasMore: boolean = false;
+    limit = 10;
+    offset = 0;
+    filtered = [];
+
+    private _items;
+
+    constructor(private searchService: SearchService) {
+    }
+
+    ngOnInit() {
+        this.offset = this.items.length;
+        this.hasMore = this.items.length === this.limit;
+    }
+
+    isHidden(filter) {
+        return this.query && this.query.filter((f) => f.name === filter.name).length === 1;
+    }
+
+    filterAction(filter) {
+        const event = new FiltersEventAdd();
+        let action;
+        if ((this.isProperty && this.remove) || (!this.isProperty && filter.checked)) {
+            action = 'remove';
+            this.filtered = this.filtered.filter((filteredFilter) => {
+                return filter.name !== filteredFilter.name;
+            });
+        } else {
+            this.filtered.push(filter);
+            event.name = this.name;
+            action = 'add';
+        }
+        filter.checked = !filter.checked;
+        filter.type = filter.type || this.type;
+        event.action = action;
+        event.item = filter;
+        event.isProperty = this.isProperty;
+        event.name = this.name || filter.name;
+        window.scrollTo(0, 0);
+        this.applyFilter.emit(event);
+    }
+
+    loadMore() {
+        let loadMethod;
+        if (this.isProperty) {
+            loadMethod = this.searchService.moreProperties(this.type, this.name, {
+                limit: this.limit,
+                offset: this.offset
+            });
+        } else {
+            loadMethod = this.searchService.moreFilters(this.type, this.name, {
+                limit: this.limit,
+                offset: this.offset
+            });
+        }
+        loadMethod
+            .subscribe((filters) => {
+                this.items.push(...filters);
+                this.hasMore = filters.length === this.limit;
+                this.offset += this.limit;
+            });
+    }
+
+    isFilterCollapsed() {
+        return this.isCollapsed;
+    }
+
+    toggleFilterCollapsed() {
+        this.isCollapsed = !this.isCollapsed;
+    }
+}

seed-files/modules/directory/directory/components/filters/filter-group/filter-group.template.html

+<div class="filter u-spacerBottom" *ngIf="items.length">
+    <div  [ngClass]="isFilterCollapsed() ? 'u-plusSymbol t-primary' : 'u-minusSymbol'" class="u-textRight u-floatRight t-large u-cursorPointer t-bold" (click)="toggleFilterCollapsed()"></div>
+    <h3 class="u-textCapitalize b-color">{{name}}</h3>
+    <ul *ngIf="!isFilterCollapsed()">
+        <li *ngFor="let filter of items"(click)="filterAction(filter)" class="u-cursorPointer">
+            <div *ngIf="!isHidden(filter)">
+                <span class="filter-name t-black u-textTruncate">
+                    <i class="icon t-primary" [class.o-checkbox-unchecked]="!filter.checked" [class.o-checkbox-checked]="filter.checked" *ngIf="!isProperty"></i>
+                    <i class="icon o-close" *ngIf="remove"></i>
+                    {{filter.name}}
+                </span>
+                <span class="filter-count t-light u-block u-textRight u-floatRight">{{filter.count}}</span>
+            </div>
+        </li>
+    </ul>
+    <div class="u-textCenter u-cursorPointer t-bold t-primary" *ngIf="hasMore" (click)="loadMore()">More</div>
+</div>

seed-files/modules/directory/directory/components/filters/filter-types/filter-type-checkbox.ts

+

seed-files/modules/directory/directory/components/filters/filters.component.ts

+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FiltersEventAdd } from './filters.event';
+
+@Component({
+    selector: 'filters',
+    templateUrl: 'filters.template.html'
+})
+export class FiltersComponent {
+    @Input() filters;
+    @Input() list = [];
+    @Input() type: string;
+    @Output('updateQuery') updateQuery = new EventEmitter();
+    query = { properties: {} };
+    moreVisible: boolean = false;
+
+    applyFilter(filter: FiltersEventAdd) {
+        switch (filter.action) {
+            case 'add':
+                this.addFilter(filter);
+                break;
+            case 'remove':
+                this.removeFilter(filter);
+                break;
+            default:
+                break;
+        }
+        this.updateQuery.emit(this.query);
+    }
+
+    addFilter(filter) {
+        if (filter.isProperty && filter.name) {
+            const name = filter.item.name;
+            const type = filter.name;
+            this.query.properties[ type ] = this.query.properties[ type ] || [];
+            this.query.properties[ type ].push({ name, type, checked: true });
+        } else {
+            const id = filter.item.id;
+            const type = filter.name;
+            this.query[ type ] = this.query[ type ] || [];
+            this.query[ type ].push({ id });
+        }
+    }
+
+    getProperties() {
+        let properties = [];
+        Object.keys(this.query.properties).forEach((property) => {
+            Object.keys(this.query.properties[ property ]).forEach((p) => {
+                if (!properties.includes(this.query.properties[ property ][ p ])) {
+                    properties.push(this.query.properties[ property ][ p ]);
+                }
+            });
+        });
+        return properties;
+    }
+
+    removeFilter(filter) {
+        if (filter.isProperty) {
+            const name = filter.item.name;
+            const type = filter.item.type;
+            this.query.properties[ type ] = this.query.properties[ type ].filter((propertyFilter) => propertyFilter.name !== name);
+        } else {
+            const id = filter.item.id;
+            const type = filter.name;
+            this.query[ type ] = this.query[ type ].filter((propertyFilter) => propertyFilter.id !== id);
+        }
+    }
+
+    onToggleMore() {
+        this.moreVisible = !this.moreVisible;
+    }
+}

seed-files/modules/directory/directory/components/filters/filters.event.ts

+import { Injectable } from '@angular/core';
+/**
+ * FlashmessageEvent
+ */
+@Injectable()
+export class FiltersEventAdd {
+    public item;
+    public action;
+    public name;
+    public isProperty;
+}

seed-files/modules/directory/directory/components/filters/filters.module.ts

+import { NgModule } from '@angular/core';
+
+// Modules
+import { AppCommonModule } from '../../../../commons/modules/common.module';
+import { KeysPipeModule } from '../../../../commons/pipes/keys/keys.pipe.module';
+
+// Components
+import { FiltersComponent } from './filters.component';
+import { FilterGroupComponent } from './filter-group/filter-group.component';
+import { FiltersEventAdd } from './filters.event';
+
+@NgModule({
+    imports: [
+        AppCommonModule,
+        KeysPipeModule
+    ],
+    declarations: [
+        FiltersComponent,
+        FilterGroupComponent
+    ],
+    providers: [
+        FiltersEventAdd
+    ],
+    exports: [
+        FiltersComponent
+    ]
+})
+export class FiltersModule {}

seed-files/modules/directory/directory/components/filters/filters.template.html

+<div class="panel">
+    <h2 class="t-small t-light">Filters</h2>
+    <filter-group
+        [items]="getProperties()"
+        remove="true"
+        (applyFilter)="applyFilter($event)"
+        isProperty="true">
+    </filter-group>
+    <div *ngFor="let filter of list">
+        <filter-group
+            [type]="type"
+            [items]="filters[filter.name]"
+            [name]="filter.name"
+            (applyFilter)="applyFilter($event)"
+            [isProperty]="filter.isProperty"
+            *ngIf="!filter.isProperty">
+        </filter-group>
+    </div>
+
+    <button type="button"
+            class="transparent t-primary u-block centered"
+            (click)="onToggleMore()"
+            [ngSwitch]="moreVisible"
+            *ngIf="moreAvailable">
+        <span *ngSwitchCase="true">Less</span>
+        <span *ngSwitchDefault>More</span>
+    </button>
+</div>

seed-files/modules/directory/directory/components/groups/group-directory.component.ts

+import { Component, OnDestroy, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AbstractDirectory } from '../abstract-directory';
+import { SubMenuService } from '../../../../components/sub-menu/sub-menu.service';
+import { GroupService } from '../../../../commons/services/group/group.service';
+import { SearchService } from '../../../../commons/services/search/search.service';
+import { GroupRelationService } from '../../../../commons/services/group/group.relation';
+import { Group } from '../../../../commons/interfaces/group/group.interface';
+import { Filter } from '../../../../commons/interfaces/filters/filters.interface';
+
+@Component({
+    selector: 'group-directory',
+    templateUrl: './group-directory.template.html'
+})
+export class GroupDirectoryComponent extends AbstractDirectory implements OnDestroy {
+    filterName: string = 'groups';
+    searchFilters: Array<Filter>;
+    loadingMoreItems: boolean = false;
+    list = [ { name: 'sites' }, { name: 'categories' }, { name: 'users' } ];
+
+    constructor(protected searchService: SearchService,
+                protected route: ActivatedRoute,
+                private router: Router,
+                private groupService: GroupService,
+                private subMenuService: SubMenuService,
+                private groupRelationService: GroupRelationService) {
+        super(searchService);
+        route.data.subscribe((data: any) => {
+            this.searchResults = data.searchFilters.groups;
+            this.searchFilters = data.searchFilters.filter;
+            this.offset = this.searchFilters.length;
+            this.hasNext = this.offset === this.limit;
+        });
+        this.buildSubMenu();
+        this.autoSelectItem();
+    }
+
+    ngOnDestroy() {
+        this.subMenuService.initialMenuState();
+    }
+
+    updateQuery(query) {
+        this.query = query;
+        this.resetSearch();
+        this.load();
+    }
+
+    load() {
+        if (!this.hasMore()) return;
+        this.loadingMoreItems = true;
+        this.queryInProgress = true;
+        const currentSearch = JSON.parse(JSON.stringify(this.currentSearch));
+        const currentQuery = JSON.stringify(this.query);
+        this.searchService.searchFiltersGroups(this.query, {
+            limit: this.limit,
+            offset: this.offset,
+            query: this.currentSearch
+        })
+            .filter(() => currentSearch === this.currentSearch && currentQuery === JSON.stringify(this.query))
+            .switchMap(results => this.mapResults(results.groups))
+            .subscribe(() => this.loadingMoreItems = false);
+    }
+
+    buildSubMenu() {
+        const actions = [
+            { id: 1, action: this.onClickCreate.bind(this), title: 'Create a group' },
+        ];
+        this.subMenuService.replaceActionItem(actions);
+    }
+
+    onClickCreate() {
+        this.router.navigate([ '/group', 'create' ]);
+    }
+
+    isMember() {
+        return this.groupRelationService.isMember(<Group>this.activeItem);
+    }
+
+    toggleJoin() {
+        if (this.isMember()) {
+            this.groupService.leave(<Group>this.activeItem);
+            this.groupRelationService.leave(<Group>this.activeItem);
+        } else {
+            this.groupService.join(<Group>this.activeItem);
+            this.groupRelationService.join(<Group>this.activeItem);
+        }
+    }
+
+    approveGroup() {
+        this.groupService.approveGroup(this.activeItem[ 'id' ]).subscribe(() => this.activeItem[ 'approved' ] = true);
+    }
+
+    dismissGroup() {
+        this.groupService.disableGroup(this.activeItem[ 'id' ]).subscribe(() => {
+            this.searchResults = this.searchResults.filter((result) => result.id !== this.activeItem[ 'id' ]);
+            this.activeItem = false;
+        });
+    }
+}

seed-files/modules/directory/directory/components/groups/group-directory.module.ts

+import { NgModule } from '@angular/core';
+
+// Routing
+import { groupDirectoryRouting } from './group-directory.routing';
+
+// Modules
+import { AppCommonModule } from '../../../../commons/modules/common.module';
+import { FiltersModule } from '../filters/filters.module';
+import { ResultListModule } from '../result-list/result-list-module';
+import { ProfilePicModule } from '../../../../elements/profile-pic/profile-pic.module';
+import { CoverPicModule } from '../../../../components/cover-pic/cover-pic.module';
+
+// Providers
+import { SearchGroupResolver, SearchFiltersGroupResolver } from '../../../../commons/services/search/search.resolver';
+
+// Components
+import { GroupDirectoryComponent } from './group-directory.component';
+
+@NgModule({
+    imports: [
+        groupDirectoryRouting,
+        AppCommonModule,
+        FiltersModule,
+        ResultListModule,
+        ProfilePicModule,
+        CoverPicModule
+    ],
+    declarations: [
+        GroupDirectoryComponent
+    ],
+    providers: [
+        SearchGroupResolver,
+        SearchFiltersGroupResolver
+    ]
+})
+export class GroupDirectoryModule {}

seed-files/modules/directory/directory/components/groups/group-directory.routing.ts

+import { RouterModule, Routes } from '@angular/router';
+import { GroupDirectoryComponent } from './group-directory.component';
+import { SearchGroupResolver, SearchFiltersGroupResolver } from '../../../../commons/services/search/search.resolver';
+
+export const groupDirectoryRoutes: Routes = [
+    {
+        path: '', component: GroupDirectoryComponent,
+        data: {
+            title: 'Directory Group'
+        },
+        resolve: {
+            searchFilters: SearchFiltersGroupResolver
+        }
+    }
+];
+export const groupDirectoryRouting = RouterModule.forChild(groupDirectoryRoutes);

seed-files/modules/directory/directory/components/groups/group-directory.template.html

+<div class="content directory">
+    <div class="directory-filters">
+        <filters [filters]="searchFilters" (updateQuery)="updateQuery($event)" [list]="list" type="groups"></filters>
+    </div>
+    <div class="directory-list">
+        <result-list [(searchResults)]="searchResults"
+                     [filterName]="filterName"
+                     (activeItem)="activeItem"
+                     [queryInProgress]="queryInProgress"
+                     (newSearch)="newSearch($event)"
+                     (loadPage)="loadPagination($event)"
+                     (newSelectedItem)="newSelectedItem($event)">
+        </result-list>
+    </div>
+    <div class="directory-display">
+        <div class="panel">
+            <div class="display-holder u-textCenter u-spacerTop" *ngIf="!activeItem">
+                <div class="display-holder_content">
+                    <img class="u-spacerBottom" src="/assets/images/directory/holder.png" alt="">
+                    <p class="t-bold">Select a group to view more detail about it</p>
+                </div>
+            </div>
+            <div class="display-content" *ngIf="activeItem">
+                <div class="cover u-posRelative directory-profile u-spacerBottom">
+                    <cover-pic size="auto" [img]="activeItem.coverImageUrl"></cover-pic>
+                    <div class="directory-details u-textCenter u-posRelative">
+                        <div class="profile-pic">
+                            <profile-pic [img]="activeItem.profileImageUrl" [size]="'medium'"></profile-pic>
+                        </div>
+                        <h2 class="t-white">{{activeItem.name}}</h2>
+                        <p class="t-white t-large u-noMargin">{{activeItem.category}}</p>
+                    </div>
+                </div>
+                <div class="directory-action-group clearfix u-spacerTop u-textRight">
+                    <button type="button" class="primary"
+                            (click)="toggleJoin()"
+                            [ngSwitch]="isMember()"
+                            [ngClass]="{'invert': !isMember()}"
+                            *ngIf="activeItem.approved">
+                        <span *ngSwitchCase="true">Leave</span>
+                        <span *ngSwitchDefault>Join</span>
+                    </button>
+                    <button type="button"
+                            class="primary"
+                            [can]="['operator']"
+                            (click)="approveGroup()"
+                            *ngIf="!activeItem.approved">Approve
+                    </button>
+                    <button type="button"
+                            class="primary"
+                            [can]="['operator']"
+                            (click)="dismissGroup()"
+                            *ngIf="!activeItem.approved">Dismiss
+                    </button>
+                </div>
+                <div class="directory-intro clearfix">
+                    <h3 class="t-light">Introduction</h3>
+                    <h4 class="t-underline b-color">About {{activeItem.name}}</h4>
+                    <p>{{activeItem.description}}</p>
+                </div>
+                <div class="directory-options clearfix u-spacerBottom">
+                    <a [routerLink]="['/group', activeItem.id]">
+                        <div class="profile-pic u-inlineBlock">
+                            <profile-pic [img]="activeItem.profileImageUrl"></profile-pic>
+                        </div>
+                        View group
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

seed-files/modules/directory/directory/components/result-list/components/result-list-company/result-list-company.component.ts

+import { Component, Input } from '@angular/core';
+import { CompanyService } from '../../../../../../commons/services/company/company.service';
+
+@Component({
+    selector: 'result-list-company',
+    templateUrl: 'result-list-company.template.html'
+})
+export class ResultListCompany {
+    @Input('item') item;
+
+    constructor(private companyService: CompanyService) {
+    }
+
+    enableItem() {
+        this.companyService.enableCompany(this.item.id).subscribe(() => this.item.enabled = false);
+    }
+}

seed-files/modules/directory/directory/components/result-list/components/result-list-company/result-list-company.template.html

+<span class="profile"><profile-pic [img]="item.profileImageUrl"></profile-pic></span>
+<span class="name"><p class="u-textTruncate">{{ item.name }}</p></span>
+<span class="area"><p class="t-light u-textTruncat">{{ item.area }}</p></span>
+<span class="action u-textRight" [ngSwitch]="item.enabled">
+    <button type="button"
+            class="danger t-small full"
+            *ngSwitchCase="false"
+            (cdivck)="enableItem()">Unsuspend</button>
+</span>

seed-files/modules/directory/directory/components/result-list/components/result-list-group/result-list-group.component.ts

+import { Component, Input } from '@angular/core';
+import { GroupService } from '../../../../../../commons/services/group/group.service';
+import { GroupRelationService } from '../../../../../../commons/services/group/group.relation';
+import { Group } from '../../../../../../commons/interfaces/group/group.interface';
+
+@Component({
+    selector: 'result-list-group',
+    templateUrl: 'result-list-group.template.html'
+})
+export class ResultListGroup {
+    @Input('item') item;
+
+    public constructor(private groupService: GroupService, private groupRelationService: GroupRelationService) {
+    }
+
+    toggleJoin(group: Group): void {
+        if (this.isMember()) {
+            this.groupService.leave(group).subscribe();
+            this.groupRelationService.leave(this.item);
+        } else {
+            this.groupService.join(group).subscribe();
+            this.groupRelationService.join(this.item);
+        }
+    }
+
+    isMember() {
+        return this.groupRelationService.isMember(this.item);
+    }
+
+    enableItem() {
+        this.groupService.enableGroup(this.item.id).subscribe(() => this.item.enabled = false);
+    }
+}

seed-files/modules/directory/directory/components/result-list/components/result-list-group/result-list-group.template.html

+<span class="profile"><profile-pic [img]="item.profileImageUrl"></profile-pic></span>
+<span class="name"><p class="u-textTruncate">{{ item.name }}</p></span>
+<span class="description"><p class="t-light u-textTruncate">{{ item.description }}</p></span>
+<span class="connections"></span>
+<span class="action" *ngIf="!item.approved"><p class="t-light">Awaiting Approval</p></span>
+<span class="action u-textRight" *ngIf="item.approved">
+    <button type="button"
+            class="danger t-small full"
+            *ngIf="!item.enabled"
+            (click)="enableItem()">
+        Unsuspend
+    </button>
+    <button type="button"
+            class="primary t-small full"
+            *ngIf="item.enabled"
+            [ngClass]="{'invert': !isMember()}"
+            (click)="toggleJoin(item)"
+            [ngSwitch]="isMember()">
+        <span *ngSwitchCase="true">Leave</span>
+        <span *ngSwitchDefault>Join</span>
+    </button>
+</span>

seed-files/modules/directory/directory/components/result-list/components/result-list-user/result-list-user.component.ts

+import { Component, Input } from '@angular/core';
+import { UserService } from '../../../../../../commons/services/user/user.service';
+import { UserRelationService } from '../../../../../../commons/services/user/user.relation';
+import { User } from '../../../../../../commons/interfaces/user/user.interface';
+
+@Component({
+    selector: 'result-list-user',
+    templateUrl: 'result-list-user.template.html'
+})
+export class ResultListUser {
+    @Input('item') item;
+
+    public constructor(public userService: UserService, private userRelationService: UserRelationService) {
+    }
+
+    toggleFollow(user: User): void {
+        if (this.isFollowing()) {
+            this.userService.unFollow(user).subscribe();
+        } else {
+            this.userService.follow(user).subscribe();
+        }
+    }
+
+    isFollowing() {
+        return this.userRelationService.isFollowing(this.item);
+    }
+
+    enableItem() {
+        this.userService.enableUser(this.item.id).subscribe(() => this.item.enabled = false);
+    }
+}

seed-files/modules/directory/directory/components/result-list/components/result-list-user/result-list-user.template.html

+<span class="profile"><profile-pic [img]="item.profileImageUrl"></profile-pic></span>
+<span class="name"><p class="u-textTruncate">{{ item.firstName }} {{ item.lastName }}</p></span>
+<span class="company"><p class="t-light u-textTruncate">{{ item.defaultCompany }}</p></span>
+<span class="connections">
+    <!--<p class="t-light" *ngIf="item.contacts">
+        <i class="icon o-link"></i>
+        {{ item.contacts.length > 0 ? item.contacts.length : 'no mutual connections' }}
+    </p>-->
+</span>
+<span class="action u-textRight" [ngSwitch]="item.enabled">
+    <button type="button" class="danger t-small full"
+            *ngSwitchCase="false"
+            (click)="enableItem()">
+        Unsuspend
+    </button>
+    <button *ngSwitchDefault
+            type="button"
+            class="primary t-small full"
+            (click)="toggleFollow(item)"
+            [ngSwitch]="isFollowing()"
+            [ngClass]="{'invert': !isFollowing()}">
+        <span *ngSwitchCase="true">Unfollow</span>
+        <span *ngSwitchCase="false">Follow</span>
+    </button>
+</span>

seed-files/modules/directory/directory/components/result-list/result-list-module.ts

+import { NgModule } from '@angular/core';
+
+// Modules
+import { InfiniteScrollModule } from 'angular2-infinite-scroll/angular2-infinite-scroll';
+import { AppCommonModule } from '../../../../commons/modules/common.module';
+import { ProfilePicModule } from '../../../../elements/profile-pic/profile-pic.module';
+
+// Components
+import { ResultListComponent } from './result-list.component';
+import { ResultListUser } from './components/result-list-user/result-list-user.component';
+import { ResultListGroup } from './components/result-list-group/result-list-group.component';
+import { ResultListCompany } from './components/result-list-company/result-list-company.component';
+
+@NgModule({
+    imports: [
+        ProfilePicModule,
+        AppCommonModule,
+        InfiniteScrollModule
+    ],
+    declarations: [
+        ResultListComponent,
+        ResultListCompany,
+        ResultListGroup,
+        ResultListUser
+    ],
+    exports: [
+        ResultListComponent,
+        ResultListCompany,
+        ResultListGroup,
+        ResultListUser
+    ]
+})
+export class ResultListModule {}

seed-files/modules/directory/directory/components/result-list/result-list.component.ts

+import { Component, ViewChild, Input, EventEmitter, Output } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'result-list',
+    templateUrl: 'result-list.template.html'
+})
+export class ResultListComponent {
+    @Input() filterName: string;
+    @Input() searchResults: Array<Object>;
+    @Input() activeItem: Object;
+    @Input() queryInProgress: boolean;
+
+    @Output() newSelectedItem: EventEmitter<any> = new EventEmitter();
+    @Output() newSearch: EventEmitter<any> = new EventEmitter();
+    @Output() loadPage: EventEmitter<any> = new EventEmitter();
+
+    @ViewChild('searchQueryInput') private searchQueryInput;
+
+    public constructor(private route: ActivatedRoute) {
+    }
+
+    public onItemSelect(item: any): void {
+        this.activeItem = item;
+        this.newSelectedItem.emit(item);
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe((params: Object) => {
+            if (params[ 'search' ]) {
+                this.searchQueryInput.nativeElement.value = params[ 'search' ];
+            }
+        });
+        Observable
+            .fromEvent(this.searchQueryInput.nativeElement, 'keydown')
+            .debounceTime(200)
+            .distinctUntilChanged()
+            .do(event => this.newSearch.emit(event[ 'target' ].value))
+            .subscribe();
+    }
+
+    loadPagination() {
+        this.loadPage.emit(true);
+    }
+}

seed-files/modules/directory/directory/components/result-list/result-list.styles.scss

+//
+// Result list
+//
+.result-list {
+    padding: 0;
+    .result-list-head {
+        @extend %clearfix;
+        border-bottom: 1px solid;
+        padding: .5em .5em 0;
+        i {
+            @include span(1);
+            @include bp-mobile {
+                @include span(2);
+            }
+        }
+        input[type="text"] {
+            @include span(15 last);
+            @include bp-mobile {
+                @include span(14 last);
+            }
+            margin: 0;
+            padding: 0;
+            height: 32px;
+            border: none;
+        }
+    }
+    .result-list-body {
+        overflow: auto;
+        max-height: 75vh;
+        padding: .5em 1em;
+        ul li {
+            @extend %clearfix;
+            @include transition(0.3s, ease-in-out);
+            cursor: pointer;
+            padding: 0 3px;
+            border-bottom: 1px solid;
+
+            &:last-child {
+                border: none;
+            }
+            .photo {
+                float: left;
+                margin: 5px 0 0;
+            }
+            > p {
+                padding-top: 1em;
+            }
+        }
+    }
+}

seed-files/modules/directory/directory/components/result-list/result-list.template.html

+<div class="result-list panel">
+    <div class="result-list-head b-inner-color">
+        <i class="u-alignMiddle icon o-search large t-light"></i>
+        <input autofocus
+               #searchQueryInput
+               type="text"
+               ng-model="listQuery"
+               placeholder="Filter">
+    </div>
+    <div class="result-list-body"
+         infinite-scroll
+         [infiniteScrollDistance]="2"
+         [infiniteScrollThrottle]="300"
+         [scrollWindow]="false"
+         (scrolled)="loadPagination()">
+        <ul class="clearfix">
+            <li *ngIf="searchResults.length === 0 && !queryInProgress" class="b-inner-color u-textCenter">
+                <p>There are no results to display.</p>
+            </li>
+            <li *ngFor="let item of searchResults"
+                (click)="onItemSelect(item)"
+                [class.active]="activeItem && activeItem.id === item.id"
+                class="b-inner-color">
+                <div [ngSwitch]="filterName" class="h-primary clearfix">
+                    <result-list-company *ngSwitchCase="'companies'" [item]="item"></result-list-company>
+                    <result-list-group *ngSwitchCase="'groups'" [item]="item"></result-list-group>
+                    <result-list-user *ngSwitchCase="'users'" [item]="item"></result-list-user>
+                </div>
+            </li>
+        </ul>
+        <div *ngIf="queryInProgress" class="u-posRelative u-spacerBottom">
+            <spinner></spinner>
+        </div>
+    </div>
+</div>

seed-files/modules/directory/directory/components/users/user-directory.component.ts

+import { Component, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AbstractDirectory } from '../abstract-directory';
+import { UserService } from '../../../../commons/services/user/user.service';
+import { SearchService } from '../../../../commons/services/search/search.service';
+import { UserRelationService } from '../../../../commons/services/user/user.relation';
+import { User } from '../../../../commons/interfaces/user/user.interface';
+import { Filter } from '../../../../commons/interfaces/filters/filters.interface';
+
+@Component({
+    selector: 'user-directory',
+    templateUrl: './user-directory.template.html'
+})
+export class UserDirectoryComponent extends AbstractDirectory {
+    filterName: string = 'users';
+    moreAvailable: boolean = false;
+    searchFilters: Array<Filter>;
+    list = [
+        { name: 'sites' },
+        { name: 'companies' },
+        // { name: 'skills', isProperty: true }, // TODO (gabs) : Remove attributes relating to the new data types
+        { name: 'occupation', isProperty: true, isCollapsed: true },
+        // { name: 'interests', isProperty: true, isCollapsed: true }, // TODO (gabs) : Remove attributes relating to the new data types
+        { name: 'groups', isCollapsed: false }
+    ];
+    loadingMoreItems: boolean = false;
+
+    constructor(protected searchService: SearchService,
+                protected route: ActivatedRoute,
+                private userService: UserService,
+                private relationUserService: UserRelationService) {
+        super(searchService);
+        route.data.subscribe((data: any) => {
+            this.searchResults = data.searchFilters.users;
+            this.searchFilters = data.searchFilters.filter;
+            this.offset = this.searchResults.length;
+            this.hasNext = this.offset === this.limit;
+        });
+        this.moreAvailable = this.searchFilters.length > 9; // If any of the filter groups contain more than 9 filters
+        this.autoSelectItem();
+    }
+
+    load() {
+        if (!this.hasMore()) return;
+        this.loadingMoreItems = true;
+        this.queryInProgress = true;
+        const currentSearch = JSON.parse(JSON.stringify(this.currentSearch));
+        const currentQuery = JSON.stringify(this.query);
+        this.searchService.searchFiltersUsers(this.query, {
+            limit: this.limit,
+            offset: this.offset,
+            query: this.currentSearch
+        })
+            .filter(() => currentSearch === this.currentSearch && currentQuery === JSON.stringify(this.query))
+            .switchMap(results => {
+                this.searchFilters = results.filter;
+                return this.mapResults(results.users);
+            })
+            .subscribe(() => this.loadingMoreItems = false);
+    }
+
+    updateQuery(query) {
+        this.query = query;
+        this.resetSearch();
+        this.load();
+    }
+
+    isFollowing() {
+        return this.relationUserService.isFollowing(<User>this.activeItem);
+    }
+
+    onToggleFollow() {
+        if (!this.isFollowing()) {
+            this.userService.follow(<User>this.activeItem).subscribe();
+        } else {
+            this.userService.unFollow(<User>this.activeItem).subscribe();
+        }
+    }
+}

seed-files/modules/directory/directory/components/users/user-directory.module.ts

+import { NgModule } from '@angular/core';
+
+// Routing
+import { userDirectoryRouting } from './user-directory.routing';
+
+// Modules
+import { AppCommonModule } from '../../../../commons/modules/common.module';
+import { FiltersModule } from '../filters/filters.module';
+import { ResultListModule } from '../result-list/result-list-module';
+import { ProfilePicModule } from '../../../../elements/profile-pic/profile-pic.module';
+import { CoverPicModule } from '../../../../components/cover-pic/cover-pic.module';
+
+// Providers
+import { SearchUserResolver, SearchFiltersUserResolver } from '../../../../commons/services/search/search.resolver';
+
+// Components
+import { UserDirectoryComponent } from './user-directory.component';
+
+@NgModule({
+    imports: [
+        userDirectoryRouting,
+        AppCommonModule,
+        FiltersModule,
+        ResultListModule,
+        ProfilePicModule,
+        CoverPicModule
+    ],
+    declarations: [
+        UserDirectoryComponent
+    ],
+    providers: [
+        SearchUserResolver,
+        SearchFiltersUserResolver
+    ]
+})
+export class UsersDirectoryModule {}

seed-files/modules/directory/directory/components/users/user-directory.routing.ts

+import { RouterModule, Routes } from '@angular/router';
+import { UserDirectoryComponent } from './user-directory.component';
+import { SearchUserResolver, SearchFiltersUserResolver } from '../../../../commons/services/search/search.resolver';
+
+export const userDirectoryRoutes: Routes = [
+    {
+        path: '', component: UserDirectoryComponent,
+        data: {
+            title: 'User directory'
+        },
+        resolve: {
+            searchFilters: SearchFiltersUserResolver
+        }
+    }
+];
+export const userDirectoryRouting = RouterModule.forChild(userDirectoryRoutes);

seed-files/modules/directory/directory/components/users/user-directory.template.html

+<div class="content directory">
+    <div class="directory-filters">
+        <filters [filters]="searchFilters" (updateQuery)="updateQuery($event)" [list]="list" type="users"></filters>
+    </div>
+    <div class="directory-list">
+        <result-list [(searchResults)]="searchResults"
+                     [filterName]="filterName"
+                     [(activeItem)]="activeItem"
+                     [queryInProgress]="queryInProgress"
+                     (newSearch)="newSearch($event)"
+                     (loadPage)="loadPagination($event)"
+                     (newSelectedItem)="newSelectedItem($event)">
+        </result-list>
+    </div>
+    <div class="directory-display">
+        <div class="panel">
+            <div class="display-holder u-textCenter u-spacerTop" *ngIf="!activeItem">
+                <div class="display-holder_content">
+                    <img class="u-spacerBottom" src="/assets/images/directory/holder.png" alt="Search a User">
+                    <p class="t-bold">Search the directory to find who you are looking for...</p>
+                </div>
+            </div>
+            <div class="display-content" *ngIf="activeItem">
+                <div class="cover u-posRelative directory-profile u-spacerBottom">
+                    <cover-pic size="auto" [img]="activeItem.coverImageUrl"></cover-pic>
+                    <div class="directory-details u-textCenter u-posRelative">
+                        <div class="profile-pic">
+                            <profile-pic [img]="activeItem.profileImageUrl" [size]="'medium'"></profile-pic>
+                        </div>
+                        <h2 class="t-white">{{activeItem.firstName}} {{activeItem.lastName}}</h2>
+                        <p class="t-white t-large u-noMargin">{{activeItem.occupation}}</p>
+                    </div>
+                </div>
+                <div class="directory-stats t-small clearfix u-spacerBottom u-spacerTop">
+                    <ul class="u-textCenter">
+                        <li><span class="t-bold t-black t-large u-block">{{activeItem.followersCount || 0}}</span> Followers</li>
+                        <li><span class="t-bold t-black t-large u-block">{{activeItem.followingCount || 0}}</span> Following</li>
+                        <li><span class="t-bold t-black t-large u-block">{{activeItem.postCount || 0}}</span> Posts</li>
+                    </ul>
+                </div>
+                <div class="directory-action-user u-spacerTop">
+                    <button type="button" class="primary"
+                            [disabled]="!activeItem.enabled"
+                            (click)="onToggleFollow()"
+                            [ngSwitch]="isFollowing()"
+                            [ngClass]="{'invert': !isFollowing()}">
+                        <span *ngSwitchCase="true">Unfollow</span>
+                        <span *ngSwitchDefault>Follow</span>
+                    </button>
+                </div>
+                <div class="directory-intro clearfix">
+                    <h3 class="t-light">Introduction</h3>
+                    <h4 class="t-underline b-color">About {{activeItem.firstName}}</h4>
+                    <p>{{activeItem.intro}}</p>
+                </div>
+                <div class="directory-options clearfix u-spacerBottom">
+                    <a [routerLink]="['/profile', activeItem.id]">
+                        <div class="profile-pic u-inlineBlock">
+                            <profile-pic [img]="activeItem.profileImageUrl"></profile-pic>
+                        </div>
+                        View Profile
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

seed-files/modules/directory/directory/directory.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'directory',
+    templateUrl: './directory.template.html',
+})
+export class DirectoryComponent {
+    pageTitle: string = 'Directory';
+    menuItems: Array<Object>;
+
+    ngOnInit() {
+        this.menuItems = [
+            { id: 1, state: ['/directory/users'], title: 'Users' },
+            { id: 2, state: ['/directory/companies'], title: 'Companies' },
+            { id: 4, state: ['/directory/groups'], title: 'Groups' },
+        ];
+    }
+}

seed-files/modules/directory/directory/directory.module.ts

+import { NgModule } from '@angular/core';
+
+// Routing
+import { directoryRoutes } from './directory.routing';
+
+// Modules
+import { AppCommonModule } from '../../commons/modules/common.module';
+import { SubMenuModule } from '../../components/sub-menu/sub-menu.module';
+
+// Services
+import { GroupService } from '../../commons/services/group/group.service';
+import { GroupRelationService } from '../../commons/services/group/group.relation';
+import { CompanyService } from '../../commons/services/company/company.service';
+
+// Components
+import { DirectoryComponent } from './directory.component';
+
+@NgModule({
+    imports: [
+        directoryRoutes,
+        AppCommonModule,
+        SubMenuModule
+    ],
+    declarations: [
+        DirectoryComponent,
+    ],
+    providers: [
+        CompanyService,
+        GroupService,
+        GroupRelationService
+    ]
+})
+export class DirectoryModule {}

seed-files/modules/directory/directory/directory.routing.ts

+import { RouterModule } from '@angular/router';
+import { DirectoryComponent } from './directory.component';
+
+export const directoryRoutes = RouterModule.forChild([
+    {
+        path: '', component: DirectoryComponent,
+        children: [
+            {
+                path: 'users', loadChildren: () => new Promise(resolve => {
+                    require.ensure([], require => {
+                        resolve(require('./components/users/user-directory.module.ts').UsersDirectoryModule);
+                    });
+                })
+            },
+            {
+                path: 'companies',
+                loadChildren: () => new Promise(resolve => {
+                    require.ensure([], require => {
+                        resolve(require('./components/companies/company-directory.module').CompanyDirectoryModule);
+                    });
+                })
+            },
+            {
+                path: 'groups', loadChildren: () => new Promise(resolve => {
+                    require.ensure([], require => {
+                        resolve(require('./components/groups/group-directory.module').GroupDirectoryModule);
+                    });
+                })
+            }
+        ]
+    }
+]);

seed-files/modules/directory/directory/directory.style.scss

+//
+// Directory
+//
+@import 'components/result-list/result-list.styles';
+
+.directory {
+    margin-top: $page-top-margin * 3;
+    .directory-filters {
+        @include span(3);
+        @include bp-tablet {
+            display: none;
+        }
+        .panel {
+            padding: 1em;
+            .filter {
+                h3 {
+                    border-bottom: 1px solid;
+                }
+                li {
+                    @extend %clearfix;
+                    .filter-name {
+                        @include span(13);
+                    }
+                    .filter-count {
+                        @include span(2);
+                    }
+                }
+            }
+        }
+    }
+    .directory-list {
+        @include span(9);
+        @include bp-tablet {
+            @include span(16);
+        }
+        .result-list.panel {
+            .result-list-body {
+                .profile {
+                    @include span(2);
+                    @include bp-mobile {
+                        @include span(3);
+                    }
+                }
+                .name {
+                    @include span(4);
+                    @include bp-mobile {
+                        @include span(5);
+                    }
+                    margin: .9em 0 0;
+                }
+                .company, .description {
+                    @include span(4);
+                    @include bp-mobile {
+                        @include span(5);
+                    }
+                    margin: .9em 0 0;
+                }
+                .area {
+                    @include span(8);
+                }
+                .connections {
+                    @include span(4);
+                    @include bp-mobile {
+                        display: none;
+                    }
+                    margin: .9em 0 0;
+                }
+                .action {
+                    @include span(2);
+                    @include bp-mobile {
+                        @include span(3);
+                    }
+                    margin: .9em 0 0;
+                    padding-right: 2px;
+                }
+            }
+        }
+    }
+    .directory-display {
+        @include span(4);
+        @include bp-tablet {
+            @include span(16);
+        }
+        .panel {
+            @include span(16);
+            @include bp-tablet {
+                min-height: 0;
+            }
+            .display-holder, .display-content {
+                &.ng-hide-add {
+                    @include fade(1, 0, .3s ease);
+                    position: absolute;
+                }
+            }
+            .display-holder {
+                @include bp-tablet {
+                    padding: 2em;
+                }
+                .display-holder_content {
+                    @include span(8);
+                    @include push(4);
+                }
+            }
+            .directory-profile {
+                @extend %clearfix;
+                @include span(16);
+                .directory-details {
+                    @include span(16);
+                    .profile-pic {
+                        margin-top: 1em;
+                        @include bp-tablet {
+                            margin-top: 1em;
+                        }
+                    }
+                    .company-pic {
+                        top: .9em;
+                        left: .8em;
+                    }
+                    .directory-social {
+                        top: 1em;
+                        right: 1em;
+                    }
+                }
+            }
+            .directory-info {
+                @extend %clearfix;
+                .directory-address, .directory-other {
+                    @include push(2);
+                    @include span(5);
+                }
+            }
+            .directory-action-user {
+                @include span(4 last);
+            }
+            .directory-action-group {
+                @include span(14);
+            }
+            .directory-stats {
+                @include push(4);
+                @include span(8);
+                li {
+                    @include gallery(4 of 12);
+                    @include bp-tablet {
+                        @include gallery(3 of 9);
+                    }
+                }
+            }
+            .directory-intro {
+                @include span(16);
+                h3, h4, p {
+                    margin-left: 1em;
+                    margin-right: 1em;
+                }
+            }
+            .directory-options {
+                @include span(16);
+                .profile-pic {
+                    .diamond {
+                        top: 3px;
+                        width: 15px;
+                        height: 15px;
+                        margin-bottom: 0;
+                        margin-right: 13px;
+                    }
+                }
+            }
+        }
+    }
+}

seed-files/modules/directory/directory/directory.template.html

+<sub-menu [menuItems]="menuItems" [pageTitle]="pageTitle"></sub-menu>
+<router-outlet></router-outlet>

seed-files/services/abstract.service.ts

+import { Http, RequestOptions, Response } from '@angular/http';
+import { FlashMessageService } from './flashmessage/flashmessage.service';
+
+/**
+ * abstract
+ */
+export abstract class AbstractService {
+    http;
+    protected options = new RequestOptions();
+
+    protected flashMessageService: FlashMessageService;
+
+    constructor(http: Http, flashMessageService: FlashMessageService) {
+        this.http = http;
+        this.flashMessageService = flashMessageService;
+    }
+
+    /**
+     * Add query strings to the request options
+     * @param search
+     */
+    protected addSearchOptions(search) {
+        if (this.options.search) return Object.assign(this.options.search, search);
+        this.options.search = search;
+    }
+
+    /**
+     * Extract the json from the HTTP service query
+     * @param res
+     * @returns { Object|Array|{} }
+     */
+    protected extractData(res: Response) {
+        return res.json() || {};
+    }
+
+    /**
+     * Return a common error post
+     * @param error
+     * @returns {Promise<void>|Promise<T>}
+     */
+    protected handleError(error: any): Promise<any> {
+        if (error) {
+            this.flashMessageService.addMessage(
+                'If the problem continues to happen, contact the helpdesk',
+                'An error occured',
+                'error'
+            );
+            return Promise.reject('Actioned issue detected');
+        }
+        return Promise.reject('Call to API failed');
+    }
+}

seed-files/services/company/company.relation.ts

+import { Injectable } from '@angular/core';
+import { AbstractRelation } from '../abstract.relation';
+import { Company } from '../../interfaces/company/company.interface';
+
+/**
+ * authentication
+ */
+@Injectable()
+export class CompanyRelationService extends AbstractRelation {
+
+    private relations = {
+        IS_MEMBER: 'BELONGS_TO',
+    };
+
+    isMember(company: Company) {
+        return this.check(company, this.relations.IS_MEMBER);
+    }
+
+    join(company: Company) {
+        this.add(company, this.relations.IS_MEMBER);
+    }
+
+    leave(company: Company) {
+        this.remove(company, this.relations.IS_MEMBER);
+    }
+}

seed-files/services/company/company.resolver.ts

+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+
+import { CompanyService } from './company.service';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+import { ResolverError } from '../abstract.resolve';
+import { Utils } from '../../utils/common.util';
+import { AclService } from '../acl/acl.service';
+
+@Injectable()
+export class CompanyResolver extends ResolverError implements Resolve<any> {
+    constructor(private companyService: CompanyService,
+                router: Router,
+                flashMessage: FlashMessageService,
+                aclService: AclService
+    ) {
+        super(router, flashMessage, aclService);
+    }
+
+    _resolve(route: ActivatedRouteSnapshot) {
+        return this.companyService.getCompanyById(Utils.getRouteParam(route));
+    }
+}
+
+@Injectable()
+export class TeamMembersResolver implements Resolve<any> {
+    constructor(private companyService: CompanyService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.companyService.members(Utils.getRouteParam(route), {limit: 25, offset: 0});
+    }
+}

seed-files/services/company/company.service.ts

+import { AuthHttp } from 'angular2-jwt';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { AbstractAuthService } from '../abstract.auth.service';
+import { Company } from '../../interfaces/company/company.interface';
+import { Site } from '../../interfaces/site/site.interface';
+import { User } from '../../interfaces/user/user.interface';
+import { ListQuery } from '../../interfaces/misc/list-query.interface';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+
+/**
+ * company
+ */
+@Injectable()
+export class CompanyService extends AbstractAuthService {
+
+    protected url: string = `${this.apiUrl}/companies`;
+
+    constructor(authHttp: AuthHttp, flashMessageService: FlashMessageService) {
+        super(authHttp, flashMessageService);
+    }
+
+    /**
+     * Create Company
+     * @param company Company
+     * @returns {Observable<Company>}
+     */
+    create(company: Company): Observable<Company> {
+        return this.http.post(this.url, company, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Update Company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    update(id: string): Observable<Company> {
+        return this.http.put(`${this.url}/${id}`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get All Companies
+     * @param queryParams ListQuery
+     * @returns {Observable<Company>}
+     */
+    getCompanies(queryParams: ListQuery): Observable<Array<Company>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(this.url, { search }, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Edit a company
+     * @param post
+     * @returns {Observable<T>|Observable<void>|any<T>}
+     */
+    edit(id: string, company: Company): Observable<Company> {
+        return this.http.put(`${this.url}/${id}`, company, this.options).map(this.extractData);
+    }
+
+    /**
+     * Get Single Company by Id
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    getCompanyById(id: string): Observable<Company> {
+        return this.http.get(`${this.url}/${id}`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Join a company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    join(id: string): Observable<Company> {
+        return this.http.post(`${this.url}/${id}/join`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Leave a company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    leave(id: string): Observable<Company> {
+        return this.http.delete(`${this.url}/${id}/leave`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Delete a company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    deleteCompany(id: string): Observable<Company> {
+        return this.http.delete(`${this.url}/${id}`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Suspend a company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    disableCompany(id: string): Observable<Company> {
+        return this.http.put(`${this.url}/${id}/disable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Reinstate a company
+     * @param id string
+     * @returns {Observable<Company>}
+     */
+    enableCompany(id: string): Observable<Company> {
+        return this.http.put(`${this.url}/${id}/enable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get members from a company
+     * @param id string
+     * @returns {Observable<Array<User>>}
+     */
+    members(id: string, queryParams: ListQuery): Observable<Array<User>> {
+        if (queryParams) {
+            const search = this.buildListQuery(queryParams);
+            this.addSearchOptions(search);
+        }
+        return this.http.get(`${this.url}/${id}/members`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get sites from a company
+     * @param id string
+     * @returns {Observable<Array<Site>>}
+     */
+    sites(id: string): Observable<Array<Site>> {
+        return this.http.get(`${this.url}/${id}/sites`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Search for company services
+     * @param queryParams
+     * @returns {Observable<Array<string>>|Observable<void>}
+     */
+    services(queryParams: ListQuery): Observable<Array<string>> {
+        if (queryParams) {
+            const search = this.buildListQuery(queryParams);
+            this.addSearchOptions(search);
+        }
+        return this.http.get(`${this.url}/services`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+}

seed-files/services/group/group.relation.ts

+import { Injectable } from '@angular/core';
+import { Group } from '../../interfaces/group/group.interface';
+import { AbstractRelation } from '../abstract.relation';
+
+/**
+ * authentication
+ */
+@Injectable()
+export class GroupRelationService extends AbstractRelation {
+
+    private relations = {
+        IS_MEMBER: 'IS_MEMBER_OF',
+        IS_OWNER: 'IS_OWNER_OF'
+    };
+
+    isOwner(group: Group) {
+        return this.check(group, this.relations.IS_OWNER);
+    }
+
+    isMember(group: Group) {
+        return this.check(group, this.relations.IS_MEMBER);
+    }
+
+    join(group: Group) {
+        this.add(group, this.relations.IS_MEMBER);
+    }
+
+    leave(group: Group) {
+        this.remove(group, this.relations.IS_MEMBER);
+    }
+}

seed-files/services/group/group.resolver.ts

+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+
+import { GroupService } from './group.service';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+import { ResolverError } from '../abstract.resolve';
+import { Utils } from '../../utils/common.util';
+import { AclService } from '../acl/acl.service';
+
+@Injectable()
+export class GroupResolver implements Resolve<any> {
+    constructor(private groupService: GroupService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.groupService.getGroups({ limit: 5, offset: 0 });
+    }
+}
+
+
+@Injectable()
+export class GroupByIdResolver extends ResolverError implements Resolve<any> {
+
+    constructor(private groupService: GroupService,
+                router: Router,
+                flashMessage: FlashMessageService,
+                aclService: AclService
+    ) {
+        super(router, flashMessage, aclService);
+    }
+
+    _resolve(route: ActivatedRouteSnapshot) {
+        return this.groupService
+            .getGroupById(Utils.getRouteParam(route));
+    }
+}
+
+@Injectable()
+export class GroupMembersResolver implements Resolve<any> {
+    constructor(private groupService: GroupService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.groupService.members(
+            Utils.getRouteParam(route),
+            { limit: 9, offset: 0 }
+        );
+    }
+}

seed-files/services/group/group.service.ts

+import { Response } from '@angular/http';
+import { AuthHttp } from 'angular2-jwt';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { AbstractAuthService } from '../abstract.auth.service';
+import { Group } from '../../interfaces/group/group.interface';
+import { User } from '../../interfaces/user/user.interface';
+import { Site } from '../../interfaces/site/site.interface';
+import { ListQuery } from '../../interfaces/misc/list-query.interface';
+import { GroupRelationService } from './group.relation';
+import { Post } from '../../interfaces/feed/post.interface';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+
+@Injectable()
+export class GroupService extends AbstractAuthService {
+
+    protected url: string = `${this.apiUrl}/groups`;
+
+    protected errorNotFoundMessage = 'This group no longer exists.';
+
+    constructor(authHttp: AuthHttp, private relationGroup: GroupRelationService, flashMessageService: FlashMessageService) {
+        super(authHttp, flashMessageService);
+    }
+
+    /**
+     * Get all groups
+     * @param queryParams ListQuery
+     * @returns {Observable<Response>|Observable<void>}
+     */
+    getGroups(queryParams: ListQuery): Observable<Array<Group>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+        return this.http.get(this.url, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get group tags
+     * @param queryParams
+     * @returns {Observable<Array<string>>|Observable<void>}
+     */
+    getGroupTags(queryParams: ListQuery): Observable<Array<string>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+        return this.http.get(`${this.url}/tags`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get Single Group by Id
+     * @param id
+     * @returns {Observable<T>|Observable<void>}
+     */
+    getGroupById(id: string): Observable<Group> {
+        return this.http.get(`${this.url}/${id}`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Edit a group
+     * @param group
+     * @returns {Observable<T>|Observable<void>}
+     */
+    create(group: Group): Observable<Group> {
+        return this.http.post(`${this.url}`, group, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Edit a group
+     * @param group
+     * @returns {Observable<T>|Observable<void>}
+     */
+    edit(id: string, group: Group): Observable<Group> {
+        return this.http.put(`${this.url}/${id}`, group, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Join a group
+     * @param params
+     * @returns {Observable<T>|Observable<void>}
+     */
+    join(group: Group): Observable<Group> {
+        return this.http.post(`${this.url}/${group.id}/join`, this.options)
+            .do(() => this.relationGroup.join(group))
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Leave a group
+     * @param params
+     * @returns {Observable<T>|Observable<void>}
+     */
+    leave(group: Group): Observable<Group> {
+        return this.http.delete(`${this.url}/${group.id}/join`, this.options)
+            .do(() => this.relationGroup.leave(group))
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get members from a group
+     * @param id string
+     * @param queryParams ListQuery
+     * @returns {Observable<T>|Observable<void>}
+     */
+    members(id: string, queryParams: ListQuery): Observable<Array<User>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${id}/members`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get sites from a group
+     * @param id
+     * @param queryParams ListQuery
+     * @returns {Observable<T>|Observable<void>}
+     */
+    sites(id: string, queryParams: ListQuery): Observable<Array<Site>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${id}/sites`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Delete a group
+     * @param id string
+     * @returns {Observable<Group>}
+     */
+    deleteGroup(id: string): Observable<Group> {
+        return this.http.delete(`${this.url}/${id}`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Suspend a group
+     * @param id string
+     * @returns {Observable<Group>}
+     */
+    disableGroup(id: string): Observable<Group> {
+        return this.http.put(`${this.url}/${id}/disable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Reinstate a group
+     * @param id string
+     * @returns {Observable<Group>}
+     */
+    enableGroup(id: string): Observable<Group> {
+        return this.http.put(`${this.url}/${id}/enable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Create a new post
+     * @param content string
+     * @returns {Observable<Post>}
+     */
+    createPost(id: string, post: Post): Observable<Post> {
+        // TODO (hamish) : Remove this url when the posts are more specific
+        return this.http.post(`${this.url}/${id}/posts`, post, this.options)
+            .map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Approve a group
+     * @param id string
+     * @returns {Observable<Group>}
+     */
+    approveGroup(id: string): Observable<Group> {
+        return this.http.put(`${this.url}/${id}/approve`, this.options).catch(this.handleError.bind(this));
+    }
+}

seed-files/services/user/user/user.relation.ts

+import { Injectable } from '@angular/core';
+import { User } from '../../interfaces/user/user.interface';
+import { AbstractRelation } from '../abstract.relation';
+import { AuthenticationService } from '../authentication/authentication.service';
+
+/**
+ * authentication
+ */
+@Injectable()
+export class UserRelationService extends AbstractRelation {
+
+    private currentUser: User;
+
+    private relations = {
+        IS_FOLLOWING: 'FOLLOWS_USER'
+    };
+
+    constructor(private authenticationService: AuthenticationService) {
+        super();
+        this.currentUser = this.authenticationService.getCurrentUser();
+    }
+
+    isFollowing(user: User) {
+        return this.check(user, this.relations.IS_FOLLOWING);
+    }
+
+    follow(user: User) {
+        this.add(user, this.relations.IS_FOLLOWING);
+        user.followersCount++;
+        this.currentUser.followingCount++;
+        this.authenticationService.updateUser(this.currentUser);
+
+        return user;
+    }
+
+    unFollow(user: User) {
+        this.remove(user, this.relations.IS_FOLLOWING);
+        user.followersCount--;
+        this.currentUser.followingCount--;
+        this.authenticationService.updateUser(this.currentUser);
+
+        return user;
+    }
+}

seed-files/services/user/user/user.resolver.ts

+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+
+import { UserService } from './user.service';
+import { AuthenticationService } from '../authentication/authentication.service';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+import { ResolverError } from '../abstract.resolve';
+import { AclService } from '../acl/acl.service';
+
+@Injectable()
+export class UserResolver implements Resolve<any> {
+    constructor(private userService: UserService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getUsers({ limit: 10, offset: 0 });
+    }
+}
+
+@Injectable()
+export class UserByIdResolver extends ResolverError implements Resolve<any> {
+    constructor(private userService: UserService,
+                router: Router,
+                flashMessage: FlashMessageService,
+                aclService: AclService) {
+        super(router, flashMessage, aclService);
+    }
+
+    _resolve(route: ActivatedRouteSnapshot) {
+        return this.userService.getUserById(route.params[ 'id' ]);
+    }
+}
+
+@Injectable()
+export class UserContactsResolver implements Resolve<any> {
+    constructor(private userService: UserService, private authService: AuthenticationService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getContacts(this.authService.getCurrentUser().id, {
+            limit: 5,
+            offset: 0
+        });
+    }
+}
+
+@Injectable()
+export class SuggestedUserResolver implements Resolve<any> {
+    constructor(private userService: UserService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getContactsSuggestions({ limit: 5, offset: 0 });
+    }
+}
+
+@Injectable()
+export class SuggestedGroupResolver implements Resolve<any> {
+    constructor(private userService: UserService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getGroupsSuggestions({ limit: 5, offset: 0 });
+    }
+}
+
+@Injectable()
+export class UserGroupsResolver implements Resolve<any> {
+    constructor(private userService: UserService, private authenticationService: AuthenticationService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getGroups(this.authenticationService.getCurrentUser().id, {
+            limit: 9,
+            offset: 0
+        });
+    }
+}
+
+@Injectable()
+export class UserSettingsResolver implements Resolve<any> {
+    constructor(private userService: UserService, private authenticationService: AuthenticationService) {
+    }
+
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        return this.userService.getSettings(this.authenticationService.getCurrentUser().id);
+    }
+}

seed-files/services/user/user/user.service.spec.ts

+import { AuthHttp } from 'angular2-jwt';
+
+import { UserService } from './user.service';
+import { AuthenticationService } from '../authentication/authentication.service';
+import { User } from '../../interfaces/user/user.interface';
+import { UserRelationService } from './user.relation';
+import UserMock from '../../interfaces/user/user.mock';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+
+describe('UserService unit testing', () => {
+    let service: UserService;
+    let user: User = UserMock;
+
+    beforeEach(() => { service = new UserService(AuthHttp, AuthenticationService, UserRelationService, FlashMessageService); });
+
+    it('#createUser should return new user', done => {
+        service.createUser(user).subscribe((createdUser) => {
+            // expect(createdUser.email).toBe(user.email);
+            // expect(createdUser.id).toBeDefined();
+            // user = createdUser;
+            done();
+        });
+    });
+    it('#updateUser should return updated user', done => {
+        user.firstName = 'Name Changed';
+        service.updateUser(user).subscribe(updatedUser => {
+            expect(updatedUser.firstName).toBe(user.firstName);
+            expect(updatedUser.id).toBe(user.id);
+            done();
+        });
+    });
+    it('#getUser should return user', done => {
+        service.getUserById(user.id).subscribe(updatedUser => {
+            expect(updatedUser.email).toBe(user.email);
+            expect(updatedUser.id).toBe(user.id);
+            done();
+        });
+    });
+    it('#getUsers should return a list of users', done => {
+        service.getUsers({limit: 5, offset: 0}).subscribe(users => {
+            expect(users.length).toBeGreaterThan(1);
+            expect(users.length).not.toBeGreaterThan(10);
+            done();
+        });
+    });
+    it('#followUser should follow a user', done => {
+        service.follow(user).subscribe(res => {
+            expect(res).toBeTruthy();
+            done();
+        });
+    });
+    it('#unFollowUser should unfollow a user', done => {
+        service.unFollow(user).subscribe(res => {
+            expect(res).toBeTruthy();
+            done();
+        });
+    });
+    it('#getContacts should get a users contacts', done => {
+        service.getContacts(user.id, {limit: 5, offset: 0}).subscribe(contacts => {
+            expect(contacts.length).toBeGreaterThan(1);
+            expect(contacts.length).not.toBeGreaterThan(10);
+            done();
+        });
+    });
+    it('#getContactsSuggested should get a users suggested contacts', done => {
+        service.getContactsSuggestions({limit: 5, offset: 0}).subscribe(contacts => {
+            expect(contacts.length).toBeGreaterThan(1);
+            expect(contacts.length).not.toBeGreaterThan(5);
+            done();
+        });
+    });
+    it('#getGroups should get a users groups', done => {
+        service.getContacts(user.id, {limit: 5, offset: 0}).subscribe(contacts => {
+            expect(contacts.length).toBeGreaterThan(1);
+            expect(contacts.length).not.toBeGreaterThan(10);
+            done();
+        });
+    });
+    it('#getGroupsSuggested should get a users suggested groups', done => {
+        service.getContactsSuggestions({limit: 5, offset: 0}).subscribe(contacts => {
+            expect(contacts.length).toBeGreaterThan(1);
+            expect(contacts.length).not.toBeGreaterThan(5);
+            done();
+        });
+    });
+});
+

seed-files/services/user/user/user.service.ts

+import { Injectable } from '@angular/core';
+import { URLSearchParams, Response } from '@angular/http';
+import { AuthHttp } from 'angular2-jwt';
+import { Observable } from 'rxjs';
+
+import { AbstractAuthService } from '../abstract.auth.service';
+import { User } from '../../interfaces/user/user.interface';
+import { Invite } from '../../interfaces/invite/invite.interface';
+import { AuthenticationService } from '../authentication/authentication.service';
+import { ListQuery } from '../../interfaces/misc/list-query.interface';
+import { Group } from '../../interfaces/group/group.interface';
+import { UserRelationService } from './user.relation';
+import { FlashMessageService } from '../flashmessage/flashmessage.service';
+
+/**
+ * user
+ */
+@Injectable()
+export class UserService extends AbstractAuthService {
+
+    protected url: string = `${this.apiUrl}/users`;
+    protected errorNotFoundMessage = 'This user\'s profile page no longer exists.';
+
+    private currentUser: User;
+
+    constructor(authHttp: AuthHttp,
+                private authService: AuthenticationService,
+                private relationUserService: UserRelationService,
+                flashMessageService: FlashMessageService) {
+        super(authHttp, flashMessageService);
+        this.authService = authService;
+        this.currentUser = this.authService.getCurrentUser();
+        this.authService.authorization.subscribe(user => this.currentUser = user);
+    }
+
+    /**
+     * Invite a user
+     * @param invite Invite
+     * @returns {Observable<User>}
+     */
+    inviteUser(invites: Array<Invite>): Observable<Invite> {
+        return this.http.post(`${this.url}/invite`, { invites }, this.options).map(this.extractData);
+    }
+
+    /**
+     * Create a user
+     * @param user User
+     * @returns {Observable<User>}
+     */
+    createUser(user: User): Observable<Response> {
+        return this.http.post(this.url, user, this.options);
+    }
+
+    /**
+     * Update a user
+     * @param user User
+     * @returns {Observable<User>}
+     */
+    updateUser(user: User): Observable<User> {
+        const id = user.id;
+        delete user.id;
+        return this.http.put(`${this.url}/${id}`, user, this.options).map(this.extractData);
+    }
+
+    /**
+     * Update the current user user
+     * @param user User
+     * @returns {Observable<User>}
+     */
+    updateCurrentUser(values: any): Observable<User> {
+        values.id = this.authService.getCurrentUser().id;
+        return this.updateUser(values)
+            .do((updatedUser) => this.authService.updateUser(updatedUser));
+    }
+
+    /**
+     * Get All Users
+     * @param queryParams ListQuery
+     * @returns {Observable<Array<User>>}
+     */
+    getUsers(queryParams: ListQuery): Observable<Array<User>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(this.url, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get Single User by Id
+     * @param id string
+     * @returns {Observable<User>}
+     */
+    getUserById(id: string): Observable<User> {
+        return this.http.get(`${this.url}/${id}`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get user settings
+     * @param id string
+     * @returns {Observable<User>}
+     */
+    getSettings(id: string): Observable<User> {
+        return this.http.get(`${this.url}/${id}/settings`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Update user settings
+     * @param id string
+     * @param settings
+     * @returns {Observable<User>}
+     */
+    updateSettings(id: string, settings: Object): Observable<User> {
+        return this.http.put(`${this.url}/${id}/settings`, settings, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Update user acount
+     * @param data
+     * @returns {Observable<User>}
+     */
+    updateAccount(data: Object): Observable<User> {
+        return this.http.put(`${this.url}/account`, data, this.options).map(this.extractData)
+            .do((updatedUser) => this.authService.updateUser(updatedUser))
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get Single User by username
+     * @param id string
+     * @returns {Observable<User>}
+     */
+    getUsersByUsername(username: string, exact = false): Observable<Array<User>> {
+        const search: URLSearchParams = new URLSearchParams();
+        search.set('username', username);
+        search.set('exact', exact.toString());
+        this.addSearchOptions(search);
+
+        return this.http.get(this.url, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Follow a user
+     * @param id string
+     * @returns {Observable<User>}
+     */
+    follow(user: User): Observable<User> {
+        return this.http.post(`${this.url}/${user.id}/follow`, this.options)
+            .do(() => this.relationUserService.follow(user))
+            .catch(this.handleError.bind(this));
+    }
+
+    disableUser(id: string) {
+        return this.http.put(`${this.url}/${id}/disable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    enableUser(id: string) {
+        return this.http.put(`${this.url}/${id}/enable`, this.options).catch(this.handleError.bind(this));
+    }
+
+    deleteUser(id: string) {
+        return this.http.delete(`${this.url}/${id}`, this.options).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Un Follow a user
+     * @param id string
+     * @returns {Observable<User>}
+     */
+    unFollow(user: User): Observable<User> {
+        return this.http.delete(`${this.url}/${user.id}/follow`, this.options)
+            .do(() => this.relationUserService.unFollow(user))
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get User Contacts
+     * @param id string
+     * @param queryParams ListQuery
+     * @returns {Observable<Array<User>>}
+     */
+    getContacts(id: string, queryParams: ListQuery): Observable<Array<User>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${id}/contacts`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get User Contacts Suggestions
+     * @param queryParams ListQuery
+     * @returns {Observable<Array<User>>}
+     */
+    getContactsSuggestions(queryParams: ListQuery): Observable<Array<User>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${this.currentUser.id}/contacts/suggestions`, this.options)
+            .map(this.extractData)
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get User Groups
+     * @param id string
+     * @param queryParams ListQuery
+     * @returns {Observable<Array<User>>}
+     */
+    getGroups(id: string, queryParams: ListQuery): Observable<Array<Group>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${id}/groups`, this.options).map(this.extractData).catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get User Groups Suggestions
+     * @param queryParams ListQuery
+     * @returns {Observable<Array<User>>}
+     */
+    getGroupsSuggestions(queryParams: ListQuery): Observable<Array<Group>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/${this.currentUser.id}/groups/suggestions`, this.options)
+            .map(this.extractData)
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Get user skills
+     * @param queryParams
+     */
+    getSkills(queryParams: ListQuery): Observable<Array<string>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/skills`, this.options).map(this.extractData);
+    }
+
+    /**
+     * Get user interests
+     * @param queryParams
+     */
+    getInterests(queryParams: ListQuery): Observable<Array<string>> {
+        const search = this.buildListQuery(queryParams);
+        this.addSearchOptions(search);
+
+        return this.http.get(`${this.url}/interests`, this.options).map(this.extractData);
+    }
+
+    /**
+     * Suspend a user
+     * @param id string
+     * @returns {Observable<boolean>}
+     */
+    suspendUser(id: string): Observable<boolean> {
+        return this.http.post(`${this.url}/${id}/suspension`, this.options)
+            .catch(this.handleError.bind(this));
+    }
+
+    /**
+     * Un Suspend a user
+     * @param id string
+     * @returns {Observable<boolean>}
+     */
+    unSuspendUser(id: string): Observable<boolean> {
+        return this.http.delete(`${this.url}/${id}/suspension`, this.options)
+            .catch(this.handleError.bind(this));
+    }
+
+}