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 = [{
-	path:"employees", component:EmployeesComponent
-}];
+const routes: Routes = [
+	{
+		path:"employees", component:EmployeesComponent,
+	},
+	{
+		path:"newEmployee", component:NewComponent,
+	},
+	{
+		path:"editEmployee/:id", component:EditComponent,
+	}
+];
 
 @NgModule({
 	imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -14,6 +14,8 @@ 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: [
@@ -21,7 +23,9 @@ import { ItemComponent } from './components/employees/list/item/item.component';
 		EmployeesComponent,
 		NavBarComponent,
 		ListComponent,
-		ItemComponent
+		ItemComponent,
+		NewComponent,
+  EditComponent
 	],
 	imports: [
 		BrowserModule,

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/list/item/item.component.ts

@@ -1,5 +1,8 @@
 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',
@@ -8,14 +11,16 @@ import { Employee } from '../../../../model/employee.model';
 })
 export class ItemComponent implements OnInit {
 	@Input() employee:Employee|null=null;
-	constructor() { }
+	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/nav-bar/nav-bar.component.html

@@ -4,7 +4,7 @@
 		<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>
+		<button class="btn btn-outline-info btn-sm" (click)="onNewEmployee()">New</button>
 	</li>
 </ul>
 <ul class="navbar-nav ms-auto">

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, SearchEmployeesAction } from '../../../ngrx/employees.actions';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-nav-bar',
@@ -9,7 +10,7 @@ import { GetAllEmployeesAction, SearchEmployeesAction } from '../../../ngrx/empl
 })
 export class NavBarComponent implements OnInit {
 
-	constructor(private store:Store<any>) { }
+	constructor(private store:Store<any>, private router:Router) { }
 
 	ngOnInit(): void {
 	}
@@ -21,4 +22,8 @@ export class NavBarComponent implements OnInit {
 	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

@@ -9,8 +9,29 @@ export enum EmployeesActionsTypes {
 	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) {}
@@ -26,6 +47,7 @@ export class GetAllEmployeesActionError implements Action {
 	constructor(public payload:string) {}
 }
 
+/* Search Employee Actions */
 export class SearchEmployeesAction implements Action {
 	type: EmployeesActionsTypes=EmployeesActionsTypes.SEARCH_EMPLOYEES;
 	constructor(public payload:string) {}
@@ -41,5 +63,89 @@ export class SearchEmployeesActionError implements Action {
 	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;
+	SearchEmployeesAction | SearchEmployeesActionSuccess | SearchEmployeesActionError | DeleteEmployeesAction |
+	DeleteEmployeesActionSuccess | DeleteEmployeesActionError | NewEmployeeAction | NewEmployeeActionSuccess |
+	NewEmployeeActionError | SaveEmployeeAction | SaveEmployeeActionSuccess | SaveEmployeeActionError |
+	EditEmployeeAction | EditEmployeeActionSuccess | EditEmployeeActionError | UpdateEmployeeAction |
+	UpdateEmployeeActionSuccess | UpdateEmployeeActionError;

src/app/ngrx/employees.effects.ts

@@ -5,7 +5,19 @@ import { Observable, of, EMPTY } from 'rxjs';
 import { Action } from '@ngrx/store';
 import { EmployeesActionsTypes, EmployeesActions } from './employees.actions';
 import { mergeMap, map, catchError } from 'rxjs/operators';
-import { GetAllEmployeesActionSuccess, GetAllEmployeesActionError, SearchEmployeesActionSuccess, SearchEmployeesActionError } from './employees.actions';
+import { GetAllEmployeesActionSuccess,
+			GetAllEmployeesActionError,
+			SearchEmployeesActionSuccess,
+			SearchEmployeesActionError,
+			DeleteEmployeesActionSuccess,
+			DeleteEmployeesActionError,
+			NewEmployeeActionSuccess,
+			SaveEmployeeActionSuccess,
+			SaveEmployeeActionError,
+			EditEmployeeActionSuccess,
+			EditEmployeeActionError,
+			UpdateEmployeeActionSuccess,
+			UpdateEmployeeActionError} from './employees.actions';
 
 @Injectable()
 export class EmployeesEffects {
@@ -29,6 +41,53 @@ export class EmployeesEffects {
 		})
 	));
 
+	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 {
@@ -36,7 +41,50 @@ export function employeesReducer(state:EmployeesState=initState, action:Action):
 			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);
 	}
 }