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 @@
  • - +