Merge branch 'main' of https://github.com/HarmandI/Admin-La-Belle-Plante

pull

db.json

@@ -5963,6 +5963,29 @@
       "product_image_source": "https://images.truffaut.com/media/catalog/product/cdn:///Articles/jpg/0832000/832900_001.jpg",
       "product_seller": "Truffaut",
       "product_web_only": "oui"
+    },
+    {
+      "product_name": "Belle plante",
+      "product_price": "35",
+      "product_qty": 1,
+      "product_rating": 3,
+      "product_breadcrumb_label": "orchides",
+      "product_instock": [
+        "non disponible"
+      ],
+      "product_url_picture": "https//picsum.photos/id/18/200/300",
+      "product_discount_code": "",
+      "product_color": "",
+      "product_unitprice_ati": "",
+      "product_unitprice_tf": "",
+      "product_discount_tf": "",
+      "product_discount_ati": "",
+      "product_url_page": "",
+      "product_shipping_method": null,
+      "product_image_source": "",
+      "product_seller": "market place",
+      "product_web_only": "non",
+      "id": "Fcq4EWk"
     }
   ],
   "users": [

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

@@ -1,5 +1,5 @@
 <div class="form-plant">
-      <form [formGroup]="plantForm">
+      <form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
         <div class="form-floating">
           <input
             type="text"

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

@@ -1,7 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } 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',
@@ -10,28 +9,28 @@ import { AdminService } from '../../services/admin.service';
 })
 export class FormulaireComponent implements OnInit {
   plantForm!: FormGroup;
-
-  @Input() plantInfos!: Plant;
   @Input()buttonLabel!:String;
-  constructor(private fb : FormBuilder, private adminService: AdminService) {
+  @Input() plantInfos!: any;
+  @Output() submitted = new EventEmitter();
 
+  constructor(private fb : FormBuilder) {
   }
 
   ngOnInit(): void {
+    console.log(this.plantInfos);
     this.plantForm = this.fb.group({
-      nameFc: new FormControl(this.plantInfos.name, [Validators.required]),
+      nameFc: new FormControl(this.plantInfos.product_name, [Validators.required]),
-      priceFc: new FormControl(this.plantInfos.price, [Validators.required]),
+      priceFc: new FormControl(this.plantInfos.product_price, [Validators.required]),
-      quantityFc: new FormControl(this.plantInfos.quantity, [Validators.required]),
+      quantityFc: new FormControl(this.plantInfos.product_qty, [Validators.required]),
-      inStockFc: new FormControl(this.plantInfos.inStock, [Validators.required]),
+      inStockFc: new FormControl(this.plantInfos.product_instock, [Validators.required]),
-      categoryFc: new FormControl(this.plantInfos.category, [Validators.required]),
+      categoryFc: new FormControl(this.plantInfos.product_breadcrumb_label, [Validators.required]),
-      ratingFc: new FormControl(this.plantInfos.rating, [Validators.required]),
+      ratingFc: new FormControl(this.plantInfos.product_rating, [Validators.required]),
     });
   }
 
+  onSubmit(){
+    this.submitted.emit(this.plantForm.value)
+  }
 
-
-  addPlant(){}
-
-  updatePlant(){}
 }
 

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

@@ -9,6 +9,6 @@ export class Plant {
     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
+    public id?: string
   ){}
 }

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

@@ -1,2 +1,2 @@
 <h1>Ajouter une plante</h1>
-<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire>
+<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>

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

@@ -19,42 +19,47 @@ import { AdminService } from '../../services/admin.service';
   styleUrls: ['./page-ajouter.component.scss'],
 })
 export class PageAjouterComponent implements OnInit {
-  public plantForm: FormGroup;
+  public newplant = new Plant();
-  public isAdd: boolean = false;
 
 
   constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
-    this.plantForm = new FormGroup({});
+
-    this.isAdd = false;
   }
 
   ngOnInit(): void {
 
   }
 
-  public onSubmit(): void {
+  public addPlant(plant: any): void {
-    const nameValue = this.plantForm.value['nameFC'];
+    const nameValue = plant.nameFc;
-    const priceValue = this.plantForm.value['priceFc'];
+    const priceValue = plant.priceFc;
-    const quantityValue = this.plantForm.value['quantityFc'];
+    const ratingValue = plant.ratingFc;
-    const inStockValue = this.plantForm.value['inStockFC'];
+    const quantityValue = plant.quantityFc;
-    const categoryValue = this.plantForm.value['categotyFC'];
+    const categoryValue = plant.categoryFc;
-    const urlPicture: string = 'https//picsum.photos/id/18/200/300';
+    const inStockValue = plant.inStockFc;
-    const ratingValue = this.plantForm.value['ratingFc'];
-    const idValue = this.plantForm.value[''];
 
-    const plant : Plant = {
+    const plante: any = {
-      name: nameValue,
+      product_name: nameValue,
-      price: priceValue,
+      product_price: priceValue,
-      quantity: quantityValue,
+      product_qty: quantityValue,
-      inStock: [inStockValue],
+      product_rating: ratingValue,
-      category: [categoryValue],
+      product_breadcrumb_label: categoryValue,
-      urlPicture: 'https//picsum.photos/id/18/200/300',
+      product_instock: [inStockValue],
-      rating: ratingValue,
+      product_url_picture : "https//picsum.photos/id/18/200/300",
-      id: idValue,
+      product_discount_code : "",
+      product_color: "",
+      product_unitprice_ati: "",
+      product_unitprice_tf: "",
+      product_discount_tf: "",
+      product_discount_ati: "",
+      product_url_page: "",
+      product_shipping_method: null,
+      product_image_source: "",
+      product_seller: "market place",
+      product_web_only: "non"
     };
-    console.log("coco",plant);
 
-    this.adminService.addPlant(plant)?.subscribe((resp)=>{
+    this.adminService.addPlant(plante)?.subscribe((resp)=>{
     })
     this.router.navigate(['admin']);
   }

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

@@ -1,2 +1,3 @@
 <h1>Modifier la plante</h1>
-<app-formulaire *ngIf="plantInfos" [buttonLabel]="'Modifier la plante'"></app-formulaire>
+<app-formulaire *ngIf="editPlant" [plantInfos]="editPlant" (submitted)="update($event)" [buttonLabel]="'Modifier la plante'"></app-formulaire>
+

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder,FormGroup} from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Plant } from '../../models/plant';
 import { AdminService } from '../../services/admin.service';
 
@@ -10,10 +10,8 @@ import { AdminService } from '../../services/admin.service';
   styleUrls: ['./page-modifier.component.scss']
 })
 export class PageModifierComponent implements OnInit {
-  plantForm: FormGroup;
+  editPlant!: Plant;
-  updatePlantForm: FormGroup;
+  plantId!: string;
-  plantInfos: any;
-  plantId: any;
 
 
 
@@ -21,59 +19,62 @@ export class PageModifierComponent implements OnInit {
     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 **/
+    /** Pour récuperer l'id de la plante à modifier et appel Api**/
-    this.plantId = this.route.snapshot.paramMap.get('id');
+    this.route.paramMap.subscribe((params : ParamMap) => {
+      const id = params.get('id')
+      if( id != null){
+        this.plantId = id;
+        //console.log(this.plantId);
 
-    /** Appel Api **/
         this.adminService
         .getPlantById(this.plantId)
-      .subscribe((plantInfos: any) => {
+        .subscribe((plantData: any) => {
-        this.plantInfos = plantInfos;
+          this.editPlant = plantData;
-        console.log(this.plantInfos);
+          //console.log(this.editPlant);
-        console.log(this.plantInfos.product_name);
+          //console.log(this.editPlant.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 {
+  public update(plant: any): void {
-    const nameValue = this.updatePlantForm.value['nameFc'];
+    //console.log(plant);
-    const priceValue = this.updatePlantForm.value['priceFc'];
+    const nameValue = plant.nameFc;
-    const ratingValue = this.updatePlantForm.value['ratingFc'];
+    const priceValue = plant.priceFc;
-    const quantityValue = this.updatePlantForm.value['quantityFc'];
+    const ratingValue = plant.ratingFc;
-    const categoryValue = this.updatePlantForm.value['categoryFc'];
+    const quantityValue = plant.quantityFc;
-    const inStockValue = this.updatePlantForm.value['inStockFc'];
+    const categoryValue = plant.categoryFc;
-    const urlPicture = "https//picsum.photos/id/18/200/300";
+    const inStockValue = plant.inStockFc;
 
-    const plant: Plant = {
+    const plante: any = {
       id: this.plantId,
-      name: nameValue,
+      product_name: nameValue,
-      price: priceValue,
+      product_price: priceValue,
-      quantity: quantityValue,
+      product_qty: quantityValue,
-      rating: ratingValue,
+      product_rating: ratingValue,
-      category: categoryValue,
+      product_breadcrumb_label: categoryValue,
-      inStock: [inStockValue],
+      product_instock: [inStockValue],
-      urlPicture
+      product_url_picture : "https//picsum.photos/id/18/200/300",
+      product_discount_code : "",
+      product_color: "",
+      product_unitprice_ati: "",
+      product_unitprice_tf: "",
+      product_discount_tf: "",
+      product_discount_ati: "",
+      product_url_page: "",
+      product_shipping_method: null,
+      product_image_source: "",
+      product_seller: "market place",
+      product_web_only: "non"
     };
-    this.adminService.updatePlant(plant)?.subscribe((resp) => {
+    this.adminService.updatePlant(plante)?.subscribe((resp) => {
       this.router.navigate(['admin']);
     });
   }

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

@@ -21,7 +21,7 @@ export class AdminService {
         //console.log("avant mapping: ", tabObj);
         // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
         return tabObj.map((obj: any) => {
-          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
+          return new Plant(obj.product_name, obj.product_price,obj.product_qty,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
         })
       }));
     //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
@@ -38,7 +38,7 @@ export class AdminService {
   }
 
   addPlant(plant: Plant): Observable<any> | void {
-    return this.httpClient.post(`${this.apiUrl}`, plant);
+    return this.httpClient.post(`${this.apiUrl}/list_products`, plant);
   }
   onClickDelete(id: number): Observable<any> {
     return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(