ajouter 1
This commit is contained in:
parent
8b00bb2ba3
commit
1406011efc
@ -8,12 +8,8 @@
|
|||||||
name="name"
|
name="name"
|
||||||
formControlName="nameFc"
|
formControlName="nameFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['nameFc'].valid,
|
||||||
plantForm.controls['nameFc'].touched &&
|
'is-invalid': !plantForm.controls['nameFc'].valid
|
||||||
plantForm.controls['nameFc'].valid,
|
|
||||||
'is-invalid':
|
|
||||||
plantForm.controls['nameFc'].touched &&
|
|
||||||
!plantForm.controls['nameFc'].valid
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<label for="floatingInputName">Nom</label>
|
<label for="floatingInputName">Nom</label>
|
||||||
@ -27,12 +23,8 @@
|
|||||||
name="price"
|
name="price"
|
||||||
formControlName="priceFc"
|
formControlName="priceFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['priceFc'].valid,
|
||||||
plantForm.controls['priceFc'].touched &&
|
'is-invalid': !plantForm.controls['priceFc'].valid
|
||||||
plantForm.controls['priceFc'].valid,
|
|
||||||
'is-invalid':
|
|
||||||
plantForm.controls['priceFc'].touched &&
|
|
||||||
!plantForm.controls['priceFc'].valid
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<label for="floatingInputPrice">Prix</label>
|
<label for="floatingInputPrice">Prix</label>
|
||||||
@ -46,12 +38,8 @@
|
|||||||
name="quantity"
|
name="quantity"
|
||||||
formControlName="quantityFc"
|
formControlName="quantityFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['quantityFc'].valid,
|
||||||
plantForm.controls['quantityFc'].touched &&
|
'is-invalid': !plantForm.controls['quantityFc'].valid
|
||||||
plantForm.controls['quantityFc'].valid,
|
|
||||||
'is-invalid':
|
|
||||||
plantForm.controls['quantityFc'].touched &&
|
|
||||||
!plantForm.controls['quantityFc'].valid
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<label for="floatingInputQuantity">Quantité</label>
|
<label for="floatingInputQuantity">Quantité</label>
|
||||||
@ -65,12 +53,8 @@
|
|||||||
name="category"
|
name="category"
|
||||||
formControlName="categoryFc"
|
formControlName="categoryFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['categoryFc'].valid,
|
||||||
plantForm.controls['categoryFc'].touched &&
|
'is-invalid': !plantForm.controls['categoryFc'].valid
|
||||||
plantForm.controls['categoryFc'].valid,
|
|
||||||
'is-invalid':
|
|
||||||
plantForm.controls['categoryFc'].touched &&
|
|
||||||
!plantForm.controls['categoryFc'].valid
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<label for="floatingInputCategory">Catégorie</label>
|
<label for="floatingInputCategory">Catégorie</label>
|
||||||
@ -84,12 +68,8 @@
|
|||||||
name="rating"
|
name="rating"
|
||||||
formControlName="ratingFc"
|
formControlName="ratingFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid': plantForm.controls['ratingFc'].valid,
|
||||||
plantForm.controls['ratingFc'].touched &&
|
'is-invalid': !plantForm.controls['ratingFc'].valid
|
||||||
plantForm.controls['ratingFc'].valid,
|
|
||||||
'is-invalid':
|
|
||||||
plantForm.controls['ratingFc'].touched &&
|
|
||||||
!plantForm.controls['ratingFc'].valid
|
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<label for="floatingRating">Note</label>
|
<label for="floatingRating">Note</label>
|
||||||
@ -114,13 +94,6 @@
|
|||||||
type="submit"
|
type="submit"
|
||||||
[disabled]="plantForm.invalid"
|
[disabled]="plantForm.invalid"
|
||||||
>
|
>
|
||||||
Créer une plante
|
{{ buttonLabel }}
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="w-100 btn btn-lg btn-outline-success"
|
|
||||||
type="submit"
|
|
||||||
[disabled]="plantForm.invalid"
|
|
||||||
>
|
|
||||||
Modifier une plante
|
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
import { FormGroup } from '@angular/forms';
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-formulaire',
|
selector: 'app-formulaire',
|
||||||
@ -8,7 +8,10 @@ import { FormGroup } from '@angular/forms';
|
|||||||
})
|
})
|
||||||
export class FormulaireComponent implements OnInit {
|
export class FormulaireComponent implements OnInit {
|
||||||
plantForm!: FormGroup;
|
plantForm!: FormGroup;
|
||||||
constructor() {}
|
@Input()buttonLabel!:String;
|
||||||
|
constructor(private fb : FormBuilder) {
|
||||||
|
this.plantForm = this.fb.group({});
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@ 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: boolean= true,
|
public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
|
||||||
public category:Category,
|
public category:Category,
|
||||||
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,
|
||||||
|
@ -1 +1,2 @@
|
|||||||
<p>page-ajouter works!</p>
|
<h2>Ajouter une plante</h2>
|
||||||
|
<app-formulaire [buttonLabel]="'Ajouter une plante'"></app-formulaire>
|
||||||
|
@ -1,15 +1,65 @@
|
|||||||
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;
|
||||||
|
|
||||||
constructor() { }
|
constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
|
||||||
|
this.plantForm = new FormGroup({});
|
||||||
|
}
|
||||||
|
|
||||||
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 {
|
||||||
|
const nameValue = this.plantForm.value['nameFC'];
|
||||||
|
const priceValue = this.plantForm.value['priceFc'];
|
||||||
|
const quantityValue = this.plantForm.value['quantityFc'];
|
||||||
|
const inStockValue = this.plantForm.value['categoryFc'];
|
||||||
|
const categoryValue = this.plantForm.value[''];
|
||||||
|
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(plant);
|
||||||
|
|
||||||
|
this.adminService.addPlant(plant)?.subscribe((resp)=>{
|
||||||
|
})
|
||||||
|
this.router.navigate(['admin']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,3 +27,4 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<button>Ajouter une plante</button>
|
||||||
|
@ -2,9 +2,10 @@ import { HttpClient } from '@angular/common/http';
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { environment } from 'src/environments/environment';
|
import { environment } from 'src/environments/environment';
|
||||||
|
import { Plant } from '../models/plant';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class AdminService {
|
export class AdminService {
|
||||||
apiUrl: string;
|
apiUrl: string;
|
||||||
@ -16,4 +17,8 @@ export class AdminService {
|
|||||||
getData(): Observable<any[]> {
|
getData(): Observable<any[]> {
|
||||||
return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
|
return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addPlant(plant: Plant): Observable<any> | void {
|
||||||
|
return this.httpClient.post(`${this.apiUrl}`, plant);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user