Resultat du cours n°9 avec la fonction de recherche fonctionnelle

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -19,8 +20,8 @@ import { ItemComponent } from './components/employees/list/item/item.component';
 		AppComponent,
 		EmployeesComponent,
 		NavBarComponent,
-  ListComponent,
+		ListComponent,
-  ItemComponent
+		ItemComponent
 	],
 	imports: [
 		BrowserModule,
@@ -28,7 +29,9 @@ import { ItemComponent } from './components/employees/list/item/item.component';
 		HttpClientModule,
 		StoreModule.forRoot({catalogState:employeesReducer}),
 		EffectsModule.forRoot([EmployeesEffects]),
-		StoreDevtoolsModule.instrument()
+		StoreDevtoolsModule.instrument(),
+		FormsModule,
+		ReactiveFormsModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

src/app/components/employees/nav-bar/nav-bar.component.html

@@ -1,5 +1,20 @@
-<ul class="nav nav-pills">
+<nav class="navbar navbar-expand-sm bg-light navbar-light">
-	<li>
+<ul class="navbar-nav">
-		<button class="btn btn-outline-info" (click)="onGetAllEmployees()">All</button>
+	<li class="nav-item">
+		<button class="btn btn-outline-info btn-sm" (click)="onGetAllEmployees()">All</button>
+	</li>
+	<li class="nav-item ms-2">
+		<button class="btn btn-outline-info btn-sm" (click)="onGetAllEmployees()">New</button>
 	</li>
 </ul>
+<ul class="navbar-nav ms-auto">
+	<li class="nav-item">
+		<form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="form-inline">
+			<input type="text" ngModel name="keyword">
+			<button type="submit" class="btn btn-outline-info btn-sm">
+				<i class="fa fa-search"></i>
+			</button>
+		</form>
+	</li>
+</ul>
+</nav>

src/app/components/employees/nav-bar/nav-bar.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { GetAllEmployeesAction } from '../../../ngrx/employees.actions';
+import { GetAllEmployeesAction, SearchEmployeesAction } from '../../../ngrx/employees.actions';
 
 @Component({
 	selector: 'app-nav-bar',
@@ -17,4 +17,8 @@ export class NavBarComponent implements OnInit {
 	onGetAllEmployees() {
 		this.store.dispatch(new GetAllEmployeesAction({}))
 	}
+
+	onSearch(val:any) {
+		this.store.dispatch(new SearchEmployeesAction(val.keyword))
+	}
 }

src/app/ngrx/employees.actions.ts

@@ -5,27 +5,41 @@ export enum EmployeesActionsTypes {
 	GET_ALL_EMPLOYEES="[Employees] Get All Employees",
 	GET_ALL_EMPLOYEES_SUCCESS="[Employees] Get All Employees Success",
 	GET_ALL_EMPLOYEES_ERROR="[Employees] Get All Employees Error",
+	/* Search employees */
+	SEARCH_EMPLOYEES="[Employees] Search Employees",
+	SEARCH_EMPLOYEES_SUCCESS="[Employees] Search Success",
+	SEARCH_EMPLOYEES_ERROR="[Employees] Search Employees Error",
 }
 
 export class GetAllEmployeesAction implements Action {
 	type: EmployeesActionsTypes=EmployeesActionsTypes.GET_ALL_EMPLOYEES;
-	constructor(public payload:any) {
+	constructor(public payload:any) {}
-	}
-
 }
 
 export class GetAllEmployeesActionSuccess implements Action {
 	type: EmployeesActionsTypes=EmployeesActionsTypes.GET_ALL_EMPLOYEES_SUCCESS;
-	constructor(public payload:Employee[]) {
+	constructor(public payload:Employee[]) {}
-	}
-
 }
 
 export class GetAllEmployeesActionError implements Action {
 	type: EmployeesActionsTypes=EmployeesActionsTypes.GET_ALL_EMPLOYEES_ERROR;
-	constructor(public payload:string) {
+	constructor(public payload:string) {}
-	}
-
 }
 
-export type EmployeesActions=GetAllEmployeesAction | GetAllEmployeesActionSuccess | GetAllEmployeesActionError;
+export class SearchEmployeesAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SEARCH_EMPLOYEES;
+	constructor(public payload:string) {}
+}
+
+export class SearchEmployeesActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SEARCH_EMPLOYEES_SUCCESS;
+	constructor(public payload:Employee[]) {}
+}
+
+export class SearchEmployeesActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SEARCH_EMPLOYEES_ERROR;
+	constructor(public payload:string) {}
+}
+
+export type EmployeesActions=GetAllEmployeesAction | GetAllEmployeesActionSuccess | GetAllEmployeesActionError |
+	SearchEmployeesAction | SearchEmployeesActionSuccess | SearchEmployeesActionError;

src/app/ngrx/employees.effects.ts

@@ -3,15 +3,15 @@ import { EmployeesService } from '../services/employees.service';
 import { createEffect, Actions, ofType } from '@ngrx/effects';
 import { Observable, of, EMPTY } from 'rxjs';
 import { Action } from '@ngrx/store';
-import { EmployeesActionsTypes } from './employees.actions';
+import { EmployeesActionsTypes, EmployeesActions } from './employees.actions';
 import { mergeMap, map, catchError } from 'rxjs/operators';
-import { GetAllEmployeesActionSuccess, GetAllEmployeesActionError } from './employees.actions';
+import { GetAllEmployeesActionSuccess, GetAllEmployeesActionError, SearchEmployeesActionSuccess, SearchEmployeesActionError } from './employees.actions';
 
 @Injectable()
 export class EmployeesEffects {
-	getAllEmployeesEffect$:Observable<Action> = createEffect(() => this.actions$.pipe(
+	getAllEmployeesEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
 		ofType(EmployeesActionsTypes.GET_ALL_EMPLOYEES),
-		mergeMap((action) => {
+		mergeMap((action:EmployeesActions) => {
 			return this.employeesService.getAllEmployees().pipe(
 				map(employees => new GetAllEmployeesActionSuccess(employees)),
 				catchError((err) => of(new GetAllEmployeesActionError(err.message)))
@@ -19,6 +19,16 @@ export class EmployeesEffects {
 		})
 	));
 
+	searchEmployeesEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.SEARCH_EMPLOYEES),
+		mergeMap((action:EmployeesActions) => {
+			return this.employeesService.searchEmployees(action.payload).pipe(
+				map(employees => new SearchEmployeesActionSuccess(employees)),
+				catchError((err) => of(new SearchEmployeesActionError(err.message)))
+			)
+		})
+	));
+
 	constructor(
 		private employeesService:EmployeesService,
 		private actions$:Actions

src/app/ngrx/employees.reducer.ts

@@ -29,6 +29,13 @@ export function employeesReducer(state:EmployeesState=initState, action:Action):
 			return {...state, dataState:EmployeesStateEnum.LOADED, employees:(<EmployeesActions>action).payload};
 		case EmployeesActionsTypes.GET_ALL_EMPLOYEES_ERROR:
 			return {...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload};
+		/* Search Employees */
+		case EmployeesActionsTypes.SEARCH_EMPLOYEES:
+			return {...state, dataState:EmployeesStateEnum.LOADING};
+		case EmployeesActionsTypes.SEARCH_EMPLOYEES_SUCCESS:
+			return {...state, dataState:EmployeesStateEnum.LOADED, employees:(<EmployeesActions>action).payload};
+		case EmployeesActionsTypes.SEARCH_EMPLOYEES_ERROR:
+			return {...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload};
 		default:
 			return {...state}
 	}