cette branche vient remplacer feature/modifier qui est corrompue
This commit is contained in:
Sana EL HIRI
parent
2d808feb25
commit
d9800d3ae5
10 changed files with 293 additions and 137 deletions
|
|
@ -1,126 +1,108 @@
|
|||
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputName"
|
||||
placeholder=""
|
||||
name="name"
|
||||
formControlName="nameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['nameFc'].touched &&
|
||||
plantForm.controls['nameFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['nameFc'].touched &&
|
||||
!plantForm.controls['nameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputName">Nom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputPrice"
|
||||
placeholder=""
|
||||
name="price"
|
||||
formControlName="priceFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['priceFc'].touched &&
|
||||
plantForm.controls['priceFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['priceFc'].touched &&
|
||||
!plantForm.controls['priceFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputPrice">Prix</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="floatingInputQuantity"
|
||||
placeholder=""
|
||||
name="quantity"
|
||||
formControlName="quantityFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['quantityFc'].touched &&
|
||||
plantForm.controls['quantityFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['quantityFc'].touched &&
|
||||
!plantForm.controls['quantityFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputQuantity">Quantité</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingCategory"
|
||||
placeholder=""
|
||||
name="category"
|
||||
formControlName="categoryFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['categoryFc'].touched &&
|
||||
plantForm.controls['categoryFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['categoryFc'].touched &&
|
||||
!plantForm.controls['categoryFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputCategory">Catégorie</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
id="floatingRating"
|
||||
placeholder=""
|
||||
name="rating"
|
||||
formControlName="ratingFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['ratingFc'].touched &&
|
||||
plantForm.controls['ratingFc'].valid,
|
||||
'is-invalid':
|
||||
plantForm.controls['ratingFc'].touched &&
|
||||
!plantForm.controls['ratingFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingRating">Note</label>
|
||||
</div>
|
||||
<div class="form-floating select">
|
||||
<select
|
||||
class="form-control"
|
||||
id="floatingInputInStock"
|
||||
placeholder=""
|
||||
name="inStock"
|
||||
formControlName="inStockFc"
|
||||
>
|
||||
<option value="disponible">Disponible</option>
|
||||
<option value="partiellement disponible">Partiellement disponible</option>
|
||||
<option value="non disponible">Non disponible</option>
|
||||
</select>
|
||||
<label value="disponible">Sélectionnez disponibilité</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>
|
||||
Créer une plante
|
||||
</button>
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>
|
||||
Modifier une plante
|
||||
</button>
|
||||
</form>
|
||||
<div class="form-plant">
|
||||
<form (ngSubmit)="isAdd? addPlant() : updatePlant()" [formGroup]="plantForm">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputName"
|
||||
placeholder=""
|
||||
name="name"
|
||||
formControlName="nameFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['nameFc'].valid,
|
||||
'is-invalid':
|
||||
!plantForm.controls['nameFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputName">Nom</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputPrice"
|
||||
placeholder=""
|
||||
name="price"
|
||||
formControlName="priceFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['priceFc'].valid,
|
||||
'is-invalid':
|
||||
!plantForm.controls['priceFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputPrice">Prix</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputQuantity"
|
||||
placeholder=""
|
||||
name="quantity"
|
||||
formControlName="quantityFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['quantityFc'].valid,
|
||||
'is-invalid':
|
||||
!plantForm.controls['quantityFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputQuantity">Quantité</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingCategory"
|
||||
placeholder=""
|
||||
name="category"
|
||||
formControlName="categoryFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['categoryFc'].valid,
|
||||
'is-invalid':
|
||||
!plantForm.controls['categoryFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingInputCategory">Catégorie</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingRating"
|
||||
placeholder=""
|
||||
name="rating"
|
||||
formControlName="ratingFc"
|
||||
[ngClass]="{
|
||||
'is-valid':
|
||||
plantForm.controls['ratingFc'].valid,
|
||||
'is-invalid':
|
||||
!plantForm.controls['ratingFc'].valid
|
||||
}"
|
||||
/>
|
||||
<label for="floatingRating">Note</label>
|
||||
</div>
|
||||
<div class="form-floating select">
|
||||
<select
|
||||
class="form-control"
|
||||
id="floatingInputInStock"
|
||||
placeholder=""
|
||||
name="inStock"
|
||||
formControlName="inStockFc"
|
||||
>
|
||||
<option value="disponible">Disponible</option>
|
||||
<option value="partiellement disponible">Partiellement disponible</option>
|
||||
<option value="non disponible">Non disponible</option>
|
||||
</select>
|
||||
<label value="disponible">Sélectionnez disponibilité</label>
|
||||
</div>
|
||||
<button
|
||||
class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>{{buttonLabel}}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
.login-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-plant {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: solid 1px;
|
||||
border-radius: 10px;
|
||||
background-color: #64c982;
|
||||
border-color: #64c982;
|
||||
}
|
||||
|
||||
.form-plant .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-plant .form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-plant input[type="email"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-plant input[type="color"] {
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -70px;
|
||||
margin-left: 100px;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.form-plant input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
margin-top: -15px;
|
||||
border-radius: 80%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.form-plant input[type="text"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-plant input[type="date"] {
|
||||
margin-bottom: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-plant input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
margin-top: 10px;
|
||||
background-color: #ffff;
|
||||
color: #64c982 !important;
|
||||
border-color: #64c982 !important;
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { Component, Input, OnInit } 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',
|
||||
|
|
@ -8,10 +10,26 @@ import { FormGroup } from '@angular/forms';
|
|||
})
|
||||
export class FormulaireComponent implements OnInit {
|
||||
plantForm!: FormGroup;
|
||||
constructor() {}
|
||||
@Input() buttonLabel!: string;
|
||||
@Input() plantInfos: any;
|
||||
@Input() isAdd : boolean = true;
|
||||
|
||||
ngOnInit(): void {}
|
||||
constructor(private formBuilder: FormBuilder) {}
|
||||
|
||||
onSubmit(){}
|
||||
ngOnInit(): void {
|
||||
this.plantForm = this.formBuilder.group(
|
||||
{
|
||||
nameFc: new FormControl(this.plantInfos.product_name, [Validators.required]),
|
||||
priceFc: new FormControl(this.plantInfos.product_price, [Validators.required]),
|
||||
quantityFc: new FormControl(this.plantInfos.product_quantity, [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]),
|
||||
});
|
||||
}
|
||||
|
||||
addPlant(){}
|
||||
|
||||
updatePlant(){}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue