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,4 +1,5 @@
-<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+<div class="form-plant">
+  <form (ngSubmit)="isAdd? addPlant() : updatePlant()" [formGroup]="plantForm">
     <div class="form-floating">
       <input
         type="text"
@@ -9,10 +10,8 @@
         formControlName="nameFc"
         [ngClass]="{
           'is-valid':
-          plantForm.controls['nameFc'].touched &&
             plantForm.controls['nameFc'].valid,
           'is-invalid':
-          plantForm.controls['nameFc'].touched &&
             !plantForm.controls['nameFc'].valid
         }"
       />
@@ -28,10 +27,8 @@
         formControlName="priceFc"
         [ngClass]="{
           'is-valid':
-          plantForm.controls['priceFc'].touched &&
             plantForm.controls['priceFc'].valid,
           'is-invalid':
-          plantForm.controls['priceFc'].touched &&
             !plantForm.controls['priceFc'].valid
         }"
       />
@@ -39,7 +36,7 @@
     </div>
     <div class="form-floating">
       <input
-      type="number"
+        type="text"
         class="form-control"
         id="floatingInputQuantity"
         placeholder=""
@@ -47,10 +44,8 @@
         formControlName="quantityFc"
         [ngClass]="{
           'is-valid':
-          plantForm.controls['quantityFc'].touched &&
             plantForm.controls['quantityFc'].valid,
           'is-invalid':
-          plantForm.controls['quantityFc'].touched &&
             !plantForm.controls['quantityFc'].valid
         }"
       />
@@ -66,10 +61,8 @@
         formControlName="categoryFc"
         [ngClass]="{
           'is-valid':
-          plantForm.controls['categoryFc'].touched &&
             plantForm.controls['categoryFc'].valid,
           'is-invalid':
-          plantForm.controls['categoryFc'].touched &&
             !plantForm.controls['categoryFc'].valid
         }"
       />
@@ -77,7 +70,7 @@
     </div>
     <div class="form-floating">
       <input
-      type="number"
+        type="text"
         class="form-control"
         id="floatingRating"
         placeholder=""
@@ -85,10 +78,8 @@
         formControlName="ratingFc"
         [ngClass]="{
           'is-valid':
-          plantForm.controls['ratingFc'].touched &&
             plantForm.controls['ratingFc'].valid,
           'is-invalid':
-          plantForm.controls['ratingFc'].touched &&
             !plantForm.controls['ratingFc'].valid
         }"
       />
@@ -108,19 +99,10 @@
       </select>
       <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>
+    >{{buttonLabel}}</button>
   </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: #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 { FormGroup } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+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.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><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);
+  }
 }