SidebarComponent

Angular/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AppMainComponent } from './app.main.component';
+import { CandidatDetailComponent } from './pages/candidat/candidat-detail/candidat-detail.component';
 import { CandidatListComponent } from './pages/candidat/candidat-list/candidat-list.component';
+import { CandidatSidebarComponent } from './pages/candidat/candidat-sidebar/candidat-sidebar.component';
 import { DashboardComponent } from './pages/dashboard/dashboard/dashboard.component';
 
 export const appRouteList: Routes = [
             {
                 path: '', component: AppMainComponent,
                 children: [
+                    {path: 'candidat/candidat-sidebar', component: CandidatSidebarComponent},
                     {path: 'candidat/candidat-list', component: CandidatListComponent},
+                    {path: 'candidat/candidat-detail/:candidatId', component: CandidatDetailComponent},
                     {path: 'dashboard', component: DashboardComponent},
                 ]
             },

Angular/src/app/app.module.ts

 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {BrowserModule} from '@angular/platform-browser';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
         TreeModule,
         TreeTableModule,
         VirtualScrollerModule,
-        AppCodeModule
+        AppCodeModule,
+        ReactiveFormsModule
     ],
     declarations: [
         AppComponent,

Angular/src/app/pages/candidat/candidat-detail/candidat-detail.component.html

 <div>
     <div>
         <div class="modal-header">
-          <h4 class="modal-title" id="modal-basic-title">Candidate Detail</h4>
+          <h4 class="modal-title" id="modal-basic-title">Candidat Detail</h4>
           <button type="button" class="close" aria-label="Close">
             <span aria-hidden="true">×</span>
           </button>
         </div>
         <div class="modal-body">
-            <form>
+            <form [formGroup]="detailForm">
                 <div class="form-group">
                     <label for="firstName">First Name</label>
-                    <input type="text" class="form-control" id="firstName" value="">
+                    <input type="text" class="form-control" id="firstName" formControlName="firstName" value="{{_candidat.firstName}}">
                 </div>
                 <div class="form-group">
                     <label for="LastName">Last Name</label>
-                    <input type="text" class="form-control" id="lastName" value="">
+                    <input type="text" class="form-control" id="lastName" formControlName="lastName" value="{{_candidat.lastName}}">
                 </div>
-                <div class="form-group">
-                    <label for="type">Emails Type's</label>
-                    <select class="form-control" id="type">
-                      <option>Professional</option>
-                      <option>Personal</option>
-                    </select>
+                <div *ngFor="let ml of _candidat.emails">
+                  <div *ngIf="_candidat.emails != null && ml.type ==='profesionnal'" class="form-group">
+                    <label for="emailPro">Professional email</label>
+                    <input type="emails" class="form-control" id="emailPro" value="{{ml.email}}">
                   </div>
-                <div class="form-group">
-                  <label for="emails">Emails address</label>
-                  <input type="emails" class="form-control" id="emails">
+                  <div *ngIf="_candidat.emails != null && ml.type ==='personal'" class="form-group">
+                    <div class="form-group">
+                      <label for="emailPerso">Personal email</label>
+                      <input type="emails" class="form-control" id="emailPerso" value="{{ml.email}}">
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="_candidat.emails.length <= 0">
+                  <div class="form-group">
+                    <label for="emailPro">Professional email</label>
+                    <input type="emails" class="form-control" id="emailPro">
+                  </div>
+                  <div class="form-group">
+                    <div class="form-group">
+                      <label for="emailPerso">Personal email</label>
+                      <input type="emails" class="form-control" id="emailPerso">
+                    </div>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                  <button class="btn btn-primary mr-1" (click)="onSubmit()">Update</button>
                 </div>
-                
               </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-outline-dark">Ok</button>
         </div>
     </div>
-</div>>
+</div>

Angular/src/app/pages/candidat/candidat-detail/candidat-detail.component.ts

 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
 })
 export class CandidatDetailComponent implements OnInit {
 
-  private _candidat: Observable<Candidate> = new Observable<Candidate>() ;
+  _candidat: Candidate = new Candidate() ;
   paramId: string;
-  constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidateService: CandidateService, private route: ActivatedRoute) {
+  detailForm: FormGroup;
+  submitted = false;
+
+  constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidateService: CandidateService, 
+    private route: ActivatedRoute,private formBuilder: FormBuilder) {
     this.breadcrumbService.setItems([
-      { label: 'Candidats' },
-      { label: 'Detail', routerLink: ['/candidat/:candidatId/candidat-list'] }
+      { label: 'Candidat' },
+      { label: 'Detail' }
     ]);
   }
 
   ngOnInit(): void {
-  //  this.route.data.subscribe((data: { candidat: Observable<Candidate> }) => this._candidat = data.candidat);
+    this.getParamId();
+    this.getCandidatById();
+    this.currentDataForm();
+  }
+
+  private getCandidatById() {
+    this.candidateService.candidatGetById(this.paramId)
+      .subscribe(
+        data => {
+          this._candidat = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+        });
+  }
+
+  private getParamId() {
     this.route.paramMap.subscribe(params => {
       if (params.get('candidatId')) {
         this.paramId = params.get('candidatId');
       }
     });
-    this._candidat = this.candidateService.candidatGetById(this.paramId);
+  }
+
+  private currentDataForm() {
+    this.detailForm = this.formBuilder.group({
+      firstName: [this._candidat.firstName, Validators.required],
+      lastName: [this._candidat.lastName, Validators.required]
+    });
+  }
+  
+  onSubmit() {
+    this.submitted = true;
+    if (this.detailForm.invalid) {
+      alert('Data Error!! :\n\n' + JSON.stringify(this.detailForm.value, null,4));
+      return;
+    }
   }
 
 }

Angular/src/app/pages/candidat/candidat-list/candidat-list.component.html

 <div class="card">
     <h5>Candidates List</h5>
-    <div><button [routerLink]="'/dasboard/dasboard'" type="button" class="primary">Add</button><br></div>
+    <div><button (click)="showNew()" type="button" class="primary">Add</button><br></div>
     <table class="table table-bordered">
         <thead>
           <tr>
           </tr>
         </thead>
         <tbody>
-          <tr  *ngFor="let candidate of candidates | async">
+          <tr (click)="showDetail(candidate.id)"  *ngFor="let candidate of candidates | async">
                 <td>{{candidate.id}}</td>
                 <td>{{candidate.firstName}}</td>
                 <td>{{candidate.lastName}}</td>
                     </tr>
                 </td>
                 <td>
-                  <button  icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="show(candidate)">edit</button>
+                  <button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="showDetail(candidate.id)">edit</button>
                   <button  icon="pi pi-trash" class="p-button-rounded p-button-warning">delete</button>
                </td>
           </tr>
             <button>Search</button>
         </form>
       </div>
-
-      <div *ngIf="isEdit">
-        <app-candidat-detail></app-candidat-detail>
-    </div>
    <!-- <button [routerLink]="'/candidate/candidate-sidebar'" pButton pRipple type="button" label="Add" class="mr-2 mb-2"></button> -->
    <!--  <p-table #dt  [value]="theCandidates" [paginator]="true" [rows]="5" [showCurrentPageReport]="true" responsiveLayout="scroll"
         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5,10,25,50]">

Angular/src/app/pages/candidat/candidat-list/candidat-list.component.ts

 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Table } from 'primeng/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
 import { Candidate } from 'src/app/shared/models/candidate';
+import { CandidateService } from 'src/app/shared/services/candidate.service';
 import { candidatListService } from './candidat-list.service';
 
 @Component({
   styleUrls: ['./candidat-list.component.scss']
 })
 export class CandidatListComponent implements OnInit {
-    isEdit: boolean = false;
+
     candidates: Observable<Candidate[]>;
     candidate: Candidate;
-    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidatListService: candidatListService, private route: ActivatedRoute) {
+    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router, private candidatService: CandidateService) {
       this.breadcrumbService.setItems([
         { label: 'Candidats' },
         { label: 'List', routerLink: ['/candidat/candidat-list'] }
     this.route.data.subscribe((data: { candidats: Observable<Candidate[]> }) => this.candidates = data.candidats);
     this.candidates = this.candidatListService.getCandidats();
   }
-  show(candidateUI: Candidate){
-   // this.route.navigate(); // navigate to other page
-    this.isEdit = true;
-    this.candidate = new Candidate()
-    this.candidate.id = candidateUI.id;
-    this.candidate.firstName = candidateUI.firstName;
-    this.candidate.lastName = candidateUI.lastName;
-    this.candidate.emails = candidateUI.emails;
+  showDetail(candidateId: string){
+    var myurl = `${"/candidat/candidat-detail"}/${candidateId}`;
+    this.router.navigateByUrl(myurl);
     
   }
+  showNew(){
+    this.router.navigateByUrl("/candidat/candidat-sidebar");  
+  }
+
+  search(){
+    this.candidates = this.candidatService.search("","","");
+  }
 }

Angular/src/app/pages/candidat/candidat-sidebar/candidat-sidebar.component.html

+<div>
+    <div>
+        <div class="modal-header">
+          <h4 class="modal-title" id="modal-basic-title">New Candidat</h4>
+        </div>
+        <div class="modal-body">
+            <form [formGroup]="createForm">
+                <div class="form-group">
+                    <label for="firstName">First Name</label>
+                    <input type="text" class="form-control" id="firstName" formControlName="firstName">
+                </div>
+                <div class="form-group">
+                    <label for="LastName">Last Name</label>
+                    <input type="text" class="form-control" id="lastName" formControlName="lastName">
+                </div>
+                <div>
+                  <div class="form-group">
+                    <label for="emailPro">Professional email</label>
+                    <input type="emails" class="form-control" id="emailPro" formControlName="emailPro">
+                  </div>
+                  <div class="form-group">
+                    <div class="form-group">
+                      <label for="emailPerso">Personal email</label>
+                      <input type="emails" class="form-control" id="emailPerso" formControlName="emailPerso">
+                    </div>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                  <button class="btn btn-primary mr-1" (click)="onSubmit()">Create</button>
+                </div>
+              </form>
+        </div>
+        <div class="modal-footer">
+        </div>
+    </div>
+</div>

Angular/src/app/pages/candidat/candidat-sidebar/candidat-sidebar.component.spec.ts

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

Angular/src/app/pages/candidat/candidat-sidebar/candidat-sidebar.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
+
+@Component({
+  selector: 'app-candidat-sidebar',
+  templateUrl: './candidat-sidebar.component.html',
+  styleUrls: ['./candidat-sidebar.component.scss']
+})
+export class CandidatSidebarComponent implements OnInit {
+  createForm: FormGroup;
+  submitted = false;
+  constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private formBuilder: FormBuilder) {
+    this.breadcrumbService.setItems([
+      { label: 'Candidat' },
+      { label: 'New' }
+    ]);
+  }
+
+  ngOnInit(): void {
+    this.Form();
+  }
+  private Form() {
+    this.createForm = this.formBuilder.group({
+      firstName: ["", Validators.required],
+      lastName: ["", Validators.required],
+      emailPro: ["", Validators.email],
+      emailPerso: ["", Validators.email]
+    });
+  }
+  
+  onSubmit() {
+    this.submitted = true;
+    if (this.createForm.invalid) {
+      alert('Data Error!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
+      return;
+    }
+    alert('SUCCESS!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
+  }
+}

Angular/src/app/pages/candidat/candidat.module.ts

 import { CandidatsResolver } from 'src/app/shared/resolver/candidats.resolver';
 import { CandidatDetailComponent } from './candidat-detail/candidat-detail.component';
 import { CandidatDetailResolver } from 'src/app/shared/resolver/candidat-detail.resolver';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CandidatSidebarComponent } from './candidat-sidebar/candidat-sidebar.component';
 
 
 export const routes: Routes = [
       },
   },
   {
-    path: 'candidat/:candidatId/candidat-detail',
+    path: '/candidat/candidat-detail/:candidatId',
     component: CandidatDetailComponent,
     resolve: {
-      Candidat: CandidatDetailResolver 
+      candidat: CandidatDetailResolver 
     },
-}
+  },
+  {
+    path: '/candidat/candidat-sidebar',
+    component: CandidatSidebarComponent
+  }
 ];
 
 @NgModule({
   declarations: [
     CandidatListComponent,
     CandidatSearchComponent,
-    CandidatDetailComponent
+    CandidatDetailComponent,
+    CandidatSidebarComponent
   ],
   imports: [
     CommonModule,
-    RouterModule.forChild(routes)
-  ]
+    RouterModule.forChild(routes),
+    ReactiveFormsModule
+  ],
+  exports: [RouterModule]
 })
 export class CandidatModule { }

Angular/src/app/pages/dashboard/dashboard.module.ts

     CommonModule,
     RouterModule.forChild(routes),
     TreeModule
-  ]
+  ],
+  exports: [RouterModule]
 })
 export class DashboardModule { }

Angular/src/app/pages/pages.module.ts

 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { PagesRoutingModule } from './pages.routing.module';
 
 @NgModule({
     declarations: [],
     imports: [
-        PagesRoutingModule,
+        PagesRoutingModule
     ],
     providers: []
 })

Angular/src/app/shared/services/candidate.service.ts

 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { Candidate } from '../models/candidate';
 
 @Injectable({
 })
 export class CandidateService {
 
+  private _candidat = new BehaviorSubject<Candidate>(new Candidate());
+  readonly candidats = this._candidat.asObservable();
   constructor(private http: HttpClient) { }
-
-  listOfCandidates() {
-    return this.http.get<any>('assets/demo/data/candidates.json')
-            .toPromise()
-            .then(res => res.data as Candidate[])
-            .then(data => data);
-  }
   
-  candidatGetById(id: string): Observable<Candidate> {
-     return null;
+ candidatGetById(id: string): Observable<Candidate> {
+   this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
+           e => { 
+             var candidatById = e.filter(i => i.id == id); 
+             this._candidat.next(Object.assign({}, candidatById[0]));
+           });
+    return this.candidats;
   }
-  async Search(query: string): Promise<Candidate[]> {
-    let candidates = this.listOfCandidates();
-    let candidatesFilter: Candidate[] ;
-    for (let item of await candidates) 
-    {
-      if (item.firstName == query || item.lastName == query) 
-      {
-        candidatesFilter.push(item);
-      }
-    }  
-    return candidatesFilter
+
+  search(queryFN: string, queryLN: string, queryEML: string): Observable<Candidate[]> {
+    let _candidats = new BehaviorSubject<Candidate[]>([]);
+    let dataStore:  Candidate[];
+    let candidats = _candidats.asObservable();
+    
+    this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
+      e => { 
+        if(queryFN){
+          dataStore = e.filter(i => i.firstName == queryFN); 
+        }
+        if(queryLN){
+          dataStore = e.filter(i => i.lastName == queryLN); 
+        }
+        _candidats.next(Object.assign({}, dataStore));
+      });
+     
+    return candidats;
   }
 }

Angular/src/index.html

 
     <link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/indigo/theme-light.css">
     <link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/layout-light.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
 </head>
 <body>
     <app-root>