Merge pull request #2 from HarmandI/feature/modifier-plante
Feature/modifier plante
This commit is contained in:
commit
2ba13fa864
@ -6,7 +6,7 @@ import { PageTableauComponent } from './pages/page-tableau/page-tableau.componen
|
|||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: '', redirectTo: 'tableau', pathMatch: 'full'},
|
{ path: '', redirectTo: 'tableau', pathMatch: 'full'},
|
||||||
{ path: 'modifier', component: PageModifierComponent },
|
{ path: 'modifier/:id', component: PageModifierComponent },
|
||||||
{ path: 'ajouter', component: PageAjouterComponent },
|
{ path: 'ajouter', component: PageAjouterComponent },
|
||||||
{ path: 'tableau', component: PageTableauComponent },
|
{ path: 'tableau', component: PageTableauComponent },
|
||||||
];
|
];
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
<div class="form-plant">
|
||||||
|
<form (ngSubmit)="isAdd? addPlant() : updatePlant()" [formGroup]="plantForm">
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -9,10 +10,8 @@
|
|||||||
formControlName="nameFc"
|
formControlName="nameFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid':
|
||||||
plantForm.controls['nameFc'].touched &&
|
|
||||||
plantForm.controls['nameFc'].valid,
|
plantForm.controls['nameFc'].valid,
|
||||||
'is-invalid':
|
'is-invalid':
|
||||||
plantForm.controls['nameFc'].touched &&
|
|
||||||
!plantForm.controls['nameFc'].valid
|
!plantForm.controls['nameFc'].valid
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
@ -28,10 +27,8 @@
|
|||||||
formControlName="priceFc"
|
formControlName="priceFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid':
|
||||||
plantForm.controls['priceFc'].touched &&
|
|
||||||
plantForm.controls['priceFc'].valid,
|
plantForm.controls['priceFc'].valid,
|
||||||
'is-invalid':
|
'is-invalid':
|
||||||
plantForm.controls['priceFc'].touched &&
|
|
||||||
!plantForm.controls['priceFc'].valid
|
!plantForm.controls['priceFc'].valid
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
@ -39,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="floatingInputQuantity"
|
id="floatingInputQuantity"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
@ -47,10 +44,8 @@
|
|||||||
formControlName="quantityFc"
|
formControlName="quantityFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid':
|
||||||
plantForm.controls['quantityFc'].touched &&
|
|
||||||
plantForm.controls['quantityFc'].valid,
|
plantForm.controls['quantityFc'].valid,
|
||||||
'is-invalid':
|
'is-invalid':
|
||||||
plantForm.controls['quantityFc'].touched &&
|
|
||||||
!plantForm.controls['quantityFc'].valid
|
!plantForm.controls['quantityFc'].valid
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
@ -66,10 +61,8 @@
|
|||||||
formControlName="categoryFc"
|
formControlName="categoryFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid':
|
||||||
plantForm.controls['categoryFc'].touched &&
|
|
||||||
plantForm.controls['categoryFc'].valid,
|
plantForm.controls['categoryFc'].valid,
|
||||||
'is-invalid':
|
'is-invalid':
|
||||||
plantForm.controls['categoryFc'].touched &&
|
|
||||||
!plantForm.controls['categoryFc'].valid
|
!plantForm.controls['categoryFc'].valid
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
@ -77,7 +70,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="text"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="floatingRating"
|
id="floatingRating"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
@ -85,10 +78,8 @@
|
|||||||
formControlName="ratingFc"
|
formControlName="ratingFc"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'is-valid':
|
'is-valid':
|
||||||
plantForm.controls['ratingFc'].touched &&
|
|
||||||
plantForm.controls['ratingFc'].valid,
|
plantForm.controls['ratingFc'].valid,
|
||||||
'is-invalid':
|
'is-invalid':
|
||||||
plantForm.controls['ratingFc'].touched &&
|
|
||||||
!plantForm.controls['ratingFc'].valid
|
!plantForm.controls['ratingFc'].valid
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
@ -108,19 +99,10 @@
|
|||||||
</select>
|
</select>
|
||||||
<label value="disponible">Sélectionnez disponibilité</label>
|
<label value="disponible">Sélectionnez disponibilité</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="w-100 btn btn-lg btn-outline-success"
|
class="w-100 btn btn-lg btn-outline-success"
|
||||||
type="submit"
|
type="submit"
|
||||||
[disabled]="plantForm.invalid"
|
[disabled]="plantForm.invalid"
|
||||||
>
|
>{{buttonLabel}}</button>
|
||||||
Créer une plante
|
</form>
|
||||||
</button>
|
</div>
|
||||||
<button
|
|
||||||
class="w-100 btn btn-lg btn-outline-success"
|
|
||||||
type="submit"
|
|
||||||
[disabled]="plantForm.invalid"
|
|
||||||
>
|
|
||||||
Modifier une plante
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
@ -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 { Component, Input, OnInit } from '@angular/core';
|
||||||
import { 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,10 +10,26 @@ import { FormGroup } from '@angular/forms';
|
|||||||
})
|
})
|
||||||
export class FormulaireComponent implements OnInit {
|
export class FormulaireComponent implements OnInit {
|
||||||
plantForm!: FormGroup;
|
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(){}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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', 'patriellement 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-modifier works!</p>
|
<h1>Modifier la plante</h1>
|
||||||
|
<app-formulaire *ngIf="plantInfos" [buttonLabel]="'Modifier la plante'" [isAdd]= "false"></app-formulaire>
|
||||||
|
@ -0,0 +1,5 @@
|
|||||||
|
h1{
|
||||||
|
color: rgba(0, 0, 0, 0.658);
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
@ -1,4 +1,8 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { Plant } from '../../models/plant';
|
||||||
|
import { AdminService } from '../../services/admin.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-page-modifier',
|
selector: 'app-page-modifier',
|
||||||
@ -6,10 +10,72 @@ import { Component, OnInit } from '@angular/core';
|
|||||||
styleUrls: ['./page-modifier.component.scss']
|
styleUrls: ['./page-modifier.component.scss']
|
||||||
})
|
})
|
||||||
export class PageModifierComponent implements OnInit {
|
export class PageModifierComponent implements OnInit {
|
||||||
|
plantForm: FormGroup;
|
||||||
|
updatePlantForm: FormGroup;
|
||||||
|
plantInfos: any;
|
||||||
|
plantId: any;
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
|
constructor(private adminService: AdminService,
|
||||||
|
private router: Router,
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private route: ActivatedRoute) {
|
||||||
|
this.updatePlantForm = new FormGroup({});
|
||||||
|
this.plantForm = this.initForm();
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
/** Pour récuperer l'id de la plante à modifier **/
|
||||||
|
this.plantId = this.route.snapshot.paramMap.get('id');
|
||||||
|
|
||||||
|
/** Appel Api **/
|
||||||
|
this.adminService
|
||||||
|
.getPlantById(this.plantId)
|
||||||
|
.subscribe((plantInfos: any) => {
|
||||||
|
this.plantInfos = plantInfos;
|
||||||
|
console.log(this.plantInfos);
|
||||||
|
console.log(this.plantInfos.product_name);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Méthode qui initialise les champs du formulaire avec les infos du db Json **/
|
||||||
|
private initForm(plant?: Plant): FormGroup {
|
||||||
|
|
||||||
|
return this.fb.group({
|
||||||
|
nom:[plant ? plant.name : ''],
|
||||||
|
price: [plant ? plant.price : ''],
|
||||||
|
quantity: [plant ? plant.quantity : ''],
|
||||||
|
category: [plant ? plant.category : ''],
|
||||||
|
rating: [plant ? plant.rating : ''],
|
||||||
|
inStock: [plant ? plant.inStock : ['']],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** Méthode qui envoie les champs modifiés pour mise à jour **/
|
||||||
|
public onSubmit(): void {
|
||||||
|
const nameValue = this.updatePlantForm.value['nameFc'];
|
||||||
|
const priceValue = this.updatePlantForm.value['priceFc'];
|
||||||
|
const ratingValue = this.updatePlantForm.value['ratingFc'];
|
||||||
|
const quantityValue = this.updatePlantForm.value['quantityFc'];
|
||||||
|
const categoryValue = this.updatePlantForm.value['categoryFc'];
|
||||||
|
const inStockValue = this.updatePlantForm.value['inStockFc'];
|
||||||
|
const urlPicture = "https//picsum.photos/id/18/200/300";
|
||||||
|
|
||||||
|
const plant: Plant = {
|
||||||
|
id: this.plantId,
|
||||||
|
name: nameValue,
|
||||||
|
price: priceValue,
|
||||||
|
quantity: quantityValue,
|
||||||
|
rating: ratingValue,
|
||||||
|
category: categoryValue,
|
||||||
|
inStock: [inStockValue],
|
||||||
|
urlPicture
|
||||||
|
};
|
||||||
|
this.adminService.updatePlant(plant)?.subscribe((resp) => {
|
||||||
|
this.router.navigate(['admin']);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -19,10 +19,10 @@
|
|||||||
<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/{{products.id}}"></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>
|
||||||
|
@ -45,4 +45,13 @@ 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`);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
/** Récupérer une plante par son Id **/
|
||||||
|
getPlantById(id: any): Observable<Plant> {
|
||||||
|
return this.httpClient.get<Plant>(`${this.apiUrl}/list_products/${id}`);
|
||||||
|
}
|
||||||
|
/** Modifier Plante **/
|
||||||
|
updatePlant(plant: Plant): Observable<any> {
|
||||||
|
return this.httpClient.put(`${this.apiUrl}/list_products/${plant.id}`, plant);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user