Merge branch 'master' of https://github.com/withinpixels/fuse2

src/app/fuse-fake-db/fuse-fake-db.service.ts

@@ -29,7 +29,7 @@ export class FuseFakeDbService implements InMemoryDbService
             'profile-timeline'     : ProfileFakeDb.timeline,
             'profile-photos-videos': ProfileFakeDb.photosVideos,
             'profile-about'        : ProfileFakeDb.about,
-            'contacts'             : ContactsFakeDb.contacts,
+            'contacts-contacts'    : ContactsFakeDb.contacts,
             'invoice'              : InvoiceFakeDb.invoice,
             'file-manager'         : FileManagerFakeDb.files,
             'search-classic'       : SearchFakeDb.classic,

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

@@ -1,51 +1,75 @@
 <md-table #table [dataSource]="dataSource">
 
-    <!-- Type Column -->
-    <ng-container cdkColumnDef="icon">
+    <!-- Checkbox Column -->
+    <ng-container cdkColumnDef="checkbox">
         <md-header-cell *cdkHeaderCellDef></md-header-cell>
-        <md-cell *cdkCellDef="let row">
-            <md-icon class="type-icon" [class]="row.type"></md-icon>
+        <md-cell *cdkCellDef="let contact">
+            Check
+        </md-cell>
+    </ng-container>
+
+    <!-- Avatar Column -->
+    <ng-container cdkColumnDef="avatar">
+        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
+        <md-cell *cdkCellDef="let contact">
+            <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
+                 [src]="contact.avatar"/>
         </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>
+        <md-cell *cdkCellDef="let contact">
+            <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
+        </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>
+    <!-- Email Column -->
+    <ng-container cdkColumnDef="email">
+        <md-header-cell *cdkHeaderCellDef>Email</md-header-cell>
+        <md-cell *cdkCellDef="let contact">
+            <p class="email text-truncate" fxShow.gt-sm>
+                {{contact.email}}
+            </p>
+        </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>
+    <!-- Phone Column -->
+    <ng-container cdkColumnDef="phone">
+        <md-header-cell *cdkHeaderCellDef>Phone</md-header-cell>
+        <md-cell *cdkCellDef="let contact">
+            <p class="phone text-truncate" fxShow.gt-md>
+                {{contact.phone}}
+            </p>
+        </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>
+    <!-- Job Title Column -->
+    <ng-container cdkColumnDef="jobTitle">
+        <md-header-cell *cdkHeaderCellDef>Job title</md-header-cell>
+        <md-cell *cdkCellDef="let contact">
+            <p class="job-title text-truncate" fxShow.gt-lg>
+                {{contact.jobTitle}}
+            </p>
+        </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>
+    <!-- Company Column -->
+    <ng-container cdkColumnDef="company">
+        <md-header-cell *cdkHeaderCellDef>Company</md-header-cell>
+        <md-cell *cdkCellDef="let contact">
+            <p class="company text-truncate" fxShow.gt-lg>
+                {{contact.company}}
+            </p>
+        </md-cell>
     </ng-container>
 
-    <!-- Detail Button Column -->
-    <ng-container cdkColumnDef="detail-button">
+    <!-- Buttons Column -->
+    <ng-container cdkColumnDef="buttons">
         <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>
+            Buttons
         </md-cell>
     </ng-container>
 

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

@@ -1,5 +1,4 @@
 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';
@@ -11,17 +10,17 @@ import { Observable } from 'rxjs/Observable';
 })
 export class ContactListComponent implements OnInit
 {
-    files: any;
+    contacts: any;
     dataSource: FilesDataSource | null;
-    displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button'];
+    displayedColumns = ['checkbox', 'avatar', 'name', 'email', 'phone', 'jobTitle', 'buttons'];
     selected: any;
 
     constructor(private fileManagerService: ContactsService)
     {
-        this.fileManagerService.onFilesChanged.subscribe(files => {
-            this.files = files;
+        this.fileManagerService.onContactsChanged.subscribe(files => {
+            this.contacts = files;
         });
-        this.fileManagerService.onFileSelected.subscribe(selected => {
+        this.fileManagerService.onContactSelected.subscribe(selected => {
             this.selected = selected;
         });
     }
@@ -33,13 +32,13 @@ export class ContactListComponent implements OnInit
 
     onSelect(selected)
     {
-        this.fileManagerService.onFileSelected.next(selected);
+        this.fileManagerService.onContactSelected.next(selected);
     }
 }
 
 export class FilesDataSource extends DataSource<any>
 {
-    constructor(private fileManagerService: ContactsService)
+    constructor(private contactsService: ContactsService)
     {
         super();
     }
@@ -47,7 +46,7 @@ export class FilesDataSource extends DataSource<any>
     /** Connect function called by the table to retrieve one stream containing the data to render. */
     connect(): Observable<any[]>
     {
-        return this.fileManagerService.onFilesChanged;
+        return this.contactsService.onContactsChanged;
     }
 
     disconnect()

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

@@ -1,24 +1,94 @@
-<div id="file-manager" class="page-layout simple right-sidenav" fxLayout="row">
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fxfxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24" fxfxLayout="row" fxLayoutAlign="space-between center">
+
+        <!-- APP TITLE -->
+        <div fxLayout="row" fxLayoutAlign="start center">
+
+            <button md-button class="mat-icon-button sidenav-toggle"
+                    fuseMdSidenavToggler="simple-left-sidenav"
+                    fxHide.gt-md>
+                <md-icon>menu</md-icon>
+            </button>
+
+            <div class="logo" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="logo-icon mr-16">account_box</md-icon>
+                <span class="logo-text h1">Contacts</span>
+            </div>
+
+        </div>
+        <!-- / APP TITLE -->
+
+        <!-- SEARCH -->
+        <div class="search-input-wrapper" fxLayout="row" fxLayoutAlign="start center">
+            <label for="search" class="mr-8">
+                <md-icon>search</md-icon>
+            </label>
+            <md-input-container md-no-float class="m-0" floatPlaceholder="never">
+                <input mdInput id="search" placeholder="Search for anyone">
+            </md-input-container>
+        </div>
+        <!-- / SEARCH -->
+
+    </div>
+    <!-- / HEADER -->
 
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
-                    fuseMdSidenavHelper="file-manager-left-sidenav">
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                    fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-md">
+
+            <div class="sidenav-content" perfect-scrollbar>
                 <fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
+            </div>
+
         </md-sidenav>
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
+        <div class="center p-24" perfect-scrollbar>
+
+            <!-- CONTENT -->
+            <div class="content p-24 md-white-bg mat-elevation-z4">
+
+                <fuse-contacts-contact-list></fuse-contacts-contact-list>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+    </md-sidenav-container>
+
+</div>
+
+
+<!--
+
+<div id="file-manager" class="page-layout simple right-sidenav" fxfxLayout="row">
+
+    <md-sidenav-container>
+
+        &lt;!&ndash; SIDENAV &ndash;&gt;
+        <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>
+        &lt;!&ndash; / SIDENAV &ndash;&gt;
+
+        &lt;!&ndash; CENTER &ndash;&gt;
         <div class="center" fxFlex perfect-scrollbar>
 
-            <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
+            &lt;!&ndash; HEADER &ndash;&gt;
+            <div class="header md-accent-bg p-24" fxfxLayout="column" fxLayoutAlign="space-between start">
 
-                <!-- TOOLBAR -->
-                <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
+                &lt;!&ndash; TOOLBAR &ndash;&gt;
+                <div class="toolbar w-100-p" fxFlex fxfxLayout="row" fxLayoutAlign="space-between start">
 
-                    <div class="left-side" fxLayout="row">
+                    <div class="left-side" fxfxLayout="row">
                         <button md-icon-button class="sidenav-toggle"
                                 fuseMdSidenavToggler="file-manager-left-sidenav">
                             <md-icon>menu</md-icon>
@@ -31,24 +101,24 @@
                         </button>
                     </div>
 
-                    <div class="right-side" fxLayout="row">
+                    <div class="right-side" fxfxLayout="row">
                         <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
                             <md-icon>search</md-icon>
                         </button>
                     </div>
                 </div>
-                <!-- / TOOLBAR -->
+                &lt;!&ndash; / TOOLBAR &ndash;&gt;
 
-                <!-- 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">
+                &lt;!&ndash; BREADCRUMB &ndash;&gt;
+                <div class="breadcrumb text-truncate h1 pl-72" fxfxLayout="row" fxLayoutAlign="start center">
+                    <div *ngFor="let path of pathArr; last  as isLast" fxfxLayout="row" fxLayoutAlign="start center">
                         <span>{{path}}</span>
                         <md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
                     </div>
                 </div>
-                <!-- / BREADCRUMB -->
+                &lt;!&ndash; / BREADCRUMB &ndash;&gt;
 
-                <!-- ADD FILE BUTTON -->
+                &lt;!&ndash; ADD FILE BUTTON &ndash;&gt;
                 <div class="file-uploader">
                     <input hidden type="file" #fileInput/>
                     <button type="submit" md-fab
@@ -58,20 +128,21 @@
                         <md-icon>add</md-icon>
                     </button>
                 </div>
-                <!-- / ADD FILE BUTTON -->
+                &lt;!&ndash; / ADD FILE BUTTON &ndash;&gt;
 
             </div>
-            <!-- / HEADER -->
+            &lt;!&ndash; / HEADER &ndash;&gt;
 
-            <!-- CONTENT -->
+            &lt;!&ndash; CONTENT &ndash;&gt;
             <div class="content">
                 <fuse-contacts-contact-list></fuse-contacts-contact-list>
             </div>
-            <!-- / CONTENT -->
+            &lt;!&ndash; / CONTENT &ndash;&gt;
 
         </div>
-        <!-- / CENTER -->
+        &lt;!&ndash; / CENTER &ndash;&gt;
 
     </md-sidenav-container>
 
 </div>
+-->

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

@@ -1,66 +1,2 @@
 @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/content/apps/contacts/contacts.component.ts

@@ -11,18 +11,16 @@ export class ContactsComponent implements OnInit
 {
 
     selected: any;
-    pathArr: string[];
 
-    constructor(private fileManagerService: ContactsService)
+    constructor(private contactsService: ContactsService)
     {
 
     }
 
     ngOnInit()
     {
-        this.fileManagerService.onFileSelected.subscribe(selected => {
+        this.contactsService.onContactSelected.subscribe(selected => {
             this.selected = selected;
-            this.pathArr = selected.location.split('>');
         });
     }
 

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

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

src/app/main/main.component.scss

@@ -31,6 +31,7 @@ fuse-main {
 
                         fuse-content {
                             display: flex;
+                            flex: 1;
                             flex-direction: row;
                             flex: 1;
                             width: 100%;