Merge pull request #4 from HarmandI/feature/ajouter

Feature/ajouter

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

@@ -1,108 +1,104 @@
 <div class="form-plant">
-  <form (ngSubmit)="isAdd? addPlant() : updatePlant()" [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="text"
-        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">
-      <input
-        type="text"
-        class="form-control"
-        id="floatingCategory"
-        placeholder=""
-        name="category"
-        formControlName="categoryFc"
-        [ngClass]="{
-          'is-valid':
-            plantForm.controls['categoryFc'].valid,
-          'is-invalid':
-            !plantForm.controls['categoryFc'].valid
-        }"
-      />
-      <label for="floatingInputCategory">Catégorie</label>
-    </div>
-    <div class="form-floating">
-      <input
-        type="text"
-        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>
+      <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>
+

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

@@ -10,24 +10,26 @@ import { AdminService } from '../../services/admin.service';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-  @Input() buttonLabel!: string;
-  @Input() plantInfos: any;
-  @Input() isAdd : boolean = true;
 
-  constructor(private formBuilder: FormBuilder) {}
+  @Input() plantInfos!: Plant;
+  @Input()buttonLabel!:String;
+  constructor(private fb : FormBuilder, private adminService: AdminService) {
+
+  }
 
   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]),
-      });
+    this.plantForm = this.fb.group({
+      nameFc: new FormControl(this.plantInfos.name, [Validators.required]),
+      priceFc: new FormControl(this.plantInfos.price, [Validators.required]),
+      quantityFc: new FormControl(this.plantInfos.quantity, [Validators.required]),
+      inStockFc: new FormControl(this.plantInfos.inStock, [Validators.required]),
+      categoryFc: new FormControl(this.plantInfos.category, [Validators.required]),
+      ratingFc: new FormControl(this.plantInfos.rating, [Validators.required]),
+    });
   }
 
+  
+
   addPlant(){}
 
   updatePlant(){}

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

@@ -5,8 +5,8 @@ export class Plant {
     public name: string='',
     public price: number =1,
     public quantity: number= 0,
-    public inStock: string[]=['disponible', 'patriellement disponible', 'non disponible'],
-    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

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 [buttonLabel]="'Ajouter une plante'" [isAdd]="true"></app-formulaire>

src/app/modules/admin/pages/page-ajouter/page-ajouter.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-ajouter/page-ajouter.component.ts

@@ -1,15 +1,61 @@
 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 plantForm: FormGroup;
+  public isAdd: boolean = false;
 
-  constructor() { }
 
-  ngOnInit(): void {
+  constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
+    this.plantForm = new FormGroup({});
+    this.isAdd = false;
   }
 
+  ngOnInit(): void {
+
+  }
+
+  public onSubmit(): void {
+    const nameValue = this.plantForm.value['nameFC'];
+    const priceValue = this.plantForm.value['priceFc'];
+    const quantityValue = this.plantForm.value['quantityFc'];
+    const inStockValue = this.plantForm.value['inStockFC'];
+    const categoryValue = this.plantForm.value['categotyFC'];
+    const urlPicture: string = 'https//picsum.photos/id/18/200/300';
+    const ratingValue = this.plantForm.value['ratingFc'];
+    const idValue = this.plantForm.value[''];
+
+    const plant : Plant = {
+      name: nameValue,
+      price: priceValue,
+      quantity: quantityValue,
+      inStock: [inStockValue],
+      category: [categoryValue],
+      urlPicture: 'https//picsum.photos/id/18/200/300',
+      rating: ratingValue,
+      id: idValue,
+    };
+    console.log("coco",plant);
+
+    this.adminService.addPlant(plant)?.subscribe((resp)=>{
+    })
+    this.router.navigate(['admin']);
+  }
 }

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

@@ -27,3 +27,4 @@
     </tr>
   </tbody>
 </table>
+<button routerLink="../ajouter">Ajouter une plante </button>

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

@@ -5,7 +5,7 @@ import { environment } from 'src/environments/environment';
 import { Plant } from '../models/plant';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AdminService {
   public collection$!: Observable<Plant[]>;
@@ -37,6 +37,9 @@ export class AdminService {
     })
   }
 
+  addPlant(plant: Plant): Observable<any> | void {
+    return this.httpClient.post(`${this.apiUrl}`, plant);
+  }
   onClickDelete(id: number): Observable<any> {
     return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
       tap(() => this.refreshCollection())