(Contacts App) start to build on filemanager app..

src/app/app.module.ts

@@ -46,6 +46,10 @@ const appRoutes: Routes = [
         path        : 'apps/file-manager',
         loadChildren: './main/apps/file-manager/file-manager.module#FuseFileManagerModule'
     },
+    {
+        path        : 'apps/contacts',
+        loadChildren: './main/apps/contacts/contacts.module#FuseContactsModule'
+    },
     {
         path      : '**',
         redirectTo: 'apps/dashboards/project'

src/app/main/apps/contacts/contact-list/contact-list.component.html

@@ -0,0 +1,58 @@
+<md-table #table [dataSource]="dataSource">
+
+    <!-- Type Column -->
+    <ng-container cdkColumnDef="icon">
+        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <md-cell *cdkCellDef="let row">
+            <md-icon class="type-icon" [class]="row.type"></md-icon>
+        </md-cell>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container cdkColumnDef="name">
+        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
+        <md-cell *cdkCellDef="let row"> {{row.name}}</md-cell>
+    </ng-container>
+
+    <!-- Type Column -->
+    <ng-container cdkColumnDef="type">
+        <md-header-cell *cdkHeaderCellDef>Type</md-header-cell>
+        <md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
+    </ng-container>
+
+    <!-- Owner Column -->
+    <ng-container cdkColumnDef="owner">
+        <md-header-cell *cdkHeaderCellDef>Owner</md-header-cell>
+        <md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell>
+    </ng-container>
+
+    <!-- Size Column -->
+    <ng-container cdkColumnDef="size">
+        <md-header-cell *cdkHeaderCellDef>Size</md-header-cell>
+        <md-cell *cdkCellDef="let row">{{row.size === '' ? '-': row.size}}</md-cell>
+    </ng-container>
+
+    <!-- Modified Column -->
+    <ng-container cdkColumnDef="modified">
+        <md-header-cell *cdkHeaderCellDef>Modified</md-header-cell>
+        <md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell>
+    </ng-container>
+
+    <!-- Detail Button Column -->
+    <ng-container cdkColumnDef="detail-button">
+        <md-header-cell *cdkHeaderCellDef></md-header-cell>
+        <md-cell *cdkCellDef="let row">
+            <button md-icon-button class="sidenav-toggle"
+                    fuseMdSidenavToggler="file-manager-right-sidenav">
+                <md-icon>info</md-icon>
+            </button>
+        </md-cell>
+    </ng-container>
+
+    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
+    <md-row *cdkRowDef="let row; columns: displayedColumns;"
+            (click)="onSelect(row)"
+            [ngClass]="{'md-light-blue-50-bg':row == selected}"
+            md-ripple>
+    </md-row>
+</md-table>

src/app/main/apps/contacts/contact-list/contact-list.component.scss

@@ -0,0 +1,29 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+    .mat-table {
+        background: transparent;
+        box-shadow: none;
+
+        .mat-row {
+            position: relative;
+            cursor: pointer;
+
+            .mat-cell {
+
+                &.mat-column-icon {
+                    flex: 0 1 auto;
+                    padding: 0 24px 0 0;
+                }
+
+                &.mat-column-detail-button {
+                    flex: 0 1 auto;
+                    padding: 0 24px 0 0;
+                    @include media-breakpoint('gt-md') {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}

src/app/main/apps/contacts/contact-list/contact-list.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { ContactsService } from '../contacts.service';
+import { DataSource } from '@angular/cdk';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+    selector   : 'fuse-contacts-contact-list',
+    templateUrl: './contact-list.component.html',
+    styleUrls  : ['./contact-list.component.scss']
+})
+export class ContactListComponent implements OnInit
+{
+    files: any;
+    dataSource: FilesDataSource | null;
+    displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button'];
+    selected: any;
+
+    constructor(private fileManagerService: ContactsService)
+    {
+        this.fileManagerService.onFilesChanged.subscribe(files => {
+            this.files = files;
+        });
+        this.fileManagerService.onFileSelected.subscribe(selected => {
+            this.selected = selected;
+        });
+    }
+
+    ngOnInit()
+    {
+        this.dataSource = new FilesDataSource(this.fileManagerService);
+    }
+
+    onSelect(selected)
+    {
+        this.fileManagerService.onFileSelected.next(selected);
+    }
+}
+
+export class FilesDataSource extends DataSource<any>
+{
+    constructor(private fileManagerService: ContactsService)
+    {
+        super();
+    }
+
+    /** Connect function called by the table to retrieve one stream containing the data to render. */
+    connect(): Observable<any[]>
+    {
+        return this.fileManagerService.onFilesChanged;
+    }
+
+    disconnect()
+    {
+    }
+}

src/app/main/apps/contacts/contacts.component.html

@@ -0,0 +1,77 @@
+<div id="file-manager" class="page-layout simple right-sidenav" fxLayout="row">
+
+    <md-sidenav-container>
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
+                    fuseMdSidenavHelper="file-manager-left-sidenav">
+            <fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+        <!-- CENTER -->
+        <div class="center" fxFlex perfect-scrollbar>
+
+            <!-- HEADER -->
+            <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
+
+                <!-- TOOLBAR -->
+                <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
+
+                    <div class="left-side" fxLayout="row">
+                        <button md-icon-button class="sidenav-toggle"
+                                fuseMdSidenavToggler="file-manager-left-sidenav">
+                            <md-icon>menu</md-icon>
+                        </button>
+
+                        <button md-icon-button class="sidenav-toggle"
+                                fuseMdSidenavToggler="file-manager-right-sidenav"
+                                fxHide.gt-md>
+                            <md-icon>menu</md-icon>
+                        </button>
+                    </div>
+
+                    <div class="right-side" fxLayout="row">
+                        <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
+                            <md-icon>search</md-icon>
+                        </button>
+                    </div>
+                </div>
+                <!-- / TOOLBAR -->
+
+                <!-- BREADCRUMB -->
+                <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center">
+                    <div *ngFor="let path of pathArr; last  as isLast" fxLayout="row" fxLayoutAlign="start center">
+                        <span>{{path}}</span>
+                        <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
+                    </div>
+                </div>
+                <!-- / BREADCRUMB -->
+
+                <!-- ADD FILE BUTTON -->
+                <div class="file-uploader">
+                    <input hidden type="file" #fileInput/>
+                    <button type="submit" md-fab
+                            class="add-file-button mat-accent"
+                            (click)="fileInput.click()"
+                            aria-label="Add file">
+                        <md-icon>add</md-icon>
+                    </button>
+                </div>
+                <!-- / ADD FILE BUTTON -->
+
+            </div>
+            <!-- / HEADER -->
+
+            <!-- CONTENT -->
+            <div class="content">
+                <fuse-contacts-contact-list></fuse-contacts-contact-list>
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>

src/app/main/apps/contacts/contacts.component.scss

@@ -0,0 +1,66 @@
+@import "src/app/core/scss/fuse";
+
+#file-manager {
+
+    md-sidenav-container {
+
+        .sidenav {
+            width: 320px !important;
+            min-width: 320px !important;
+            max-width: 320px !important;
+
+            &.left-sidenav {
+            }
+
+            &.right-sidenav {
+                @include media-breakpoint('gt-md') {
+                    z-index: 0;
+                }
+            }
+        }
+
+        .mat-sidenav-content {
+            z-index: 1;
+
+            .center {
+
+                .header {
+                    position: relative;
+                    height: 200px;
+                    min-height: 200px;
+                    max-height: 200px;
+
+                    .add-file-button {
+                        position: absolute;
+                        bottom: -28px;
+                        left: 16px;
+                    }
+                }
+            }
+        }
+    }
+
+    .type-icon {
+
+        &.folder {
+            &:before {
+                content: 'folder';
+                color: #FFB300;
+            }
+        }
+
+        &.document {
+            &:before {
+                content: 'insert_drive_file';
+                color: #1565C0;
+            }
+        }
+
+        &.spreadsheet {
+            &:before {
+                content: 'insert_chart';
+                color: #4CAF50;
+            }
+        }
+    }
+}

src/app/main/apps/contacts/contacts.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ContactsService } from './contacts.service';
+
+@Component({
+    selector     : 'fuse-contacts',
+    templateUrl  : './contacts.component.html',
+    styleUrls    : ['./contacts.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ContactsComponent implements OnInit
+{
+
+    selected: any;
+    pathArr: string[];
+
+    constructor(private fileManagerService: ContactsService)
+    {
+
+    }
+
+    ngOnInit()
+    {
+        this.fileManagerService.onFileSelected.subscribe(selected => {
+            this.selected = selected;
+            this.pathArr = selected.location.split('>');
+        });
+    }
+
+}

src/app/main/apps/contacts/contacts.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+import { MainSidenavComponent } from './sidenavs/main/main.component';
+import { ContactsComponent } from './contacts.component';
+import { ContactsService } from './contacts.service';
+import { ContactListComponent } from './contact-list/contact-list.component';
+
+const routes: Routes = [
+    {
+        path     : '**',
+        component: ContactsComponent,
+        children : [],
+        resolve  : {
+            contacts: ContactsService
+        }
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        ContactsComponent,
+        ContactListComponent,
+        MainSidenavComponent
+    ],
+    providers   : [
+        ContactsService
+    ]
+})
+export class FuseContactsModule
+{
+}

src/app/main/apps/contacts/contacts.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { Http } from '@angular/http';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class ContactsService implements Resolve<any>
+{
+    onFilesChanged: BehaviorSubject<any> = new BehaviorSubject({});
+    onFileSelected: BehaviorSubject<any> = new BehaviorSubject({});
+
+    constructor(private http: Http)
+    {
+    }
+
+    /**
+     * The File Manager App Main Resolver
+     * @param {ActivatedRouteSnapshot} route
+     * @param {RouterStateSnapshot} state
+     * @returns {Observable<any> | Promise<any> | any}
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+
+        return new Promise((resolve, reject) => {
+
+            Promise.all([
+                this.getFiles()
+            ]).then(
+                ([files]) => {
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    getFiles(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this.http.get('api/file-manager')
+                .subscribe(response => {
+                    this.onFilesChanged.next(response.json().data);
+                    this.onFileSelected.next(response.json().data[0]);
+                    resolve(response.json().data);
+                }, reject);
+        });
+    }
+
+}

src/app/main/apps/contacts/sidenavs/main/main.component.html

@@ -0,0 +1,54 @@
+<!-- SIDENAV HEADER -->
+<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
+
+    <div class="logo" fxLayout="row" fxLayoutAlign="start center">
+        <md-icon class="logo-icon mr-16">folder</md-icon>
+        <span class="logo-text h1">File Manager</span>
+    </div>
+
+</div>
+<!-- / SIDENAV HEADER -->
+
+<!-- SIDENAV CONTENT -->
+<div class="content py-16" perfect-scrollbar>
+
+    <div class="nav">
+
+        <div class="nav-item" aria-label="inbox">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">folder</md-icon>
+                <span class="title">My Files</span>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">star</md-icon>
+                <div class="title">Starred</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">folder_shared</md-icon>
+                <div class="title">Sharred with me</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">access_time</md-icon>
+                <div class="title">Recent</div>
+            </a>
+        </div>
+
+        <div class="nav-item" aria-label="starred">
+            <a class="nav-link" md-ripple>
+                <md-icon class="nav-link-icon">not_interested</md-icon>
+                <div class="title">Offline</div>
+            </a>
+        </div>
+    </div>
+
+</div>
+<!-- / SIDENAV CONTENT -->

src/app/main/apps/contacts/sidenavs/main/main.component.scss

@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    height: 100%;
+
+    > .header {
+        flex: 0 1 auto;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+}

src/app/main/apps/contacts/sidenavs/main/main.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-contacts-main-sidenav',
+    templateUrl: './main.component.html',
+    styleUrls  : ['./main.component.scss']
+})
+export class MainSidenavComponent implements OnInit
+{
+    selected: any;
+
+    constructor()
+    {
+
+    }
+
+    ngOnInit()
+    {
+    }
+
+}