From aa20856ed9fd9f5086f94c0d242d24a40e5ffce9 Mon Sep 17 00:00:00 2001
From: Clement FERRERE <clement.ferrere@apside-groupe.com>
Date: Mon, 21 Feb 2022 16:38:41 +0100
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ations=20des=20agences?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/agence-edit/agence-edit.component.css | 27 ++++++++
 .../agence-edit/agence-edit.component.html    | 15 ++++-
 src/app/agence-edit/agence-edit.component.ts  | 36 ++++++++++-
 src/app/agence/agence.component.css           | 61 +++++++++++++++++++
 src/app/agence/agence.component.html          |  6 +-
 .../collaborateur-edit.component.css          |  1 -
 src/app/home/home.component.html              |  2 +-
 7 files changed, 141 insertions(+), 7 deletions(-)

diff --git a/src/app/agence-edit/agence-edit.component.css b/src/app/agence-edit/agence-edit.component.css
index e69de29..127bdce 100644
--- a/src/app/agence-edit/agence-edit.component.css
+++ b/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;
+}
diff --git a/src/app/agence-edit/agence-edit.component.html b/src/app/agence-edit/agence-edit.component.html
index 66a776a..c6d0651 100644
--- a/src/app/agence-edit/agence-edit.component.html
+++ b/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>
diff --git a/src/app/agence-edit/agence-edit.component.ts b/src/app/agence-edit/agence-edit.component.ts
index d4a09b5..1278b56 100644
--- a/src/app/agence-edit/agence-edit.component.ts
+++ b/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());
+    }
   }
 
 }
diff --git a/src/app/agence/agence.component.css b/src/app/agence/agence.component.css
index e69de29..f331f45 100644
--- a/src/app/agence/agence.component.css
+++ b/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;
+}
diff --git a/src/app/agence/agence.component.html b/src/app/agence/agence.component.html
index 6a6f7a5..aa627c6 100644
--- a/src/app/agence/agence.component.html
+++ b/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>
-    <input id="collaborateur-name" [(ngModel)]="agence.name" placeholder="name">
+    <label class="col-2" for="agence-name">Agence name</label>
+    <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
   </div>
 
   <button class="add-button" (click)="add(agence)">
diff --git a/src/app/collaborateur-edit/collaborateur-edit.component.css b/src/app/collaborateur-edit/collaborateur-edit.component.css
index 4661c00..127bdce 100644
--- a/src/app/collaborateur-edit/collaborateur-edit.component.css
+++ b/src/app/collaborateur-edit/collaborateur-edit.component.css
@@ -1,4 +1,3 @@
-/* HeroDetailComponent's private CSS styles */
 label {
   color: #435960;
   font-weight: bold;
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 5f2c53f..07d2b70 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1 +1 @@
-<p>home works!</p>
+<p>Home works!</p>