Fin de décomposition du cours n°8

src/app/app.module.ts

@@ -11,12 +11,16 @@ 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';
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		EmployeesComponent,
-		NavBarComponent
+		NavBarComponent,
+  ListComponent,
+  ItemComponent
 	],
 	imports: [
 		BrowserModule,

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,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Employee } from '../../../../model/employee.model';
+
+@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.css']
+})
+export class ItemComponent implements OnInit {
+	@Input() employee:Employee|null=null;
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+	onDelete(val:Employee) {
+	}
+
+	onEdit(val:Employee) {
+	}
+}

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 {
+	}
+}