diff --git a/db.json b/db.json index 84931a1..159f56f 100644 --- a/db.json +++ b/db.json @@ -5984,6 +5984,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 3bdb12d..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 @@
-
+
(); - 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]), - 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]), + nameFc: new FormControl(this.plantInfos.product_name, [Validators.required]), + priceFc: new FormControl(this.plantInfos.product_price, [Validators.required]), + quantityFc: new FormControl(this.plantInfos.product_qty, [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]), }); } - public onSubmit(): void { - this.submitted.emit(this.plantForm.value); + onSubmit(){ + this.submitted.emit(this.plantForm.value) } -} - -function newEventEmitter() { - throw new Error('Function not implemented.'); + } diff --git a/src/app/modules/admin/models/plant.ts b/src/app/modules/admin/models/plant.ts index b6d2bf4..337fc91 100644 --- a/src/app/modules/admin/models/plant.ts +++ b/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 ){} } diff --git a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html index 650250d..eff6fa4 100644 --- a/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html +++ b/src/app/modules/admin/pages/page-ajouter/page-ajouter.component.html @@ -1,2 +1,2 @@

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 63662d3..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,43 +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 onSubmitted(submittedPlant: Plant): 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 = { + const plante: any = { product_name: nameValue, product_price: priceValue, product_qty: quantityValue, - product_instock: [inStockValue], - product_breadcrumb_label: [categoryValue], - product_url_picture: 'https//picsum.photos/id/18/200/300', product_rating: ratingValue, - id: idValue, + 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(submittedPlant)?.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 9b34b5b..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`);