passage du port 3000 -> 4000 pour json-server et ajout de la variable host dans l'environement de prod

db.json

@@ -1,10 +1,10 @@
 {
   "employees": [
     {
+      "id": 1,
       "nom": "benoit",
       "prenom": "vincent",
-      "role": "ingénieur",
-      "id": 1
+      "role": "ingénieur"
     },
     {
       "id": 2,
@@ -19,4 +19,4 @@
       "role": "responsable"
     }
   ]
-}
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "concurrently \"ng serve\" \"json-server --watch db.json\"",
+    "start": "concurrently \"ng serve\" \"json-server -p 4000 --watch db.json\"",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

src/app/components/employees/employees-list/employee-item/employee-item.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Employee } from '../../../../model/employee.model';
 import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../../../state/employee.state';
+import { EventDriverService } from '../../../../services/event.driver.service';
 
 @Component({
   selector: 'app-employee-item',
@@ -9,19 +10,18 @@ import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../
 })
 export class EmployeeItemComponent implements OnInit {
 	@Input() employee?:Employee;
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
-	constructor() { }
+	constructor(private evDrivenService:EventDriverService) { }
 
 	ngOnInit(): void { }
 
 	onDelete(val:Employee) {
-		this.evtEmit.emit({
+		this.evDrivenService.publishEvent({
 			type:EmployeeActionsTypes.DELETE_EMPLOYEE, payload:val
 		});
 	}
 
 	onEdit(val:Employee) {
-		this.evtEmit.emit({
+		this.evDrivenService.publishEvent({
 			type:EmployeeActionsTypes.EDIT_EMPLOYEE, payload:val
 		});
 	}

src/app/components/employees/employees-list/employees-list.component.html

@@ -16,7 +16,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<app-employee-item [employee]="p" (evtEmit)="onActionEvent($event)" *ngFor="let p of result.data" style="display: contents">
+					<app-employee-item [employee]="p" *ngFor="let p of result.data" style="display: contents">
 					</app-employee-item>
 				</tbody>
 			</table>

src/app/components/employees/employees-list/employees-list.component.ts

@@ -10,14 +10,9 @@ import { Observable, of } from 'rxjs';
 })
 export class EmployeesListComponent implements OnInit {
 	@Input() employeesInput$:Observable<AppDataState<Employee[]>>|null=null;
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
 	readonly DataStateEnum=DataStateEnum;
 
 	constructor() { }
 
 	ngOnInit(): void { }
-
-	onActionEvent($event:ActEvent) {
-		this.evtEmit.emit($event);
-	}
 }

src/app/components/employees/employees-navbar/employees-navbar.component.html

@@ -1,13 +1,15 @@
 <nav class="navbar navbar-expand-sm navbar-light bg-light">
 	<div class="collapse navbar-collapse">
-		<ul class="navbar-nav mr-auto">
+		<ul class="navbar-nav">
 			<li class="nav-item">
 				<button (click)="onGetAllEmployees()" class="btn btn-sm btn-outline-info ml-2">All</button>
 			</li>
 			<li class="nav-item">
 				<button (click)="onNewEmployee()" class="btn btn-sm btn-outline-info ml-2">Ajout</button>
 			</li>
-			<form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="form-inline my-2 my-lg-0">
+		</ul>
+		<ul class="navbar-nav ms-auto">
+			<form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="form-inline">
 				<input ngModel class="mr-sm-2" name="keyword" type="text">
 				<button class="btn btn-sm btn-outline-info my-2 my-sm-0">
 					<span class="fa fa-search"></span>

src/app/components/employees/employees-navbar/employees-navbar.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { EmployeeActionsTypes, ActEvent } from '../../../state/employee.state';
+import { EventDriverService } from '../../../services/event.driver.service';
 
 @Component({
   selector: 'app-employees-navbar',
@@ -8,21 +9,20 @@ import { EmployeeActionsTypes, ActEvent } from '../../../state/employee.state';
 })
 export class EmployeesNavbarComponent implements OnInit {
 
-	@Output() evtEmit:EventEmitter<ActEvent>=new EventEmitter();
-	constructor() { }
+	constructor(private evDriveService:EventDriverService) { }
 
 	ngOnInit(): void {
 	}
 
 	onGetAllEmployees() {
-		this.evtEmit.emit({type:EmployeeActionsTypes.GET_ALL_EMPLOYEES});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.GET_ALL_EMPLOYEES});
 	}
 
 	onSearch(val:any) {
-		this.evtEmit.emit({type:EmployeeActionsTypes.SEARCH_EMPLOYEES, payload:val});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.SEARCH_EMPLOYEES, payload:val});
 	}
 
 	onNewEmployee() {
-		this.evtEmit.emit({type:EmployeeActionsTypes.NEW_EMPLOYEE});
+		this.evDriveService.publishEvent({type:EmployeeActionsTypes.NEW_EMPLOYEE});
 	}
 }

src/app/components/employees/employees.component.html

@@ -1,2 +1,2 @@
-<app-employees-navbar (evtEmit)="onActionEvent($event)"></app-employees-navbar>
-<app-employees-list [employeesInput$]="employees$" (evtEmit)="onActionEvent($event)"></app-employees-list>
+<app-employees-navbar></app-employees-navbar>
+<app-employees-list [employeesInput$]="employees$"></app-employees-list>

src/app/components/employees/employees.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { EmployeesService } from '../../services/employees.service';
+import { EventDriverService } from '../../services/event.driver.service';
 import { Employee } from '../../model/employee.model';
 import { AppDataState, DataStateEnum, EmployeeActionsTypes, ActEvent } from '../../state/employee.state';
-import { Observable, of } from 'rxjs';
+import { Observable, of, Subscription } from 'rxjs';
 import { catchError, map, startWith } from 'rxjs/operators';
 import { Router } from '@angular/router';
 
@@ -11,13 +12,23 @@ import { Router } from '@angular/router';
   templateUrl: './employees.component.html',
   styleUrls: ['./employees.component.css']
 })
-export class EmployeesComponent implements OnInit {
+export class EmployeesComponent implements OnInit, OnDestroy {
 	employees$:Observable<AppDataState<Employee[]>>|null=null;
 	readonly DataStateEnum=DataStateEnum;
+	sub:Subscription;
 
-	constructor(private employeesService:EmployeesService, private router:Router) { }
+	constructor(private employeesService:EmployeesService, private router:Router, private evDriveService:EventDriverService) {
+	}
 
-	ngOnInit(): void { }
+	ngOnInit(): void {
+		this.sub=this.evDriveService.sourceEventSubjectObservable.subscribe((actionEv:ActEvent)=>{
+			this.onActionEvent(actionEv);
+		});
+	}
+
+	ngOnDestroy(): void {
+		this.sub.unsubscribe();
+	}
 
 	onActionEvent($event: ActEvent) {
 		switch($event.type) {
@@ -68,10 +79,13 @@ export class EmployeesComponent implements OnInit {
 	}
 
 	onDelete(val:Employee) {
-		this.employeesService.deleteEmployee(val).subscribe(
-			data=>{
-				this.onGetAllEmployees();
-			});
+		let v=confirm("Etes vous sûre?");
+     	if(v==true) {
+			this.employeesService.deleteEmployee(val).subscribe(
+				data=>{
+					this.onGetAllEmployees();
+				});
+		}
 	}
 
 	onNewEmployee() {

src/app/services/event.driver.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ActEvent } from '../state/employee.state';
+
+@Injectable({providedIn:"root"})
+export class EventDriverService {
+	sourceEventSubject:Subject<ActEvent>=new Subject<ActEvent>();
+	sourceEventSubjectObservable=this.sourceEventSubject.asObservable();
+
+	publishEvent(event:ActEvent) {
+		this.sourceEventSubject.next(event);
+	}
+}

src/app/state/employee.state.ts

@@ -8,7 +8,8 @@ export enum EmployeeActionsTypes {
 
 export interface ActEvent {
 	type:EmployeeActionsTypes,
-	payload?:any
+	payload?:any,
+	errMsg?:string
 }
 
 export enum DataStateEnum {

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  host: "http://localhost:3000"
 };

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  host: "http://localhost:3000"
+  host: "http://localhost:4000"
 };
 
 /*

tsconfig.json

@@ -10,6 +10,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+	"strictPropertyInitialization": false,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,