From 12deab061d52e2b09a45dd8dfdf12b9f08746e08 Mon Sep 17 00:00:00 2001 From: Vincent BENOIT Date: Thu, 24 Mar 2022 16:28:20 +0100 Subject: [PATCH] =?UTF-8?q?Cours=20n=C2=B04:=20D=C3=A9coupage=20en=20sous-?= =?UTF-8?q?composant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 6 +- .../employees-list.component.css | 0 .../employees-list.component.html | 39 ++++++++ .../employees-list.component.spec.ts | 25 +++++ .../employees-list.component.ts | 32 ++++++ .../employees-navbar.component.css | 0 .../employees-navbar.component.html | 18 ++++ .../employees-navbar.component.spec.ts | 25 +++++ .../employees-navbar.component.ts | 28 ++++++ .../employees/employees.component.html | 59 +---------- .../employees/employees.component.ts | 99 ++++++++++++------- src/app/state/employee.state.ts | 13 +++ 12 files changed, 250 insertions(+), 94 deletions(-) create mode 100644 src/app/components/employees/employees-list/employees-list.component.css create mode 100644 src/app/components/employees/employees-list/employees-list.component.html create mode 100644 src/app/components/employees/employees-list/employees-list.component.spec.ts create mode 100644 src/app/components/employees/employees-list/employees-list.component.ts create mode 100644 src/app/components/employees/employees-navbar/employees-navbar.component.css create mode 100644 src/app/components/employees/employees-navbar/employees-navbar.component.html create mode 100644 src/app/components/employees/employees-navbar/employees-navbar.component.spec.ts create mode 100644 src/app/components/employees/employees-navbar/employees-navbar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 379a1f7..a6d0f3e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,8 @@ import { EmployeesComponent } from './components/employees/employees.component'; import { HomeComponent } from './components/home/home.component'; import { EmployeeAddComponent } from './components/employee-add/employee-add.component'; import { EmployeeEditComponent } from './components/employee-edit/employee-edit.component'; +import { EmployeesNavbarComponent } from './components/employees/employees-navbar/employees-navbar.component'; +import { EmployeesListComponent } from './components/employees/employees-list/employees-list.component'; @NgModule({ declarations: [ @@ -18,7 +20,9 @@ import { EmployeeEditComponent } from './components/employee-edit/employee-edit. EmployeesComponent, HomeComponent, EmployeeAddComponent, - EmployeeEditComponent + EmployeeEditComponent, + EmployeesNavbarComponent, + EmployeesListComponent ], imports: [ BrowserModule, diff --git a/src/app/components/employees/employees-list/employees-list.component.css b/src/app/components/employees/employees-list/employees-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/employees/employees-list/employees-list.component.html b/src/app/components/employees/employees-list/employees-list.component.html new file mode 100644 index 0000000..759d1d2 --- /dev/null +++ b/src/app/components/employees/employees-list/employees-list.component.html @@ -0,0 +1,39 @@ +
+ + + Loading ... + + +
+ {{result.errorMessage}} +
+ + + + + + + + + + + + + + + + + + +
IDNomPrenomRoleActions
{{p.id}}{{p.nom}}{{p.prenom}}{{p.role}} + + + +
+ + +
diff --git a/src/app/components/employees/employees-list/employees-list.component.spec.ts b/src/app/components/employees/employees-list/employees-list.component.spec.ts new file mode 100644 index 0000000..74b65cc --- /dev/null +++ b/src/app/components/employees/employees-list/employees-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmployeesListComponent } from './employees-list.component'; + +describe('EmployeesListComponent', () => { + let component: EmployeesListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EmployeesListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EmployeesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/employees/employees-list/employees-list.component.ts b/src/app/components/employees/employees-list/employees-list.component.ts new file mode 100644 index 0000000..1b9e097 --- /dev/null +++ b/src/app/components/employees/employees-list/employees-list.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../../state/employee.state'; +import { Employee } from '../../../model/employee.model'; +import { Observable, of } from 'rxjs'; + +@Component({ + selector: 'app-employees-list', + templateUrl: './employees-list.component.html', + styleUrls: ['./employees-list.component.css'] +}) +export class EmployeesListComponent implements OnInit { + @Input() employeesInput$:Observable>|null=null; + @Output() evtEmit:EventEmitter=new EventEmitter(); + readonly DataStateEnum=DataStateEnum; + + constructor() { } + + ngOnInit(): void { + } + + onDelete(val:Employee) { + this.evtEmit.emit({ + type:EmployeeActionsTypes.DELETE_EMPLOYEE, payload:val + }); + } + + onEdit(val:Employee) { + this.evtEmit.emit({ + type:EmployeeActionsTypes.EDIT_EMPLOYEE, payload:val + }); + } +} diff --git a/src/app/components/employees/employees-navbar/employees-navbar.component.css b/src/app/components/employees/employees-navbar/employees-navbar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/employees/employees-navbar/employees-navbar.component.html b/src/app/components/employees/employees-navbar/employees-navbar.component.html new file mode 100644 index 0000000..5ab1ee7 --- /dev/null +++ b/src/app/components/employees/employees-navbar/employees-navbar.component.html @@ -0,0 +1,18 @@ + diff --git a/src/app/components/employees/employees-navbar/employees-navbar.component.spec.ts b/src/app/components/employees/employees-navbar/employees-navbar.component.spec.ts new file mode 100644 index 0000000..190ee45 --- /dev/null +++ b/src/app/components/employees/employees-navbar/employees-navbar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmployeesNavbarComponent } from './employees-navbar.component'; + +describe('EmployeesNavbarComponent', () => { + let component: EmployeesNavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EmployeesNavbarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EmployeesNavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/employees/employees-navbar/employees-navbar.component.ts b/src/app/components/employees/employees-navbar/employees-navbar.component.ts new file mode 100644 index 0000000..8a299b4 --- /dev/null +++ b/src/app/components/employees/employees-navbar/employees-navbar.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { EmployeeActionsTypes, ActEvent } from '../../../state/employee.state'; + +@Component({ + selector: 'app-employees-navbar', + templateUrl: './employees-navbar.component.html', + styleUrls: ['./employees-navbar.component.css'] +}) +export class EmployeesNavbarComponent implements OnInit { + + @Output() evtEmit:EventEmitter=new EventEmitter(); + constructor() { } + + ngOnInit(): void { + } + + onGetAllEmployees() { + this.evtEmit.emit({type:EmployeeActionsTypes.GET_ALL_EMPLOYEES}); + } + + onSearch(val:any) { + this.evtEmit.emit({type:EmployeeActionsTypes.SEARCH_EMPLOYEES, payload:val}); + } + + onNewEmployee() { + this.evtEmit.emit({type:EmployeeActionsTypes.NEW_EMPLOYEE}); + } +} diff --git a/src/app/components/employees/employees.component.html b/src/app/components/employees/employees.component.html index 6a1bee4..7cc757e 100644 --- a/src/app/components/employees/employees.component.html +++ b/src/app/components/employees/employees.component.html @@ -1,57 +1,2 @@ - -
- - - Loading ... - - -
- {{result.errorMessage}} -
- - - - - - - - - - - - - - - - - - -
IDNomPrenomRoleActions
{{p.id}}{{p.nom}}{{p.prenom}}{{p.role}} - - - -
- - -
+ + diff --git a/src/app/components/employees/employees.component.ts b/src/app/components/employees/employees.component.ts index 15fb03a..9868e84 100644 --- a/src/app/components/employees/employees.component.ts +++ b/src/app/components/employees/employees.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { EmployeesService } from '../../services/employees.service'; import { Employee } from '../../model/employee.model'; -import { AppDataState, DataStateEnum } from '../../state/employee.state'; +import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../state/employee.state'; import { Observable, of } from 'rxjs'; import { catchError, map, startWith } from 'rxjs/operators'; import { Router } from '@angular/router'; @@ -12,46 +12,73 @@ import { Router } from '@angular/router'; styleUrls: ['./employees.component.css'] }) export class EmployeesComponent implements OnInit { - employees$:Observable>|null=null; - readonly DataStateEnum=DataStateEnum; + employees$:Observable>|null=null; + readonly DataStateEnum=DataStateEnum; - constructor(private employeesService:EmployeesService, private router:Router) { } + constructor(private employeesService:EmployeesService, private router:Router) { } - ngOnInit(): void { - } + ngOnInit(): void { } - onGetAllEmployees() { - this.employees$=this.employeesService.getAllEmployees().pipe( - map(data=>{ - return ({dataState:DataStateEnum.LOADED, data:data}) - }), - startWith({dataState:DataStateEnum.LOADING}), - catchError(err=>of({dataState: DataStateEnum.ERROR, errorMessage:err.message})) - ); - } + onActionEvent($event: ActEvent) { + switch($event.type) { + case EmployeeActionsTypes.GET_ALL_EMPLOYEES: { + this.onGetAllEmployees(); + break; + } + case EmployeeActionsTypes.SEARCH_EMPLOYEES: { + this.onSearch($event.payload); + break; + } + case EmployeeActionsTypes.NEW_EMPLOYEE: { + this.onNewEmployee(); + break; + } + case EmployeeActionsTypes.EDIT_EMPLOYEE: { + this.onEdit($event.payload); + break; + } + case EmployeeActionsTypes.DELETE_EMPLOYEE: { + this.onDelete($event.payload); + break; + } + default: { + break; + } + } + } - onSearch(val:any) { - this.employees$=this.employeesService.searchEmployees(val.keyword).pipe( - map(data=>{ - return ({dataState:DataStateEnum.LOADED, data:data}) - }), - startWith({dataState:DataStateEnum.LOADING}), - catchError(err=>of({dataState: DataStateEnum.ERROR, errorMessage:err.message})) - ); - } + onGetAllEmployees() { + this.employees$=this.employeesService.getAllEmployees().pipe( + map(data=>{ + return ({dataState:DataStateEnum.LOADED, data:data}) + }), + startWith({dataState:DataStateEnum.LOADING}), + catchError(err=>of({dataState: DataStateEnum.ERROR, errorMessage:err.message})) + ); + } - onDelete(val:Employee) { - this.employeesService.deleteEmployee(val).subscribe( - data=>{ - this.onGetAllEmployees(); - }); - } + onSearch(val:any) { + this.employees$=this.employeesService.searchEmployees(val.keyword).pipe( + map(data=>{ + return ({dataState:DataStateEnum.LOADED, data:data}) + }), + startWith({dataState:DataStateEnum.LOADING}), + catchError(err=>of({dataState: DataStateEnum.ERROR, errorMessage:err.message})) + ); + } - onNewEmployee() { - this.router.navigateByUrl("/newEmployee"); - } + onDelete(val:Employee) { + this.employeesService.deleteEmployee(val).subscribe( + data=>{ + this.onGetAllEmployees(); + }); + } - onEdit(val:Employee) { - this.router.navigateByUrl("/editEmployee/"+val.id); - } + onNewEmployee() { + this.router.navigateByUrl("/newEmployee"); + } + + onEdit(val:Employee) { + this.router.navigateByUrl("/editEmployee/"+val.id); + } } diff --git a/src/app/state/employee.state.ts b/src/app/state/employee.state.ts index 9b94393..f328337 100644 --- a/src/app/state/employee.state.ts +++ b/src/app/state/employee.state.ts @@ -1,3 +1,16 @@ +export enum EmployeeActionsTypes { + GET_ALL_EMPLOYEES="[Employees] Get all employees", + SEARCH_EMPLOYEES="[Employees] Search employees", + NEW_EMPLOYEE="[Employees] New employee", + EDIT_EMPLOYEE="[Employees] Edit employee", + DELETE_EMPLOYEE="[Employees] Remove employee" +} + +export interface ActEvent { + type:EmployeeActionsTypes, + payload?:any +} + export enum DataStateEnum { LOADING, LOADED,