Browse Source

Search Component

Alex Ondoa 2 years ago
parent
commit
bd5bb55e40

+ 301
- 302
Angular/package-lock.json
File diff suppressed because it is too large
View File


+ 1
- 0
Angular/package.json View File

@@ -27,6 +27,7 @@
27 27
         "@fullcalendar/daygrid": "^5.8.0",
28 28
         "@fullcalendar/interaction": "^5.8.0",
29 29
         "@fullcalendar/timegrid": "^5.8.0",
30
+        "@ng-bootstrap/ng-bootstrap": "^11.0.0",
30 31
         "bootstrap": "^5.1.3",
31 32
         "chart.js": "^3.3.2",
32 33
         "jquery": "^3.6.0",

+ 3
- 2
Angular/src/app/app.module.ts View File

@@ -107,7 +107,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
107 107
 import interactionPlugin from '@fullcalendar/interaction';
108 108
 
109 109
 import { NgxPaginationModule } from 'ngx-pagination';
110
-
110
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
111 111
 
112 112
 FullCalendarModule.registerPlugins([
113 113
     dayGridPlugin,
@@ -204,7 +204,8 @@ FullCalendarModule.registerPlugins([
204 204
         VirtualScrollerModule,
205 205
         AppCodeModule,
206 206
         ReactiveFormsModule,
207
-        NgxPaginationModule
207
+        NgxPaginationModule,
208
+        NgbModule
208 209
     ],
209 210
     declarations: [
210 211
         AppComponent,

+ 15
- 24
Angular/src/app/pages/candidat/candidat-list/candidat-list.component.html View File

@@ -28,34 +28,25 @@
28 28
           </tr>
29 29
         </tbody>
30 30
       </table>
31
-      <pagination-controls (pageChange)="cp = $event"></pagination-controls>
32 31
      <div>
33
-        <form name="editForm" role="form">
34
-            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
35
-              Search
36
-            </button>
32
+        <form name="editForm" role="form" class="row">
33
+          <div class="col-md-8"> <button type="button" class="btn btn-primary" (click)="open(mymodal)">Search</button></div>
34
+          <div class="col-md-4"><pagination-controls (pageChange)="cp = $event"></pagination-controls></div>
37 35
         </form>
38
-      </div>
36
+     </div>
39 37
  
40 38
 </div>
41 39
 
42 40
 <!-- Modal -->
43
-<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
44
-  <div class="modal-dialog" role="document">
45
-    <div class="modal-content">
46
-      <div class="modal-header">
47
-        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
48
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
49
-          <span aria-hidden="true">&times;</span>
50
-        </button>
51
-      </div>
52
-      <div class="modal-body">
53
-        ...
54
-      </div>
55
-      <div class="modal-footer">
56
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
57
-        <button type="button" class="btn btn-primary">Save changes</button>
58
-      </div>
59
-    </div>
41
+<ng-template #mymodal let-modal>
42
+  <div class="modal-header">
43
+    <h4 class="modal-title" id="search-modal">Search candidates</h4>
44
+    <!-- <button type="button" class="close" (click)="modal.close()">Close</button> -->
45
+    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
46
+      <span aria-hidden="true">×</span>
47
+    </button>
60 48
   </div>
61
-</div>
49
+  <div class="modal-body">
50
+    <app-candidat-search (candidatsListResultEvent)="receiveSearchList($event)"></app-candidat-search>
51
+  </div>
52
+</ng-template>

+ 13
- 16
Angular/src/app/pages/candidat/candidat-list/candidat-list.component.ts View File

@@ -1,13 +1,11 @@
1 1
 import { HttpClient } from '@angular/common/http';
2
-import { Component, OnInit, ViewChild } from '@angular/core';
3
-import { FormBuilder } from '@angular/forms';
2
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
3
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
4 4
 import { ActivatedRoute, Router } from '@angular/router';
5
-import { Table } from 'primeng/table';
5
+import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
6 6
 import { BehaviorSubject, Observable } from 'rxjs';
7
-import { tap } from 'rxjs/operators';
8 7
 import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
9 8
 import { Candidate } from 'src/app/shared/models/candidate';
10
-import { CandidateService } from 'src/app/shared/services/candidate.service';
11 9
 import { candidatListService } from './candidat-list.service';
12 10
 
13 11
 @Component({
@@ -16,14 +14,17 @@ import { candidatListService } from './candidat-list.service';
16 14
   styleUrls: ['./candidat-list.component.scss']
17 15
 })
18 16
 export class CandidatListComponent implements OnInit {
19
-
17
+  
20 18
     candidates: Observable<Candidate[]>;
21 19
     candidate: Candidate;
22 20
     currentPage = 1;
23 21
     itemsPerPage = 5;
24 22
     pageSize: number;
25 23
     cp: number = 1;
26
-    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router, private candidatService: CandidateService) {
24
+
25
+    constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, 
26
+      private candidatListService: candidatListService, private route: ActivatedRoute,private router: Router,
27
+      private modalService: NgbModal,private formBuilder: FormBuilder) {
27 28
       this.breadcrumbService.setItems([
28 29
         { label: 'Candidats' },
29 30
         { label: 'List', routerLink: ['/candidat/candidat-list'] }
@@ -34,6 +35,9 @@ export class CandidatListComponent implements OnInit {
34 35
     this.route.data.subscribe((data: { candidats: Observable<Candidate[]> }) => this.candidates = data.candidats);
35 36
     this.candidates = this.candidatListService.getCandidats();
36 37
   }
38
+  receiveSearchList(list: Observable<Candidate[]>) {
39
+    this.candidates = list; 
40
+   }
37 41
   showDetail(candidateId: string){
38 42
     var myurl = `${"/candidat/candidat-detail"}/${candidateId}`;
39 43
     this.router.navigateByUrl(myurl);
@@ -43,15 +47,8 @@ export class CandidatListComponent implements OnInit {
43 47
     this.router.navigateByUrl("/candidat/candidat-sidebar");  
44 48
   }
45 49
 
46
-  search(){
47
-    this.candidates = this.candidatService.search("","","");
50
+  open(content) {
51
+    this.modalService.open(content, {ariaLabelledBy: 'search-modal'});
48 52
   }
49 53
 
50
-  public onPageChange(pageNum: number): void {
51
-    this.pageSize = this.itemsPerPage*(pageNum - 1);
52
-  }
53
-  
54
-  public changePagesize(num: number): void {
55
-  this.itemsPerPage = this.pageSize + num;
56
-}
57 54
 }

+ 20
- 1
Angular/src/app/pages/candidat/candidat-search/candidat-search.component.html View File

@@ -1 +1,20 @@
1
-<p>candidat-search works!</p>
1
+<form [formGroup]="searchForm">
2
+    <div class="form-group">
3
+        <label for="firstName">First Name</label>
4
+        <input type="text" class="form-control" id="firstName" formControlName="firstName">
5
+    </div>
6
+    <div class="form-group">
7
+        <label for="LastName">Last Name</label>
8
+        <input type="text" class="form-control" id="lastName" formControlName="lastName">
9
+    </div>
10
+    <div>
11
+      <div class="form-group">
12
+        <label for="email">Email</label>
13
+        <input type="email" class="form-control" id="email" formControlName="email">
14
+      </div>
15
+    </div>
16
+    <br>
17
+    <div float="right"> 
18
+        <button type="button" class="btn btn-outline-dark" (click)="onSubmit()">Search</button>
19
+    </div>
20
+</form>

+ 34
- 3
Angular/src/app/pages/candidat/candidat-search/candidat-search.component.ts View File

@@ -1,4 +1,8 @@
1
-import { Component, OnInit } from '@angular/core';
1
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
2
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3
+import { Observable } from 'rxjs';
4
+import { Candidate } from 'src/app/shared/models/candidate';
5
+import { CandidateService } from 'src/app/shared/services/candidate.service';
2 6
 
3 7
 @Component({
4 8
   selector: 'app-candidat-search',
@@ -6,10 +10,37 @@ import { Component, OnInit } from '@angular/core';
6 10
   styleUrls: ['./candidat-search.component.scss']
7 11
 })
8 12
 export class CandidatSearchComponent implements OnInit {
13
+  candidates: Observable<Candidate[]>;
14
+  searchForm: FormGroup;
15
+  @Output() public candidatsListResultEvent = new EventEmitter<Observable<Candidate[]>>();
16
+ 
9 17
 
10
-  constructor() { }
18
+  constructor(private formBuilder: FormBuilder,private candidatService: CandidateService) { }
11 19
 
12 20
   ngOnInit(): void {
21
+    this.Form();
22
+  }
23
+  private Form() {
24
+    this.searchForm = this.formBuilder.group({
25
+      firstName: [""],
26
+      lastName: [""],
27
+      email: ["", Validators.email]
28
+    });
29
+  }
30
+  
31
+  search(){
32
+    let FN = this.searchForm.controls['firstName'].value;
33
+    let LN = this.searchForm.controls['lastName'].value;
34
+    let EML = this.searchForm.controls['email'].value;
35
+    this.candidatsListResultEvent.emit(this.candidatService.search(FN,LN,EML))
36
+    //this.candidatService.search(FN,LN,EML).subscribe(s=> this.candidatsListResultEvent.emit(s));
37
+  }
38
+  
39
+  onSubmit() {
40
+    if (this.searchForm.invalid) {
41
+      alert('Data Error!! :\n\n' + JSON.stringify(this.searchForm.value, null,4));
42
+      return;
43
+    }
44
+    this.search()
13 45
   }
14
-
15 46
 }

+ 2
- 2
Angular/src/app/pages/candidat/candidat-sidebar/candidat-sidebar.component.html View File

@@ -16,12 +16,12 @@
16 16
                 <div>
17 17
                   <div class="form-group">
18 18
                     <label for="emailPro">Professional email</label>
19
-                    <input type="emails" class="form-control" id="emailPro" formControlName="emailPro">
19
+                    <input type="email" class="form-control" id="emailPro" formControlName="emailPro">
20 20
                   </div>
21 21
                   <div class="form-group">
22 22
                     <div class="form-group">
23 23
                       <label for="emailPerso">Personal email</label>
24
-                      <input type="emails" class="form-control" id="emailPerso" formControlName="emailPerso">
24
+                      <input type="email" class="form-control" id="emailPerso" formControlName="emailPerso">
25 25
                     </div>
26 26
                   </div>
27 27
                 </div>

+ 0
- 2
Angular/src/app/pages/candidat/candidat-sidebar/candidat-sidebar.component.ts View File

@@ -10,7 +10,6 @@ import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
10 10
 })
11 11
 export class CandidatSidebarComponent implements OnInit {
12 12
   createForm: FormGroup;
13
-  submitted = false;
14 13
   constructor(private breadcrumbService: AppBreadcrumbService,private http: HttpClient, private formBuilder: FormBuilder) {
15 14
     this.breadcrumbService.setItems([
16 15
       { label: 'Candidat' },
@@ -31,7 +30,6 @@ export class CandidatSidebarComponent implements OnInit {
31 30
   }
32 31
   
33 32
   onSubmit() {
34
-    this.submitted = true;
35 33
     if (this.createForm.invalid) {
36 34
       alert('Data Error!! :\n\n' + JSON.stringify(this.createForm.value, null,4));
37 35
       return;

+ 3
- 1
Angular/src/app/pages/candidat/candidat.module.ts View File

@@ -9,6 +9,7 @@ import { CandidatDetailResolver } from 'src/app/shared/resolver/candidat-detail.
9 9
 import { ReactiveFormsModule } from '@angular/forms';
10 10
 import { CandidatSidebarComponent } from './candidat-sidebar/candidat-sidebar.component';
11 11
 import { NgxPaginationModule } from 'ngx-pagination';
12
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
12 13
 
13 14
 
14 15
 export const routes: Routes = [
@@ -43,7 +44,8 @@ export const routes: Routes = [
43 44
     CommonModule,
44 45
     RouterModule.forChild(routes),
45 46
     ReactiveFormsModule,
46
-    NgxPaginationModule
47
+    NgxPaginationModule,
48
+    NgbModule
47 49
   ],
48 50
   exports: [RouterModule]
49 51
 })

+ 10
- 10
Angular/src/app/shared/services/candidate.service.ts View File

@@ -8,8 +8,11 @@ import { Candidate } from '../models/candidate';
8 8
 })
9 9
 export class CandidateService {
10 10
 
11
+  private _candidatsList = new BehaviorSubject<Candidate[]>([]);
11 12
   private _candidat = new BehaviorSubject<Candidate>(new Candidate());
12
-  readonly candidats = this._candidat.asObservable();
13
+  readonly candidats = this._candidatsList.asObservable();
14
+  readonly candidat = this._candidat.asObservable();
15
+  private dataStore:  Candidate[];
13 16
   constructor(private http: HttpClient) { }
14 17
   
15 18
  candidatGetById(id: string): Observable<Candidate> {
@@ -18,25 +21,22 @@ export class CandidateService {
18 21
              var candidatById = e.filter(i => i.id == id); 
19 22
              this._candidat.next(Object.assign({}, candidatById[0]));
20 23
            });
21
-    return this.candidats;
24
+    return this.candidat;
22 25
   }
23 26
 
24 27
   search(queryFN: string, queryLN: string, queryEML: string): Observable<Candidate[]> {
25
-    let _candidats = new BehaviorSubject<Candidate[]>([]);
26
-    let dataStore:  Candidate[];
27
-    let candidats = _candidats.asObservable();
28
-    
29 28
     this.http.get<Candidate[]>('assets/demo/data/candidates.json').subscribe(
30 29
       e => { 
31 30
         if(queryFN){
32
-          dataStore = e.filter(i => i.firstName == queryFN); 
31
+          this.dataStore = e.filter(i => i.firstName == queryFN); 
32
+        this._candidatsList.next(Object.assign({}, this.dataStore));
33 33
         }
34 34
         if(queryLN){
35
-          dataStore = e.filter(i => i.lastName == queryLN); 
35
+          this.dataStore = e.filter(i => i.lastName == queryLN); 
36
+        this._candidatsList.next(Object.assign({}, this.dataStore));
36 37
         }
37
-        _candidats.next(Object.assign({}, dataStore));
38 38
       });
39 39
      
40
-    return candidats;
40
+    return this.candidats;
41 41
   }
42 42
 }

Powered by TurnKey Linux.