checkbox= ok + modif d'un restau ok
This commit is contained in:
Thomas Cardon
parent
bd6827fe30
commit
7615cebc20
@ -18,14 +18,30 @@
|
||||
</select>
|
||||
<label for="floatingInputlastName">Categorie</label>
|
||||
</div> -->
|
||||
<ul>
|
||||
<div class="form-floating">
|
||||
<li *ngFor="let category of listCategories$ | async ">
|
||||
<input type="checkbox" (change)="onCheckChange($event)" [value]="category.id"> {{
|
||||
category.libelle }}
|
||||
|
||||
|
||||
<ul class="list-group">
|
||||
<div id="checkboxes" class="form-floating list-group-item">
|
||||
<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>
|
||||
|
||||
@ -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 expanded = false;
|
||||
public idRestau : Subscription | undefined;
|
||||
public listCategories: any[];
|
||||
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]),
|
||||
prixFc: new FormControl(''),
|
||||
longitudeFc: new FormControl('', [Validators.required,]), // chercher une meilleure regex
|
||||
latitudeFc: new FormControl('', [Validators.required]),
|
||||
adresseFc: new FormControl('', [Validators.required]),
|
||||
telephoneFc: new FormControl(''),
|
||||
websiteFc: new FormControl('', [Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")]),
|
||||
surPlaceFc: new FormControl(''),
|
||||
aEmporterFc: new FormControl(''),
|
||||
accesPMRFc: new FormControl(''),
|
||||
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([])
|
||||
})
|
||||
|
||||
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'];
|
||||
|
||||
console.log(typerestausFc);
|
||||
const typerestausFc = this.formArrayCheckbox.value;
|
||||
|
||||
// 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 =>
|
||||
this.router.navigate(['restaurants'])
|
||||
);
|
||||
|
||||
// si l'identifiant du restaurant est rensigné alors on MODIFIE
|
||||
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,21 +143,21 @@ export class AddRestauComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
onCheckChange(event : any) {
|
||||
const formArray: FormArray = this.signupForm.get('typerestausFc') as FormArray;
|
||||
console.log(FormArray);
|
||||
onCheckChange(event: any) {
|
||||
// this.formArrayCheckbox = this.signupForm.get('typerestausFc') as 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;
|
||||
}
|
||||
|
||||
|
||||
@ -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'"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,8 +7,22 @@ export interface Restaurant {
|
||||
longitude: string;
|
||||
telephone ?: string;
|
||||
website ?: string;
|
||||
aEmporter?: boolean;
|
||||
accesPMR?: boolean;
|
||||
surPlace?: boolean;
|
||||
aEmporter?: boolean | string;
|
||||
accesPMR?: boolean | string;
|
||||
surPlace?: boolean | string;
|
||||
typerestaus ?: [{id : number}];
|
||||
}
|
||||
|
||||
export const EMPTY_RESTAU = {
|
||||
nom: '',
|
||||
adresse: '',
|
||||
prix: 0,
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
telephone : '',
|
||||
website : '',
|
||||
aEmporter: '',
|
||||
accesPMR: '',
|
||||
surPlace: '',
|
||||
typerestaus : undefined
|
||||
}
|
||||
@ -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}`);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user