Merge branch 'main' into feature/ajouter

2022-03-22 09:52:51 +01:00 · 2022-03-22 09:52:51 +01:00 · 5e8d6c3532
parent f2279bc977 26c96850ca
commit 5e8d6c3532
9 changed files with 269 additions and 106 deletions
--- a/src/app/modules/admin/admin-routing.module.ts
+++ b/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 },
 ];
--- a/src/app/modules/admin/components/formulaire/formulaire.component.html
+++ b/src/app/modules/admin/components/formulaire/formulaire.component.html
@ -1,101 +1,104 @@
-<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
-  <div class="form-floating">
-    <input
-      type="text"
-      class="form-control"
-      id="floatingInputName"
-      placeholder=""
-      name="name"
-      formControlName="nameFc"
-      [ngClass]="{
-        'is-valid': plantForm.controls['nameFc'].valid,
-        'is-invalid': !plantForm.controls['nameFc'].valid
-      }"
-    />
-    <label for="floatingInputName">Nom</label>
-  </div>
-  <div class="form-floating">
-    <input
-      type="text"
-      class="form-control"
-      id="floatingInputPrice"
-      placeholder=""
-      name="price"
-      formControlName="priceFc"
-      [ngClass]="{
-        'is-valid': plantForm.controls['priceFc'].valid,
-        'is-invalid': !plantForm.controls['priceFc'].valid
-      }"
-    />
-    <label for="floatingInputPrice">Prix</label>
-  </div>
-  <div class="form-floating">
-    <input
-      type="number"
-      class="form-control"
-      id="floatingInputQuantity"
-      placeholder=""
-      name="quantity"
-      formControlName="quantityFc"
-      [ngClass]="{
-        'is-valid': plantForm.controls['quantityFc'].valid,
-        'is-invalid': !plantForm.controls['quantityFc'].valid
-      }"
-    />
-    <label for="floatingInputQuantity">Quantité</label>
-    </div>
-    <div class="form-floating select">
-      <select
-        class="form-control"
-        id="floatingInputCategory"
-        placeholder=""
-        name="category"
-        formControlName="categoryFc"
-      >
-        <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
-      type="number"
-      class="form-control"
-      id="floatingRating"
-      placeholder=""
-      name="rating"
-      formControlName="ratingFc"
-      [ngClass]="{
-        'is-valid': plantForm.controls['ratingFc'].valid,
-        'is-invalid': !plantForm.controls['ratingFc'].valid
-      }"
-    />
-    <label for="floatingRating">Note</label>
-  </div>
-  <div class="form-floating select">
-    <select
-      class="form-control"
-      id="floatingInputInStock"
-      placeholder=""
-      name="inStock"
-      formControlName="inStockFc"
-    >
-      <option value="disponible">Disponible</option>
-      <option value="partiellement disponible">Partiellement disponible</option>
-      <option value="non disponible">Non disponible</option>
-    </select>
-    <label value="disponible">Sélectionnez disponibilité</label>
-  </div>
+<div class="form-plant">
+      <form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+        <div class="form-floating">
+          <input
+            type="text"
+            class="form-control"
+            id="floatingInputName"
+            placeholder=""
+            name="name"
+            formControlName="nameFc"
+            [ngClass]="{
+              'is-valid': plantForm.controls['nameFc'].valid,
+              'is-invalid': !plantForm.controls['nameFc'].valid
+            }"
+          />
+          <label for="floatingInputName">Nom</label>
+        </div>
+        <div class="form-floating">
+          <input
+            type="text"
+            class="form-control"
+            id="floatingInputPrice"
+            placeholder=""
+            name="price"
+            formControlName="priceFc"
+            [ngClass]="{
+              'is-valid': plantForm.controls['priceFc'].valid,
+              'is-invalid': !plantForm.controls['priceFc'].valid
+            }"
+          />
+          <label for="floatingInputPrice">Prix</label>
+        </div>
+        <div class="form-floating">
+          <input
+            type="number"
+            class="form-control"
+            id="floatingInputQuantity"
+            placeholder=""
+            name="quantity"
+            formControlName="quantityFc"
+            [ngClass]="{
+              'is-valid': plantForm.controls['quantityFc'].valid,
+              'is-invalid': !plantForm.controls['quantityFc'].valid
+            }"
+          />
+          <label for="floatingInputQuantity">Quantité</label>
+          </div>
+          <div class="form-floating select">
+            <select
+              class="form-control"
+              id="floatingInputCategory"
+              placeholder=""
+              name="category"
+              formControlName="categoryFc"
+            >
+              <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
+            type="number"
+            class="form-control"
+            id="floatingRating"
+            placeholder=""
+            name="rating"
+            formControlName="ratingFc"
+            [ngClass]="{
+              'is-valid': plantForm.controls['ratingFc'].valid,
+              'is-invalid': !plantForm.controls['ratingFc'].valid
+            }"
+          />
+          <label for="floatingRating">Note</label>
+        </div>
+        <div class="form-floating select">
+          <select
+            class="form-control"
+            id="floatingInputInStock"
+            placeholder=""
+            name="inStock"
+            formControlName="inStockFc"
+          >
+            <option value="disponible">Disponible</option>
+            <option value="partiellement disponible">Partiellement disponible</option>
+            <option value="non disponible">Non disponible</option>
+          </select>
+          <label value="disponible">Sélectionnez disponibilité</label>
+        </div>
+
+        <button
+          class="w-100 btn btn-lg btn-outline-success"
+          type="submit"
+          [disabled]="plantForm.invalid"
+        >
+          {{ buttonLabel }}
+        </button>
+      </form>
+</div>

-  <button
-    class="w-100 btn btn-lg btn-outline-success"
-    type="submit"
-    [disabled]="plantForm.invalid"
-  >
-    {{ buttonLabel }}
-  </button>
-</form>
--- a/src/app/modules/admin/components/formulaire/formulaire.component.scss
+++ b/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;
+}
--- a/src/app/modules/admin/components/formulaire/formulaire.component.ts
+++ b/src/app/modules/admin/components/formulaire/formulaire.component.ts
@ -10,8 +10,8 @@ import { AdminService } from '../../services/admin.service';
 })
 export class FormulaireComponent implements OnInit {
  plantForm!: FormGroup;
+
  @Input() plantInfos!: Plant;
-  @Input() isAdd : boolean = true;
  @Input()buttonLabel!:String;
  constructor(private fb : FormBuilder, private adminService: AdminService) {

@ -28,6 +28,10 @@ export class FormulaireComponent implements OnInit {
    });
  }

-  onSubmit(){}
+  
+
+  addPlant(){}
+
+  updatePlant(){}
 }

--- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.html
+++ b/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>
--- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss
+++ b/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;
+}
--- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts
+++ b/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']);
+    });
  }

 }
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
@ -22,7 +22,7 @@
      <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>
--- a/src/app/modules/admin/services/admin.service.ts
+++ b/src/app/modules/admin/services/admin.service.ts
@ -48,4 +48,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);
+  }
 }