ajouter 1

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

@@ -8,12 +8,8 @@
       name="name"
       formControlName="nameFc"
       [ngClass]="{
-        'is-valid':
+        'is-valid': plantForm.controls['nameFc'].valid,
-          plantForm.controls['nameFc'].touched &&
+        'is-invalid': !plantForm.controls['nameFc'].valid
-          plantForm.controls['nameFc'].valid,
-        'is-invalid':
-          plantForm.controls['nameFc'].touched &&
-          !plantForm.controls['nameFc'].valid
       }"
     />
     <label for="floatingInputName">Nom</label>
@@ -27,12 +23,8 @@
       name="price"
       formControlName="priceFc"
       [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>
@@ -46,12 +38,8 @@
       name="quantity"
       formControlName="quantityFc"
       [ngClass]="{
-        'is-valid':
+        'is-valid': plantForm.controls['quantityFc'].valid,
-          plantForm.controls['quantityFc'].touched &&
+        'is-invalid': !plantForm.controls['quantityFc'].valid
-          plantForm.controls['quantityFc'].valid,
-        'is-invalid':
-          plantForm.controls['quantityFc'].touched &&
-          !plantForm.controls['quantityFc'].valid
       }"
     />
     <label for="floatingInputQuantity">Quantité</label>
@@ -65,12 +53,8 @@
       name="category"
       formControlName="categoryFc"
       [ngClass]="{
-        'is-valid':
+        'is-valid': plantForm.controls['categoryFc'].valid,
-          plantForm.controls['categoryFc'].touched &&
+        'is-invalid': !plantForm.controls['categoryFc'].valid
-          plantForm.controls['categoryFc'].valid,
-        'is-invalid':
-          plantForm.controls['categoryFc'].touched &&
-          !plantForm.controls['categoryFc'].valid
       }"
     />
     <label for="floatingInputCategory">Catégorie</label>
@@ -84,12 +68,8 @@
       name="rating"
       formControlName="ratingFc"
       [ngClass]="{
-        'is-valid':
+        'is-valid': plantForm.controls['ratingFc'].valid,
-          plantForm.controls['ratingFc'].touched &&
+        'is-invalid': !plantForm.controls['ratingFc'].valid
-          plantForm.controls['ratingFc'].valid,
-        'is-invalid':
-          plantForm.controls['ratingFc'].touched &&
-          !plantForm.controls['ratingFc'].valid
       }"
     />
     <label for="floatingRating">Note</label>
@@ -114,13 +94,6 @@
     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>

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

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-formulaire',
@@ -8,7 +8,10 @@ import { FormGroup } from '@angular/forms';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-  constructor() {}
+  @Input()buttonLabel!:String;
+  constructor(private fb : FormBuilder) {
+    this.plantForm = this.fb.group({});
+  }
 
   ngOnInit(): void {}
 

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','partiellement 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-ajouter/page-ajouter.component.html

@@ -1 +1,2 @@
-<p>page-ajouter works!</p>
+<h2>Ajouter une plante</h2>
+<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire>

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

@@ -1,15 +1,65 @@
 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;
 
-  constructor() { }
+  constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
-
+    this.plantForm = new FormGroup({});
-  ngOnInit(): void {
   }
 
+  ngOnInit(): void {
+    this.plantForm = this.fb.group({
+      nameFC: new FormControl('', [Validators.required]),
+      priceFc: new FormControl('', [Validators.required]),
+      quantityFc: new FormControl('', [Validators.required]),
+      categoryFc: new FormControl('', [Validators.required]),
+      ratingFc: new FormControl('', [Validators.required]),
+      inStockFc: new FormControl('', []),
+    });
+  }
+
+  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['categoryFc'];
+    const categoryValue = this.plantForm.value[''];
+    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(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>Ajouter une plante</button>

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

@@ -2,9 +2,10 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { Plant } from '../models/plant';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AdminService {
   apiUrl: string;
@@ -16,4 +17,8 @@ export class AdminService {
   getData(): Observable<any[]> {
     return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
   }
+
+  addPlant(plant: Plant): Observable<any> | void {
+    return this.httpClient.post(`${this.apiUrl}`, plant);
+  }
 }