Contact Book

src/app/app-routing.module.ts

@@ -3,7 +3,8 @@ import { Routes, RouterModule } from '@angular/router';
 
 import {
   ContactsListComponent,
-  ContactFormComponent,
+  NewContactComponent,
+  EditContactComponent,
   FavoritesContactsComponent
 } from './contacts/components';
 import { ProfileComponent } from './profile/profile.component';
@@ -13,7 +14,8 @@ const routes: Routes = [
   { path: 'contacts', component: ContactsListComponent },
   { path: 'favorites', component: FavoritesContactsComponent },
   { path: 'dashboard', component: DashboardComponent },
-  { path: 'new-contact', component: ContactFormComponent },
+  { path: 'new-contact', component: NewContactComponent },
+  { path: 'contacts/:id', component: EditContactComponent },
   { path: 'profile', component: ProfileComponent },
   {
     path: '',

src/app/app.module.ts

@@ -2,6 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpModule } from '@angular/http';
+
+
+
 
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './blocks/header/header.component';
@@ -10,11 +16,19 @@ import {
   ContactsListComponent,
   ContactCardComponent,
   ContactFormComponent,
-  FavoritesContactsComponent
+  FavoritesContactsComponent,
+  NewContactComponent,
+  EditContactComponent
 } from './contacts/components';
 import { ProfileComponent } from './profile/profile.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 
+import { ContactService } from './services/contact.service';
+import { GithubService } from './services/github.service';
+
+import { AdressComponent } from './contacts/components/contact-form/adress/adress.component';
+
+
 
 @NgModule({
   declarations: [
@@ -26,13 +40,22 @@ import { DashboardComponent } from './dashboard/dashboard.component';
     ContactFormComponent,
     ProfileComponent,
     DashboardComponent,
-    FavoritesContactsComponent
+    FavoritesContactsComponent,
+    AdressComponent,
+    NewContactComponent,
+    EditContactComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    FormsModule,
+    AppRoutingModule,
+    HttpModule,
+    HttpClientModule
+
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+    providers: [ ContactService, GithubService ],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+

src/app/contacts/components/contact-card/contact-card.component.css

@@ -1,3 +1,20 @@
 .contact-card {
   margin-bottom: 5px;
 }
+.image{
+  width: 200px;
+  height: 200px;
+}
+.card-contact-sizing{
+  height: 500px;
+  margin-bottom: 15px;
+}
+.adjust-padding-card{
+  margin-left: 15px;
+
+}
+.bloc-shadow{
+  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
+  padding: 50px;
+  border-radius: 6px;
+}

src/app/contacts/components/contact-card/contact-card.component.html

@@ -1,23 +1,23 @@
-<div class="card contact-card">
+
+<div class="card card-contact-sizing bloc-shadow" style="width: 21rem;" >
+  <div class="card-body adjust-padding-card">
+    <h5 class="card-title">{{contact.firstName}} {{contact.lastName}}</h5>
+    <p class="card-text"> email: {{contact.email}}.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">phone:{{contact.phone}}.</li>
+    <li class="list-group-item">address : {{contact.addres}}. </li>
+  </ul>
+  <p class="adjust-padding-card"> Bio: {{contact.bio}}</p>
   <div class="card-body">
-    <div class="row align-items-center">
-      <div class="col-sm-3 col-md-3 mx-auto text-nowrap text-center px-2">
-        <a href="" class="btn btn-primary btn-rounded">
-          MC
-        </a>
-      </div>
-      <div class="col-sm-7 col-md-7 text-center text-lg-left">
-        <h3 class="d-inline">Mary Chesnut</h3>
-        <h6>Job Title</h6>
-      </div>
-      <div class="col-sm-2 col-md-2 text-center text-lg-left">
-        <a href="" class="text-danger h5">
-          <i class="fa fa-trash"></i>
-        </a>
-        <a href="" class="text-primary h5">
-          <i class="fa fa-pencil"></i>
-        </a>
-      </div>
-    </div>
+    <a (click)="delete(contact)"  class="text-danger h5" >
+      <i class="fa fa-trash"></i>
+    </a>
+    <a (click)="favorite(contact)"  class="text-danger h5" >
+      <i class="fa fa-star-o"></i>
+    </a>
+    <a [routerLink]="['/contacts', contact._id]" class="text-primary h5">
+      <i class="fa fa-pencil"></i>
+    </a>
   </div>
 </div>

src/app/contacts/components/contact-card/contact-card.component.ts

@@ -1,15 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Contact } from '../../../model/contact';
+import {ContactService} from '../../../services/contact.service';
 
 @Component({
   selector: 'contact-book-contact-card',
   templateUrl: './contact-card.component.html',
   styleUrls: ['./contact-card.component.css']
 })
 export class ContactCardComponent implements OnInit {
+  @Input() contact: Contact;
+  @Output() DeleteContactevent: EventEmitter<Contact> = new EventEmitter();
+  @Output() FavoriteContactevent: EventEmitter<Contact> = new EventEmitter();
 
-  constructor() { }
-
+  constructor(
+    private contactService: ContactService
+  ) { }
   ngOnInit() {
   }
 
+  delete(contact: Contact) {
+    this.DeleteContactevent.emit(contact);
+  }
+  favorite(contact: Contact) {
+    this.FavoriteContactevent.emit(contact);
+  }
+
 }

src/app/contacts/components/contact-form/adress/adress.component.css

@@ -0,0 +1,19 @@
+.ng-valid[required],
+.ng-valid.required {
+  border-left: 5px solid #42A948;
+  /* green */
+}
+
+.ng-invalid:not(form) {
+  border-left: 5px solid #a94442;
+  /* red */
+}
+.field{
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 10px 2px #efefef;
+  padding: 20px 23px;
+  border: none;
+  border-radius:2px !important;
+  font-family: AkkuratRegular;
+}

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

@@ -0,0 +1,48 @@
+   <div class="form-group"> 
+    <div class="row">
+      <div class="col">
+        <label for="">Line 1</label>
+        <input type="text" class="form-control" id="lineOne" required [(ngModel)]="adress.lineOne" name="lineOne" #lineOne="ngModel">
+        <div [hidden]="lineOne.valid || lineOne.pristine" class="alet alert-damger">
+          line1 is required!!
+        </div>
+      </div>
+      <div class="col">
+        <label for="">Line 2</label>
+        <input type="text" class="form-control" id="lineTwo" required [(ngModel)]="adress.lineTwo" name="lineTwo" #lineTwo="ngModel">
+        <div [hidden]="lineTwo.valid || lineTwo.pristine" class="alet alert-damger">
+          line2 is required!!
+        </div>
+      </div>
+      <div class="col">
+        <label for="">City</label>
+        <input type="text" class="form-control" id="city" required [(ngModel)]="adress.city" name="city" #city="ngModel">
+        <div [hidden]="city.valid || city.pristine" class="alet alert-damger">
+          City is required!!
+        </div>
+      </div>
+    </div> 
+    <div class="row">
+      <div class="col">
+        <label for="">State</label>
+        <input type="text" class="form-control" id="stat" required [(ngModel)]="adress.state" name="state" #state="ngModel">
+        <div [hidden]="state.valid || state.pristine" class="alet alert-damger">
+          Country is required!!
+        </div>
+      </div>
+      <div class="col">
+          <label for="">Country</label>
+          <input type="text" class="form-control" id="country" required [(ngModel)]="adress.country" name="country" #country="ngModel">
+          <div [hidden]="country.valid || country.pristine" class="alet alert-damger">
+            Country is required!!
+          </div>
+      </div>
+      <div class="col">
+        <label for="">Zip Code</label>
+        <input type="text" class="form-control" id="zipCode" required [(ngModel)]="adress.zipCode" name="zipCode" #zipCode="ngModel">
+        <div [hidden]="zipCode.valid || zipCode.pristine" class="alet alert-damger">
+          Zip Code is required!!
+        </div>
+      </div>  
+    </div>
+</div>

src/app/contacts/components/contact-form/adress/adress.component.spec.ts

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

src/app/contacts/components/contact-form/adress/adress.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Adress } from '../../../../model/adress';
+
+@Component({
+  selector: 'app-adress',
+  templateUrl: './adress.component.html',
+  styleUrls: ['./adress.component.css']
+})
+export class AdressComponent implements OnInit {
+  @Input() adress: Adress;
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/app/contacts/components/contact-form/contact-form.component.css

@@ -0,0 +1,19 @@
+.ng-valid[required],
+.ng-valid.required {
+  border-left: 5px solid #42A948;
+  /* green */
+}
+
+.ng-invalid:not(form) {
+  border-left: 5px solid #a94442;
+  /* red */
+}
+.bloc-separator{
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+.bloc-shadow{
+  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
+  padding: 50px;
+  border-radius: 6px;
+}

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

@@ -1,22 +1,37 @@
-<div class="page-header">
-  <h2>Add a New Contact</h2>
+
+<div class="form-group">
+    <input type="text" class="form-control" id="firstName" required [(ngModel)]="contact.firstName" placeholder="First Name" name="firstName" #firstName="ngModel">
+    <div [hidden]="firstName.valid || firstName.pristine" class="alet alert-damger">
+      First name is required!!
+    </div>
 </div>
-<hr>
-<div class="row">
-  <div class="col-md-12">
-    <h3 class="text-justify">
-      <code>TODO: Create new contact form with save and a cancel button!!</code>
-    </h3>
-    <hr>
-  </div>
+<div class="form-group">
+    <input type="text" class="form-control" id="lastName" required [(ngModel)]="contact.lastName" placeholder="last Name" name="lastName" #lastName="ngModel">
+    <div [hidden]="lastName.valid || lastName.pristine" class="alet alert-damger">
+      Last name is required!!
+    </div>
 </div>
-
-<div class="row">
-  <div class="col-md-12">
-    <p class="text-center">
-      Check out the contact form repository to finish this task. check the api doc
-      <br>
-      <a href="https://mini-crm-api.herokuapp.com/doc" class="btn btn-sm btn-primary">API DOC</a>
-    </p>
-  </div>
+<div class="form-group">
+    <select name="" id="gender" class="form-control"  name="gender" [(ngModel)]="contact.gender">
+        <option *ngFor="let gender of genders" [value]="role">{{gender}}</option>
+      </select>
+</div>
+<div class="form-group">
+    <input type="email" class="form-control" id="email" required  email [(ngModel)]="contact.email" placeholder="Enter email" name="email" #email="ngModel">
+    <div [hidden]="email.valid || email.pristine" class="alet alert-damger">
+      email format is not correct !!
+    </div>
+</div>
+<div class="form-group">
+    <input type="text" class="form-control" id="phone" required [(ngModel)]="contact.phone" placeholder="phone number" name="phone" #phone="ngModel">
+    <div [hidden]="phone.valid || phone.pristine" class="alet alert-damger">
+     phone number is required!!
+    </div>
+</div>
+<div class="form-group">
+    <input type="text" class="form-control" id="bio" required [(ngModel)]="contact.bio" placeholder="BIO " name="bio" #phone="ngModel">
 </div>
+<hr class="bloc separator">
+<!-- adress -->
+<app-adress [adress]="contact.address"></app-adress>
+<!-- adress -->