import { Component , Input , OnInit } from '@angular/core' ; import { Router } from '@angular/router' ; import { MdSnackBar , MdSnackBarConfig } from '@angular/material' ; import { Contact , ContactService } from '../shared' ; import { constants } from './contact-list.constants' ; import { CONTACTS } from '..//shared/data/mock-contacts' ; @ Component ( { selector : 'app-contact-list' , templateUrl : './contact-list.component.html' , styleUrls : [ './contact-list.component.css' ] , providers : [ MdSnackBar ] } ) export class ContactListComponent implements OnInit { public noContactsFoundMessage : string = constants . NO_CONTACTS_FOUND_MESSAGE ; public loadingContactsMessage : string = constants . LOADING_CONTACTS_MESSAGE ; public deletingContactsMessage : string = constants . DELETING_CONTACTS_MESSAGE ; public deletingContactMessage : string = constants . DELETING_CONTACT_MESSAGE ; public isLoading = true ; public deletingContacts = false ; public deletingContact = false ; public readonly backupContacts : Array < Contact > = CONTACTS . slice ( ) ; public selectedContact : Contact ; @ Input ( 'contacts' ) contacts : Contact [ ] ; constructor ( private contactService , private router , private snackBar ) { } ngOnInit ( ) { this . getContacts ( ) ; } public onClick ( contact ) { this . router . navigate ( [ '/contact' , contact . id ] ) ; } public editContact ( contact ) { this . router . navigate ( [ '/edit' , contact . id ] ) ; } public displayDeleteSnackBar ( contact ) { const message = `${ contact . name } deleted.` ; const snackConfig = { duration : 2000 } ; const actionLabel = '' ; this . snackBar . open ( message , actionLabel , snackConfig ) ; } public deleteContact ( contact ) { this . deletingContact = true ; this . displayDeleteSnackBar ( contact ) ; this . contactService . delete ( contact ) . toPromise ( ) . then ( ( ) => { this . contacts = this . contacts . filter ( c => c !== contact ) ; if ( this . selectedContact === contact ) { this . selectedContact = null ; } this . deletingContact = false ; } ) ; } public deleteContacts ( ) { this . deletingContacts = true ; this . contacts . forEach ( ( contact , index ) => { this . contactService . delete ( contact ) ; if ( index === this . contacts . length - 1 ) { this . getContacts ( ) ; } } ) ; } public getContacts ( ) { this . isLoading = true ; this . contactService . getContacts ( ) . toPromise ( ) . then ( contacts => { this . isLoading = false ; this . deletingContacts = false ; this . contacts = contacts ; } ) ; } public refreshContacts ( ) { this . backupContacts . forEach ( ( contact , index ) => { this . contactService . post ( contact ) ; if ( index === this . backupContacts . length - 1 ) { this . getContacts ( ) ; } } ) ; } public saveContact ( contact ) { contact . favorite = ! contact . favorite ; this . contactService . save ( contact ) ; } public onSelect ( contact ) { this . selectedContact = contact ; } public sortContacts ( property , order ) { this . contacts = this . contacts . sort ( ( a , b ) => { console . log ( 'sorting' , property , order ) ; return ( a [ property ] > b [ property ] ) ? 1 : - 1 ; } ) ; } }