derniere?
This commit is contained in:
commit
49edb1782d
23
db.json
23
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": [
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
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,31 +9,28 @@ import { AdminService } from '../../services/admin.service';
|
|||
})
|
||||
export class FormulaireComponent implements OnInit {
|
||||
plantForm!: FormGroup;
|
||||
|
||||
@Input() plantInfos!: Plant;
|
||||
@Input()buttonLabel!:String;
|
||||
@Output()submitted= new EventEmitter<Plant>();
|
||||
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.');
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
){}
|
||||
}
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
<h1>Ajouter une plante</h1>
|
||||
<app-formulaire (submitted)="onSubmitted($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>
|
||||
<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>
|
||||
|
|
|
@ -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']);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
.subscribe((plantData: any) => {
|
||||
this.editPlant = plantData;
|
||||
//console.log(this.editPlant);
|
||||
//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 {
|
||||
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']);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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`);
|
||||
|
|
Loading…
Reference in New Issue