vincentRamiere/simpleat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkbox= ok + modif d'un restau ok

Browse Source
This commit is contained in:
Thomas Cardon 2022-03-08 14:37:39 +01:00
parent bd6827fe30
commit 7615cebc20
7 changed files with 143 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/admin-component/add-restau/add-restau.component.html
View File

@ -18,14 +18,30 @@
</select> </select>
<label for="floatingInputlastName">Categorie</label> <label for="floatingInputlastName">Categorie</label>
</div> --> </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> </li>
</div> </div>
</ul> </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"> <!-- <div class="form-group form-check" *ngFor="let category of listCategories$ | async">
<input type="checkbox" formControlName="typerestausFc" id="acceptTerms" class="form-check-input" /> <input type="checkbox" formControlName="typerestausFc" id="acceptTerms" class="form-check-input" />
<label for="acceptTerms" class="form-check-label">{{ category.libelle }}</label> <label for="acceptTerms" class="form-check-label">{{ category.libelle }}</label>
@ -78,17 +94,17 @@
<div class="form-control"> <div class="form-control">
<p class="text-left"> Sur Place :</p> <p class="text-left"> Sur Place :</p>
<div class="form-check form-check-inline"> <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"> formControlName="surPlaceFc">
<label class="form-check-label" for="checkboxSurPlaceTrue">Oui</label> <label class="form-check-label" for="checkboxSurPlaceTrue">Oui</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="checkboxSurPlaceFalse" name="surPlaceFc" <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> <label class="form-check-label" for="checkboxSurPlaceFalse">Non</label>
</div> </div>
<div class="form-check form-check-inline"> <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"> formControlName="surPlaceFc">
<label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label> <label class="form-check-label" for="checkboxSurPlaceNull">Pas d'infos</label>
</div> </div>
@ -98,17 +114,17 @@
<p class="text-left"> A Emporter :</p> <p class="text-left"> A Emporter :</p>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="checkboxAEmporterTrue" name="aEmporterFc" <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> <label class="form-check-label" for="checkboxAEmporterTrue">Oui</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="checkboxAEmporterFalse" name="aEmporterFc" <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> <label class="form-check-label" for="checkboxAEmporterFalse">Non</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="checkboxAEmporterNull" name="aEmporterFc" <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> <label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
</div> </div>
</div> </div>
@ -116,17 +132,17 @@
<div class="form-control"> <div class="form-control">
<p class="text-left"> Accès PMR :</p> <p class="text-left"> Accès PMR :</p>
<div class="form-check form-check-inline"> <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"> formControlName="accesPMRFc">
<label class="form-check-label" for="checkboxAccesPMRTrue">Oui</label> <label class="form-check-label" for="checkboxAccesPMRTrue">Oui</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="checkboxAccesPMRFalse" name="accesPMRFc" <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> <label class="form-check-label" for="checkboxAccesPMRFalse">Non</label>
</div> </div>
<div class="form-check form-check-inline"> <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"> formControlName="accesPMRFc">
<label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label> <label class="form-check-label" for="checkboxAccesPMRNull">Pas d'infos</label>
</div> </div>

102
src/app/admin-component/add-restau/add-restau.component.ts
View File

@ -3,7 +3,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs'; 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'; import { ApiBackService } from 'src/app/services/api-back.service';
@Component({ @Component({
@ -16,43 +16,54 @@ export class AddRestauComponent implements OnInit {
public signupForm: FormGroup; public signupForm: FormGroup;
public errorMessage?: string; 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) { constructor(private router: Router, private apiBackService: ApiBackService) {
this.signupForm = new FormGroup({}); this.signupForm = new FormGroup({});
this.listCategories$ = this.getCategories(); this.listCategories = [];
this.formArrayCheckbox = new FormArray([]);
} }
ngOnInit(): void { ngOnInit(): void {
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(''),
typerestausFc: new FormArray([])
})
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 => { 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 = [];
// const formArray: FormArray = this.signupForm.get('typerestausFc') as FormArray; // on vide (pour l'affichage également)
// if(restau.typerestaus != undefined){ let inputCategories = document.querySelectorAll('#checkboxes li input');
// for (let index = 0; index < restau.typerestaus.length; index++) { for (let i = 0; i < inputCategories.length; i++) {
// //listCategories.filter(categorie => categorie.id == restau.typerestaus[index]['id']) let input = inputCategories[i] as HTMLInputElement
// this.signupForm.patchValue({typerestausFc : {restau.typerestaus[index]['id'] : true}}); input.checked = false;
// formArray.push(new FormControl(restau.typerestaus[index]['id'] : true)); }
// } if (restau.typerestaus != undefined && restau.typerestaus != null) {
// } for (let index = 0; index < restau.typerestaus.length; index++) {
// console.log(formArray); // 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({ this.signupForm = new FormGroup({
nomFc: new FormControl(restau.nom, [Validators.required]), nomFc: new FormControl(restau.nom, [Validators.required]),
@ -68,17 +79,11 @@ export class AddRestauComponent implements OnInit {
typerestausFc: new FormArray([]) typerestausFc: new FormArray([])
}) })
} }
)
}
public getCategories(): Observable<any[]> {
return this.apiBackService.getCategories();
}
public onSubmit(): void { public onSubmit(): void {
console.log("value : ", this.signupForm.value); console.log("value : ", this.signupForm.value);
console.log("form : ", this.signupForm); // console.log("form : ", this.signupForm);
const nomFc = this.signupForm.value['nomFc']; const nomFc = this.signupForm.value['nomFc'];
const prixFc = this.signupForm.value['prixFc']; const prixFc = this.signupForm.value['prixFc'];
const longitudeFc = this.signupForm.value['longitudeFc']; const longitudeFc = this.signupForm.value['longitudeFc'];
@ -89,12 +94,12 @@ export class AddRestauComponent implements OnInit {
const surPlaceFc = this.signupForm.value['surPlaceFc']; const surPlaceFc = this.signupForm.value['surPlaceFc'];
const aEmporterFc = this.signupForm.value['aEmporterFc']; const aEmporterFc = this.signupForm.value['aEmporterFc'];
const accesPMRFc = this.signupForm.value['accesPMRFc']; 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 = { const restaurant: Restaurant = {
id: this.idRestauAModifier,
latitude: latitudeFc, latitude: latitudeFc,
longitude: longitudeFc, longitude: longitudeFc,
nom: nomFc, nom: nomFc,
@ -112,10 +117,25 @@ export class AddRestauComponent implements OnInit {
restaurant.longitude !== '' && restaurant.longitude !== '' &&
restaurant.nom !== '' && restaurant.nom !== '' &&
restaurant.adresse !== '') { restaurant.adresse !== '') {
// 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( this.apiBackService.addRestaurant(restaurant).subscribe(
resp => resp =>
this.router.navigate(['restaurants']) this.router.navigate(['restaurants'])
); );
}
} else { } else {
this.errorMessage = "Renseigner les champs obligatoires **"; this.errorMessage = "Renseigner les champs obligatoires **";
@ -124,20 +144,20 @@ 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) { 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; let i: number = 0;
formArray.controls.forEach((ctrl) => { this.formArrayCheckbox.controls.forEach((ctrl) => {
if (ctrl.value['id'] == event.target.value) { if (ctrl.value['id'] == event.target.value) {
formArray.removeAt(i); this.formArrayCheckbox.removeAt(i);
return; return;
} }

4
src/app/card-resto/card-resto.component.html
View File

@ -70,7 +70,7 @@
<div class="trait-rouge pt-2 pb-0"></div> <div class="trait-rouge pt-2 pb-0"></div>
<div class="critere ps-1 pt-3"> <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> <span class="sur-place pe-3" style="color:#545454">Sur place :</span>
<app-icon <app-icon
[iconName]="restaurant.surPlace ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-2 pt-1 '" [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"> <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> <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 <app-icon
[iconName]="restaurant.accesPMR ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-1 pt-1'" [iconName]="restaurant.accesPMR ? 'bi bi-check-square-fill' : 'bi bi-x-square-fill ps-1 pt-1'"
[iconColor]="restaurant.accesPMR ? '#4ECB71' : '#ED2F2F'" [iconColor]="restaurant.accesPMR ? '#4ECB71' : '#ED2F2F'"

2
src/app/pages/admin-page/admin-page.component.html
View File

@ -1,6 +1,6 @@
<div class="container"> <div class="container">
<div class="d-flex flex-row justify-content-around"><div> <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>
<div class="search-bar"> <div class="search-bar">
<app-update-del-restau ></app-update-del-restau> <app-update-del-restau ></app-update-del-restau>

6
src/app/pages/admin-page/admin-page.component.ts
View File

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

20
src/app/pages/models/restaurant.ts
View File

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

4
src/app/services/api-back.service.ts
View File

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