Search Component

Angular/package.json

         "@fullcalendar/daygrid": "^5.8.0",
         "@fullcalendar/interaction": "^5.8.0",
         "@fullcalendar/timegrid": "^5.8.0",
+        "@ng-bootstrap/ng-bootstrap": "^11.0.0",
         "bootstrap": "^5.1.3",
         "chart.js": "^3.3.2",
         "jquery": "^3.6.0",

Angular/src/app/app.module.ts

 import interactionPlugin from '@fullcalendar/interaction';
 
 import { NgxPaginationModule } from 'ngx-pagination';
-
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 FullCalendarModule.registerPlugins([
     dayGridPlugin,
         VirtualScrollerModule,
         AppCodeModule,
         ReactiveFormsModule,
-        NgxPaginationModule
+        NgxPaginationModule,
+        NgbModule
     ],
     declarations: [
         AppComponent,

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

           </tr>
         </tbody>
       </table>
-      <pagination-controls (pageChange)="cp = $event"></pagination-controls>
      <div>
-        <form name="editForm" role="form">
-            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-              Search
-            </button>
+        <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>
  
 </div>
 
 <!-- Modal -->
-<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        ...
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div>
-    </div>
+<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>
+  <div class="modal-body">
+    <app-candidat-search (candidatsListResultEvent)="receiveSearchList($event)"></app-candidat-search>
+  </div>
+</ng-template>

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 { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Table } from 'primeng/table';
+import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 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 {
-
+  
     candidates: Observable<Candidate[]>;
     candidate: Candidate;
     currentPage = 1;
     itemsPerPage = 5;
     pageSize: number;
     cp: number = 1;
-    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router, private candidatService: CandidateService) {
+
+    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, 
+      private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router,
+      private modalService: NgbModal,private formBuilder: FormBuilder) {
       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();
   }
+  receiveSearchList(list: Observable<Candidate[]>) {
+    this.candidates = list; 
+   }
   showDetail(candidateId: string){
     var myurl = `${"/candidat/candidat-detail"}/${candidateId}`;
     this.router.navigateByUrl(myurl);
     this.router.navigateByUrl("/candidat/candidat-sidebar");  
   }
 
-  search(){
-    this.candidates = this.candidatService.search("","","");
+  open(content) {
+    this.modalService.open(content, {ariaLabelledBy: 'search-modal'});
   }
 
-  public onPageChange(pageNum: number): void {
-    this.pageSize = this.itemsPerPage*(pageNum - 1);
-  }
-  
-  public changePagesize(num: number): void {
-  this.itemsPerPage = this.pageSize + num;
-}
 }

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

-<p>candidat-search works!</p>
+<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>
+    <br>
+    <div float="right"> 
+        <button type="button" class="btn btn-outline-dark" (click)="onSubmit()">Search</button>
+    </div>
+</form>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { Candidate } from 'src/app/shared/models/candidate';
+import { CandidateService } from 'src/app/shared/services/candidate.service';
 
 @Component({
   selector: 'app-candidat-search',
   styleUrls: ['./candidat-search.component.scss']
 })
 export class CandidatSearchComponent implements OnInit {
+  candidates: Observable<Candidate[]>;
+  searchForm: FormGroup;
+  @Output() public candidatsListResultEvent = new EventEmitter<Observable<Candidate[]>>();
+ 
 
-  constructor() { }
+  constructor(private formBuilder: FormBuilder,private candidatService: CandidateService) { }
 
   ngOnInit(): void {
+    this.Form();
+  }
+  private Form() {
+    this.searchForm = this.formBuilder.group({
+      firstName: [""],
+      lastName: [""],
+      email: ["", Validators.email]
+    });
+  }
+  
+  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));
+  }
+  
+  onSubmit() {
+    if (this.searchForm.invalid) {
+      alert('Data Error!! :\n\n' + JSON.stringify(this.searchForm.value, null,4));
+      return;
+    }
+    this.search()
   }
-
 }

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

                 <div>
                   <div class="form-group">
                     <label for="emailPro">Professional email</label>
-                    <input type="emails" class="form-control" id="emailPro" formControlName="emailPro">
+                    <input type="email" 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">
+                      <input type="email" class="form-control" id="emailPerso" formControlName="emailPerso">
                     </div>
                   </div>
                 </div>

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

 })
 export class CandidatSidebarComponent implements OnInit {
   createForm: FormGroup;
-  submitted = false;
   constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private formBuilder: FormBuilder) {
     this.breadcrumbService.setItems([
       { label: 'Candidat' },
   }
   
   onSubmit() {
-    this.submitted = true;
     if (this.createForm.invalid) {
       alert('Data Error!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
       return;

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

 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';
 
 
 export const routes: Routes = [
     CommonModule,
     RouterModule.forChild(routes),
     ReactiveFormsModule,
-    NgxPaginationModule
+    NgxPaginationModule,
+    NgbModule
   ],
   exports: [RouterModule]
 })

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

 })
 export class CandidateService {
 
+  private _candidatsList = new BehaviorSubject<Candidate[]>([]);
   private _candidat = new BehaviorSubject<Candidate>(new Candidate());
-  readonly candidats = this._candidat.asObservable();
+  readonly candidats = this._candidatsList.asObservable();
+  readonly candidat = this._candidat.asObservable();
+  private dataStore:  Candidate[];
   constructor(private http: HttpClient) { }
   
  candidatGetById(id: string): Observable<Candidate> {
              var candidatById = e.filter(i => i.id == id); 
              this._candidat.next(Object.assign({}, candidatById[0]));
            });
-    return this.candidats;
+    return this.candidat;
   }
 
   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); 
+          this.dataStore = e.filter(i => i.firstName == queryFN); 
+        this._candidatsList.next(Object.assign({}, this.dataStore));
         }
         if(queryLN){
-          dataStore = e.filter(i => i.lastName == queryLN); 
+          this.dataStore = e.filter(i => i.lastName == queryLN); 
+        this._candidatsList.next(Object.assign({}, this.dataStore));
         }
-        _candidats.next(Object.assign({}, dataStore));
       });
      
-    return candidats;
+    return this.candidats;
   }
 }