référencement liste et edit OK

src/app/components/referencement/referencement-edit/referencement-edit.component.html

@@ -1 +1,57 @@
-<p>referencement-edit works!</p>
+<h3>Ajouter un collaborateur : </h3>
+
+<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Date de début</label>
+      <input type="date" class="form-control" formControlName="startingDate"
+             (change)="onStartingDateChange($event)"
+             [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }">
+    </div>
+
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
+      <label class="form-label">Date de fin</label>
+      <input type="date" class="form-control" formControlName="endingDate"
+             (change)="onEndingDateChange($event)"
+             [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }">
+    </div>
+
+  </div>
+
+  <div class="row mb-2">
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Référent</label>
+      <select class="form-select" formControlName="referrerId"
+              [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }">
+        <option value="" disabled selected>Choisissez le référent du référencement</option>
+        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} </option>
+      </select>
+      <div *ngIf="submitted && form.referrerId.errors" class="invalid-feedback">
+        <div *ngIf="form.referrerId.errors.required">Vous devez préciser le référent du référencement</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Référé</label>
+      <select class="form-select" formControlName="referredId"
+              [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }">
+        <option value="" disabled selected>Choisissez le référé du référencement</option>
+        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+      </select>
+      <div *ngIf="submitted && form.referredId.errors" class="invalid-feedback">
+        <div *ngIf="form.referredId.errors.required">Vous devez préciser le référent du référencement</div>
+      </div>
+    </div>
+
+  </div>
+
+  <div>
+    <button type="submit" (click)="onSubmit()">Sauvegarder les changements</button>
+    <button type="button" (click)="delete()">Supprimer le référencement</button>
+    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="goBack()">Retour</button>
+  </div>
+</form>

src/app/components/referencement/referencement-edit/referencement-edit.component.ts

@@ -1,4 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import {Collaborateur} from "../../../interfaces/collaborateur";
+import {Referencement} from "../../../interfaces/referencement";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {HttpClient} from "@angular/common/http";
+import {ReferencementService} from "../../../services/referencement.service";
+import {CollaborateurService} from "../../../services/collaborateur.service";
+import {ToastrService} from "ngx-toastr";
+import {Location} from "@angular/common";
+import {ActivatedRoute} from "@angular/router";
+import {Observable} from "rxjs";
+import {take, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-referencement-edit',
@@ -7,9 +18,120 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ReferencementEditComponent implements OnInit {
 
-  constructor() { }
+  referencementObservable! : Observable<Referencement>;
+  id: number;
 
-  ngOnInit(): void {
+  collaborateurs: Collaborateur[] = [];
+  collaborateur = {} as Collaborateur;
+  referencements: Referencement[] = [];
+  referencement = {} as Referencement;
+
+  errorValue: number = 0;
+  rDate: String = "";
+  bDate: String = "";
+
+  registerForm!: FormGroup;
+  submitted = false;
+
+  constructor(private http: HttpClient,
+              private referencementService: ReferencementService,
+              private collaborateurService: CollaborateurService,
+              private formBuilder: FormBuilder,
+              private location: Location,
+              private route: ActivatedRoute,
+              private toastr: ToastrService) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
+
+  async ngOnInit() {
+    this.getCollaborateurs();
+    this.getReferencements();
+    this.registerForm = this.formBuilder.group({
+      referredId: ['', Validators.required],
+      referrerId: ['', Validators.required],
+      startingDate: ['', Validators.required],
+      endingDate: [],
+    });
+
+    this.referencementObservable = this.referencementService.getReferencement(this.id).pipe(tap(ref => this.registerForm.patchValue(ref)))
+    this.referencement = await this.referencementObservable.pipe(take(1)).toPromise()
+
+    if (this.referencement.startingDate) {
+      this.rDate = new Date(this.referencement.startingDate).toISOString().split('T')[0];
+    }
+    if (this.referencement.endingDate) {
+      this.bDate = new Date(this.referencement.endingDate).toISOString().split('T')[0];
+    }
+  }
+
+  getCollaborateurs(): void {
+    this.collaborateurService.getCollaborateurs()
+      .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
+  }
+
+  getReferencements(): void {
+    this.referencementService.getReferencements()
+      .subscribe(referencement => this.referencements = referencement);
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.referencement.referredId = this.registerForm.value.referredId
+    this.referencement.referrerId = this.registerForm.value.referrerId
+    this.referencement.startingDate = this.registerForm.value.startingDate
+
+    if(this.registerForm.value.endingDate != undefined){
+      this.referencement.referredId = this.registerForm.value.referredId
+    }
+
+    if (this.referencement) {
+      this.referencementService.updateReferencement(this.referencement).subscribe(() => {
+          this.showSuccess();
+        },
+        () => {
+          this.showError()
+        })
+
+    }
+  }
+
+  get form() {
+    return this.registerForm.controls;
+  }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
+  onStartingDateChange($event: any): void {
+    this.collaborateur.resignationDate = new Date($event.target.value);
+  }
+
+  onEndingDateChange($event: any): void {
+    this.collaborateur.birthDate = new Date($event.target.value);
+  }
+
+  showSuccess() {
+    this.toastr.success('Modification réussie', 'Référencement');
+  }
+
+  showError() {
+    this.toastr.error('Modification échouée', 'Référencement');
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  delete():void {
+    if (this.referencement){
+      this.referencementService.deleteReferencement(this.referencement)
+        .subscribe(()=>this.goBack());
+    }
   }
 
 }

src/app/components/referencement/referencement.component.html

@@ -1 +1,35 @@
-<p>referencement works!</p>
+<div>
+
+  <h2 class=mb-4>Référencements</h2>
+
+  <div style="display: flex">
+    <p style="margin: 10px 0 10px 0">Pour ajouter un nouveau référencement, cliquez ici : </p>
+    <button routerLink="/referencements/add">Ajouter</button>
+  </div>
+
+
+  <div style="overflow-x:auto;" class="mb-5 col-12">
+    <table class="table">
+      <thead>
+      <tr>
+        <th scope="col">Id du référent</th>
+        <th scope="col">ID du référé</th>
+        <th scope="col">Date de début</th>
+        <th scope="col">Date de fin</th>
+      </tr>
+      </thead>
+
+      <tbody>
+      <tr *ngFor="let referencement of referencements">
+        <th scope="row">{{referencement.referrerId}}</th>
+        <td> {{referencement.referredId}} </td>
+        <td> {{referencement.startingDate}} </td>
+        <td> {{referencement.endingDate}} </td>
+        <td><a routerLink="{{referencement.id}}"> Modifier </a></td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+
+
+</div>

src/app/components/referencement/referencement.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {ReferencementService} from "../../services/referencement.service";
+import {Referencement} from "../../interfaces/referencement";
 
 @Component({
   selector: 'app-referencement',
@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ReferencementComponent implements OnInit {
 
-  constructor() { }
+  referencements: Referencement[] = [];
+
+  constructor(
+    private http: HttpClient,
+    private referencementService: ReferencementService,
+  ) {
+  }
 
   ngOnInit(): void {
+    this.getReferencements();
+
+  }
+
+  getReferencements(): void {
+    this.referencementService.getReferencements()
+      .subscribe(referencements => this.referencements = referencements);
   }
 
 }