commit
e8c45f87e9
@ -1,108 +1,104 @@
|
|||||||
<div class="form-plant">
|
<div class="form-plant">
|
||||||
<form (ngSubmit)="isAdd? addPlant() : updatePlant()" [formGroup]="plantForm">
|
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="floatingInputName"
|
id="floatingInputName"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
name="name"
|
name="name"
|
||||||
formControlName="nameFc"
|
formControlName="nameFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['nameFc'].valid,
|
||||||
plantForm.controls['nameFc'].valid,
|
'is-invalid': !plantForm.controls['nameFc'].valid
|
||||||
'is-invalid':
|
}"
|
||||||
!plantForm.controls['nameFc'].valid
|
/>
|
||||||
}"
|
<label for="floatingInputName">Nom</label>
|
||||||
/>
|
</div>
|
||||||
<label for="floatingInputName">Nom</label>
|
<div class="form-floating">
|
||||||
</div>
|
<input
|
||||||
<div class="form-floating">
|
type="text"
|
||||||
<input
|
class="form-control"
|
||||||
type="text"
|
id="floatingInputPrice"
|
||||||
class="form-control"
|
placeholder=""
|
||||||
id="floatingInputPrice"
|
name="price"
|
||||||
placeholder=""
|
formControlName="priceFc"
|
||||||
name="price"
|
[ngClass]="{
|
||||||
formControlName="priceFc"
|
'is-valid': plantForm.controls['priceFc'].valid,
|
||||||
[ngClass]="{
|
'is-invalid': !plantForm.controls['priceFc'].valid
|
||||||
'is-valid':
|
}"
|
||||||
plantForm.controls['priceFc'].valid,
|
/>
|
||||||
'is-invalid':
|
<label for="floatingInputPrice">Prix</label>
|
||||||
!plantForm.controls['priceFc'].valid
|
</div>
|
||||||
}"
|
<div class="form-floating">
|
||||||
/>
|
<input
|
||||||
<label for="floatingInputPrice">Prix</label>
|
type="number"
|
||||||
</div>
|
class="form-control"
|
||||||
<div class="form-floating">
|
id="floatingInputQuantity"
|
||||||
<input
|
placeholder=""
|
||||||
type="text"
|
name="quantity"
|
||||||
class="form-control"
|
formControlName="quantityFc"
|
||||||
id="floatingInputQuantity"
|
[ngClass]="{
|
||||||
placeholder=""
|
'is-valid': plantForm.controls['quantityFc'].valid,
|
||||||
name="quantity"
|
'is-invalid': !plantForm.controls['quantityFc'].valid
|
||||||
formControlName="quantityFc"
|
}"
|
||||||
[ngClass]="{
|
/>
|
||||||
'is-valid':
|
<label for="floatingInputQuantity">Quantité</label>
|
||||||
plantForm.controls['quantityFc'].valid,
|
</div>
|
||||||
'is-invalid':
|
<div class="form-floating select">
|
||||||
!plantForm.controls['quantityFc'].valid
|
<select
|
||||||
}"
|
class="form-control"
|
||||||
/>
|
id="floatingInputCategory"
|
||||||
<label for="floatingInputQuantity">Quantité</label>
|
placeholder=""
|
||||||
</div>
|
name="category"
|
||||||
<div class="form-floating">
|
formControlName="categoryFc"
|
||||||
<input
|
>
|
||||||
type="text"
|
<option value="plantes fleuries">Plantes fleuries</option>
|
||||||
class="form-control"
|
<option value="orchides">Orchidées</option>
|
||||||
id="floatingCategory"
|
<option value="cactus et plantes grasses">Cactus et plantes grasses</option>
|
||||||
placeholder=""
|
<option value="bonsas">Bonsas</option>
|
||||||
name="category"
|
<option value="plantes vertes">Plantes vertes</option>
|
||||||
formControlName="categoryFc"
|
<option value="palmier dintrieur">Palmier d'intérieur</option>
|
||||||
[ngClass]="{
|
</select>
|
||||||
'is-valid':
|
<label value="category">Sélectionnez catégorie</label>
|
||||||
plantForm.controls['categoryFc'].valid,
|
</div>
|
||||||
'is-invalid':
|
<div class="form-floating">
|
||||||
!plantForm.controls['categoryFc'].valid
|
<input
|
||||||
}"
|
type="number"
|
||||||
/>
|
class="form-control"
|
||||||
<label for="floatingInputCategory">Catégorie</label>
|
id="floatingRating"
|
||||||
</div>
|
placeholder=""
|
||||||
<div class="form-floating">
|
name="rating"
|
||||||
<input
|
formControlName="ratingFc"
|
||||||
type="text"
|
[ngClass]="{
|
||||||
class="form-control"
|
'is-valid': plantForm.controls['ratingFc'].valid,
|
||||||
id="floatingRating"
|
'is-invalid': !plantForm.controls['ratingFc'].valid
|
||||||
placeholder=""
|
}"
|
||||||
name="rating"
|
/>
|
||||||
formControlName="ratingFc"
|
<label for="floatingRating">Note</label>
|
||||||
[ngClass]="{
|
</div>
|
||||||
'is-valid':
|
<div class="form-floating select">
|
||||||
plantForm.controls['ratingFc'].valid,
|
<select
|
||||||
'is-invalid':
|
class="form-control"
|
||||||
!plantForm.controls['ratingFc'].valid
|
id="floatingInputInStock"
|
||||||
}"
|
placeholder=""
|
||||||
/>
|
name="inStock"
|
||||||
<label for="floatingRating">Note</label>
|
formControlName="inStockFc"
|
||||||
</div>
|
>
|
||||||
<div class="form-floating select">
|
<option value="disponible">Disponible</option>
|
||||||
<select
|
<option value="partiellement disponible">Partiellement disponible</option>
|
||||||
class="form-control"
|
<option value="non disponible">Non disponible</option>
|
||||||
id="floatingInputInStock"
|
</select>
|
||||||
placeholder=""
|
<label value="disponible">Sélectionnez disponibilité</label>
|
||||||
name="inStock"
|
</div>
|
||||||
formControlName="inStockFc"
|
|
||||||
>
|
<button
|
||||||
<option value="disponible">Disponible</option>
|
class="w-100 btn btn-lg btn-outline-success"
|
||||||
<option value="partiellement disponible">Partiellement disponible</option>
|
type="submit"
|
||||||
<option value="non disponible">Non disponible</option>
|
[disabled]="plantForm.invalid"
|
||||||
</select>
|
>
|
||||||
<label value="disponible">Sélectionnez disponibilité</label>
|
{{ buttonLabel }}
|
||||||
</div>
|
</button>
|
||||||
<button
|
</form>
|
||||||
class="w-100 btn btn-lg btn-outline-success"
|
|
||||||
type="submit"
|
|
||||||
[disabled]="plantForm.invalid"
|
|
||||||
>{{buttonLabel}}</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -10,24 +10,26 @@ import { AdminService } from '../../services/admin.service';
|
|||||||
})
|
})
|
||||||
export class FormulaireComponent implements OnInit {
|
export class FormulaireComponent implements OnInit {
|
||||||
plantForm!: FormGroup;
|
plantForm!: FormGroup;
|
||||||
@Input() buttonLabel!: string;
|
|
||||||
@Input() plantInfos: any;
|
|
||||||
@Input() isAdd : boolean = true;
|
|
||||||
|
|
||||||
constructor(private formBuilder: FormBuilder) {}
|
@Input() plantInfos!: Plant;
|
||||||
|
@Input()buttonLabel!:String;
|
||||||
|
constructor(private fb : FormBuilder, private adminService: AdminService) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.plantForm = this.formBuilder.group(
|
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_quantity, [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]),
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
addPlant(){}
|
addPlant(){}
|
||||||
|
|
||||||
updatePlant(){}
|
updatePlant(){}
|
||||||
|
@ -5,8 +5,8 @@ export class Plant {
|
|||||||
public name: string='',
|
public name: string='',
|
||||||
public price: number =1,
|
public price: number =1,
|
||||||
public quantity: number= 0,
|
public quantity: number= 0,
|
||||||
public inStock: string[]=['disponible', 'patriellement 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
|
||||||
|
@ -1 +1,2 @@
|
|||||||
<p>page-ajouter works!</p>
|
<h1>Ajouter une plante</h1>
|
||||||
|
<app-formulaire [buttonLabel]="'Ajouter une plante'" [isAdd]="true"></app-formulaire>
|
||||||
|
@ -0,0 +1,5 @@
|
|||||||
|
h1{
|
||||||
|
color: rgba(0, 0, 0, 0.658);
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
@ -1,15 +1,61 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import {
|
||||||
|
FormBuilder,
|
||||||
|
FormControl,
|
||||||
|
FormGroup,
|
||||||
|
Validators,
|
||||||
|
} from '@angular/forms';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormulaireComponent } from '../../components/formulaire/formulaire.component';
|
||||||
|
import { Plant } from '../../models/plant';
|
||||||
|
import { AdminService } from '../../services/admin.service';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-page-ajouter',
|
selector: 'app-page-ajouter',
|
||||||
templateUrl: './page-ajouter.component.html',
|
templateUrl: './page-ajouter.component.html',
|
||||||
styleUrls: ['./page-ajouter.component.scss']
|
styleUrls: ['./page-ajouter.component.scss'],
|
||||||
})
|
})
|
||||||
export class PageAjouterComponent implements OnInit {
|
export class PageAjouterComponent implements OnInit {
|
||||||
|
public plantForm: FormGroup;
|
||||||
|
public isAdd: boolean = false;
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
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[''];
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
console.log("coco",plant);
|
||||||
|
|
||||||
|
this.adminService.addPlant(plant)?.subscribe((resp)=>{
|
||||||
|
})
|
||||||
|
this.router.navigate(['admin']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,3 +27,4 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<button routerLink="../ajouter">Ajouter une plante </button>
|
||||||
|
@ -5,7 +5,7 @@ import { environment } from 'src/environments/environment';
|
|||||||
import { Plant } from '../models/plant';
|
import { Plant } from '../models/plant';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class AdminService {
|
export class AdminService {
|
||||||
public collection$!: Observable<Plant[]>;
|
public collection$!: Observable<Plant[]>;
|
||||||
@ -37,6 +37,9 @@ export class AdminService {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addPlant(plant: Plant): Observable<any> | void {
|
||||||
|
return this.httpClient.post(`${this.apiUrl}`, plant);
|
||||||
|
}
|
||||||
onClickDelete(id: number): Observable<any> {
|
onClickDelete(id: number): Observable<any> {
|
||||||
return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
|
return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
|
||||||
tap(() => this.refreshCollection())
|
tap(() => this.refreshCollection())
|
||||||
|
Loading…
Reference in New Issue
Block a user