Resultat cours n°12 et 13 et fin demo sur Angular

db.json

@@ -1,10 +1,10 @@
 {
   "employees": [
     {
-      "id": 1,
       "nom": "benoit",
       "prenom": "vincent",
-      "role": "ingénieur"
+      "role": "ingénieur",
+      "id": 1
     },
     {
       "id": 2,
@@ -19,4 +19,4 @@
       "role": "responsable"
     }
   ]
-}
+}

src/app/app-routing.module.ts

@@ -1,10 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { EmployeesComponent } from './components/employees/employees.component';
+import { NewComponent } from './components/employees/new/new.component';
+import { EditComponent } from './components/employees/edit/edit.component';
 
-const routes: Routes = [{
+const routes: Routes = [
-	path:"employees", component:EmployeesComponent
+	{
-}];
+		path:"employees", component:EmployeesComponent,
+	},
+	{
+		path:"newEmployee", component:NewComponent,
+	},
+	{
+		path:"editEmployee/:id", component:EditComponent,
+	}
+];
 
 @NgModule({
 	imports: [RouterModule.forRoot(routes)],

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';
@@ -11,12 +12,20 @@ import { EmployeesComponent } from './components/employees/employees.component';
 import { NavBarComponent } from './components/employees/nav-bar/nav-bar.component';
 import { employeesReducer } from './ngrx/employees.reducer';
 import { EmployeesEffects } from './ngrx/employees.effects';
+import { ListComponent } from './components/employees/list/list.component';
+import { ItemComponent } from './components/employees/list/item/item.component';
+import { NewComponent } from './components/employees/new/new.component';
+import { EditComponent } from './components/employees/edit/edit.component';
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		EmployeesComponent,
-		NavBarComponent
+		NavBarComponent,
+		ListComponent,
+		ItemComponent,
+		NewComponent,
+  EditComponent
 	],
 	imports: [
 		BrowserModule,
@@ -24,7 +33,9 @@ import { EmployeesEffects } from './ngrx/employees.effects';
 		HttpClientModule,
 		StoreModule.forRoot({catalogState:employeesReducer}),
 		EffectsModule.forRoot([EmployeesEffects]),
-		StoreDevtoolsModule.instrument()
+		StoreDevtoolsModule.instrument(),
+		FormsModule,
+		ReactiveFormsModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

src/app/components/employees/edit/edit.component.html

@@ -0,0 +1,49 @@
+<div class="container">
+	<ng-container *ngIf="employeeFormGroup">
+		<ng-container *ngIf="state as data">
+			<ng-container *ngIf="data.dataState==employeesStateEnum.LOADING">
+				Loading ...
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.UPDATED">
+				<div class="alert-success container p-3 m-3">
+					<span>Employee Updated Successfully</span>
+					<button class="btn btn-success ms-3" (click)="okUpdated()">OK</button>
+				</div>
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.ERROR">
+				{{state.errorMessage}}
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.LOADED">
+				<ng-container *ngIf="formBuilt">
+					<form [formGroup]="employeeFormGroup" (ngSubmit)="onUpdateEmployee()">
+						<div class="form-group">
+							<label>Nom</label>
+							<input type="text" class="form-control" formControlName="nom"
+									[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['nom'].errors}">
+							<div *ngIf="submitted && employeeFormGroup.controls['nom'].errors" class="invalid-feedback">
+								<div *ngIf="employeeFormGroup.controls['nom'].errors['required']">Le nom est requis !</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<label>Prénom</label>
+							<input type="text" class="form-control" formControlName="prenom"
+									[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['prenom'].errors}">
+							<div *ngIf="submitted && employeeFormGroup.controls['prenom'].errors" class="invalid-feedback">
+								<div *ngIf="employeeFormGroup.controls['prenom'].errors['required']">Le prénom est requis !</div>
+							</div>
+						</div>
+						<div class="form-group">
+							<label>Role</label>
+							<input type="text" class="form-control" formControlName="role"
+									[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['role'].errors}">
+							<div *ngIf="submitted && employeeFormGroup.controls['role'].errors" class="invalid-feedback">
+								<div *ngIf="employeeFormGroup.controls['role'].errors['required']">Le role est requis !</div>
+							</div>
+						</div>
+						<button type="submit" class="btn btn-success">Sauvegarder</button>
+					</form>
+				</ng-container>
+			</ng-container>
+		</ng-container>
+	</ng-container>
+</div>

src/app/components/employees/edit/edit.component.spec.ts

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

src/app/components/employees/edit/edit.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { EditEmployeeAction } from '../../../ngrx/employees.actions';
+import { EmployeesState, EmployeesStateEnum } from '../../../ngrx/employees.reducer';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UpdateEmployeeAction, SaveEmployeeAction } from '../../../ngrx/employees.actions';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent implements OnInit {
+	employeeId:number;
+	state:EmployeesState|null=null;
+	employeeFormGroup:FormGroup|null=null;
+	readonly employeesStateEnum=EmployeesStateEnum;
+	submitted:boolean=false;
+	formBuilt:boolean=false;
+
+	constructor(private activatedRoute:ActivatedRoute,
+				private store:Store<any>,
+				private fb:FormBuilder,
+				private router:Router ) {
+		this.employeeId=activatedRoute.snapshot.params['id'];
+	}
+
+	ngOnInit(): void {
+		this.store.dispatch(new EditEmployeeAction(this.employeeId));
+		this.store.subscribe(state => {
+			this.state=state.catalogState;
+			if(this.state?.dataState==EmployeesStateEnum.LOADED) {
+				if(this.state.currentEmployee!=null) {
+					this.employeeFormGroup=this.fb.group({
+						nom:[this.state.currentEmployee['nom'], Validators.required],
+						prenom:[this.state.currentEmployee['prenom'], Validators.required],
+						role:[this.state.currentEmployee['role'], Validators.required]
+					})
+				}
+			}
+		});
+		this.formBuilt=true;
+	}
+	okUpdated(): void {
+		this.router.navigateByUrl("/employees");
+	}
+
+	onUpdateEmployee(): void {
+		this.submitted = true;
+		if(!this.employeeFormGroup?.valid) {
+			return;
+		}
+		this.employeeFormGroup.value.id = this.employeeId;
+		this.store.dispatch(new UpdateEmployeeAction(this.employeeFormGroup?.value));
+	}
+}

src/app/components/employees/employees.component.html

@@ -1,5 +1,6 @@
 <div class="p-4">
 	<app-nav-bar></app-nav-bar>
+
 	<ng-container *ngIf="employeesState$ | async as state" [ngSwitch]="state.dataState">
 		<ng-container *ngSwitchCase="EmployeesStateEnum.INITIAL">
 			<div class="p-2">Initial State</div>
@@ -11,17 +12,7 @@
 			<div class="p-2">{{state.errorMessage | json}}</div>
 		</ng-container>
 		<ng-container *ngSwitchCase="EmployeesStateEnum.LOADED" class="p-4">
-			<table class="table">
+			<app-list [state]="state"></app-list>
-				<tr>
-					<th>ID</th><th>Nom</th><th>Prénom</th><th>Role</th>
-				</tr>
-				<tr *ngFor="let employee of state.employees">
-					<td>{{employee.id}}</td>
-					<td>{{employee.nom}}</td>
-					<td>{{employee.prenom}}</td>
-					<td>{{employee.role}}</td>
-				</tr>
-			</table>
 		</ng-container>
 	</ng-container>
 </div>

src/app/components/employees/employees.component.ts

@@ -20,5 +20,4 @@ export class EmployeesComponent implements OnInit {
 			map((state) => state.catalogState)
 		);
 	}
-
 }

src/app/components/employees/list/item/item.component.html

@@ -0,0 +1,17 @@
+<tr *ngIf="employee">
+	<td>{{employee.id}}</td>
+	<td>{{employee.nom}}</td>
+	<td>{{employee.prenom}}</td>
+	<td>{{employee.role}}</td>
+	<td>
+		<button type="button" class="btn btn-outline-danger" (click)="onDelete(employee)">
+			<span class="fa fa-trash"></span>
+		</button>
+	</td>
+	<td>
+		<button type="button" class="btn btn-outline-info" (click)="onEdit(employee)">
+			<span class="fa fa-edit"></span>
+		</button>
+	</td>
+</tr>
+

src/app/components/employees/list/item/item.component.spec.ts

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

src/app/components/employees/list/item/item.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Employee } from '../../../../model/employee.model';
+import { Store } from '@ngrx/store';
+import { Router } from '@angular/router';
+import { DeleteEmployeesAction, EditEmployeeAction } from '../../../../ngrx/employees.actions';
+
+@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css']
+})
+export class ItemComponent implements OnInit {
+	@Input() employee:Employee|null=null;
+	constructor(private store:Store, private router:Router) { }
+
+	ngOnInit(): void {
+	}
+
+	onDelete(val:Employee) {
+		this.store.dispatch(new DeleteEmployeesAction(val));
+	}
+
+	onEdit(val:Employee) {
+		this.router.navigateByUrl("/editEmployee/"+val.id);
+	}
+}

src/app/components/employees/list/list.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+	<table class="table" *ngIf="state">
+		<thead>
+			<tr>
+				<th>ID</th><th>Nom</th><th>Prénom</th><th>Role</th>
+			</tr>
+		</thead>
+		<tbody>
+			<app-item [employee]="p" *ngFor="let p of state.employees" style="display: contents">
+			</app-item>
+		</tbody>
+	</table>
+</div>

src/app/components/employees/list/list.component.spec.ts

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

src/app/components/employees/list/list.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EmployeesState } from '../../../ngrx/employees.reducer';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent implements OnInit {
+	@Input() state?:EmployeesState|null=null;
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+}

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)="onNewEmployee()">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,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { GetAllEmployeesAction } from '../../../ngrx/employees.actions';
+import { GetAllEmployeesAction, SearchEmployeesAction } from '../../../ngrx/employees.actions';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-nav-bar',
@@ -9,7 +10,7 @@ import { GetAllEmployeesAction } from '../../../ngrx/employees.actions';
 })
 export class NavBarComponent implements OnInit {
 
-	constructor(private store:Store<any>) { }
+	constructor(private store:Store<any>, private router:Router) { }
 
 	ngOnInit(): void {
 	}
@@ -17,4 +18,12 @@ export class NavBarComponent implements OnInit {
 	onGetAllEmployees() {
 		this.store.dispatch(new GetAllEmployeesAction({}))
 	}
+
+	onSearch(val:any) {
+		this.store.dispatch(new SearchEmployeesAction(val.keyword))
+	}
+
+	onNewEmployee() {
+		this.router.navigateByUrl("/newEmployee");
+	}
 }

src/app/components/employees/new/new.component.html

@@ -0,0 +1,47 @@
+<div class="container">
+	<ng-container *ngIf="employeeFormGroup">
+		<ng-container *ngIf="state as data">
+			<ng-container *ngIf="data.dataState==employeesStateEnum.LOADING">
+				Loading ...
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.LOADED">
+				<div class="alert-success container p-3 m-3">
+					<span>Employee Saved Successfully</span>
+					<button class="btn btn-success ms-3" (click)="newEmployee()">Nouvel Employee</button>
+				</div>
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.ERROR">
+				Error ...
+			</ng-container>
+			<ng-container *ngIf="data.dataState==employeesStateEnum.NEW">
+				<form [formGroup]="employeeFormGroup" (ngSubmit)="onSaveEmployee()">
+					<div class="form-group">
+						<label>Nom</label>
+						<input type="text" class="form-control" formControlName="nom"
+								[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['nom'].errors}">
+						<div *ngIf="submitted && employeeFormGroup.controls['nom'].errors" class="invalid-feedback">
+							<div *ngIf="employeeFormGroup.controls['nom'].errors['required']">Le nom est requis !</div>
+						</div>
+					</div>
+					<div class="form-group">
+						<label>Prénom</label>
+						<input type="text" class="form-control" formControlName="prenom"
+								[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['prenom'].errors}">
+						<div *ngIf="submitted && employeeFormGroup.controls['prenom'].errors" class="invalid-feedback">
+							<div *ngIf="employeeFormGroup.controls['prenom'].errors['required']">Le prénom est requis !</div>
+						</div>
+					</div>
+					<div class="form-group">
+						<label>Role</label>
+						<input type="text" class="form-control" formControlName="role"
+								[ngClass]="{'is-invalid':submitted && employeeFormGroup.controls['role'].errors}">
+						<div *ngIf="submitted && employeeFormGroup.controls['role'].errors" class="invalid-feedback">
+							<div *ngIf="employeeFormGroup.controls['role'].errors['required']">Le role est requis !</div>
+						</div>
+					</div>
+					<button type="submit" class="btn btn-success">Sauvegarder</button>
+				</form>
+			</ng-container>
+		</ng-container>
+	</ng-container>
+</div>

src/app/components/employees/new/new.component.spec.ts

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

src/app/components/employees/new/new.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EmployeesState, EmployeesStateEnum } from '../../../ngrx/employees.reducer';
+import { Store } from '@ngrx/store';
+import { NewEmployeeAction, SaveEmployeeAction } from '../../../ngrx/employees.actions';
+
+@Component({
+  selector: 'app-new',
+  templateUrl: './new.component.html',
+  styleUrls: ['./new.component.css']
+})
+export class NewComponent implements OnInit {
+	employeeFormGroup: FormGroup|null=null;
+	state: EmployeesState|null=null;
+	readonly employeesStateEnum=EmployeesStateEnum;
+	submitted:boolean=false;
+
+	constructor(private store:Store<any>, private fb:FormBuilder) { }
+
+	ngOnInit(): void {
+		this.store.dispatch(new NewEmployeeAction({}));
+		this.store.subscribe(state=>{
+			this.state=state.catalogState;
+			if(this.state?.dataState==EmployeesStateEnum.NEW) {
+				this.employeeFormGroup=this.fb.group({
+					nom:["", Validators.required],
+					prenom:["", Validators.required],
+					role:["", Validators.required]
+				});
+			}
+		})
+	}
+
+	newEmployee(): void {
+		this.store.dispatch(new NewEmployeeAction({}));
+	}
+
+	onSaveEmployee(): void {
+		this.submitted = true;
+		if(!this.employeeFormGroup?.valid) {
+			return;
+		}
+		this.store.dispatch(new SaveEmployeeAction(this.employeeFormGroup?.value));
+	}
+}

src/app/ngrx/employees.actions.ts

@@ -5,27 +5,147 @@ 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",
+	/* Delete employees */
+	DELETE_EMPLOYEES="[Employees] Delete Employees",
+	DELETE_EMPLOYEES_SUCCESS="[Employees] Delete Employees Success",
+	DELETE_EMPLOYEES_ERROR="[Employees] Delete Employees Error",
+	/* New employee */
+	NEW_EMPLOYEE="[Employees] New Employee",
+	NEW_EMPLOYEE_SUCCESS="[Employees] New Employee Success",
+	NEW_EMPLOYEE_ERROR="[Employees] New Employee Error",
+	/* Save employee */
+	SAVE_EMPLOYEE="[Employees] Save Employee",
+	SAVE_EMPLOYEE_SUCCESS="[Employees] Save Employee Success",
+	SAVE_EMPLOYEE_ERROR="[Employees] Save Employee Error",
+	/* Edit employee */
+	EDIT_EMPLOYEE="[Employees] Edit Employee",
+	EDIT_EMPLOYEE_SUCCESS="[Employees] Edit Employee Success",
+	EDIT_EMPLOYEE_ERROR="[Employees] Edit Employee Error",
+	/* Update employee */
+	UPDATE_EMPLOYEE="[Employees] Update Employee",
+	UPDATE_EMPLOYEE_SUCCESS="[Employees] Update Employee Success",
+	UPDATE_EMPLOYEE_ERROR="[Employees] Update Employee Error",
 }
 
+/* Get All Employees Actions */
 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;
+/* Search Employee Actions */
+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) {}
+}
+
+/* Delete Employee Actions */
+export class DeleteEmployeesAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.DELETE_EMPLOYEES;
+	constructor(public payload:Employee) {}
+}
+
+export class DeleteEmployeesActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.DELETE_EMPLOYEES_SUCCESS;
+	constructor(public payload:Employee) {}
+}
+
+export class DeleteEmployeesActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.DELETE_EMPLOYEES_ERROR;
+	constructor(public payload:string) {}
+}
+
+/* New Employee Actions */
+export class NewEmployeeAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.NEW_EMPLOYEE;
+	constructor(public payload:any) {}
+}
+
+export class NewEmployeeActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.NEW_EMPLOYEE_SUCCESS;
+	constructor(public payload:any) {}
+}
+
+export class NewEmployeeActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.NEW_EMPLOYEE_ERROR;
+	constructor(public payload:string) {}
+}
+
+/* Save Employee Actions */
+export class SaveEmployeeAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SAVE_EMPLOYEE;
+	constructor(public payload:Employee) {}
+}
+
+export class SaveEmployeeActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SAVE_EMPLOYEE_SUCCESS;
+	constructor(public payload:Employee) {}
+}
+
+export class SaveEmployeeActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.SAVE_EMPLOYEE_ERROR;
+	constructor(public payload:string) {}
+}
+
+/* Edit Employee Actions */
+export class EditEmployeeAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.EDIT_EMPLOYEE;
+	constructor(public payload:number) {}
+}
+
+export class EditEmployeeActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.EDIT_EMPLOYEE_SUCCESS;
+	constructor(public payload:Employee) {}
+}
+
+export class EditEmployeeActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.EDIT_EMPLOYEE_ERROR;
+	constructor(public payload:string) {}
+}
+
+/* Update Employee Actions */
+export class UpdateEmployeeAction implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.UPDATE_EMPLOYEE;
+	constructor(public payload:Employee) {}
+}
+
+export class UpdateEmployeeActionSuccess implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.UPDATE_EMPLOYEE_SUCCESS;
+	constructor(public payload:Employee) {}
+}
+
+export class UpdateEmployeeActionError implements Action {
+	type: EmployeesActionsTypes=EmployeesActionsTypes.UPDATE_EMPLOYEE_ERROR;
+	constructor(public payload:string) {}
+}
+
+export type EmployeesActions=GetAllEmployeesAction | GetAllEmployeesActionSuccess | GetAllEmployeesActionError |
+	SearchEmployeesAction | SearchEmployeesActionSuccess | SearchEmployeesActionError | DeleteEmployeesAction |
+	DeleteEmployeesActionSuccess | DeleteEmployeesActionError | NewEmployeeAction | NewEmployeeActionSuccess |
+	NewEmployeeActionError | SaveEmployeeAction | SaveEmployeeActionSuccess | SaveEmployeeActionError |
+	EditEmployeeAction | EditEmployeeActionSuccess | EditEmployeeActionError | UpdateEmployeeAction |
+	UpdateEmployeeActionSuccess | UpdateEmployeeActionError;

src/app/ngrx/employees.effects.ts

@@ -3,15 +3,27 @@ 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,
+			DeleteEmployeesActionSuccess,
+			DeleteEmployeesActionError,
+			NewEmployeeActionSuccess,
+			SaveEmployeeActionSuccess,
+			SaveEmployeeActionError,
+			EditEmployeeActionSuccess,
+			EditEmployeeActionError,
+			UpdateEmployeeActionSuccess,
+			UpdateEmployeeActionError} 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 +31,63 @@ 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)))
+			)
+		})
+	));
+
+	deleteEmployeesEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.DELETE_EMPLOYEES),
+		mergeMap((action:EmployeesActions) => {
+			return this.employeesService.deleteEmployee(action.payload).pipe(
+				map(() => new DeleteEmployeesActionSuccess(action.payload)),
+				catchError((err) => of(new DeleteEmployeesActionError(err.message)))
+			)
+		})
+	));
+
+	newEmployeesEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.NEW_EMPLOYEE),
+		map((action:EmployeesActions) => {
+			return new NewEmployeeActionSuccess({});
+		})
+	));
+
+	saveEmployeeEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.SAVE_EMPLOYEE),
+		mergeMap((action:EmployeesActions) => {
+			return this.employeesService.saveEmployee(action.payload).pipe(
+				map((employee) => new SaveEmployeeActionSuccess(employee)),
+				catchError((err) => of(new SaveEmployeeActionError(err.message)))
+			)
+		})
+	));
+
+	editEmployeeEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.EDIT_EMPLOYEE),
+		mergeMap((action:EmployeesActions) => {
+			return this.employeesService.getEmployee(action.payload).pipe(
+				map((employee) => new EditEmployeeActionSuccess(employee)),
+				catchError((err) => of(new EditEmployeeActionError(err.message)))
+			)
+		})
+	));
+
+	updateEmployeeEffect$:Observable<EmployeesActions> = createEffect(() => this.actions$.pipe(
+		ofType(EmployeesActionsTypes.UPDATE_EMPLOYEE),
+		mergeMap((action:EmployeesActions) => {
+			return this.employeesService.updateEmployee(action.payload).pipe(
+				map((employee) => new UpdateEmployeeActionSuccess(employee)),
+				catchError((err) => of(new UpdateEmployeeActionError(err.message)))
+			)
+		})
+	));
+
 	constructor(
 		private employeesService:EmployeesService,
 		private actions$:Actions

src/app/ngrx/employees.reducer.ts

@@ -6,19 +6,24 @@ export enum EmployeesStateEnum {
 	LOADING="Loading",
 	LOADED="Loaded",
 	ERROR="Error",
-	INITIAL="Initial"
+	INITIAL="Initial",
+	NEW="Nouvel",
+	EDIT="Editer",
+	UPDATED="Mise à jour"
 }
 
 export interface EmployeesState {
 	employees:Employee[],
 	errorMessage:string,
-	dataState:EmployeesStateEnum
+	dataState:EmployeesStateEnum,
+	currentEmployee?:Employee|null
 }
 
 const initState:EmployeesState = {
 	employees:[],
 	errorMessage:"",
-	dataState:EmployeesStateEnum.INITIAL
+	dataState:EmployeesStateEnum.INITIAL,
+	currentEmployee:null
 }
 
 export function employeesReducer(state:EmployeesState=initState, action:Action):EmployeesState {
@@ -29,7 +34,57 @@ 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};
+		/* Delete Employees */
+		case EmployeesActionsTypes.DELETE_EMPLOYEES:
+			return {...state, dataState:EmployeesStateEnum.LOADING};
+		case EmployeesActionsTypes.DELETE_EMPLOYEES_SUCCESS:
+			let e:Employee=(<EmployeesActions>action).payload;
+			let employeesList=[...state.employees];
+			let index=state.employees.indexOf(e);
+			employeesList.splice(index,1);
+			return {...state, dataState:EmployeesStateEnum.LOADED, employees:employeesList};
+		case EmployeesActionsTypes.DELETE_EMPLOYEES_ERROR:
+			return {...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload};
+		/* New Employee */
+		case EmployeesActionsTypes.NEW_EMPLOYEE:
+			return {...state, dataState:EmployeesStateEnum.LOADING};
+		case EmployeesActionsTypes.NEW_EMPLOYEE_SUCCESS:
+			return {...state, dataState:EmployeesStateEnum.NEW};
+		case EmployeesActionsTypes.NEW_EMPLOYEE_ERROR:
+			return {...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload};
+		/* Save Employee */
+		case EmployeesActionsTypes.SAVE_EMPLOYEE:
+			return { ...state, dataState:EmployeesStateEnum.LOADING };
+		case EmployeesActionsTypes.SAVE_EMPLOYEE_SUCCESS:
+			let employeesLst=[...state.employees];
+			employeesLst.push((<EmployeesActions>action).payload);
+			return { ...state, dataState:EmployeesStateEnum.LOADED, employees:employeesLst };
+		case EmployeesActionsTypes.SAVE_EMPLOYEE_ERROR:
+			return { ...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload };
+		/* Edit Employee */
+		case EmployeesActionsTypes.EDIT_EMPLOYEE:
+			return { ...state, dataState:EmployeesStateEnum.LOADING };
+		case EmployeesActionsTypes.EDIT_EMPLOYEE_SUCCESS:
+			return { ...state, dataState:EmployeesStateEnum.LOADED, currentEmployee:(<EmployeesActions>action).payload };
+		case EmployeesActionsTypes.EDIT_EMPLOYEE_ERROR:
+			return { ...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload };
+		/* Update Employee */
+		case EmployeesActionsTypes.UPDATE_EMPLOYEE:
+			return { ...state, dataState:EmployeesStateEnum.LOADING };
+		case EmployeesActionsTypes.UPDATE_EMPLOYEE_SUCCESS:
+			let updatedEmployee:Employee=(<EmployeesActions>action).payload;
+			let Listemployees:Employee[]=state.employees.map(e => (e.id == updatedEmployee.id)?updatedEmployee:e);
+			return { ...state, dataState:EmployeesStateEnum.UPDATED, employees:Listemployees };
+		case EmployeesActionsTypes.UPDATE_EMPLOYEE_ERROR:
+			return { ...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(<EmployeesActions>action).payload };
 		default:
-			return {...state}
+			return { ...state }
 	}
 }

src/app/services/employees.service.ts

@@ -33,8 +33,8 @@ export class EmployeesService {
 		return this.http.get<Employee>(host+"/employees/"+id);
 	}
 
-	updateEmployee(id:number, val:Employee):Observable<Employee> {
+	updateEmployee(val:Employee):Observable<Employee> {
 		let host=environment.host;
-		return this.http.put<Employee>(host+"/employees/"+id, val);
+		return this.http.put<Employee>(host+"/employees/"+val.id, val);
 	}
 }