From 739e93f16c1cd2b519eec8fe26f4d77997b9ed32 Mon Sep 17 00:00:00 2001 From: Vincent BENOIT Date: Mon, 4 Apr 2022 17:04:59 +0200 Subject: [PATCH] =?UTF-8?q?Resultat=20cours=20n=C2=B012=20et=2013=20et=20f?= =?UTF-8?q?in=20demo=20sur=20Angular?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- db.json | 6 +- src/app/app-routing.module.ts | 16 ++- src/app/app.module.ts | 6 +- .../employees/edit/edit.component.css | 0 .../employees/edit/edit.component.html | 49 ++++++++ .../employees/edit/edit.component.spec.ts | 25 ++++ .../employees/edit/edit.component.ts | 58 ++++++++++ .../employees/list/item/item.component.ts | 7 +- .../employees/nav-bar/nav-bar.component.html | 2 +- .../employees/nav-bar/nav-bar.component.ts | 7 +- .../employees/new/new.component.css | 0 .../employees/new/new.component.html | 47 ++++++++ .../employees/new/new.component.spec.ts | 25 ++++ .../components/employees/new/new.component.ts | 45 ++++++++ src/app/ngrx/employees.actions.ts | 108 +++++++++++++++++- src/app/ngrx/employees.effects.ts | 61 +++++++++- src/app/ngrx/employees.reducer.ts | 56 ++++++++- src/app/services/employees.service.ts | 4 +- 18 files changed, 504 insertions(+), 18 deletions(-) create mode 100644 src/app/components/employees/edit/edit.component.css create mode 100644 src/app/components/employees/edit/edit.component.html create mode 100644 src/app/components/employees/edit/edit.component.spec.ts create mode 100644 src/app/components/employees/edit/edit.component.ts create mode 100644 src/app/components/employees/new/new.component.css create mode 100644 src/app/components/employees/new/new.component.html create mode 100644 src/app/components/employees/new/new.component.spec.ts create mode 100644 src/app/components/employees/new/new.component.ts diff --git a/db.json b/db.json index 756c20c..e00ceb8 100644 --- a/db.json +++ b/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" } ] -} +} \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9e3bd1b..731813f 100644 --- a/src/app/app-routing.module.ts +++ b/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)], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3b2349d..179071c 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/employees/edit/edit.component.css b/src/app/components/employees/edit/edit.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/employees/edit/edit.component.html b/src/app/components/employees/edit/edit.component.html new file mode 100644 index 0000000..0fed19a --- /dev/null +++ b/src/app/components/employees/edit/edit.component.html @@ -0,0 +1,49 @@ +
+ + + + Loading ... + + +
+ Employee Updated Successfully + +
+ + + {{state.errorMessage}} + + + +
+
+ + +
+
Le nom est requis !
+
+
+
+ + +
+
Le prénom est requis !
+
+
+
+ + +
+
Le role est requis !
+
+
+ +
+ + + + +
diff --git a/src/app/components/employees/edit/edit.component.spec.ts b/src/app/components/employees/edit/edit.component.spec.ts new file mode 100644 index 0000000..5a24d45 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/employees/edit/edit.component.ts b/src/app/components/employees/edit/edit.component.ts new file mode 100644 index 0000000..aa5d392 --- /dev/null +++ b/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, + 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)); + } +} diff --git a/src/app/components/employees/list/item/item.component.ts b/src/app/components/employees/list/item/item.component.ts index 98d2759..4abed05 100644 --- a/src/app/components/employees/list/item/item.component.ts +++ b/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); } } diff --git a/src/app/components/employees/nav-bar/nav-bar.component.html b/src/app/components/employees/nav-bar/nav-bar.component.html index d40ad5b..55ee6ad 100644 --- a/src/app/components/employees/nav-bar/nav-bar.component.html +++ b/src/app/components/employees/nav-bar/nav-bar.component.html @@ -4,7 +4,7 @@
  • - +
      • diff --git a/src/app/components/employees/nav-bar/nav-bar.component.ts b/src/app/components/employees/nav-bar/nav-bar.component.ts index 8f7a1f2..860d58a 100644 --- a/src/app/components/employees/nav-bar/nav-bar.component.ts +++ b/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) { } + constructor(private store:Store, 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"); + } } diff --git a/src/app/components/employees/new/new.component.css b/src/app/components/employees/new/new.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/employees/new/new.component.html b/src/app/components/employees/new/new.component.html new file mode 100644 index 0000000..9436809 --- /dev/null +++ b/src/app/components/employees/new/new.component.html @@ -0,0 +1,47 @@ +
      + + + + Loading ... + + +
      + Employee Saved Successfully + +
      +       + + Error ... + + +
      +
      + + +
      +
      Le nom est requis !
      +
      +
      +
      + + +
      +
      Le prénom est requis !
      +
      +
      +
      + + +
      +
      Le role est requis !
      +
      +
      + +
      +       +       +       +
      diff --git a/src/app/components/employees/new/new.component.spec.ts b/src/app/components/employees/new/new.component.spec.ts new file mode 100644 index 0000000..0607a22 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/employees/new/new.component.ts b/src/app/components/employees/new/new.component.ts new file mode 100644 index 0000000..cde944e --- /dev/null +++ b/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, 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)); + } +} diff --git a/src/app/ngrx/employees.actions.ts b/src/app/ngrx/employees.actions.ts index 6984b13..543c983 100644 --- a/src/app/ngrx/employees.actions.ts +++ b/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; diff --git a/src/app/ngrx/employees.effects.ts b/src/app/ngrx/employees.effects.ts index db45828..b17f369 100644 --- a/src/app/ngrx/employees.effects.ts +++ b/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 = 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 = createEffect(() => this.actions$.pipe( + ofType(EmployeesActionsTypes.NEW_EMPLOYEE), + map((action:EmployeesActions) => { + return new NewEmployeeActionSuccess({}); + }) + )); + + saveEmployeeEffect$:Observable = 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 = 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 = 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 diff --git a/src/app/ngrx/employees.reducer.ts b/src/app/ngrx/employees.reducer.ts index 01a63b9..63f52f4 100644 --- a/src/app/ngrx/employees.reducer.ts +++ b/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:(action).payload}; case EmployeesActionsTypes.SEARCH_EMPLOYEES_ERROR: return {...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(action).payload}; + /* Delete Employees */ + case EmployeesActionsTypes.DELETE_EMPLOYEES: + return {...state, dataState:EmployeesStateEnum.LOADING}; + case EmployeesActionsTypes.DELETE_EMPLOYEES_SUCCESS: + let e:Employee=(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:(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:(action).payload}; + /* Save Employee */ + case EmployeesActionsTypes.SAVE_EMPLOYEE: + return { ...state, dataState:EmployeesStateEnum.LOADING }; + case EmployeesActionsTypes.SAVE_EMPLOYEE_SUCCESS: + let employeesLst=[...state.employees]; + employeesLst.push((action).payload); + return { ...state, dataState:EmployeesStateEnum.LOADED, employees:employeesLst }; + case EmployeesActionsTypes.SAVE_EMPLOYEE_ERROR: + return { ...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(action).payload }; + /* Edit Employee */ + case EmployeesActionsTypes.EDIT_EMPLOYEE: + return { ...state, dataState:EmployeesStateEnum.LOADING }; + case EmployeesActionsTypes.EDIT_EMPLOYEE_SUCCESS: + return { ...state, dataState:EmployeesStateEnum.LOADED, currentEmployee:(action).payload }; + case EmployeesActionsTypes.EDIT_EMPLOYEE_ERROR: + return { ...state, dataState:EmployeesStateEnum.ERROR, errorMessage:(action).payload }; + /* Update Employee */ + case EmployeesActionsTypes.UPDATE_EMPLOYEE: + return { ...state, dataState:EmployeesStateEnum.LOADING }; + case EmployeesActionsTypes.UPDATE_EMPLOYEE_SUCCESS: + let updatedEmployee:Employee=(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:(action).payload }; default: - return {...state} + return { ...state } } } diff --git a/src/app/services/employees.service.ts b/src/app/services/employees.service.ts index ddaac12..4caa37a 100644 --- a/src/app/services/employees.service.ts +++ b/src/app/services/employees.service.ts @@ -33,8 +33,8 @@ export class EmployeesService { return this.http.get(host+"/employees/"+id); } - updateEmployee(id:number, val:Employee):Observable { + updateEmployee(val:Employee):Observable { let host=environment.host; - return this.http.put(host+"/employees/"+id, val); + return this.http.put(host+"/employees/"+val.id, val); } }