admin:crea suppr restau, search bar

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

@@ -1,35 +1,32 @@
 <div class="signup-form text-center">
     <main class="form-signup">
         <form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
-            <h1>Enregistrer un restaurant</h1>
+            <h2>Enregistrer un restaurant</h2>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputNom" 
-                        placeholder="" 
-                        name="nom" 
+                <input type="text" class="form-control" id="floatingInputNom" placeholder="" name="nom"
                     formControlName="nomFc"
                     [ngClass]="{'is-valid' : signupForm.controls['nomFc'].touched && signupForm.controls['nomFc'].valid, 
                                     'is-invalid':  signupForm.controls['nomFc'].touched && !signupForm.controls['nomFc'].valid}">
                 <label for="floatingInputNom">Nom **</label>
             </div>
+            <!-- <div class="form-floating">
+                <select type="number" class="form-control" id="floatingInputCategories" placeholder="" name="categories"
+                    formControlName="typerestausFc">
+                    <option value=null></option>
+                    <option *ngFor="let category of listCategories" value={{category.id}}>{{category.libelle}}</option>
+                    
+                </select>
+                <label for="floatingInputlastName">Categorie</label>
+            </div> -->
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputAdresse" 
-                        placeholder="" 
-                        name="adresse" 
+                <input type="text" class="form-control" id="floatingInputAdresse" placeholder="" name="adresse"
                     formControlName="adresseFc"
                     [ngClass]="{'is-valid' : signupForm.controls['adresseFc'].touched && signupForm.controls['adresseFc'].valid, 
                                     'is-invalid':  signupForm.controls['adresseFc'].touched && !signupForm.controls['adresseFc'].valid}">
                 <label for="floatingInputAdresse">Adresse **</label>
             </div>
             <div class="form-floating">
-                <select type="number" 
-                        class="form-control" 
-                        id="floatingInputPrice" 
-                        placeholder="" 
-                        name="prix" 
+                <select type="number" class="form-control" id="floatingInputPrice" placeholder="" name="prix"
                     formControlName="prixFc">
                     <option value=1>€ 1€ à 10€</option>
                     <option value=2>€€ 11€ à 20€</option>
@@ -39,42 +36,26 @@
                 <label for="floatingInputlastName">Prix</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputLat" 
-                        placeholder="" 
-                        name="latitude" 
+                <input type="text" class="form-control" id="floatingInputLat" placeholder="" name="latitude"
                     formControlName="latitudeFc"
                     [ngClass]="{'is-valid' : signupForm.controls['latitudeFc'].touched && signupForm.controls['latitudeFc'].valid, 
                                     'is-invalid':  signupForm.controls['latitudeFc'].touched && !signupForm.controls['latitudeFc'].valid}">
                 <label for="floatingInputLat">Latitude **</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputLong" 
-                        placeholder="" 
-                        name="longitude" 
+                <input type="text" class="form-control" id="floatingInputLong" placeholder="" name="longitude"
                     formControlName="longitudeFc"
                     [ngClass]="{'is-valid' : signupForm.controls['longitudeFc'].touched && signupForm.controls['longitudeFc'].valid, 
                                     'is-invalid':  signupForm.controls['longitudeFc'].touched && !signupForm.controls['longitudeFc'].valid}">
                 <label for="floatingInputLong">Longitude **</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputTel" 
-                        placeholder="" 
-                        name="telephone" 
+                <input type="text" class="form-control" id="floatingInputTel" placeholder="" name="telephone"
                     formControlName="telephoneFc">
                 <label for="floatingInputTel">Téléphone</label>
             </div>
             <div class="form-floating">
-                <input type="text" 
-                        class="form-control" 
-                        id="floatingInputWebsite" 
-                        placeholder="" 
-                        name="website"
+                <input type="text" class="form-control" id="floatingInputWebsite" placeholder="" name="website"
                     formControlName="websiteFc"
                     [ngClass]="{'is-valid' : signupForm.controls['websiteFc'].touched && signupForm.controls['websiteFc'].valid, 
                                     'is-invalid':  signupForm.controls['websiteFc'].touched && !signupForm.controls['websiteFc'].valid}">
@@ -84,32 +65,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">
+                    <input type="radio" class="form-check-input" id="checkboxSurPlaceFalse" name="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>
@@ -118,33 +84,18 @@
             <div class="form-control">
                 <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">
+                    <input type="radio" class="form-check-input" id="checkboxAEmporterTrue" name="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">
+                    <input type="radio" class="form-check-input" id="checkboxAEmporterFalse" name="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">
+                    <input type="radio" class="form-check-input" id="checkboxAEmporterNull" name="aEmporterFc"
+                        value=null formControlName="aEmporterFc">
                     <label class="form-check-label" for="checkboxAEmporterNull">Pas d'infos</label>
                 </div>
             </div>
@@ -152,32 +103,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">
+                    <input type="radio" class="form-check-input" id="checkboxAccesPMRFalse" name="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>
@@ -187,8 +123,7 @@
                 <p class="alert-link">{{errorMessage}}</p>
             </div>
 
-            <button class="w-100 btn btn-lg btn-success" 
-                    type="submit">Enregistrer</button>
+            <button class="w-100 btn btn-lg btn-success" type="submit">Enregistrer</button>
 
         </form>
     </main>

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

@@ -1,7 +1,8 @@
 
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
 import { Restaurant } from 'src/app/pages/models/restaurant';
 import { ApiBackService } from 'src/app/services/api-back.service';
 
@@ -15,12 +16,18 @@ export class AddRestauComponent implements OnInit {
 
   public signupForm: FormGroup;
   public errorMessage ?: string;
+  public listCategories : any[];
+  public expanded = false;
 
   constructor( private router: Router, private apiBackService : ApiBackService) {
     this.signupForm = new FormGroup({});
+    this.listCategories = [];
   }
 
   ngOnInit(): void {
+    
+    this.getCategories();
+
     this.signupForm = new FormGroup({
       nomFc : new FormControl('', [Validators.required]),
       prixFc : new FormControl(''),
@@ -31,10 +38,21 @@ export class AddRestauComponent implements OnInit {
       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('')
+      accesPMRFc : new FormControl(''),
+      // typerestausFc : new FormControl('')
     })
   }
 
+  public getCategories() : void{
+    this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
+      // console.log(listCategories);
+
+      this.listCategories = listCategories;
+
+    }); 
+
+  }
+
   public onSubmit(): void {
     console.log("value : ", this.signupForm.value);
     console.log("form : ", this.signupForm);
@@ -48,6 +66,7 @@ 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 restaurant: Restaurant = {
       latitude: latitudeFc,
@@ -59,8 +78,10 @@ export class AddRestauComponent implements OnInit {
       website : websiteFc,
       surPlace : surPlaceFc,
       aEmporter : aEmporterFc,
-      accesPMR : accesPMRFc
+      accesPMR : accesPMRFc,
+      // typerestaus : typerestausFc
     }
+
     if( restaurant.latitude   !== '' && 
         restaurant.longitude  !== '' &&
         restaurant.nom        !== '' &&

src/app/admin-component/update-del-restau/update-del-restau.component.html

@@ -0,0 +1,12 @@
+<h2>Modifier/Supprimer un restaurant</h2>
+<app-search-bar (resultSearch)="saveRestauList($event)"></app-search-bar>
+<ul class="list-group">
+    <li class="list-group-item d-flex justify-content-between" *ngFor="let restau of restauList" >
+        <div>
+        {{restau.nom}}
+    </div>
+    <div>
+        <button class="btn btn-danger" type="button" (click)="deleteRestau(restau.id)"><i class="bi bi-trash"></i></button>
+    </div>
+    </li>
+</ul>

src/app/admin-component/update-del-restau/update-del-restau.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateDelRestauComponent } from './update-del-restau.component';
+
+describe('UpdateDelRestauComponent', () => {
+  let component: UpdateDelRestauComponent;
+  let fixture: ComponentFixture<UpdateDelRestauComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UpdateDelRestauComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateDelRestauComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin-component/update-del-restau/update-del-restau.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Restaurant } from 'src/app/pages/models/restaurant';
+import { ApiBackService } from 'src/app/services/api-back.service';
+
+@Component({
+  selector: 'app-update-del-restau',
+  templateUrl: './update-del-restau.component.html',
+  styleUrls: ['./update-del-restau.component.scss']
+})
+export class UpdateDelRestauComponent implements OnInit {
+
+  restauList : Restaurant[];
+
+  constructor(private apiBackService : ApiBackService) {
+    this.restauList = [];
+   }
+
+  ngOnInit(): void {
+
+  }
+
+  
+  saveRestauList(event : any){
+    console.log(event);
+    this.restauList = event;
+  }
+
+  deleteRestau(idRestau : number | undefined){
+    this.apiBackService.deleteRestau(idRestau).subscribe( 
+      resp =>{
+
+      
+      this.restauList = this.restauList.filter(restaus => restaus.id != idRestau)
+      
+    });
+  }
+
+}

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-search-bar *ngIf="dontShow"></app-search-bar>
+<app-header-logo *ngIf="dontShow"></app-header-logo>
 <app-nav-bar *ngIf="dontShow"></app-nav-bar>
 <router-outlet></router-outlet>
 <app-footer *ngIf="dontShow"></app-footer>

src/app/app.module.ts

@@ -20,6 +20,8 @@ import { IconComponent } from './filters/icon/icon.component';
 import { TemplatePageComponent } from './components/template-page/template-page.component';
 import { AdminPageComponent } from './pages/admin-page/admin-page.component';
 import { AddRestauComponent } from './admin-component/add-restau/add-restau.component';
+import { UpdateDelRestauComponent } from './admin-component/update-del-restau/update-del-restau.component';
+import { HeaderLogoComponent } from './header/components/header-logo/header-logo.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +41,9 @@ import { AddRestauComponent } from './admin-component/add-restau/add-restau.comp
     SigninComponent,
     TemplatePageComponent,
     AdminPageComponent,
-    AddRestauComponent
+    AddRestauComponent,
+    UpdateDelRestauComponent,
+    HeaderLogoComponent
   ],
   imports: [
     BrowserModule,

src/app/header/components/header-logo/header-logo.component.html

@@ -0,0 +1,13 @@
+<nav class="navbar navbar-light p-0">
+    <div class="container-fluid d-flex align-items-center pt-3">
+        <div class="logo ps-4">
+            <img src="assets/images-header/LOGO2.png" alt="logo">
+        </div>
+
+        <app-search-bar></app-search-bar>
+        
+        <div class="trait">
+            <p>LE BON PLAN POUR MANGER</p>
+        </div>
+    </div>
+</nav>

src/app/header/components/header-logo/header-logo.component.scss

@@ -0,0 +1,29 @@
+.container-fluid
+{
+  padding-top: 2%;
+  width : 100%;
+  margin: auto;
+  padding-bottom: 0,5%;
+  padding-left: 0;
+  padding-right: 0;
+  max-height: 20%;
+
+}
+
+.trait{
+
+  width: 100%;
+  height: 30px;
+  border-bottom: 2px solid #CE0000;
+  position: relative;
+
+}
+
+p{
+  background-color: white;
+  position: absolute;
+  top: 15px;
+  left: 68px;
+  padding : 0 10px 0 10px;
+  color: grey;
+}

src/app/header/components/header-logo/header-logo.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderLogoComponent } from './header-logo.component';
+
+describe('HeaderLogoComponent', () => {
+  let component: HeaderLogoComponent;
+  let fixture: ComponentFixture<HeaderLogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderLogoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderLogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/components/header-logo/header-logo.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-logo',
+  templateUrl: './header-logo.component.html',
+  styleUrls: ['./header-logo.component.scss']
+})
+export class HeaderLogoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/header/components/search-bar/search-bar.component.html

@@ -1,14 +1,5 @@
-<nav class="navbar navbar-light p-0">
-  <div class="container-fluid d-flex align-items-center pt-3">
-    <div class="logo ps-4">
-      <img src="assets/images-header/LOGO2.png" alt="logo">
-    </div>
-      <form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
-        <input class="form-control me-5 position-relative" type="search" #newItem placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
-        <button (click) = "onChangeInput(newItem.value)">Recherche</button>
-      </form>
-        <div class="trait">
-          <p>LE BON PLAN POUR MANGER</p>
-        </div>
-  </div>
-</nav>
+<form class="d-flex align-items-center pe-2 pt-2">
+  <input class="form-control me-5 position-relative" type="search" #newItem placeholder="Trouver votre SIMPL'EAT..."
+    aria-label="Search">
+  <button (click)="onChangeInput(newItem.value)">Recherche</button>
+</form>

src/app/header/components/search-bar/search-bar.component.scss

@@ -1,35 +1,3 @@
-.container-fluid
-{
-  padding-top: 2%;
-  width : 100%;
-  margin: auto;
-  padding-bottom: 0,5%;
-  padding-left: 0;
-  padding-right: 0;
-  max-height: 20%;
-
-}
-
-.trait{
-
-  width: 100%;
-  height: 30px;
-  border-bottom: 2px solid #CE0000;
-  position: relative;
-
-}
-
-p{
-  background-color: white;
-  position: absolute;
-  top: 15px;
-  left: 68px;
-  padding : 0 10px 0 10px;
-  color: grey;
-}
-
-
-
 input[type="search"], textarea{
   background-color: #edf5f1;
 }

src/app/header/components/search-bar/search-bar.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Restaurant } from 'src/app/pages/models/restaurant';
 import { RestoPageComponent } from 'src/app/pages/resto-page/resto-page.component';
 import { ApiBackService } from 'src/app/services/api-back.service';
 
@@ -10,11 +11,13 @@ import { ApiBackService } from 'src/app/services/api-back.service';
 })
 export class SearchBarComponent implements OnInit {
 
-  searchText = new EventEmitter();
   listRestau: any[];
   restauByName: any[];
+  @Output() resultSearch = new EventEmitter<Restaurant[]>();
 
-  constructor(private apiBackService: ApiBackService, private route: Router) {
+  constructor(private apiBackService: ApiBackService,
+    private route: Router,
+    private activatedRoute : ActivatedRoute) {
 
     this.listRestau = [];
     this.restauByName = [];
@@ -33,11 +36,18 @@ export class SearchBarComponent implements OnInit {
 
       this.restauByName = this.restauByName.filter((restau: any) =>
         restau.nom.toLowerCase().includes(search.toLowerCase()));
-      console.log(this.restauByName);
+
+        // Composant search-bar utilisé dans la page admin
+      if(this.activatedRoute.snapshot.routeConfig?.path === "admin"){
+
+        this.resultSearch.emit(this.restauByName);
+
+      }else{ // la search bar utilisée dans la nav-bar pour trouver un restau
 
       this.apiBackService.setListRestau(this.restauByName, "filtres");
-      this.route.routeReuseStrategy.shouldReuseRoute= () => false;
-      this.route.onSameUrlNavigation = 'reload';
+      //this.route.routeReuseStrategy.shouldReuseRoute= () => false;
+      // this.route.onSameUrlNavigation = 'reload';
       this.route.navigate(['restaurants']);
       }
     }
+  }

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

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

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

@@ -0,0 +1,3 @@
+.search-bar{
+    width : 30%;
+}

src/app/pages/models/restaurant.ts

@@ -10,4 +10,5 @@ export interface Restaurant {
     aEmporter?: boolean;
     accesPMR?: boolean;
     surPlace?: boolean;
+    typerestaus ?: any[];
 }

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

@@ -64,4 +64,9 @@ export class ApiBackService {
     
   }
 
+  deleteRestau( idRestau : number | undefined) : Observable<any>{
+      
+    return this.httpClient.delete<Restaurant>(`${environment.apiUrl}/delete-restaurant/${idRestau}`);
+  }
+
 }