(Contacts App) Done for now.

package.json

@@ -12,18 +12,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.2",
+    "@angular/animations": "^4.3.3",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.2",
+    "@angular/common": "^4.3.3",
-    "@angular/compiler": "^4.3.2",
+    "@angular/compiler": "^4.3.3",
-    "@angular/core": "^4.3.2",
+    "@angular/core": "^4.3.3",
     "@angular/flex-layout": "2.0.0-beta.8",
-    "@angular/forms": "^4.3.2",
+    "@angular/forms": "^4.3.3",
-    "@angular/http": "^4.3.2",
+    "@angular/http": "^4.3.3",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.2",
+    "@angular/platform-browser": "^4.3.3",
-    "@angular/platform-browser-dynamic": "^4.3.2",
+    "@angular/platform-browser-dynamic": "^4.3.3",
-    "@angular/router": "^4.3.2",
+    "@angular/router": "^4.3.3",
     "@swimlane/ngx-datatable": "^9.3.1",
     "@swimlane/ngx-dnd": "^2.2.0",
     "angular-calendar": "^0.19.0",
@@ -34,14 +34,14 @@
     "highlight.js": "^9.12.0",
     "moment": "^2.18.1",
     "ngx-color-picker": "^4.2.0",
-    "ngx-perfect-scrollbar": "^4.5.2",
+    "ngx-perfect-scrollbar": "^4.5.3",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.16"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.5",
+    "@angular/cli": "^1.2.6",
-    "@angular/compiler-cli": "^4.3.1",
+    "@angular/compiler-cli": "^4.3.3",
-    "@angular/language-service": "^4.3.1",
+    "@angular/language-service": "^4.3.3",
     "@types/jasmine": "^2.5.53",
     "@types/jasminewd2": "^2.0.2",
     "@types/node": "^6.0.83",

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -64,10 +64,6 @@
             </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">

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

@@ -17,173 +17,85 @@
 
 <div md-dialog-content class="p-24 m-0" perfect-scrollbar>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+    <form [formGroup]="contactForm">
-        <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">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12"></md-icon>
+            <md-icon class="mr-12 mt-12">account_circle</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input placeholder="Lastname" mdInput>
+                <input name="name" formControlName="name" placeholder="Name" mdInput required>
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">star</md-icon>
+            <md-icon class="mr-12 mt-12"></md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input mdInput placeholder="Nickname">
+                <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">phone</md-icon>
+            <md-icon class="mr-12 mt-12">star</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input mdInput placeholder="Phone number">
+                <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">email</md-icon>
+            <md-icon class="mr-12 mt-12">phone</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input mdInput type="email" placeholder="Email">
+                <input formControlName="phone" mdInput placeholder="Phone number">
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">domain</md-icon>
+            <md-icon class="mr-12 mt-12">email</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input mdInput placeholder="Company">
+                <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">work</md-icon>
+            <md-icon class="mr-12 mt-12">domain</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <input mdInput placeholder="Job title">
+                <input name="company" formControlName="company" mdInput placeholder="Company">
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </div>
 
-    <!--
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-datepicker class="birthday-input" ng-model="contact.birthday" md-placeholder="Birthday"
+            <md-icon class="mr-12 mt-12">work</md-icon>
-                           ng-required="false">
+            <md-input-container fxFlex>
-            </md-datepicker>-->
+                <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
+            </md-input-container>
+        </div>
 
-    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">home</md-icon>
+            <md-input-container fxFlex class="mr-24">
-        <md-input-container fxFlex>
+                <button mdSuffix [mdDatepickerToggle]="birthdayDatePicker"></button>
-            <input mdInput placeholder="Address">
+                <input mdInput
-        </md-input-container>
+                       name="birthday" formControlName="birthday"
-    </div>
+                       [mdDatepicker]="birthdayDatePicker"
+                       placeholder="Birthday">
+            </md-input-container>
+            <md-datepicker #birthdayDatePicker></md-datepicker>
+        </div>
 
-    <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
+        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-        <md-icon class="mr-12 mt-12">note</md-icon>
+            <md-icon class="mr-12 mt-12">home</md-icon>
-        <md-input-container fxFlex>
+            <md-input-container fxFlex>
-            <textarea placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+                <input name="address" formControlName="address" mdInput placeholder="Address">
-        </md-input-container>
+            </md-input-container>
-    </div>
+        </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 name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+            </md-input-container>
+        </div>
+
+    </form>
 
 </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">
 
@@ -215,4 +127,3 @@
     </button>
 
 </div>
--->

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

@@ -1,4 +1,5 @@
 .contact-form-dialog {
+
     .mat-dialog-container {
         padding: 0;
         max-width: 400px;

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

@@ -26,12 +26,12 @@ export class ContactFormDialogComponent implements OnInit
         private formBuilder: FormBuilder
     )
     {
-        this.contact = data.contact;
         this.action = data.action;
 
         if ( this.action === 'edit' )
         {
             this.dialogTitle = 'Edit Contact';
+            this.contact = data.contact;
         }
         else
         {
@@ -39,7 +39,7 @@ export class ContactFormDialogComponent implements OnInit
             this.contact = new Contact({});
         }
 
-        // this.contactForm = this.createContactForm();
+        this.contactForm = this.createContactForm();
     }
 
     ngOnInit()
@@ -48,20 +48,19 @@ export class ContactFormDialogComponent implements OnInit
 
     createContactForm()
     {
-        return new FormGroup({
+        return this.formBuilder.group({
-            title : new FormControl(this.event.title),
+            id      : [this.contact.id],
-            start : new FormControl(this.event.start),
+            name    : [this.contact.name],
-            end   : new FormControl(this.event.end),
+            lastName: [this.contact.lastName],
-            allDay: new FormControl(this.event.allDay),
+            avatar  : [this.contact.avatar],
-            color : this.formBuilder.group({
+            nickname: [this.contact.nickname],
-                primary  : new FormControl(this.event.color.primary),
+            company : [this.contact.company],
-                secondary: new FormControl(this.event.color.secondary)
+            jobTitle: [this.contact.jobTitle],
-            }),
+            email   : [this.contact.email],
-            meta  :
+            phone   : [this.contact.phone],
-                this.formBuilder.group({
+            address : [this.contact.address],
-                    location: new FormControl(this.event.meta.location),
+            birthday: [this.contact.birthday],
-                    notes   : new FormControl(this.event.meta.notes)
+            notes   : [this.contact.notes]
-                })
         });
     }
 }

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

@@ -72,18 +72,18 @@
         <md-header-cell *cdkHeaderCellDef></md-header-cell>
         <md-cell *cdkCellDef="let contact">
             <div fxFlex="row" fxLayoutAlign="end center">
-                <button md-icon-button (click)="toggleStar(contact.id)" aria-label="Toggle star">
+                <button md-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                     <md-icon *ngIf="user.starred.includes(contact.id)">star</md-icon>
                     <md-icon *ngIf="!user.starred.includes(contact.id)">star_outline</md-icon>
                 </button>
 
                 <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="More"
-                        ng-click="$mdOpenMenu($event)">
+                        (click)="$event.stopPropagation();">
                     <md-icon>more_vert</md-icon>
                 </button>
 
                 <md-menu #moreMenu="mdMenu">
-                    <button md-menu-item aria-label="remove" (click)="removeContact(contact.id)">
+                    <button md-menu-item aria-label="remove" (click)="deleteContact(contact)">
                         <md-icon>delete</md-icon>
                         <span>Remove</span>
                     </button>
@@ -100,3 +100,10 @@
             md-ripple>
     </md-row>
 </md-table>
+
+
+<!-- ADD CONTACT BUTTON -->
+<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact($event)" aria-label="add contact">
+    <md-icon>person_add</md-icon>
+</button>
+<!-- / ADD CONTACT BUTTON -->

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

@@ -37,3 +37,10 @@
         }
     }
 }
+
+#add-contact-button {
+    position: fixed;
+    bottom: 12px;
+    right: 12px;
+    padding: 0;
+}

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

@@ -5,6 +5,7 @@ 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';
+import { FormGroup } from '@angular/forms';
 
 @Component({
     selector   : 'fuse-contacts-contact-list',
@@ -60,10 +61,30 @@ export class ContactListComponent implements OnInit
         this.dataSource = new FilesDataSource(this.contactsService);
     }
 
+    newContact()
+    {
+        this.dialogRef = this.dialog.open(ContactFormDialogComponent, {
+            panelClass: 'contact-form-dialog',
+            data      : {
+                action: 'new'
+            }
+        });
+
+        this.dialogRef.afterClosed()
+            .subscribe((response: FormGroup) => {
+                if ( !response )
+                {
+                    return;
+                }
+
+                this.contactsService.updateContact(response.getRawValue());
+
+            });
+
+    }
+
     editContact(contact)
     {
-        // this.fileManagerService.onContactSelected.next(selected);
-
         this.dialogRef = this.dialog.open(ContactFormDialogComponent, {
             panelClass: 'contact-form-dialog',
             data      : {
@@ -72,35 +93,55 @@ export class ContactListComponent implements OnInit
             }
         });
 
-        /*   this.dialogRef.afterClosed()
+        this.dialogRef.afterClosed()
-               .subscribe(response => {
+            .subscribe(response => {
-                   if ( !response )
+                if ( !response )
-                   {
+                {
-                       return;
+                    return;
-                   }
+                }
-                   const actionType: string = response[0];
+                const actionType: string = response[0];
-                   const formData: FormGroup = response[1];
+                const formData: FormGroup = response[1];
-                   switch ( actionType )
+                switch ( actionType )
-                   {
+                {
-                       /!**
+                    /**
-                        * Save
+                     * Save
-                        *!/
+                     */
-                       case 'save':
+                    case 'save':
 
-                           this.events[eventIndex] = Object.assign(this.events[eventIndex], formData.getRawValue());
+                        this.contactsService.updateContact(formData.getRawValue());
-                           this.refresh.next(true);
 
-                           break;
+                        break;
-                       /!**
+                    /**
-                        * Delete
+                     * Delete
-                        *!/
+                     */
-                       case 'delete':
+                    case 'delete':
 
-                           this.deleteEvent(event);
+                        this.deleteContact(contact);
+
+                        break;
+                }
+            });
+    }
+
+    /**
+     * Delete Contact
+     */
+    deleteContact(contact)
+    {
+        this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
+            disableClose: false
+        });
+
+        this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete?';
+
+        this.confirmDialogRef.afterClosed().subscribe(result => {
+            if ( result )
+            {
+                this.contactsService.deleteContact(contact);
+            }
+            this.confirmDialogRef = null;
+        });
 
-                           break;
-                   }
-               });*/
     }
 
     onSelectedChange(contactId)
@@ -121,11 +162,6 @@ export class ContactListComponent implements OnInit
 
         this.contactsService.updateUserData(this.user);
     }
-
-    removeContact(contactId)
-    {
-
-    }
 }
 
 export class FilesDataSource extends DataSource<any>

src/app/main/content/apps/contacts/contact.model.ts

@@ -1,3 +1,5 @@
+import { FuseUtils } from '../../../../core/fuseUtils';
+
 export class Contact
 {
     id: string;
@@ -16,20 +18,18 @@ export class Contact
     constructor(contact)
     {
         {
-
+            this.id = contact.id || FuseUtils.genearateGUID();
-            this.id = contact.id;
+            this.name = contact.name || '';
-            this.name = contact.name;
+            this.lastName = contact.lastName || '';
-            this.lastName = contact.lastName;
+            this.avatar = contact.avatar || 'assets/images/avatars/profile.jpg';
-            this.avatar = contact.avatar;
+            this.nickname = contact.nickname || '';
-            this.nickname = contact.nickname;
+            this.company = contact.company || '';
-            this.company = contact.company;
+            this.jobTitle = contact.jobTitle || '';
-            this.jobTitle = contact.jobTitle;
+            this.email = contact.email || '';
-            this.email = contact.email;
+            this.phone = contact.phone || '';
-            this.phone = contact.phone;
+            this.address = contact.address || '';
-            this.address = contact.address;
+            this.birthday = contact.birhday || '';
-            this.birthday = contact.birhday;
+            this.notes = contact.notes || '';
-            this.notes = contact.notes;
         }
     }
-
 }

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

@@ -50,7 +50,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24" perfect-scrollbar>
+        <div class="center p-24 pr-92" perfect-scrollbar>
 
             <!-- CONTENT -->
             <div class="content md-white-bg mat-elevation-z4">
@@ -66,85 +66,3 @@
     </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>
-
-            &lt;!&ndash; HEADER &ndash;&gt;
-            <div class="header md-accent-bg p-24" fxfxLayout="column" 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" fxfxLayout="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" fxfxLayout="row">
-                        <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
-                            <md-icon>search</md-icon>
-                        </button>
-                    </div>
-                </div>
-                &lt;!&ndash; / TOOLBAR &ndash;&gt;
-
-                &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>
-                &lt;!&ndash; / BREADCRUMB &ndash;&gt;
-
-                &lt;!&ndash; ADD FILE BUTTON &ndash;&gt;
-                <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>
-                &lt;!&ndash; / ADD FILE BUTTON &ndash;&gt;
-
-            </div>
-            &lt;!&ndash; / HEADER &ndash;&gt;
-
-            &lt;!&ndash; CONTENT &ndash;&gt;
-            <div class="content">
-                <fuse-contacts-contact-list></fuse-contacts-contact-list>
-            </div>
-            &lt;!&ndash; / CONTENT &ndash;&gt;
-
-        </div>
-        &lt;!&ndash; / CENTER &ndash;&gt;
-
-    </md-sidenav-container>
-
-</div>
--->

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

@@ -152,7 +152,6 @@ export class ContactsService implements Resolve<any>
      */
     toggleSelectAll()
     {
-        console.info(this.selectedContacts);
         if ( this.selectedContacts.length > 0 )
         {
             this.deselectContacts();
@@ -194,6 +193,7 @@ export class ContactsService implements Resolve<any>
 
             this.http.post('api/contacts-contacts/' + contact.id, {...contact})
                 .subscribe(response => {
+                    this.getContacts();
                     resolve(response);
                 });
         });
@@ -219,4 +219,25 @@ export class ContactsService implements Resolve<any>
         this.onSelectedContactsChanged.next(this.selectedContacts);
     }
 
+    deleteContact(contact)
+    {
+        const contactIndex = this.contacts.indexOf(contact);
+        this.contacts.splice(contactIndex, 1);
+        this.onContactsChanged.next(this.contacts);
+    }
+
+    deleteSelectedContacts()
+    {
+        for ( const contactId of this.selectedContacts )
+        {
+            const contact = this.contacts.find(_contact => {
+                return _contact.id === contactId;
+            });
+            const contactIndex = this.contacts.indexOf(contact);
+            this.contacts.splice(contactIndex, 1);
+        }
+        this.onContactsChanged.next(this.contacts);
+        this.deselectContacts();
+    }
+
 }

src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ContactsService } from '../contacts.service';
+import { MdDialog, MdDialogRef } from '@angular/material';
+import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector   : 'fuse-selected-bar',
@@ -11,8 +13,12 @@ export class SelectedBarComponent implements OnInit
     selectedContacts: string[];
     hasSelectedContacts: boolean;
     isIndeterminate: boolean;
+    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
 
-    constructor(private contactsService: ContactsService)
+    constructor(
+        private contactsService: ContactsService,
+        public dialog: MdDialog
+    )
     {
         this.contactsService.onSelectedContactsChanged
             .subscribe(selectedContacts => {
@@ -41,7 +47,19 @@ export class SelectedBarComponent implements OnInit
 
     deleteSelectedContacts()
     {
+        this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
+            disableClose: false
+        });
 
+        this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete all selected contacts?';
+
+        this.confirmDialogRef.afterClosed().subscribe(result => {
+            if ( result )
+            {
+                this.contactsService.deleteSelectedContacts();
+            }
+            this.confirmDialogRef = null;
+        });
     }
 
 }