connect to mini-crm-api and save a contact

src/app/address.ts

@@ -0,0 +1,16 @@
+export class Address {
+  public lineOne: string;
+  public city: string;
+  public country: string;
+  public zipCode: number;
+  public state: string;
+  public lineTwo: string;
+
+  constructor() { 
+    this.lineOne = '';
+    this.lineTwo = '';
+    this.city = '';
+    this.country = '';
+    this.zipCode = null;
+  }
+}

src/app/api-contact.ts

@@ -0,0 +1,22 @@
+import { Contact } from "./contact";
+import { Address } from "./address";
+
+export class ApiContact {
+
+  public id: string;
+  public firstName: string;
+  public lastName: string;
+  public address: Address;
+  public bio: string;
+  public gender?: string;
+  public email: string;
+  public phone?: string;
+
+
+  constructor(firstName: string, lastName: string, address: Address) {
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.address = address;
+  }
+
+}

src/app/app.module.ts

@@ -1,12 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http'
+
+import { ContactService } from './services/contact.service'
 
 import { AppComponent } from './app.component';
 import { ContactFormComponent } from './components/contact-form/contact-form.component';
 import { HeaderComponent } from './components/blocks/header/header.component';
 import { ToDosComponent } from './components/blocks/to-dos/to-dos.component';
 import { DocComponent } from './components/blocks/doc/doc.component';
+import { ContactAddressComponent } from './components/contact-address/contact-address.component';
+import { ApiContactPipe } from './pipes/api-contact.pipe';
 
 
 @NgModule({
@@ -15,13 +20,16 @@ import { DocComponent } from './components/blocks/doc/doc.component';
     ContactFormComponent,
     HeaderComponent,
     ToDosComponent,
-    DocComponent
+    DocComponent,
+    ContactAddressComponent,
+    ApiContactPipe
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    HttpClientModule
   ],
-  providers: [],
+  providers: [ContactService, ApiContactPipe],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/contact-address/contact-address.component.css

@@ -0,0 +1,28 @@
+.ng-valid[required],
+.ng-valid.required {
+  border-left: 5px solid #42A948;
+  /* green */
+}
+
+.ng-invalid:not(form) {
+  border-left: 5px solid #a94442;
+  /* red */
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
+
+fieldset.pretty-set {
+  border: 1px solid lightgrey;
+  border-radius: 5px;
+  padding: 15px;
+}
+
+fieldset.pretty-set > legend {
+  font-size: 1rem;
+}

src/app/components/contact-address/contact-address.component.html

@@ -0,0 +1,45 @@
+<fieldset class="pretty-set">
+  <legend>
+    <label for="">Address </label>
+  </legend>
+  <div class="row">
+    <div class="col">
+      <label for="">Line One: </label>
+      <input type="text" class="form-control" id="lineOne" required minlength="4" [(ngModel)]="address.lineOne" name="lineOne" #lineOne="ngModel">
+      <div [hidden]="lineOne.valid || lineOne.pristine" class="alet alert-danger">
+        This line is required!!
+      </div>
+    </div>
+    <div class="col">
+      <label for="">Line Two: </label>
+      <input type="text" class="form-control" id="lineTwo" [(ngModel)]="address.lineTwo" nam e="lineTwo" #lineTwo="ngModel">
+    </div>
+  </div>
+  <div class="row">
+      <div class="col">
+        <label for="">Country: </label>
+        <input type="text" class="form-control" id="country" required [(ngModel)]="address.country" name="country" #country="ngModel">
+        <div [hidden]="country.valid || country.pristine" class="alet alert-danger">
+          This Country is required!!
+        </div>
+      </div>
+      <div class="col">
+        <label for="">City: </label>
+        <input type="text" class="form-control" id="city" required [(ngModel)]="address.city" name="city" #city="ngModel">
+        <div [hidden]="city.valid || city.pristine" class="alet alert-danger">
+          This City is required!!
+        </div>
+      </div>
+      <div class="col">
+          <label for="">State: </label>
+          <input type="text" class="form-control" id="state" [(ngModel)]="address.state" name="state" #state="ngModel">
+        </div>
+      <div class="col">
+        <label for="">Zip Code: </label>
+        <input type="text" class="form-control" id="zipCode" [(ngModel)]="address.zipCode" name="zipCode" #zipCode="ngModel">
+        <div [hidden]="zipCode.valid || zipCode.pristine" class="alet alert-danger">
+          This Zip Code is required!!
+        </div>
+      </div>
+    </div>
+</fieldset>

src/app/components/contact-address/contact-address.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactAddressComponent } from './contact-address.component';
+
+describe('ContactAddressComponent', () => {
+  let component: ContactAddressComponent;
+  let fixture: ComponentFixture<ContactAddressComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactAddressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactAddressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/contact-address/contact-address.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Address } from '../../address';
+
+@Component({
+  selector: 'app-contact-address',
+  templateUrl: './contact-address.component.html',
+  styleUrls: ['./contact-address.component.css']
+})
+export class ContactAddressComponent implements OnInit {
+
+  @Input() address: Address;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/contact-form/contact-form.component.html

@@ -10,29 +10,57 @@ <h2 class="text-center">
       </div>
       <div class="card-body">
         <form #contactForm="ngForm" (ngSubmit)="onSubmit()">
+          <!-- FirstName, LastName and MiddleName -->
           <div class="form-group">
             <div class="row">
               <div class="col">
                 <label for="">First Name</label>
                 <input type="text" class="form-control" id="firstName" required [(ngModel)]="model.firstName" name="firstName" #firstName="ngModel">
-                <div [hidden]="firstName.valid || firstName.pristine" class="alet alert-damger">
+                <div [hidden]="firstName.valid || firstName.pristine" class="alet alert-danger">
                   First name is required!!
                 </div>
               </div>
               <div class="col">
                 <label for="">Middle Name</label>
-                <input type="text" class="form-control" id="lastName" [(ngModel)]="model.muddleName" name="middleName">
+                <input type="text" class="form-control" id="middleName" [(ngModel)]="model.middleName" name="middleName">
               </div>
               <div class="col">
                 <label for="">Last Name</label>
-                <input type="text" class="form-control" id="middleName" required [(ngModel)]="model.lastNane" name="lastName" #lastName="ngModel">
-                <div [hidden]="lastName.valid || lastName.pristine" class="alet alert-damger">
+                <input type="text" class="form-control" id="lastName" required [(ngModel)]="model.lastName" name="lastName" #lastName="ngModel">
+                <div [hidden]="lastName.valid || lastName.pristine" class="alet alert-danger">
                   Last name is required!!
                 </div>
               </div>
             </div>
           </div>
-
+          <div class="form-groupe">
+            <div class="row">
+              <div class="col">
+                <label for="">Email</label>
+                <input type="email" class="form-control" id="email" required email [(ngModel)]="model.email" name="email" #email="ngModel">
+                <div [hidden]="email.valid || email.pristine" class="alet alert-danger">
+                  Must be a valid Email
+                </div>
+              </div>
+              <div class="col">
+                <label for="">Phone</label>
+                <input type="text" class="form-control" id="phone" required [(ngModel)]="model.phone" name="phone" #phone="ngModel">
+                <div [hidden]="phone.valid || phone.pristine" class="alet alert-danger">
+                  Phone number is required!!
+                </div>
+              </div>
+              <div class="col">
+                <label for="">Gender</label>
+                <select name="" id="gender" class="form-control" required name="gender" [(ngModel)]="model.gender">
+                  <option *ngFor="let gender of genders" [value]="gender">{{gender}}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <!-- /FirstName, LastName and MiddleName -->
+          <div class="form-group">
+            <app-contact-address [address]="model.address"></app-contact-address>
+          </div>
           <!-- Role -->
           <div class="form-group">
             <label for="">User Role</label>

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,25 +12,26 @@ 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() {
     return JSON.stringify(this.model);
   }
 
   newContact() {
-    this.model = new Contact('', '', '');
+    this.model = new Contact('', '', '', new Address());
   }
-
 }

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';
+  }
 }

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();
+  });
+});

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;
+  }
+
+}

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();
+  });
+});

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;
+  }
+
+}