correction jeremy

Feature/supprimer

src/app/components/nav-bar/nav-bar.component.html

@@ -21,6 +21,7 @@
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 1">Plante likée : {{ likeCounter }}</a>
                 <a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ likeCounter }}</a>
+                <a routerLink="admin" routerLinkActive="active-custom" class="nav-link">Page administrateur</a>
             </div>
         </div>
     </div>

src/app/modules/admin/admin-routing.module.ts

@@ -6,7 +6,7 @@ import { PageTableauComponent } from './pages/page-tableau/page-tableau.componen
 
 const routes: Routes = [
   { path: '', redirectTo: 'tableau', pathMatch: 'full'},
-  { path: 'modifier', component: PageModifierComponent },
+  { path: 'modifier/:id', component: PageModifierComponent },
   { path: 'ajouter', component: PageAjouterComponent },
   { path: 'tableau', component: PageTableauComponent },
 ];

src/app/modules/admin/components/formulaire/formulaire.component.html

@@ -1,4 +1,5 @@
-<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+<div class="form-plant">
+      <form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
         <div class="form-floating">
           <input
             type="text"
@@ -8,12 +9,8 @@
             name="name"
             formControlName="nameFc"
             [ngClass]="{
-        'is-valid':
-          plantForm.controls['nameFc'].touched &&
-          plantForm.controls['nameFc'].valid,
-        'is-invalid':
-          plantForm.controls['nameFc'].touched &&
-          !plantForm.controls['nameFc'].valid
+              'is-valid': plantForm.controls['nameFc'].valid,
+              'is-invalid': !plantForm.controls['nameFc'].valid
             }"
           />
           <label for="floatingInputName">Nom</label>
@@ -27,12 +24,8 @@
             name="price"
             formControlName="priceFc"
             [ngClass]="{
-        'is-valid':
-          plantForm.controls['priceFc'].touched &&
-          plantForm.controls['priceFc'].valid,
-        'is-invalid':
-          plantForm.controls['priceFc'].touched &&
-          !plantForm.controls['priceFc'].valid
+              'is-valid': plantForm.controls['priceFc'].valid,
+              'is-invalid': !plantForm.controls['priceFc'].valid
             }"
           />
           <label for="floatingInputPrice">Prix</label>
@@ -46,34 +39,28 @@
             name="quantity"
             formControlName="quantityFc"
             [ngClass]="{
-        'is-valid':
-          plantForm.controls['quantityFc'].touched &&
-          plantForm.controls['quantityFc'].valid,
-        'is-invalid':
-          plantForm.controls['quantityFc'].touched &&
-          !plantForm.controls['quantityFc'].valid
+              'is-valid': plantForm.controls['quantityFc'].valid,
+              'is-invalid': !plantForm.controls['quantityFc'].valid
             }"
           />
           <label for="floatingInputQuantity">Quantité</label>
           </div>
-  <div class="form-floating">
-    <input
-      type="text"
+          <div class="form-floating select">
+            <select
               class="form-control"
-      id="floatingCategory"
+              id="floatingInputCategory"
               placeholder=""
               name="category"
               formControlName="categoryFc"
-      [ngClass]="{
-        'is-valid':
-          plantForm.controls['categoryFc'].touched &&
-          plantForm.controls['categoryFc'].valid,
-        'is-invalid':
-          plantForm.controls['categoryFc'].touched &&
-          !plantForm.controls['categoryFc'].valid
-      }"
-    />
-    <label for="floatingInputCategory">Catégorie</label>
+            >
+              <option value="plantes fleuries">Plantes fleuries</option>
+              <option value="orchides">Orchidées</option>
+              <option value="cactus et plantes grasses">Cactus et plantes grasses</option>
+              <option value="bonsas">Bonsas</option>
+              <option value="plantes vertes">Plantes vertes</option>
+              <option value="palmier dintrieur">Palmier d'intérieur</option>
+            </select>
+            <label value="category">Sélectionnez catégorie</label>
           </div>
         <div class="form-floating">
           <input
@@ -84,12 +71,8 @@
             name="rating"
             formControlName="ratingFc"
             [ngClass]="{
-        'is-valid':
-          plantForm.controls['ratingFc'].touched &&
-          plantForm.controls['ratingFc'].valid,
-        'is-invalid':
-          plantForm.controls['ratingFc'].touched &&
-          !plantForm.controls['ratingFc'].valid
+              'is-valid': plantForm.controls['ratingFc'].valid,
+              'is-invalid': !plantForm.controls['ratingFc'].valid
             }"
           />
           <label for="floatingRating">Note</label>
@@ -114,13 +97,8 @@
           type="submit"
           [disabled]="plantForm.invalid"
         >
-    Créer une plante
+          {{ buttonLabel }}
         </button>
-  <button
-    class="w-100 btn btn-lg btn-outline-success"
-    type="submit"
-    [disabled]="plantForm.invalid"
-  >
-    Modifier une plante
-  </button>
-</form>
+      </form>
+</div>
+

src/app/modules/admin/components/formulaire/formulaire.component.scss

@@ -0,0 +1,75 @@
+.login-form {
+  height: 100vh;
+  padding-top: 40px;
+  background-color: #f5f5f5;
+}
+
+.form-plant {
+  width: 100%;
+  max-width: 330px;
+  padding: 15px;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #306340;
+  border-color: #306340;
+}
+
+.form-plant .checkbox {
+  font-weight: 400;
+}
+
+.form-plant .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-plant input[type="email"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-plant input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-plant input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-plant input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-outline-success {
+  margin-top: 10px;
+  background-color: #ffff;
+  color: #306340 !important;
+  border-color: #306340 !important;
+}

src/app/modules/admin/components/formulaire/formulaire.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Plant } from '../../models/plant';
 
 @Component({
   selector: 'app-formulaire',
@@ -8,10 +9,28 @@ import { FormGroup } from '@angular/forms';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-  constructor() {}
+  @Input()buttonLabel!:String;
+  @Input() plantInfos!: any;
+  @Output() submitted = new EventEmitter();
 
-  ngOnInit(): void {}
+  constructor(private fb : FormBuilder) {
+  }
+
+  ngOnInit(): void {
+    console.log(this.plantInfos);
+    this.plantForm = this.fb.group({
+      nameFc: new FormControl(this.plantInfos.product_name, [Validators.required]),
+      priceFc: new FormControl(this.plantInfos.product_price, [Validators.required]),
+      quantityFc: new FormControl(this.plantInfos.product_qty, [Validators.required]),
+      inStockFc: new FormControl(this.plantInfos.product_instock, [Validators.required]),
+      categoryFc: new FormControl(this.plantInfos.product_breadcrumb_label, [Validators.required]),
+      ratingFc: new FormControl(this.plantInfos.product_rating, [Validators.required]),
+    });
+  }
+
+  onSubmit(){
+    this.submitted.emit(this.plantForm.value)
+  }
 
-  onSubmit(){}
 }
 

src/app/modules/admin/models/plant.ts

@@ -1,14 +1,12 @@
-import { Category } from "./category";
-
 export class Plant {
   constructor(
     public name: string='',
     public price: number =1,
     public quantity: number= 0,
-    public instock: boolean= true,
-    public category:Category,
+    public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
+    public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
     public urlPicture: string = "https//picsum.photos/id/18/200/300",
     public rating: number = 0,
-    public id?: number
+    public id: string = ''
   ){}
 }

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

@@ -1 +1,2 @@
-<p>page-ajouter works!</p>
+<h1>Ajouter une plante</h1>
+<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>

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

@@ -0,0 +1,7 @@
+h1{
+  display: flex;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.658);
+  font-size: 28px;
+  margin-top: 20px;
+}

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

@@ -1,15 +1,67 @@
 import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { Router } from '@angular/router';
+import { FormulaireComponent } from '../../components/formulaire/formulaire.component';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
+
+
+
 
 @Component({
   selector: 'app-page-ajouter',
   templateUrl: './page-ajouter.component.html',
-  styleUrls: ['./page-ajouter.component.scss']
+  styleUrls: ['./page-ajouter.component.scss'],
 })
 export class PageAjouterComponent implements OnInit {
+  public newplant = new Plant();
 
-  constructor() { }
 
-  ngOnInit(): void {
+  constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
+
   }
 
+  ngOnInit(): void {
+
+  }
+
+  public addPlant(plant: any): void {
+    const nameValue = plant.nameFc;
+    const priceValue = plant.priceFc;
+    const ratingValue = plant.ratingFc;
+    const quantityValue = plant.quantityFc;
+    const categoryValue = plant.categoryFc;
+    const inStockValue = plant.inStockFc;
+
+    const plante: any = {
+      product_name: nameValue,
+      product_price: priceValue,
+      product_qty: quantityValue,
+      product_rating: ratingValue,
+      product_breadcrumb_label: categoryValue,
+      product_instock: [inStockValue],
+      product_url_picture : "https//picsum.photos/id/18/200/300",
+      product_discount_code : "",
+      product_color: "",
+      product_unitprice_ati: "",
+      product_unitprice_tf: "",
+      product_discount_tf: "",
+      product_discount_ati: "",
+      product_url_page: "",
+      product_shipping_method: null,
+      product_image_source: "",
+      product_seller: "market place",
+      product_web_only: "non"
+    };
+
+    this.adminService.addPlant(plante)?.subscribe((resp)=>{
+      this.router.navigate(['admin']);
+    })
+
+  }
 }

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

@@ -1 +1,3 @@
-<p>page-modifier works!</p>
+<h1>Modifier la plante</h1>
+<app-formulaire *ngIf="editPlant" [plantInfos]="editPlant" (submitted)="update($event)" [buttonLabel]="'Modifier la plante'"></app-formulaire>
+

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

@@ -0,0 +1,7 @@
+h1{
+  display: flex;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.658);
+  font-size: 28px;
+  margin-top: 20px;
+}

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

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder,FormGroup} from '@angular/forms';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-page-modifier',
@@ -6,10 +10,73 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
+  editPlant!: Plant;
+  plantId!: string;
 
-  constructor() { }
+
+
+  constructor(private adminService: AdminService,
+    private router: Router,
+    private fb: FormBuilder,
+    private route: ActivatedRoute) {
+  }
 
   ngOnInit(): void {
+    /** Pour récuperer l'id de la plante à modifier et appel Api**/
+    this.route.paramMap.subscribe((params : ParamMap) => {
+      const id = params.get('id')
+      if( id != null){
+        this.plantId = id;
+        //console.log(this.plantId);
+
+        this.adminService
+        .getPlantById(this.plantId)
+        .subscribe((plantData: any) => {
+          this.editPlant = plantData;
+          //console.log(this.editPlant);
+          //console.log(this.editPlant.name);
+        });
+      }
+    });
+
+  }
+
+
+
+  /** Méthode qui envoie les champs modifiés pour mise à jour **/
+  public update(plant: any): void {
+    //console.log(plant);
+    const nameValue = plant.nameFc;
+    const priceValue = plant.priceFc;
+    const ratingValue = plant.ratingFc;
+    const quantityValue = plant.quantityFc;
+    const categoryValue = plant.categoryFc;
+    const inStockValue = plant.inStockFc;
+
+    const plante: any = {
+      id: this.plantId,
+      product_name: nameValue,
+      product_price: priceValue,
+      product_qty: quantityValue,
+      product_rating: ratingValue,
+      product_breadcrumb_label: categoryValue,
+      product_instock: [inStockValue],
+      product_url_picture : "https//picsum.photos/id/18/200/300",
+      product_discount_code : "",
+      product_color: "",
+      product_unitprice_ati: "",
+      product_unitprice_tf: "",
+      product_discount_tf: "",
+      product_discount_ati: "",
+      product_url_page: "",
+      product_shipping_method: null,
+      product_image_source: "",
+      product_seller: "market place",
+      product_web_only: "non"
+    };
+    this.adminService.updatePlant(plante)?.subscribe((resp) => {
+      this.router.navigate(['admin']);
+    });
   }
 
 }

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

@@ -1,5 +1,9 @@
-<table class="table" *ngIf="subCollection$ | async as collection">
-  <thead class="thead-dark">
+<div id="container">
+  <div id="button">
+    <button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
+  </div>
+  <table class="table" *ngIf="subCollection$ | async as collection">
+    <thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
       <tr>
         <th scope="col">Id</th>
         <th scope="col">Nom</th>
@@ -15,15 +19,17 @@
     </thead>
     <tbody>
       <tr *ngFor="let products of collection">
-      <th scope="row">{{products.id}}</th>
+        <td>{{products.id}}</td>
         <td>{{products.name}}</td>
         <td>{{products.price}}</td>
         <td>{{products.quantity}}</td>
-      <td>{{products.instock}}</td>
-      <!-- <td>{{products.Catégorie.}}</td> -->
+        <td>{{products.inStock}}</td>
+        <td>{{products.category}}</td>
         <td>{{products.rating}}</td>
-      <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
-      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(5)"></td>
+        <td><a class="bi-pencil-square" style="color: #5472b1;" routerLink="../modifier/{{products.id}}"></a></td>
+        <td class="bi-trash-fill" style="color: rgb(231, 73, 73); cursor: pointer;" (click)="onClickDelete(products.id)"></td>
       </tr>
     </tbody>
-</table>
+  </table>
+</div>
+

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

@@ -0,0 +1,19 @@
+#container{
+  display: flex;
+  justify-content: center;
+  margin-top: 5rem;
+}
+table{
+  width: 75%;
+  margin-left: 2rem;
+}
+button{
+  background-color: #306340;
+  color: #f3f7f4 !important;
+  border-color: #306340 !important;
+}
+#button{
+  width: 10%;
+}
+
+

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

@@ -28,8 +28,10 @@ export class PageTableauComponent implements OnInit {
     //   })
   }
 
-  onClickDelete(id: number){
-    console.log(id);
+  onClickDelete(id: string){
+    this.adminService.onClickDelete(id).subscribe((resp) => {
+      console.log("Suppression successful : ", resp);
+    });
 
   }
 

src/app/modules/admin/services/admin.service.ts

@@ -1,11 +1,11 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { map, Observable, Subject } from 'rxjs';
+import { map, Observable, Subject, tap } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { Plant } from '../models/plant';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AdminService {
   public collection$!: Observable<Plant[]>;
@@ -21,7 +21,7 @@ export class AdminService {
         //console.log("avant mapping: ", tabObj);
         // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
         return tabObj.map((obj: any) => {
-          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
+          return new Plant(obj.product_name, obj.product_price,obj.product_qty,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
         })
       }));
     //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
@@ -31,13 +31,29 @@ export class AdminService {
   public refreshCollection(): void {
     // On se sert de notre flux de donnée type observable froid
     this.collection$.subscribe((listPlant: Plant[]) => {
-      this.plantCollection = [...listPlant];
       // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
       this.subCollection$.next(listPlant);
     })
   }
 
+  addPlant(plant: Plant): Observable<any> | void {
+    return this.httpClient.post(`${this.apiUrl}/list_products`, plant);
+  }
+  onClickDelete(id: string): Observable<any> {
+    return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
+      tap(() => this.refreshCollection())
+    );
+  }
   // getData(): Observable<any[]> {
   //   return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
   // }
+
+   /** Récupérer une plante par son Id **/
+  getPlantById(id: any): Observable<Plant> {
+    return this.httpClient.get<Plant>(`${this.apiUrl}/list_products/${id}`);
+  }
+  /** Modifier Plante **/
+  updatePlant(plant: Plant): Observable<any> {
+    return this.httpClient.put(`${this.apiUrl}/list_products/${plant.id}`, plant);
+  }
 }