Reprise de la gestion des collaborateurs + ajout du home + refacto générale

src/app/app-routing.module.ts

@@ -1,13 +1,14 @@
 import {NgModule} from '@angular/core';
 import {RouterModule,Routes} from "@angular/router";
 import {CollaborateurComponent} from "./collaborateur/collaborateur.component";
-import {CollaborateurDetailComponent} from "./collaborateur-detail/collaborateur-detail.component";
+import {CollaborateurEditComponent} from "./collaborateur-edit/collaborateur-edit.component";
+import {HomeComponent} from "./home/home.component";
 
 const routes : Routes = [
-  { path: '', redirectTo: '/collaborateurs', pathMatch: 'full' },
-
+  {path:'', redirectTo:'/home', pathMatch:'full'},
+  { path: 'home', component:HomeComponent },
   { path:'collaborateurs',component:CollaborateurComponent },
-  { path: 'detail/:id', component: CollaborateurDetailComponent },
+  { path: 'collaborateurs/:id', component: CollaborateurEditComponent },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -64,6 +64,9 @@
 </style>
 
 <div class="toolbar" role="banner">
+  <nav>
+    <a class="toolbar-button" routerLink="/home">Home</a>
+  </nav>
   <nav>
     <a class="toolbar-button" routerLink="/collaborateurs">Collaborateurs</a>
   </nav>

src/app/app.component.ts

@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'Collaborateur-Epa-Front';
+  title = 'Collaborateur-Epa';
 }

src/app/app.module.ts

@@ -5,17 +5,19 @@ import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {RouterModule} from "@angular/router";
 import { CollaborateurComponent } from './collaborateur/collaborateur.component';
-import { CollaborateurDetailComponent } from './collaborateur-detail/collaborateur-detail.component';
+import { CollaborateurEditComponent } from './collaborateur-edit/collaborateur-edit.component';
 import {FormsModule} from "@angular/forms";
 import { MessagesComponent } from './messages/messages.component';
 import { AppRoutingModule } from './app-routing.module';
+import { HomeComponent } from './home/home.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CollaborateurComponent,
-    CollaborateurDetailComponent,
+    CollaborateurEditComponent,
     MessagesComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,

src/app/collaborateur-detail/collaborateur-detail.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CollaborateurDetailComponent } from './collaborateur-detail.component';
-
-describe('CollaborateurDetailComponent', () => {
-  let component: CollaborateurDetailComponent;
-  let fixture: ComponentFixture<CollaborateurDetailComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CollaborateurDetailComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CollaborateurDetailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/collaborateur-edit/collaborateur-edit.component.html

@@ -1,50 +1,50 @@
 
 <div *ngIf="collaborateur">
 
-  <h2>{{collaborateur.name | uppercase}} Details</h2>
+  <h2>{{collaborateur.name | uppercase}} {{collaborateur.firstName | uppercase}} </h2>
   <div><span>id : </span>{{collaborateur.id}}</div>
   <div>
-    <label class="col-3" for="collaborateur-name">Collaborateur name   </label>
+    <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
     <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
 
-    <label class="col-3" for="collaborateur-firstName">Collaborateur firstname   </label>
+    <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
     <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
 
-    <label class="col-3" for="collaborateur-birthDate">Collaborateur birthDate   </label>
+    <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
     <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
 
-    <label class="col-3" for="collaborateur-gender">Collaborateur gender   </label>
+    <label class="col-2" for="collaborateur-gender">Collaborateur gender   </label>
     <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
 
-    <label class="col-3" for="collaborateur-status">Collaborateur status   </label>
+    <label class="col-2" for="collaborateur-status">Collaborateur status   </label>
     <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
 
-    <label class="col-3" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
+    <label class="col-2" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
     <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
 
-    <label class="col-3" for="collaborateur-address">Collaborateur address   </label>
+    <label class="col-2" for="collaborateur-address">Collaborateur address   </label>
     <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
 
-    <label class="col-3" for="collaborateur-telephone">Collaborateur telephone   </label>
+    <label class="col-2" for="collaborateur-telephone">Collaborateur telephone   </label>
     <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
 
-    <label class="col-3" for="collaborateur-personalMail">Collaborateur personalMail   </label>
+    <label class="col-2" for="collaborateur-personalMail">Collaborateur personalMail   </label>
     <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
 
-    <label class="col-3" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
+    <label class="col-2" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
     <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
 
-    <label class="col-3" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
+    <label class="col-2" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
     <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
 
-    <label class="col-3" for="collaborateur-referrerId">Collaborateur referrerId   </label>
+    <label class="col-2" for="collaborateur-referrerId">Collaborateur referrerId   </label>
     <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
 
-    <label class="col-3" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
+    <label class="col-2" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
     <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
   </div>
 
   <button (click)="goBack()">Retour</button>
-  <button (click)="save()">sauvegarder les changements</button>
+  <button (click)="save()">Sauvegarder les changements</button>
   <button (click)="delete()">Supprimer le collaborateur</button>
 </div>

src/app/collaborateur-edit/collaborateur-edit.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollaborateurEditComponent } from './collaborateur-edit.component';
+
+describe('CollaborateurEditComponent', () => {
+  let component: CollaborateurEditComponent;
+  let fixture: ComponentFixture<CollaborateurEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CollaborateurEditComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CollaborateurEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/collaborateur-edit/collaborateur-edit.component.ts

@@ -5,11 +5,11 @@ import { Location } from '@angular/common';
 import { CollaborateurService} from "../collaborateur.service";
 
 @Component({
-  selector: 'app-collaborateur-detail',
-  templateUrl: './collaborateur-detail.component.html',
-  styleUrls: ['./collaborateur-detail.component.css']
+  selector: 'app-collaborateur-edit',
+  templateUrl: './collaborateur-edit.component.html',
+  styleUrls: ['./collaborateur-edit.component.css']
 })
-export class CollaborateurDetailComponent implements OnInit {
+export class CollaborateurEditComponent implements OnInit {
   collaborateur : Collaborateur | undefined;
 
   constructor(

src/app/collaborateur/collaborateur.component.css

@@ -25,7 +25,7 @@ input {
   left: .1em;
 }
 
-.collaborateurs a {
+.collaborateurs a, td a {
   padding: 5px;
   text-decoration: none;
   margin: 2px;

src/app/collaborateur/collaborateur.component.html

@@ -1,58 +1,57 @@
-<div>
+<div xmlns="">
   <h2>Mes Collaborateurs</h2>
-  <ul class="collaborateurs">
-    <li *ngFor="let collaborateur of collaborateurs">
-      <a routerLink="/detail/{{collaborateur.id}}">
-        <span>{{collaborateur.name}} {{collaborateur.firstName}}</span>
-      </a>
-    </li>
-  </ul>
-</div>
-
 
+  <table *ngFor="let collaborateur of collaborateurs">
 
-<div>
+    <td> {{collaborateur.name}} </td>
+    <td></td>
+    <td> {{collaborateur.firstName}} </td>
+    <td></td>
+    <td> {{collaborateur.apsideMail}} </td>
+    <td></td>
+    <td> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
+  </table>
 
   <h3>Ajouter un collaborateur : </h3>
 
   <div>
-  <label class="col-3" for="collaborateur-name">Collaborateur name   </label>
+  <label class="col-2" for="collaborateur-name">Collaborateur name   </label>
   <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
 
-  <label class="col-3" for="collaborateur-firstName">Collaborateur firstname   </label>
+  <label class="col-2" for="collaborateur-firstName">Collaborateur firstname   </label>
   <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
 
-  <label class="col-3" for="collaborateur-birthDate">Collaborateur birthDate   </label>
+  <label class="col-2" for="collaborateur-birthDate">Collaborateur birthDate   </label>
   <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
 
-  <label class="col-3" for="collaborateur-gender">Collaborateur name   </label>
+  <label class="col-2" for="collaborateur-gender">Collaborateur name   </label>
   <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
 
-  <label class="col-3" for="collaborateur-status">Collaborateur status   </label>
+  <label class="col-2" for="collaborateur-status">Collaborateur status   </label>
   <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
 
-  <label class="col-3" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
+  <label class="col-2" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
   <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
 
-  <label class="col-3" for="collaborateur-address">Collaborateur address   </label>
+  <label class="col-2" for="collaborateur-address">Collaborateur address   </label>
   <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
 
-  <label class="col-3" for="collaborateur-telephone">Collaborateur telephone   </label>
+  <label class="col-2" for="collaborateur-telephone">Collaborateur telephone   </label>
   <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
 
-  <label class="col-3" for="collaborateur-personalMail">Collaborateur personalMail   </label>
+  <label class="col-2" for="collaborateur-personalMail">Collaborateur personalMail   </label>
   <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
 
-  <label class="col-3" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
+  <label class="col-2" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
   <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
 
-  <label class="col-3" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
+  <label class="col-2" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
   <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
 
-  <label class="col-3" for="collaborateur-referrerId">Collaborateur referrerId   </label>
+  <label class="col-2" for="collaborateur-referrerId">Collaborateur referrerId   </label>
   <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
 
-  <label class="col-3" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
+  <label class="col-2" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
   <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
   </div>