Créations des agences

src/app/agence-edit/agence-edit.component.css

@@ -0,0 +1,27 @@
+label {
+  color: #435960;
+  font-weight: bold;
+}
+input {
+  font-size: 1em;
+  padding: .3rem;
+  margin: .5rem;
+}
+
+button {
+  padding: 5px;
+  text-decoration: none;
+  margin: 2px;
+  display: inline-block;
+  background-color: #E77620;
+  color: white;
+  border-radius: 4px;
+}
+button:hover {
+  background-color: #42545C;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}

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

@@ -1 +1,14 @@
-<p>agence-edit works!</p>
+
+<div *ngIf="agence">
+
+  <h2>{{agence.name | uppercase}} </h2>
+  <div><span>id : </span>{{agence.id}}</div>
+  <div>
+    <label class="col-2" for="agence-name">Agence name </label>
+    <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
+  </div>
+
+  <button (click)="goBack()">Retour</button>
+  <button (click)="save()">Sauvegarder les changements</button>
+  <button (click)="delete()">Supprimer l'agence</button>
+</div>

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

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {Agence} from "../agence";
+import {ActivatedRoute} from "@angular/router";
+import {AgenceService} from "../agence.service";
+import {Location} from "@angular/common";
 
 @Component({
   selector: 'app-agence-edit',
@@ -6,10 +10,40 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./agence-edit.component.css']
 })
 export class AgenceEditComponent implements OnInit {
+  agence : Agence | undefined;
 
-  constructor() { }
+  constructor(
+    private route: ActivatedRoute,
+    private agenceService: AgenceService,
+    private location: Location
+  ) { }
 
   ngOnInit(): void {
+    this.getAgence()
+  }
+
+  getAgence(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'))
+    this.agenceService.getAgence(id)
+      .subscribe(agence => this.agence = agence);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  save():void{
+    if (this.agence){
+      this.agenceService.updateAgence(this.agence)
+        .subscribe(()=>this.goBack());
+    }
+  }
+
+  delete():void {
+    if (this.agence){
+      this.agenceService.deleteAgence(this.agence)
+        .subscribe(()=>this.goBack());
+    }
   }
 
 }

src/app/agence/agence.component.css

@@ -0,0 +1,61 @@
+label {
+  color: #435960;
+  font-weight: bold;
+}
+input {
+  font-size: 1em;
+  padding: .3rem;
+  margin: .5rem;
+}
+
+.agences {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.agences li {
+  position: relative;
+  cursor: pointer;
+}
+
+.agences li:hover {
+  left: .1em;
+}
+
+.agences a, td a {
+  padding: 5px;
+  text-decoration: none;
+  margin: 2px;
+  display: inline-block;
+  background-color: #E77620;
+  color: white;
+  border-radius: 4px;
+
+}
+
+.agences a:hover {
+  background-color: #42545C;
+}
+
+.agences a:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.agences .badge{
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color:#405061;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  min-width: 16px;
+  text-align: right;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}

src/app/agence/agence.component.html

@@ -8,11 +8,11 @@
     <td> <a routerLink="{{agence.id}}"> Modifier </a></td>
   </table>
 
-  <h3>Ajouter un collaborateur : </h3>
+  <h3>Ajouter une agence : </h3>
 
   <div>
-    <label class="col-2" for="collaborateur-name">Collaborateur name </label>
+    <label class="col-2" for="agence-name">Agence name</label>
-    <input id="collaborateur-name" [(ngModel)]="agence.name" placeholder="name">
+    <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
   </div>
 
   <button class="add-button" (click)="add(agence)">

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

@@ -1,4 +1,3 @@
-/* HeroDetailComponent's private CSS styles */
 label {
   color: #435960;
   font-weight: bold;

src/app/home/home.component.html

@@ -1 +1 @@
-<p>home works!</p>
+<p>Home works!</p>