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>
<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>

108
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 { 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,43 +16,54 @@ 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.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 => {
//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;
// 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));
// 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;
}
// }
// }
// console.log(formArray);
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(restau.nom, [Validators.required]),
@ -68,17 +79,11 @@ export class AddRestauComponent implements OnInit {
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 !== '') {
// 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;
}

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="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'"

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

@ -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>

4
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 {
sendId = new EventEmitter<number>();
constructor( ) {
@ -19,9 +18,6 @@ export class AdminPageComponent implements OnInit {
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;
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
}

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);
}
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}`);
}