diff --git a/db.json b/db.json index bf4b4d4..3de8066 100644 --- a/db.json +++ b/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": [ diff --git a/src/app/modules/admin/components/formulaire/formulaire.component.html b/src/app/modules/admin/components/formulaire/formulaire.component.html index e8d5b46..c30ea4f 100644 --- a/src/app/modules/admin/components/formulaire/formulaire.component.html +++ b/src/app/modules/admin/components/formulaire/formulaire.component.html @@ -1,5 +1,5 @@
-
+
Ajouter une plante - + diff --git a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts index bda58f2..7156692 100644 --- a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.ts +++ b/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 isAdd: boolean = false; + public newplant = new Plant(); 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['']; + public addPlant(plant: any): void { + const nameValue = plant.nameFc; + const priceValue = plant.priceFc; + const ratingValue = plant.ratingFc; + const quantityValue = plant.quantityFc; + const categoryValue = plant.categoryFc; + const inStockValue = plant.inStockFc; - 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, + const plante: any = { + product_name: nameValue, + product_price: priceValue, + product_qty: quantityValue, + product_rating: ratingValue, + product_breadcrumb_label: categoryValue, + product_instock: [inStockValue], + 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" }; - console.log("coco",plant); - this.adminService.addPlant(plant)?.subscribe((resp)=>{ + this.adminService.addPlant(plante)?.subscribe((resp)=>{ }) this.router.navigate(['admin']); } diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.html b/src/app/modules/admin/pages/page-modifier/page-modifier.component.html index 8c2f5a2..6c6e126 100644 --- 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,2 +1,3 @@

Modifier la plante

- + + diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts b/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts index 0f439fb..08c26a6 100644 --- 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,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; +import { FormBuilder,FormGroup} from '@angular/forms'; +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; - updatePlantForm: FormGroup; - plantInfos: any; - plantId: any; + editPlant!: Plant; + plantId!: string; @@ -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 **/ - this.plantId = this.route.snapshot.paramMap.get('id'); + /** Pour récuperer l'id de la plante à modifier et appel Api**/ + 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) => { - 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 : ['']], + this.adminService + .getPlantById(this.plantId) + .subscribe((plantData: any) => { + this.editPlant = plantData; + //console.log(this.editPlant); + //console.log(this.editPlant.name); + }); + } }); + } + /** 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"; + public update(plant: any): void { + //console.log(plant); + const nameValue = plant.nameFc; + const priceValue = plant.priceFc; + const ratingValue = plant.ratingFc; + const quantityValue = plant.quantityFc; + const categoryValue = plant.categoryFc; + const inStockValue = plant.inStockFc; - const plant: Plant = { + const plante: any = { id: this.plantId, - name: nameValue, - price: priceValue, - quantity: quantityValue, - rating: ratingValue, - category: categoryValue, - inStock: [inStockValue], - urlPicture + product_name: nameValue, + product_price: priceValue, + product_qty: quantityValue, + product_rating: ratingValue, + product_breadcrumb_label: categoryValue, + product_instock: [inStockValue], + 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']); }); } diff --git a/src/app/modules/admin/services/admin.service.ts b/src/app/modules/admin/services/admin.service.ts index aa94aa9..3f9d8d5 100644 --- a/src/app/modules/admin/services/admin.service.ts +++ b/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(`${this.apiUrl}/list_products`); @@ -38,7 +38,7 @@ export class AdminService { } addPlant(plant: Plant): Observable | void { - return this.httpClient.post(`${this.apiUrl}`, plant); + return this.httpClient.post(`${this.apiUrl}/list_products`, plant); } onClickDelete(id: number): Observable { return this.httpClient.delete(`${this.apiUrl}/list_products/${id}`).pipe(