Merge pull request #2 from HarmandI/feature/modifier-plante

Feature/modifier plante

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,126 +1,108 @@
-<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+<div class="form-plant">
-  <div class="form-floating">
+  <form (ngSubmit)="isAdd? addPlant() : updatePlant()" [formGroup]="plantForm">
-    <input
+    <div class="form-floating">
-      type="text"
+      <input
-      class="form-control"
+        type="text"
-      id="floatingInputName"
+        class="form-control"
-      placeholder=""
+        id="floatingInputName"
-      name="name"
+        placeholder=""
-      formControlName="nameFc"
+        name="name"
-      [ngClass]="{
+        formControlName="nameFc"
-        'is-valid':
+        [ngClass]="{
-          plantForm.controls['nameFc'].touched &&
+          'is-valid':
-          plantForm.controls['nameFc'].valid,
+            plantForm.controls['nameFc'].valid,
-        'is-invalid':
+          'is-invalid':
-          plantForm.controls['nameFc'].touched &&
+            !plantForm.controls['nameFc'].valid
-          !plantForm.controls['nameFc'].valid
+        }"
-      }"
+      />
-    />
+      <label for="floatingInputName">Nom</label>
-    <label for="floatingInputName">Nom</label>
+    </div>
-  </div>
+    <div class="form-floating">
-  <div class="form-floating">
+      <input
-    <input
+        type="text"
-      type="text"
+        class="form-control"
-      class="form-control"
+        id="floatingInputPrice"
-      id="floatingInputPrice"
+        placeholder=""
-      placeholder=""
+        name="price"
-      name="price"
+        formControlName="priceFc"
-      formControlName="priceFc"
+        [ngClass]="{
-      [ngClass]="{
+          'is-valid':
-        'is-valid':
+            plantForm.controls['priceFc'].valid,
-          plantForm.controls['priceFc'].touched &&
+          'is-invalid':
-          plantForm.controls['priceFc'].valid,
+            !plantForm.controls['priceFc'].valid
-        'is-invalid':
+        }"
-          plantForm.controls['priceFc'].touched &&
+      />
-          !plantForm.controls['priceFc'].valid
+      <label for="floatingInputPrice">Prix</label>
-      }"
+    </div>
-    />
+    <div class="form-floating">
-    <label for="floatingInputPrice">Prix</label>
+      <input
-  </div>
+        type="text"
-  <div class="form-floating">
+        class="form-control"
-    <input
+        id="floatingInputQuantity"
-      type="number"
+        placeholder=""
-      class="form-control"
+        name="quantity"
-      id="floatingInputQuantity"
+        formControlName="quantityFc"
-      placeholder=""
+        [ngClass]="{
-      name="quantity"
+          'is-valid':
-      formControlName="quantityFc"
+            plantForm.controls['quantityFc'].valid,
-      [ngClass]="{
+          'is-invalid':
-        'is-valid':
+            !plantForm.controls['quantityFc'].valid
-          plantForm.controls['quantityFc'].touched &&
+        }"
-          plantForm.controls['quantityFc'].valid,
+      />
-        'is-invalid':
+      <label for="floatingInputQuantity">Quantité</label>
-          plantForm.controls['quantityFc'].touched &&
+    </div>
-          !plantForm.controls['quantityFc'].valid
+    <div class="form-floating">
-      }"
+      <input
-    />
+        type="text"
-    <label for="floatingInputQuantity">Quantité</label>
+        class="form-control"
-  </div>
+        id="floatingCategory"
-  <div class="form-floating">
+        placeholder=""
-    <input
+        name="category"
-      type="text"
+        formControlName="categoryFc"
-      class="form-control"
+        [ngClass]="{
-      id="floatingCategory"
+          'is-valid':
-      placeholder=""
+            plantForm.controls['categoryFc'].valid,
-      name="category"
+          'is-invalid':
-      formControlName="categoryFc"
+            !plantForm.controls['categoryFc'].valid
-      [ngClass]="{
+        }"
-        'is-valid':
+      />
-          plantForm.controls['categoryFc'].touched &&
+      <label for="floatingInputCategory">Catégorie</label>
-          plantForm.controls['categoryFc'].valid,
+    </div>
-        'is-invalid':
+    <div class="form-floating">
-          plantForm.controls['categoryFc'].touched &&
+      <input
-          !plantForm.controls['categoryFc'].valid
+        type="text"
-      }"
+        class="form-control"
-    />
+        id="floatingRating"
-    <label for="floatingInputCategory">Catégorie</label>
+        placeholder=""
-  </div>
+        name="rating"
-  <div class="form-floating">
+        formControlName="ratingFc"
-    <input
+        [ngClass]="{
-      type="number"
+          'is-valid':
-      class="form-control"
+            plantForm.controls['ratingFc'].valid,
-      id="floatingRating"
+          'is-invalid':
-      placeholder=""
+            !plantForm.controls['ratingFc'].valid
-      name="rating"
+        }"
-      formControlName="ratingFc"
+      />
-      [ngClass]="{
+      <label for="floatingRating">Note</label>
-        'is-valid':
+    </div>
-          plantForm.controls['ratingFc'].touched &&
+    <div class="form-floating select">
-          plantForm.controls['ratingFc'].valid,
+      <select
-        'is-invalid':
+        class="form-control"
-          plantForm.controls['ratingFc'].touched &&
+        id="floatingInputInStock"
-          !plantForm.controls['ratingFc'].valid
+        placeholder=""
-      }"
+        name="inStock"
-    />
+        formControlName="inStockFc"
-    <label for="floatingRating">Note</label>
+      >
-  </div>
+        <option value="disponible">Disponible</option>
-  <div class="form-floating select">
+        <option value="partiellement disponible">Partiellement disponible</option>
-    <select
+        <option value="non disponible">Non disponible</option>
-      class="form-control"
+      </select>
-      id="floatingInputInStock"
+      <label value="disponible">Sélectionnez disponibilité</label>
-      placeholder=""
+    </div>
-      name="inStock"
+    <button
-      formControlName="inStockFc"
+      class="w-100 btn btn-lg btn-outline-success"
-    >
+      type="submit"
-      <option value="disponible">Disponible</option>
+      [disabled]="plantForm.invalid"
-      <option value="partiellement disponible">Partiellement disponible</option>
+    >{{buttonLabel}}</button>
-      <option value="non disponible">Non disponible</option>
+  </form>
-    </select>
+</div>
-    <label value="disponible">Sélectionnez disponibilité</label>
-  </div>
-
-  <button
-    class="w-100 btn btn-lg btn-outline-success"
-    type="submit"
-    [disabled]="plantForm.invalid"
-  >
-    Créer une plante
-  </button>
-  <button
-    class="w-100 btn btn-lg btn-outline-success"
-    type="submit"
-    [disabled]="plantForm.invalid"
-  >
-    Modifier une plante
-  </button>
-</form>

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: #64c982;
+  border-color: #64c982;
+}
+
+.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: #64c982 !important;
+  border-color: #64c982 !important;
+}

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

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-formulaire',
@@ -8,10 +10,26 @@ import { FormGroup } from '@angular/forms';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-  constructor() {}
+  @Input() buttonLabel!: string;
+  @Input() plantInfos: any;
+  @Input() isAdd : boolean = true;
 
-  ngOnInit(): void {}
+  constructor(private formBuilder: FormBuilder) {}
 
-  onSubmit(){}
+  ngOnInit(): void {
+    this.plantForm = this.formBuilder.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_quantity, [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]),
+      });
+  }
+
+  addPlant(){}
+
+  updatePlant(){}
 }
 

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

@@ -5,7 +5,7 @@ export class Plant {
     public name: string='',
     public price: number =1,
     public quantity: number= 0,
-    public instock: boolean= true,
+    public inStock: string[]=['disponible', 'patriellement disponible', 'non disponible'],
     public category:Category,
     public urlPicture: string = "https//picsum.photos/id/18/200/300",
     public rating: number = 0,

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

@@ -1 +1,2 @@
-<p>page-modifier works!</p>
+<h1>Modifier la plante</h1>
+<app-formulaire *ngIf="plantInfos" [buttonLabel]="'Modifier la plante'" [isAdd]= "false"></app-formulaire>

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

@@ -0,0 +1,5 @@
+h1{
+  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, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Plant } from '../../models/plant';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-page-modifier',
@@ -6,10 +10,72 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
+  plantForm: FormGroup;
+  updatePlantForm: FormGroup;
+  plantInfos: any;
+  plantId: any;
 
-  constructor() { }
+
+
+  constructor(private adminService: AdminService,
+    private router: Router,
+    private fb: FormBuilder,
+    private route: ActivatedRoute) {
+    this.updatePlantForm = new FormGroup({});
+    this.plantForm = this.initForm();
+  }
 
   ngOnInit(): void {
+    /** Pour récuperer l'id de la plante à modifier **/
+    this.plantId = this.route.snapshot.paramMap.get('id');
+
+    /** Appel Api **/
+    this.adminService
+      .getPlantById(this.plantId)
+      .subscribe((plantInfos: any) => {
+        this.plantInfos = plantInfos;
+        console.log(this.plantInfos);
+        console.log(this.plantInfos.product_name);
+      });
+  }
+
+  /** Méthode qui initialise les champs du formulaire avec les infos du db Json **/
+  private initForm(plant?: Plant): FormGroup {
+
+    return this.fb.group({
+      nom:[plant ? plant.name : ''],
+      price: [plant ? plant.price : ''],
+      quantity: [plant ? plant.quantity : ''],
+      category: [plant ? plant.category : ''],
+      rating: [plant ? plant.rating : ''],
+      inStock: [plant ? plant.inStock : ['']],
+    });
+  }
+
+
+  /** Méthode qui envoie les champs modifiés pour mise à jour **/
+  public onSubmit(): void {
+    const nameValue = this.updatePlantForm.value['nameFc'];
+    const priceValue = this.updatePlantForm.value['priceFc'];
+    const ratingValue = this.updatePlantForm.value['ratingFc'];
+    const quantityValue = this.updatePlantForm.value['quantityFc'];
+    const categoryValue = this.updatePlantForm.value['categoryFc'];
+    const inStockValue = this.updatePlantForm.value['inStockFc'];
+    const urlPicture = "https//picsum.photos/id/18/200/300";
+
+    const plant: Plant = {
+      id: this.plantId,
+      name: nameValue,
+      price: priceValue,
+      quantity: quantityValue,
+      rating: ratingValue,
+      category: categoryValue,
+      inStock: [inStockValue],
+      urlPicture
+    };
+    this.adminService.updatePlant(plant)?.subscribe((resp) => {
+      this.router.navigate(['admin']);
+    });
   }
 
 }

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

@@ -19,10 +19,10 @@
       <td>{{products.name}}</td>
       <td>{{products.price}}</td>
       <td>{{products.quantity}}</td>
-      <td>{{products.instock}}</td>
+      <td>{{products.inStock}}</td>
-      <!-- <td>{{products.Catégorie.}}</td> -->
+      <td>{{products.category}}</td>
       <td>{{products.rating}}</td>
-      <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
+      <td><a class="bi-pencil-square" routerLink="../modifier/{{products.id}}"></a></td>
       <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
     </tr>
   </tbody>

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

@@ -45,4 +45,13 @@ export class AdminService {
   // 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);
+  }
 }