(Contacts App) ongoing

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

@@ -0,0 +1,218 @@
+<md-toolbar md-dialog-title class="mat-accent m-0">
+    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <span class="title dialog-title">{{dialogTitle}}</span>
+        <button md-button class="mat-icon-button"
+                (click)="dialogRef.close()"
+                aria-label="Close dialog">
+            <md-icon>close</md-icon>
+        </button>
+    </div>
+
+    <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
+        <img [src]="contact.avatar" class=" avatar contact-avatar huge"
+             [alt]="contact.name"/>
+        <div class="contact-name">{{contact.name}}</div>
+    </md-toolbar-row>
+</md-toolbar>
+
+<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">account_circle</md-icon>
+        <md-input-container fxFlex>
+            <input placeholder="Name" mdInput="" ng-required md-autofocus>
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12"></md-icon>
+        <md-input-container fxFlex>
+            <input placeholder="Lastname" mdInput>
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">star</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput placeholder="Nickname">
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">phone</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput placeholder="Phone number">
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">email</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput type="email" placeholder="Email">
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">domain</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput placeholder="Company">
+        </md-input-container>
+    </div>
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">work</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput placeholder="Job title">
+        </md-input-container>
+    </div>
+
+    <!--
+            <md-datepicker class="birthday-input" ng-model="contact.birthday" md-placeholder="Birthday"
+                           ng-required="false">
+            </md-datepicker>-->
+
+    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">home</md-icon>
+        <md-input-container fxFlex>
+            <input mdInput placeholder="Address">
+        </md-input-container>
+    </div>
+
+    <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
+        <md-icon class="mr-12 mt-12">note</md-icon>
+        <md-input-container fxFlex>
+            <textarea placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+        </md-input-container>
+    </div>
+
+
+</div>
+<!--
+
+<form name="contactForm" [formGroup]="contactForm" class="event-form" fxLayout="column" fxFlex>
+
+    <md-input-container>
+        <input mdInput
+               name="title"
+               formControlName="title"
+               placeholder="Title"
+               required>
+    </md-input-container>
+
+    <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
+        <md-slide-toggle
+            name="allDay"
+            formControlName="allDay"
+            class="mr-24"
+            aria-label="All day">
+            All Day
+        </md-slide-toggle>
+    </div>
+
+    <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
+        <md-input-container class="mr-24">
+            <input mdInput
+                   name="primary color"
+                   formControlName="primary"
+                   placeholder="Primary color"
+                   [(colorPicker)]="event.color.primary"
+                   [style.background]="event.color.primary"
+                   (colorPickerChange)="event.color.primary = $event; contactForm.patchValue({color:{primary:$event}})"/>
+        </md-input-container>
+        <md-input-container>
+            <input mdInput
+                   name="secondary color"
+                   formControlName="secondary"
+                   placeholder="Secondary color"
+                   [(colorPicker)]="event.color.secondary"
+                   [style.background]="event.color.secondary"
+                   (colorPickerChange)="event.color.secondary = $event; contactForm.patchValue({color:{secondary:$event}})"/>
+        </md-input-container>
+    </div>
+
+    <div fxFlex="1 0 auto" fxLayout="row">
+
+        <md-input-container class="mr-24">
+            <input mdInput
+                   name="start"
+                   formControlName="start"
+                   [mdDatepicker]="startDatePicker"
+                   placeholder="Start Date">
+            <button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
+        </md-input-container>
+        <md-datepicker #startDatePicker></md-datepicker>
+
+        <md-input-container class="no-errors-spacer" flex md-no-float>
+            <input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
+        </md-input-container>
+
+    </div>
+
+    <div fxFlex="1 0 auto" fxLayout="row">
+
+        <md-input-container class="mr-24">
+            <input mdInput
+                   name="end"
+                   formControlName="end"
+                   [mdDatepicker]="endDatePicker"
+                   placeholder="End Date">
+            <button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
+        </md-input-container>
+        <md-datepicker #endDatePicker></md-datepicker>
+
+        <md-input-container class="no-errors-spacer" flex md-no-float>
+            <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
+        </md-input-container>
+
+    </div>
+
+    <md-input-container formGroupName="meta">
+        <input mdInput
+               name="location"
+               formControlName="location"
+               placeholder="Location">
+    </md-input-container>
+
+    <md-input-container formGroupName="meta">
+
+            <textarea mdInput
+                      formControlName="notes"
+                      placeholder="Notes"
+                      md-maxlength="250"
+                      max-rows="4">
+            </textarea>
+    </md-input-container>
+
+</form>
+
+<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+
+    <button *ngIf="action !=='edit'"
+            md-raised-button
+            (click)="dialogRef.close(contactForm)"
+            class="save-button mat-accent"
+            [disabled]="contactForm.invalid"
+            aria-label="SAVE">
+        SAVE
+    </button>
+
+    <button *ngIf="action ==='edit'"
+            md-raised-button
+            (click)="dialogRef.close(['save',contactForm])"
+            class="save-button mat-accent"
+            [disabled]="contactForm.invalid"
+            aria-label="SAVE">
+        SAVE
+    </button>
+
+    <button *ngIf="action ==='edit'"
+            md-button
+            class="mat-icon-button"
+            (click)="dialogRef.close(['delete',contactForm])"
+            aria-label="Delete"
+            md-tooltip="Delete">
+        <md-icon>delete</md-icon>
+    </button>
+
+</div>
+-->

src/app/main/content/apps/contacts/contact-form/contact-form.component.scss

@@ -0,0 +1,16 @@
+.contact-form-dialog {
+    .mat-dialog-container {
+        padding: 0;
+        max-width: 400px;
+        width: 400px;
+
+        .toolbar-bottom {
+            height: 200px;
+        }
+    }
+}
+
+:host {
+    display: flex;
+    flex-direction: column;
+}

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

@@ -0,0 +1,67 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { CalendarEvent } from 'angular-calendar';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import 'rxjs/Rx';
+import { Contact } from '../contact.model';
+
+@Component({
+    selector     : 'fuse-contacts-contact-form-dialog',
+    templateUrl  : './contact-form.component.html',
+    styleUrls    : ['./contact-form.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class ContactFormDialogComponent implements OnInit
+{
+    event: CalendarEvent;
+    dialogTitle: string;
+    contactForm: FormGroup;
+    action: string;
+    contact: Contact;
+
+    constructor(
+        public dialogRef: MdDialogRef<ContactFormDialogComponent>,
+        @Inject(MD_DIALOG_DATA) private data: any,
+        private formBuilder: FormBuilder
+    )
+    {
+        this.contact = data.contact;
+        this.action = data.action;
+
+        if ( this.action === 'edit' )
+        {
+            this.dialogTitle = 'Edit Contact';
+        }
+        else
+        {
+            this.dialogTitle = 'New Contact';
+            this.contact = new Contact({});
+        }
+
+        // this.contactForm = this.createContactForm();
+    }
+
+    ngOnInit()
+    {
+    }
+
+    createContactForm()
+    {
+        return new FormGroup({
+            title : new FormControl(this.event.title),
+            start : new FormControl(this.event.start),
+            end   : new FormControl(this.event.end),
+            allDay: new FormControl(this.event.allDay),
+            color : this.formBuilder.group({
+                primary  : new FormControl(this.event.color.primary),
+                secondary: new FormControl(this.event.color.secondary)
+            }),
+            meta  :
+                this.formBuilder.group({
+                    location: new FormControl(this.event.meta.location),
+                    notes   : new FormControl(this.event.meta.notes)
+                })
+        });
+    }
+}

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

@@ -94,9 +94,9 @@
     </ng-container>
 
     <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
-    <md-row *cdkRowDef="let row; columns: displayedColumns;"
+    <md-row *cdkRowDef="let contact; columns: displayedColumns;"
-            (click)="onSelect(row)"
+            (click)="editContact(contact)"
-            [ngClass]="{'md-light-blue-50-bg':checkboxes[row.id]}"
+            [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
             md-ripple>
     </md-row>
 </md-table>

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

@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ContactsService } from '../contacts.service';
 import { DataSource } from '@angular/cdk';
 import { Observable } from 'rxjs/Observable';
+import { ContactFormDialogComponent } from '../contact-form/contact-form.component';
+import { MdDialog, MdDialogRef } from '@angular/material';
+import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector   : 'fuse-contacts-contact-list',
@@ -10,6 +13,8 @@ import { Observable } from 'rxjs/Observable';
 })
 export class ContactListComponent implements OnInit
 {
+    @ViewChild('dialogContent') dialogContent: TemplateRef<any>;
+
     contacts: any;
     user: any;
     dataSource: FilesDataSource | null;
@@ -17,7 +22,14 @@ export class ContactListComponent implements OnInit
     selectedContacts: any[];
     checkboxes: {};
 
-    constructor(private contactsService: ContactsService)
+    dialogRef: any;
+
+    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
+
+    constructor(
+        private contactsService: ContactsService,
+        public dialog: MdDialog
+    )
     {
         this.contactsService.onContactsChanged.subscribe(contacts => {
 
@@ -48,9 +60,47 @@ export class ContactListComponent implements OnInit
         this.dataSource = new FilesDataSource(this.contactsService);
     }
 
-    onSelect(selected)
+    editContact(contact)
     {
         // this.fileManagerService.onContactSelected.next(selected);
+
+        this.dialogRef = this.dialog.open(ContactFormDialogComponent, {
+            panelClass: 'contact-form-dialog',
+            data      : {
+                contact: contact,
+                action : 'edit'
+            }
+        });
+
+        /*   this.dialogRef.afterClosed()
+               .subscribe(response => {
+                   if ( !response )
+                   {
+                       return;
+                   }
+                   const actionType: string = response[0];
+                   const formData: FormGroup = response[1];
+                   switch ( actionType )
+                   {
+                       /!**
+                        * Save
+                        *!/
+                       case 'save':
+
+                           this.events[eventIndex] = Object.assign(this.events[eventIndex], formData.getRawValue());
+                           this.refresh.next(true);
+
+                           break;
+                       /!**
+                        * Delete
+                        *!/
+                       case 'delete':
+
+                           this.deleteEvent(event);
+
+                           break;
+                   }
+               });*/
     }
 
     onSelectedChange(contactId)

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

@@ -6,6 +6,7 @@ import { ContactsComponent } from './contacts.component';
 import { ContactsService } from './contacts.service';
 import { ContactListComponent } from './contact-list/contact-list.component';
 import { SelectedBarComponent } from './selected-bar/selected-bar.component';
+import { ContactFormDialogComponent } from './contact-form/contact-form.component';
 
 const routes: Routes = [
     {
@@ -19,19 +20,21 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
+    imports        : [
         SharedModule,
         RouterModule.forChild(routes)
     ],
-    declarations: [
+    declarations   : [
         ContactsComponent,
         ContactListComponent,
         SelectedBarComponent,
-        MainSidenavComponent
+        MainSidenavComponent,
+        ContactFormDialogComponent
     ],
-    providers   : [
+    providers      : [
         ContactsService
-    ]
+    ],
+    entryComponents: [ContactFormDialogComponent]
 })
 export class FuseContactsModule
 {

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

@@ -18,10 +18,15 @@ export class ContactsService implements Resolve<any>
 
     onSearchTextChanged: Subject<any> = new Subject();
 
+    onFilterChanged: Subject<any> = new Subject();
+
     contacts: Contact[];
     user: any;
     selectedContacts: string[] = [];
 
+    searchText: string;
+    filterBy: string;
+
     constructor(private http: Http)
     {
     }
@@ -44,7 +49,13 @@ export class ContactsService implements Resolve<any>
                 ([files]) => {
 
                     this.onSearchTextChanged.subscribe(searchText => {
-                        this.getContacts(searchText);
+                        this.searchText = searchText;
+                        this.getContacts();
+                    });
+
+                    this.onFilterChanged.subscribe(filter => {
+                        this.filterBy = filter;
+                        this.getContacts();
                     });
 
                     resolve();
@@ -55,7 +66,7 @@ export class ContactsService implements Resolve<any>
         });
     }
 
-    getContacts(searchText?): Promise<any>
+    getContacts(): Promise<any>
     {
         return new Promise((resolve, reject) => {
                 this.http.get('api/contacts-contacts')
@@ -63,9 +74,23 @@ export class ContactsService implements Resolve<any>
 
                         this.contacts = response.json().data;
 
-                        if ( searchText && searchText !== '' )
+                        if ( this.filterBy === 'starred' )
                         {
-                            this.contacts = FuseUtils.filterArrayByString(this.contacts, searchText);
+                            this.contacts = this.contacts.filter(_contact => {
+                                return this.user.starred.includes(_contact.id);
+                            });
+                        }
+
+                        if ( this.filterBy === 'frequent' )
+                        {
+                            this.contacts = this.contacts.filter(_contact => {
+                                return this.user.frequentContacts.includes(_contact.id);
+                            });
+                        }
+
+                        if ( this.searchText && this.searchText !== '' )
+                        {
+                            this.contacts = FuseUtils.filterArrayByString(this.contacts, this.searchText);
                         }
 
                         this.contacts = this.contacts.map(contact => {
@@ -180,6 +205,7 @@ export class ContactsService implements Resolve<any>
             this.http.post('api/contacts-user/' + this.user.id, {...userData})
                 .subscribe(response => {
                     this.getUserData();
+                    this.getContacts();
                     resolve(response);
                 });
         });

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

@@ -18,19 +18,19 @@
             <div class="nav">
 
                 <div class="nav-item" aria-label="inbox">
-                    <a class="nav-link" md-ripple>
+                    <a class="nav-link" md-ripple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
                         <span class="title">All Contacts</span>
                     </a>
                 </div>
 
-                <div class="nav-item" aria-label="starred">
+                <div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')">
-                    <a class="nav-link" md-ripple>
+                    <a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='frequent'}">
                         <div class="title">Freequently contacted</div>
                     </a>
                 </div>
 
-                <div class="nav-item" aria-label="starred">
+                <div class="nav-item" aria-label="starred" (click)="changeFilter('starred')">
-                    <a class="nav-link" md-ripple>
+                    <a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='starred'}">
                         <div class="title">Starred Contacts</div>
                     </a>
                 </div>

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

@@ -9,9 +9,11 @@ import { ContactsService } from '../../contacts.service';
 export class MainSidenavComponent implements OnInit
 {
     user: any;
+    filterBy: string;
 
     constructor(private contactsService: ContactsService)
     {
+        this.filterBy = 'all';
         this.contactsService.onUserDataChanged.subscribe(user => {
             this.user = user;
         });
@@ -21,4 +23,9 @@ export class MainSidenavComponent implements OnInit
     {
     }
 
+    changeFilter(filter)
+    {
+        this.filterBy = filter;
+        this.contactsService.onFilterChanged.next(this.filterBy);
+    }
 }