select category et divers

This commit is contained in:
HarmandI 2022-03-22 08:54:41 +01:00
parent 4d93763aa5
commit f2279bc977
7 changed files with 54 additions and 38 deletions

View File

@ -44,20 +44,22 @@
/> />
<label for="floatingInputQuantity">Quantité</label> <label for="floatingInputQuantity">Quantité</label>
</div> </div>
<div class="form-floating"> <div class="form-floating select">
<input <select
type="text"
class="form-control" class="form-control"
id="floatingCategory" id="floatingInputCategory"
placeholder="" placeholder=""
name="category" name="category"
formControlName="categoryFc" formControlName="categoryFc"
[ngClass]="{ >
'is-valid': plantForm.controls['categoryFc'].valid, <option value="plantes fleuries">Plantes fleuries</option>
'is-invalid': !plantForm.controls['categoryFc'].valid <option value="orchides">Orchidées</option>
}" <option value="cactus et plantes grasses">Cactus et plantes grasses</option>
/> <option value="bonsas">Bonsas</option>
<label for="floatingInputCategory">Catégorie</label> <option value="plantes vertes">Plantes vertes</option>
<option value="palmier dintrieur">Palmier d'intérieur</option>
</select>
<label value="category">Sélectionnez catégorie</label>
</div> </div>
<div class="form-floating"> <div class="form-floating">
<input <input

View File

@ -1,5 +1,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Plant } from '../../models/plant';
import { AdminService } from '../../services/admin.service';
@Component({ @Component({
selector: 'app-formulaire', selector: 'app-formulaire',
@ -8,12 +10,23 @@ import { FormBuilder, FormGroup } from '@angular/forms';
}) })
export class FormulaireComponent implements OnInit { export class FormulaireComponent implements OnInit {
plantForm!: FormGroup; plantForm!: FormGroup;
@Input() plantInfos!: Plant;
@Input() isAdd : boolean = true;
@Input()buttonLabel!:String; @Input()buttonLabel!:String;
constructor(private fb : FormBuilder) { constructor(private fb : FormBuilder, private adminService: AdminService) {
this.plantForm = this.fb.group({});
} }
ngOnInit(): void {} ngOnInit(): void {
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]),
});
}
onSubmit(){} onSubmit(){}
} }

View File

@ -6,7 +6,7 @@ export class Plant {
public price: number =1, public price: number =1,
public quantity: number= 0, public quantity: number= 0,
public inStock: string[]=['disponible','partiellement disponible', 'non disponible'], public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
public category:Category, 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 urlPicture: string = "https//picsum.photos/id/18/200/300",
public rating: number = 0, public rating: number = 0,
public id?: number public id?: number

View File

@ -1,2 +1,2 @@
<h2>Ajouter une plante</h2> <h1>Ajouter une plante</h1>
<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire> <app-formulaire [buttonLabel]="'Ajouter une plante'" [isAdd]="true"></app-formulaire>

View File

@ -0,0 +1,5 @@
h1{
color: rgba(0, 0, 0, 0.658);
font-size: 28px;
margin-top: 20px;
}

View File

@ -20,28 +20,24 @@ import { AdminService } from '../../services/admin.service';
}) })
export class PageAjouterComponent implements OnInit { export class PageAjouterComponent implements OnInit {
public plantForm: FormGroup; public plantForm: FormGroup;
public isAdd: boolean = false;
constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) { constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
this.plantForm = new FormGroup({}); this.plantForm = new FormGroup({});
this.isAdd = false;
} }
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 { public onSubmit(): void {
const nameValue = this.plantForm.value['nameFC']; const nameValue = this.plantForm.value['nameFC'];
const priceValue = this.plantForm.value['priceFc']; const priceValue = this.plantForm.value['priceFc'];
const quantityValue = this.plantForm.value['quantityFc']; const quantityValue = this.plantForm.value['quantityFc'];
const inStockValue = this.plantForm.value['categoryFc']; const inStockValue = this.plantForm.value['inStockFC'];
const categoryValue = this.plantForm.value['']; const categoryValue = this.plantForm.value['categotyFC'];
const urlPicture: string = 'https//picsum.photos/id/18/200/300'; const urlPicture: string = 'https//picsum.photos/id/18/200/300';
const ratingValue = this.plantForm.value['ratingFc']; const ratingValue = this.plantForm.value['ratingFc'];
const idValue = this.plantForm.value['']; const idValue = this.plantForm.value[''];
@ -51,12 +47,12 @@ export class PageAjouterComponent implements OnInit {
price: priceValue, price: priceValue,
quantity: quantityValue, quantity: quantityValue,
inStock: [inStockValue], inStock: [inStockValue],
category: categoryValue, category: [categoryValue],
urlPicture: 'https//picsum.photos/id/18/200/300', urlPicture: 'https//picsum.photos/id/18/200/300',
rating: ratingValue, rating: ratingValue,
id: idValue, id: idValue,
}; };
console.log(plant); console.log("coco",plant);
this.adminService.addPlant(plant)?.subscribe((resp)=>{ this.adminService.addPlant(plant)?.subscribe((resp)=>{
}) })

View File

@ -19,12 +19,12 @@
<td>{{products.name}}</td> <td>{{products.name}}</td>
<td>{{products.price}}</td> <td>{{products.price}}</td>
<td>{{products.quantity}}</td> <td>{{products.quantity}}</td>
<td>{{products.instock}}</td> <td>{{products.inStock}}</td>
<!-- <td>{{products.Catégorie.}}</td> --> <td>{{products.category}}</td>
<td>{{products.rating}}</td> <td>{{products.rating}}</td>
<td><a class="bi-pencil-square" routerLink="../modifier"></a></td> <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
<td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td> <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<button>Ajouter une plante</button> <button routerLink="../ajouter">Ajouter une plante </button>