checkbox= ok + modif d'un restau ok

src/app/admin-component/add-restau/add-restau.component.html

@@ -18,14 +18,30 @@
                 </select>
                 <label for="floatingInputlastName">Categorie</label>
             </div> -->
-            <ul>
+            
-                <div class="form-floating">
+
-                    <li *ngFor="let category of listCategories$ | async ">
+            <ul class="list-group">                
-                        <input type="checkbox" (change)="onCheckChange($event)" [value]="category.id"> {{
+                <div id="checkboxes" class="form-floating list-group-item">
-                        category.libelle }}
+                    <h6 class="text-left">Catégories</h6>
+                    <li *ngFor="let category of listCategories">
+                        <input type="checkbox" id="categ{{category.id}}" 
+                        (change)="onCheckChange($event)" 
+                        [value]="category.id" 
+                        [checked]="false"> 
+
+                        {{ category.libelle }}
                     </li>
                 </div>
             </ul>
+
+            <!-- <div formArrayName="typerestausFc">
+                <div *ngFor="let category of listCategories; let i = index">
+                    <div formGroupName="{{ i }}">
+                        <input type="checkbox" [formControl]="category.id" />
+                        <label> {{ category.libelle }} </label>
+                    </div>
+                </div>
+            </div> -->
             <!-- <div class="form-group form-check" *ngFor="let category of listCategories$ | async">
                 <input type="checkbox" formControlName="typerestausFc" id="acceptTerms" class="form-check-input" />
                 <label for="acceptTerms" class="form-check-label">{{ category.libelle }}</label>
@@ -78,17 +94,17 @@
             <div class="form-control">
                 <p class="text-left"> Sur Place :</p>
                 <div class="form-check form-check-inline">
-                    <input type="radio" class="form-check-input" id="checkboxSurPlaceTrue" name="surPlaceFc" [value]="true" 
+                    <input type="radio" class="form-check-input" id="checkboxSurPlaceTrue" name="surPlaceFc" [value]=true
                         formControlName="surPlaceFc">
                     <label class="form-check-label" for="checkboxSurPlaceTrue">Oui</label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input type="radio" class="form-check-input" id="checkboxSurPlaceFalse" name="surPlaceFc"
-                        [value]="false" formControlName="surPlaceFc">
+                        [value]=false formControlName="surPlaceFc">
                     <label class="form-check-label" for="checkboxSurPlaceFalse">Non</label>
                 </div>
                 <div class="form-check form-check-inline">
-                    <input type="radio" class="form-check-input" id="checkboxSurPlaceNull" name="surPlaceFc" [value]="null"
+                    <input type="radio" class="form-check-input" id="checkboxSurPlaceNull" name="surPlaceFc" [value]=null
                         formControlName="surPlaceFc">
                     <label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label>
                 </div>
@@ -98,17 +114,17 @@
                 <p class="text-left"> A Emporter :</p>
                 <div class="form-check form-check-inline">
                     <input type="radio" class="form-check-input" id="checkboxAEmporterTrue" name="aEmporterFc"
-                        [value]="true" formControlName="aEmporterFc">
+                        [value]=true formControlName="aEmporterFc">
                     <label class="form-check-label" for="checkboxAEmporterTrue">Oui</label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input type="radio" class="form-check-input" id="checkboxAEmporterFalse" name="aEmporterFc"
-                        [value]="false" formControlName="aEmporterFc">
+                        [value]=false formControlName="aEmporterFc">
                     <label class="form-check-label" for="checkboxAEmporterFalse">Non</label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input type="radio" class="form-check-input" id="checkboxAEmporterNull" name="aEmporterFc"
-                        [value]="null" formControlName="aEmporterFc">
+                        [value]=null formControlName="aEmporterFc">
                     <label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
                 </div>
             </div>
@@ -116,17 +132,17 @@
             <div class="form-control">
                 <p class="text-left"> Accès PMR :</p>
                 <div class="form-check form-check-inline">
-                    <input type="radio" class="form-check-input" id="checkboxAccesPMRTrue" name="accesPMRFc" [value]="true"
+                    <input type="radio" class="form-check-input" id="checkboxAccesPMRTrue" name="accesPMRFc" [value]=true
                         formControlName="accesPMRFc">
                     <label class="form-check-label" for="checkboxAccesPMRTrue">Oui</label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input type="radio" class="form-check-input" id="checkboxAccesPMRFalse" name="accesPMRFc"
-                        [value]="false" formControlName="accesPMRFc">
+                        [value]=false formControlName="accesPMRFc">
                     <label class="form-check-label" for="checkboxAccesPMRFalse">Non</label>
                 </div>
                 <div class="form-check form-check-inline">
-                    <input type="radio" class="form-check-input" id="checkboxAccesPMRNull" name="accesPMRFc" [value]="null"
+                    <input type="radio" class="form-check-input" id="checkboxAccesPMRNull" name="accesPMRFc" [value]=null
                         formControlName="accesPMRFc">
                     <label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label>
                 </div>

src/app/admin-component/add-restau/add-restau.component.ts

@@ -3,7 +3,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
-import { Restaurant } from 'src/app/pages/models/restaurant';
+import { EMPTY_RESTAU, Restaurant } from 'src/app/pages/models/restaurant';
 import { ApiBackService } from 'src/app/services/api-back.service';
 
 @Component({
@@ -16,69 +16,74 @@ export class AddRestauComponent implements OnInit {
 
   public signupForm: FormGroup;
   public errorMessage?: string;
-  public listCategories$: Observable<any[]>;
+  public listCategories: any[];
-  public expanded = false;
+  public idRestau: Subscription | undefined;
-  public idRestau : Subscription | undefined;
+  public formArrayCheckbox: FormArray;
+  public idRestauAModifier?: number = 0; // On instancie a 0 ou undefined = on est en CREATION de Restau
 
   constructor(private router: Router, private apiBackService: ApiBackService) {
     this.signupForm = new FormGroup({});
-    this.listCategories$ = this.getCategories();
+    this.listCategories = [];
+    this.formArrayCheckbox = new FormArray([]);
   }
 
   ngOnInit(): void {
+
+    this.apiBackService.getCategories().subscribe(listCateg => this.listCategories = listCateg);
+    this.initForm(EMPTY_RESTAU);
+    this.formArrayCheckbox = this.signupForm.get('typerestausFc') as FormArray;
+
+    // lorsqu'on recoit l'evenement click sur le bouton modif dans le composant "update-del-restau"
+    // on rentre dans cette souscription
+    this.idRestau = this.apiBackService.restauAModif.subscribe(restau => {
+      //On enregistre un identifiant de restaurant, preuve qu'on est bien en MODIFICATION
+      this.idRestauAModifier = restau.id;
+
+      // on vide les checkbox si on en a coché avant de cliquer sur une modif
+      this.formArrayCheckbox.controls = [];
+
+      // on vide (pour l'affichage également)
+      let inputCategories = document.querySelectorAll('#checkboxes li input');
+      for (let i = 0; i < inputCategories.length; i++) {
+        let input = inputCategories[i] as HTMLInputElement
+        input.checked = false;
+      }
+
+      if (restau.typerestaus != undefined && restau.typerestaus != null) {
+        for (let index = 0; index < restau.typerestaus.length; index++) {
+          // juste l'affichage
+          const idCheckbox = document.getElementById(`categ${restau.typerestaus[index].id}`) as HTMLInputElement
+          idCheckbox.checked = true;
+
+          // pour reformer un formArray avec les données récupérées
+          this.formArrayCheckbox.push(new FormControl({ id: `${restau.typerestaus[index].id}` }));
+        }
+      }
+      this.initForm(restau);
+    })
+  }
+
+  public initForm(restau: Restaurant) {
+
     this.signupForm = new FormGroup({
-      nomFc: new FormControl('', [Validators.required]),
+      nomFc: new FormControl(restau.nom, [Validators.required]),
-      prixFc: new FormControl(''),
+      prixFc: new FormControl(restau.prix),
-      longitudeFc: new FormControl('', [Validators.required,]), // chercher une meilleure regex
+      longitudeFc: new FormControl(restau.longitude, [Validators.required,]), // chercher une meilleure regex
-      latitudeFc: new FormControl('', [Validators.required]),
+      latitudeFc: new FormControl(restau.latitude, [Validators.required]),
-      adresseFc: new FormControl('', [Validators.required]),
+      adresseFc: new FormControl(restau.adresse, [Validators.required]),
-      telephoneFc: new FormControl(''),
+      telephoneFc: new FormControl(restau.telephone),
-      websiteFc: new FormControl('', [Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")]),
+      websiteFc: new FormControl(restau.website, [Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")]),
-      surPlaceFc: new FormControl(''),
+      surPlaceFc: new FormControl(restau.surPlace),
-      aEmporterFc: new FormControl(''),
+      aEmporterFc: new FormControl(restau.aEmporter),
-      accesPMRFc: new FormControl(''),
+      accesPMRFc: new FormControl(restau.accesPMR),
       typerestausFc: new FormArray([])
     })
-
-    this.idRestau = this.apiBackService.restauAModif.subscribe(restau => {
-
-
-    //   const formArray: FormArray = this.signupForm.get('typerestausFc') as FormArray;
-    //   if(restau.typerestaus != undefined){
-    //   for (let index = 0; index < restau.typerestaus.length; index++) {
-    //     //listCategories.filter(categorie => categorie.id == restau.typerestaus[index]['id'])
-    //     this.signupForm.patchValue({typerestausFc : {restau.typerestaus[index]['id'] : true}});
-    //     formArray.push(new FormControl(restau.typerestaus[index]['id'] : true));
-        
-    //   }
-    // }
-    //   console.log(formArray);
-      
-      this.signupForm = new FormGroup({
-        nomFc: new FormControl(restau.nom, [Validators.required]),
-        prixFc: new FormControl(restau.prix),
-        longitudeFc: new FormControl(restau.longitude, [Validators.required,]), // chercher une meilleure regex
-        latitudeFc: new FormControl(restau.latitude, [Validators.required]),
-        adresseFc: new FormControl(restau.adresse, [Validators.required]),
-        telephoneFc: new FormControl(restau.telephone),
-        websiteFc: new FormControl(restau.website, [Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")]),
-        surPlaceFc: new FormControl(restau.surPlace),
-        aEmporterFc: new FormControl(restau.aEmporter),
-        accesPMRFc: new FormControl(restau.accesPMR),
-        typerestausFc: new FormArray([])
-      })
-    }
-    )
   }
 
-  public getCategories(): Observable<any[]> {
-    return this.apiBackService.getCategories();
-
-  }
 
   public onSubmit(): void {
     console.log("value : ", this.signupForm.value);
-    console.log("form : ", this.signupForm);
+    // console.log("form : ", this.signupForm);
     const nomFc = this.signupForm.value['nomFc'];
     const prixFc = this.signupForm.value['prixFc'];
     const longitudeFc = this.signupForm.value['longitudeFc'];
@@ -89,12 +94,12 @@ export class AddRestauComponent implements OnInit {
     const surPlaceFc = this.signupForm.value['surPlaceFc'];
     const aEmporterFc = this.signupForm.value['aEmporterFc'];
     const accesPMRFc = this.signupForm.value['accesPMRFc'];
-    const typerestausFc = this.signupForm.value['typerestausFc'];
+    const typerestausFc = this.formArrayCheckbox.value;
 
-    console.log(typerestausFc);
+    // console.log(this.formArray);
-    
 
     const restaurant: Restaurant = {
+      id: this.idRestauAModifier,
       latitude: latitudeFc,
       longitude: longitudeFc,
       nom: nomFc,
@@ -112,10 +117,25 @@ export class AddRestauComponent implements OnInit {
       restaurant.longitude !== '' &&
       restaurant.nom !== '' &&
       restaurant.adresse !== '') {
-      this.apiBackService.addRestaurant(restaurant).subscribe(
+
-        resp =>
+      // si l'identifiant du restaurant est rensigné alors on MODIFIE
-          this.router.navigate(['restaurants'])
+      if (this.idRestauAModifier != 0 &&
-      );
+        this.idRestauAModifier != null &&
+        this.idRestauAModifier != undefined) {
+          this.apiBackService.modifRestaurant(restaurant).subscribe(
+            resp => {this.idRestauAModifier = 0 
+            // Une fois le retour du subscribe qui est la preuve du bon enregistrement alors
+            // On reinitialise identifiant restau a 0 pour se remettre en mode CREATION
+            
+            this.router.navigate(['restaurants'])
+            }
+          )
+      } else { // sinon on crée un restau
+        this.apiBackService.addRestaurant(restaurant).subscribe(
+          resp =>
+            this.router.navigate(['restaurants'])
+        );
+      }
     } else {
 
       this.errorMessage = "Renseigner les champs obligatoires **";
@@ -123,24 +143,24 @@ export class AddRestauComponent implements OnInit {
 
   }
 
-  onCheckChange(event : any) {
+  onCheckChange(event: any) {
-    const formArray: FormArray = this.signupForm.get('typerestausFc') as FormArray;
+    // this.formArrayCheckbox = this.signupForm.get('typerestausFc') as FormArray;
-    console.log(FormArray);
+    // console.log(this.formArrayCheckbox);
-    
+
     if (event.target.checked) {
-      
+
-      formArray.push(new FormControl({id : event.target.value}));
+      this.formArrayCheckbox.push(new FormControl({ id: event.target.value }));
-      
+
-    }else { 
+    } else {
       let i: number = 0;
 
-      formArray.controls.forEach((ctrl) => {
+      this.formArrayCheckbox.controls.forEach((ctrl) => {
-        
+
         if (ctrl.value['id'] == event.target.value) {
-          formArray.removeAt(i);
+          this.formArrayCheckbox.removeAt(i);
           return;
         }
-        
+
         i++;
       });
     }

src/app/card-resto/card-resto.component.html

@@ -70,7 +70,7 @@
           <div class="trait-rouge pt-2 pb-0"></div>
             <div class="critere ps-1 pt-3">
                 
-              <div class="d-inline-flex " *ngIf="restaurant.surPlace else noInfosSurPlace">
+              <div class="d-inline-flex " *ngIf="restaurant.surPlace != null else noInfosSurPlace">
                   <span class="sur-place pe-3" style="color:#545454">Sur place :</span>            
                   <app-icon 
                     [iconName]="restaurant.surPlace ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-2 pt-1 '"
@@ -98,7 +98,7 @@
           <div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
             <span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span>
 
-            <div class="d-inline-flex " *ngIf="restaurant.accesPMR else noAccesPMR">
+            <div class="d-inline-flex " *ngIf="restaurant.accesPMR != null else noAccesPMR">
               <app-icon 
               [iconName]="restaurant.accesPMR ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-1 pt-1'"
               [iconColor]="restaurant.accesPMR ? '#4ECB71' : '#ED2F2F'"

src/app/pages/admin-page/admin-page.component.html

@@ -1,6 +1,6 @@
 <div class="container">
     <div class="d-flex flex-row justify-content-around"><div>
-        <app-add-restau (getIdRestau)="sendId"></app-add-restau>
+        <app-add-restau></app-add-restau>
     </div>
         <div class="search-bar">
             <app-update-del-restau ></app-update-del-restau>

src/app/pages/admin-page/admin-page.component.ts

@@ -11,7 +11,6 @@ import { Restaurant } from '../models/restaurant';
 })
 export class AdminPageComponent implements OnInit {
 
-  sendId = new EventEmitter<number>();
 
   constructor( ) {
    
@@ -19,9 +18,6 @@ export class AdminPageComponent implements OnInit {
 
   ngOnInit(): void {
   }
-  sendIdRestau(idRestau : number){
-    this.sendId.emit(idRestau);
 
-  }
 
 }

src/app/pages/models/restaurant.ts

@@ -7,8 +7,22 @@ export interface Restaurant {
     longitude: string;
     telephone ?: string;
     website ?: string;
-    aEmporter?: boolean;
+    aEmporter?: boolean | string;
-    accesPMR?: boolean;
+    accesPMR?: boolean | string;
-    surPlace?: boolean;
+    surPlace?: boolean | string;
     typerestaus ?: [{id : number}];
 }
+
+export const EMPTY_RESTAU = {
+    nom: '',
+    adresse: '',
+    prix: 0,
+    latitude: '',
+    longitude: '',
+    telephone : '',
+    website : '',
+    aEmporter: '',
+    accesPMR: '',
+    surPlace: '',
+    typerestaus : undefined
+}

src/app/services/api-back.service.ts

@@ -63,6 +63,10 @@ export class ApiBackService {
     return this.httpClient.post<any[]>(`${environment.apiUrl}/add-restaurant`, newRestau);
   }
 
+  modifRestaurant(restau : Restaurant): Observable<any>{
+    return this.httpClient.put<any[]>(`${environment.apiUrl}/update-restaurant/${restau.id}`, restau);
+  }
+
   deleteRestau(idRestau: number | undefined): Observable<any> {
     return this.httpClient.delete<Restaurant>(`${environment.apiUrl}/delete-restaurant/${idRestau}`);
   }