Merge pull request #4 from HarmandI/feature/ajouter

Feature/ajouter
This commit is contained in:
HarmandI 2022-03-22 09:52:58 +01:00 committed by GitHub
commit e8c45f87e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 180 additions and 126 deletions

View File

@ -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>

View File

@ -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(){}

View File

@ -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

View File

@ -1 +1,2 @@
<p>page-ajouter works!</p> <h1>Ajouter une plante</h1>
<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

@ -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']);
}
} }

View File

@ -27,3 +27,4 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<button routerLink="../ajouter">Ajouter une plante </button>

View File

@ -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())