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