Sidebar rework

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

   templateUrl: './candidat-detail.component.html',
   styleUrls: ['./candidat-detail.component.scss']
 })
+
 export class CandidatDetailComponent implements OnInit {
 
   _candidat: Candidate = new Candidate() ;

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

-<div class="card">
-    <h5>Candidates List</h5>
-    <div><button (click)="showNew()" type="button" class="btn btn-primary">Add</button></div>
-    <br/>
-    <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th scope="col">#</th>
-            <th scope="col">First Name</th>
-            <th scope="col">Last Name</th>
-            <th scope="col">Emails</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr (click)="showDetail(candidate.id)"  *ngFor="let candidate of candidates | async | paginate: { itemsPerPage: 4, currentPage: cp }" class="listMargin">
-                <td>{{candidate.id}}</td>
-                <td>{{candidate.firstName}}</td>
-                <td>{{candidate.lastName}}</td>
-                <td>
-                    <tr *ngFor="let ml of candidate.emails">
-                      <span>{{ml.email}}</span>
-                      <span> - {{ml.type}}</span>
-                    </tr>
-                </td>
-                <td>
-                  <button class="btn btn-warning" (click)="showDetail(candidate.id)">Edit</button> - <button class="btn btn-danger" >Delete</button>
-               </td>
-          </tr>
-        </tbody>
-      </table>
-     <div>
-        <form name="editForm" role="form" class="row">
-          <div class="col-md-8"> <button type="button" class="btn btn-primary" (click)="open(mymodal)">Search</button></div>
-          <div class="col-md-4"><pagination-controls (pageChange)="cp = $event"></pagination-controls></div>
-        </form>
-     </div>
- 
-</div>
 
-<!-- Modal -->
-<ng-template #mymodal let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="search-modal">Search candidates</h4>
-    <!-- <button type="button" class="close" (click)="modal.close()">Close</button> -->
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">×</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <app-candidat-search (candidatsListResultEvent)="receiveSearchList($event)"></app-candidat-search>
+<div class="container-fluid">
+  <div class="row flex-nowrap">
+      <div class="col py-3">
+        <div class="card">
+          <h5>Candidates List</h5>
+         <div class="row">
+          <div class="col-md-2">
+            <button (click)="showNew(null)" type="button" class="btn btn-primary">Add</button>
+          </div>
+          <div class="col-md-10">
+            <app-candidat-search (candidatsListResultEvent)="receiveSearchList($event)"></app-candidat-search>
+          </div>
+         </div>
+          <br/>
+          <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">#</th>
+                  <th scope="col">First Name</th>
+                  <th scope="col">Last Name</th>
+                  <th scope="col">Emails</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr (click)="showNew(candidate)"  *ngFor="let candidate of candidates | async | paginate: { itemsPerPage: 4, currentPage: cp }" class="listMargin">
+                      <td>{{candidate.id}}</td>
+                      <td>{{candidate.firstName}}</td>
+                      <td>{{candidate.lastName}}</td>
+                      <td>
+                          <tr *ngFor="let ml of candidate.emails">
+                            <span>{{ml.email}}</span>
+                            <span> - {{ml.type}}</span>
+                          </tr>
+                      </td>
+                      <td>
+                        <button class="btn btn-warning" (click)="showDetail(candidate.id)">Edit</button> - <button class="btn btn-danger" >Delete</button>
+                     </td>
+                </tr>
+              </tbody>
+            </table>
+           <div>
+              <form name="editForm" role="form" class="row">
+                <div class="col-md-8"></div>
+                <div class="col-md-4"><pagination-controls (pageChange)="cp = $event"></pagination-controls></div>
+              </form>
+           </div>
+       
+        </div>
+      </div>
+      <div *ngIf="isSidebar == true" class="col-auto">
+        <app-candidat-sidebar [currentCandidat] = "receiveCandidate" (candidatResultEvent)="receiveCandidat($event)"></app-candidat-sidebar>
+      </div>
   </div>
-</ng-template>
+</div>

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

 .listMargin{
  
     margin : 5px;
-}
+}
+
+

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

 import { HttpClient } from '@angular/common/http';
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Injectable, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Resolve, Router } from '@angular/router';
 import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { map } 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({
   templateUrl: './candidat-list.component.html',
   styleUrls: ['./candidat-list.component.scss']
 })
+
 export class CandidatListComponent implements OnInit {
   
+   
     candidates: Observable<Candidate[]>;
-    candidate: Candidate;
+    ftCandidates: Observable<Candidate[]>;
+    candidatCP: Candidate;
+    receiveCandidate = new BehaviorSubject<Candidate>(new Candidate());
     currentPage = 1;
     itemsPerPage = 5;
     pageSize: number;
     cp: number = 1;
+    isSidebar: boolean = false;
+    xy: any[];
 
     constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, 
-      private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router,
+      private candidatListService: candidatListService, private candidateService: CandidateService, private route: ActivatedRoute,private router: Router,
       private modalService: NgbModal,private formBuilder: FormBuilder) {
       this.breadcrumbService.setItems([
         { label: 'Candidats' },
   }
 
   ngOnInit() {
-    this.route.data.subscribe((data: { candidats: Observable<Candidate[]> }) => this.candidates = data.candidats);
     this.candidates = this.candidatListService.getCandidats();
   }
+
   receiveSearchList(list: Observable<Candidate[]>) {
     this.candidates = list; 
    }
+
+   receiveCandidat(candidatForm: FormGroup) {
+     if(candidatForm.controls['id'].value){
+       this.candidates.subscribe(e => 
+        {
+         var x = e.filter(f => f.id == candidatForm.controls['id'].value);
+         x[0].id = candidatForm.controls['id'].value;
+         x[0].firstName = candidatForm.controls['firstName'].value;
+         x[0].lastName = candidatForm.controls['lastName'].value;
+         
+         this.candidates.subscribe(e => e.push(x[0])); 
+        })
+     }else{
+      var c = new Candidate();
+      this.candidates.subscribe(e => c.id = (1 + e.length).toString())
+      c.lastName = candidatForm.controls['lastName'].value;
+      c.firstName = candidatForm.controls['firstName'].value;
+  /* 
+      var exampleArray = [];
+      exampleArray.push({'email' : c.lastName = candidatForm.controls['emailPro'].value , 'type': "profesionnal"});
+      exampleArray.push({'email' : c.lastName = candidatForm.controls['emailPerso'].value , 'type': "personal"});
+   */
+      this.candidates.subscribe(e => e.push(c)); 
+     }
+    
+   }
   showDetail(candidateId: string){
     var myurl = `${"/candidat/candidat-detail"}/${candidateId}`;
     this.router.navigateByUrl(myurl);
     
   }
-  showNew(){
-    this.router.navigateByUrl("/candidat/candidat-sidebar");  
+  showNew(candidate: Candidate){
+    if(candidate){
+      this.isSidebar = true;
+      this.receiveCandidate.next(candidate);
+    }else{
+      if(this.isSidebar){
+        this.isSidebar = false;
+      }else{
+        this.isSidebar = true;
+      }
+    }
+   
   }
 
   open(content) {

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

 import { TreeNode } from 'primeng/api';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { Candidate } from 'src/app/shared/models/candidate';
+import { CandidateService } from 'src/app/shared/services/candidate.service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class candidatListService {
+    constructor(private http: HttpClient, private candidatService: CandidateService) {}
 
-    private _candidats = new BehaviorSubject<Candidate[]>([]);
-    private dataStore: { candidats: Candidate[] } = { candidats: [] };
-    readonly candidats = this._candidats.asObservable();
-
-    constructor(private http: HttpClient) {}
-
-    loadAll() {
-        this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
-          data => {
-            this.dataStore.candidats = data;
-            this._candidats.next(Object.assign({}, this.dataStore).candidats);
-          },
-          error => console.log('Could not load Candidats.')
-        );
-      }
     getCandidats(): Observable<Candidate[]>{
-     this.loadAll();
-     return this.candidats
+     return this.candidatService.getCandidats()
     }
 }

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

-<form [formGroup]="searchForm">
-    <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="email">Email</label>
-        <input type="email" class="form-control" id="email" formControlName="email">
-      </div>
-    </div>
+<form class="form-row" [formGroup]="searchForm">
+    <div class="row">
+        <div class="form-group col-md-10">
+            <input type="text" class="form-control" id="searchRequest" placeholder="Search: First name, Last name, email" formControlName="searchRequest">
+        </div>
+        <div class="col-md-2">
+            <button type="button" class="btn btn-outline-dark" (click)="onSubmit()">Search</button>
+        </div>
+    </div>
+  
     <br>
-    <div float="right"> 
-        <button type="button" class="btn btn-outline-dark" (click)="onSubmit()">Search</button>
-    </div>
-</form>
+</form>

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

   }
   private Form() {
     this.searchForm = this.formBuilder.group({
-      firstName: [""],
-      lastName: [""],
-      email: ["", Validators.email]
+      searchRequest: [""]
     });
   }
   
   search(){
-    let FN = this.searchForm.controls['firstName'].value;
-    let LN = this.searchForm.controls['lastName'].value;
-    let EML = this.searchForm.controls['email'].value;
-    this.candidatsListResultEvent.emit(this.candidatService.search(FN,LN,EML))
-    //this.candidatService.search(FN,LN,EML).subscribe(s=> this.candidatsListResultEvent.emit(s));
+    let SR = this.searchForm.controls['searchRequest'].value;
+    this.candidatsListResultEvent.emit(this.candidatService.search(SR))
   }
   
   onSubmit() {

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

         <div class="modal-footer">
         </div>
     </div>
-</div>
+</div>

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

 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Observable } from 'rxjs';
 import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
+import { Candidate } from 'src/app/shared/models/candidate';
 
 @Component({
   selector: 'app-candidat-sidebar',
 })
 export class CandidatSidebarComponent implements OnInit {
   createForm: FormGroup;
+  isAddBtn: boolean = false;
+  @Input() currentCandidat: Observable<Candidate>;
+  @Output() public candidatResultEvent = new EventEmitter<FormGroup>();
+  
   constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private formBuilder: FormBuilder) {
     this.breadcrumbService.setItems([
       { label: 'Candidat' },
   }
 
   ngOnInit(): void {
-    this.Form();
+    if(this.currentCandidat && !this.isAddBtn){
+      this.currentCandidat.subscribe(e => this.Form(e) );
+    }else{
+      this.Form(null);
+    }
   }
-  private Form() {
-    this.createForm = this.formBuilder.group({
-      firstName: ["", Validators.required],
-      lastName: ["", Validators.required],
-      emailPro: ["", Validators.email],
-      emailPerso: ["", Validators.email]
-    });
+
+  private Form(c: Candidate) {
+    if(c){
+      this.createForm = this.formBuilder.group({
+        id : [c.id? c.id :""],
+        firstName: [c.firstName? c.firstName :"", Validators.required],
+        lastName: [c.lastName? c.lastName :"", Validators.required],
+        emailPro: ["", Validators.email],
+        emailPerso: ["", Validators.email]
+      });
+    }else{
+      this.isAddBtn = true;
+      this.createForm = this.formBuilder.group({
+        firstName: ["", Validators.required],
+        lastName: ["", Validators.required],
+        emailPro: ["", Validators.email],
+        emailPerso: ["", Validators.email]
+      });
+    }
   }
   
   onSubmit() {
       alert('Data Error!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
       return;
     }
-    alert('SUCCESS!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
+
+    this.candidatResultEvent.emit(this.createForm);
   }
 }

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

 import { CandidatListComponent } from './candidat-list/candidat-list.component';
 import { RouterModule, Routes } from '@angular/router';
 import { CandidatSearchComponent } from './candidat-search/candidat-search.component';
-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';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CandidatsResolver } from 'src/app/shared/resolver/candidats.resolver';
 
 
 export const routes: Routes = [

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

 })
 export class CandidateService {
 
-  private _candidatsList = new BehaviorSubject<Candidate[]>([]);
+  public _candidatsList = new BehaviorSubject<Candidate[]>([]);
   private _candidat = new BehaviorSubject<Candidate>(new Candidate());
-  readonly candidats = this._candidatsList.asObservable();
-  readonly candidat = this._candidat.asObservable();
   private dataStore:  Candidate[];
   constructor(private http: HttpClient) { }
-  
+
  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]));
+           data => 
+           { 
+             var candidatById = data.filter(i => i.id == id); 
+             this._candidat.next(candidatById[0]);
            });
-    return this.candidat;
+    return this._candidat;
   }
 
-  search(queryFN: string, queryLN: string, queryEML: string): Observable<Candidate[]> {
+  search(queryS: string): Observable<Candidate[]> {
     this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
-      e => { 
-        if(queryFN){
-          this.dataStore = e.filter(i => i.firstName == queryFN); 
-        this._candidatsList.next(Object.assign({}, this.dataStore));
-        }
-        if(queryLN){
-          this.dataStore = e.filter(i => i.lastName == queryLN); 
-        this._candidatsList.next(Object.assign({}, this.dataStore));
+      data => 
+      { 
+        if(queryS){
+          this.dataStore = data.filter(i => (i.firstName.toLowerCase() == queryS.toLowerCase() || i.lastName.toLowerCase() == queryS.toLowerCase() /* || i.emails.find(e => e.email === queryS) */ )); 
+          this._candidatsList.next(this.dataStore);
         }
       });
      
-    return this.candidats;
+    return this._candidatsList;
+  }
+
+  getCandidats(): Observable<Candidate[]> {
+    this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
+      data => 
+      {
+        this._candidatsList.next(data);
+      }
+    );
+    return this._candidatsList;
   }
 }