diff --git a/src/app/components/contact-form/contact-form.component.ts b/src/app/components/contact-form/contact-form.component.ts
index b0c47dd..9dba3e4 100644
--- a/src/app/components/contact-form/contact-form.component.ts
+++ b/src/app/components/contact-form/contact-form.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Contact } from '../../contact';
+import { Address } from '../../address';
+import { ContactService } from '../../services/contact.service';
@Component({
selector: 'app-contact-form',
@@ -10,17 +12,19 @@ import { Contact } from '../../contact';
export class ContactFormComponent implements OnInit {
roles = ['Internal User', 'Admin', 'Customer'];
- model = new Contact('Mohammed', '', 'Internal User');
+ genders = ['male', 'female'];
+ model = new Contact('John', 'Doe', 'Internal User', new Address());
submitted: boolean = false;
- constructor() { }
+ constructor(private contactService: ContactService) { }
ngOnInit() {
}
onSubmit() {
- this.submitted = true;
+ this.contactService.addContact(this.model)
+ .subscribe(() => this.submitted = true);
}
get diagnostic() {
@@ -28,7 +32,6 @@ export class ContactFormComponent implements OnInit {
}
newContact() {
- this.model = new Contact('', '', '');
+ this.model = new Contact('', '', '', new Address());
}
-
}
diff --git a/src/app/contact.ts b/src/app/contact.ts
index 0c642c9..eb055dc 100644
--- a/src/app/contact.ts
+++ b/src/app/contact.ts
@@ -1,8 +1,25 @@
+import { Address } from "./address";
+
export class Contact {
- constructor(
- public firstName: string,
- public lastName: string,
- public role: string,
- public middleName?: string
- ) { }
+
+ public id: string;
+ public firstName: string;
+ public lastName: string;
+ public address: Address;
+ public role: string;
+ public middleName: string;
+ public gender: string;
+ public email: string;
+ public phone: string;
+ public bio: string;
+ public jobPosition: string;
+ public company: string;
+
+ constructor(firstName: string, lastName: string,role: string, address: Address) {
+ this.firstName = firstName;
+ this.lastName = lastName;
+ this.role = role;
+ this.address = address;
+ this.gender = 'male';
+ }
}
diff --git a/src/app/pipes/api-contact.pipe.spec.ts b/src/app/pipes/api-contact.pipe.spec.ts
new file mode 100644
index 0000000..e4767aa
--- /dev/null
+++ b/src/app/pipes/api-contact.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ApiContactPipe } from './api-contact.pipe';
+
+describe('ApiContactPipe', () => {
+ it('create an instance', () => {
+ const pipe = new ApiContactPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/src/app/pipes/api-contact.pipe.ts b/src/app/pipes/api-contact.pipe.ts
new file mode 100644
index 0000000..83845c6
--- /dev/null
+++ b/src/app/pipes/api-contact.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Contact } from '../contact';
+import { ApiContact } from '../api-contact';
+
+@Pipe({
+ name: 'apiContact'
+})
+export class ApiContactPipe implements PipeTransform {
+
+ transform(value: Contact, args?: any): ApiContact {
+ const apiContact = new ApiContact(value.firstName, value.lastName, value.address);
+ apiContact.id = value.id;
+ apiContact.bio = value.bio;
+ apiContact.email = value.email;
+ apiContact.gender = value.gender;
+ apiContact.phone = value.phone;
+ return apiContact;
+ }
+
+}
diff --git a/src/app/pipes/contact.pipe.spec.ts b/src/app/pipes/contact.pipe.spec.ts
new file mode 100644
index 0000000..5b87386
--- /dev/null
+++ b/src/app/pipes/contact.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ContactPipe } from './contact.pipe';
+
+describe('ContactPipe', () => {
+ it('create an instance', () => {
+ const pipe = new ContactPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/src/app/pipes/contact.pipe.ts b/src/app/pipes/contact.pipe.ts
new file mode 100644
index 0000000..9f69f15
--- /dev/null
+++ b/src/app/pipes/contact.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ApiContact } from '../api-contact';
+import { Contact } from '../contact';
+
+@Pipe({
+ name: 'contact'
+})
+export class ContactPipe implements PipeTransform {
+
+ transform(value: ApiContact, args?: any): Contact {
+ const contact = new Contact(value.firstName, value.lastName, '', value.address);
+ contact.id = value.id;
+ contact.bio = value.bio;
+ contact.gender = value.gender;
+ contact.email = value.email;
+ contact.phone = value.phone;
+ return contact;
+ }
+
+}
diff --git a/src/app/services/contact.service.spec.ts b/src/app/services/contact.service.spec.ts
new file mode 100644
index 0000000..584e8a2
--- /dev/null
+++ b/src/app/services/contact.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ContactService } from './contact.service';
+
+describe('ContactService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [ContactService]
+ });
+ });
+
+ it('should be created', inject([ContactService], (service: ContactService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts
new file mode 100644
index 0000000..2f3ed05
--- /dev/null
+++ b/src/app/services/contact.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { catchError, map, tap } from 'rxjs/operators';
+
+import { Contact } from '../contact'
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { ApiContact } from '../api-contact';
+
+import { ApiContactPipe } from '../pipes/api-contact.pipe'
+
+const httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class ContactService {
+
+ private APIUrl = 'https://mini-crm-api.herokuapp.com/api/v1/contacts';
+
+ constructor( private http: HttpClient, private apiContactPipe: ApiContactPipe ) {
+
+ }
+
+ getContacts(): Observable
{
+ return this.http.get(this.APIUrl).pipe(
+ catchError(this.handleError('getContacts', []))
+ );
+ }
+
+ addContact (contact: Contact): Observable {
+ const apiContact = this.apiContactPipe.transform(contact);
+ return this.http.post(this.APIUrl, apiContact , httpOptions).pipe(
+ tap(_ => this.log(`updated hero id=${contact.firstName}`)),
+ catchError(this.handleError('updateHero'))
+ );
+ }
+
+ private log (message: string){
+ console.log(message);
+ }
+
+ private handleError (operation = 'operation', result?: T) {
+ return (error: any): Observable => {
+
+ // TODO: send the error to remote logging infrastructure
+ // console.error(error); // log to console instead
+
+ // TODO: better job of transforming error for user consumption
+ this.log(`${operation} failed: ${error.message}`);
+
+ // Let the app keep running by returning an empty result.
+ return of(result as T);
+ };
+ }
+
+}