diff --git a/src/app/modules/admin/admin-routing.module.ts b/src/app/modules/admin/admin-routing.module.ts index e7225ab..ac27963 100644 --- a/src/app/modules/admin/admin-routing.module.ts +++ b/src/app/modules/admin/admin-routing.module.ts @@ -6,7 +6,7 @@ import { PageTableauComponent } from './pages/page-tableau/page-tableau.componen const routes: Routes = [ { path: '', redirectTo: 'tableau', pathMatch: 'full'}, - { path: 'modifier', component: PageModifierComponent }, + { path: 'modifier/:id', component: PageModifierComponent }, { path: 'ajouter', component: PageAjouterComponent }, { path: 'tableau', component: PageTableauComponent }, ]; diff --git a/src/app/modules/admin/components/formulaire/formulaire.component.html b/src/app/modules/admin/components/formulaire/formulaire.component.html index 0b8b45e..45bc618 100644 --- a/src/app/modules/admin/components/formulaire/formulaire.component.html +++ b/src/app/modules/admin/components/formulaire/formulaire.component.html @@ -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> diff --git a/src/app/modules/admin/components/formulaire/formulaire.component.scss b/src/app/modules/admin/components/formulaire/formulaire.component.scss index e69de29..1b527e6 100644 --- a/src/app/modules/admin/components/formulaire/formulaire.component.scss +++ b/src/app/modules/admin/components/formulaire/formulaire.component.scss @@ -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; +} diff --git a/src/app/modules/admin/components/formulaire/formulaire.component.ts b/src/app/modules/admin/components/formulaire/formulaire.component.ts index d3730f6..5457afe 100644 --- a/src/app/modules/admin/components/formulaire/formulaire.component.ts +++ b/src/app/modules/admin/components/formulaire/formulaire.component.ts @@ -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(){} } diff --git a/src/app/modules/admin/models/plant.ts b/src/app/modules/admin/models/plant.ts index 04890b5..ba4acd6 100644 --- a/src/app/modules/admin/models/plant.ts +++ b/src/app/modules/admin/models/plant.ts @@ -5,7 +5,7 @@ export class Plant { public name: string='', public price: number =1, public quantity: number= 0, - public inStock: boolean= true, + public inStock: string[]=['disponible', 'patriellement disponible', 'non disponible'], public category:Category, public urlPicture: string = "https//picsum.photos/id/18/200/300", public rating: number = 0, diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.html b/src/app/modules/admin/pages/page-modifier/page-modifier.component.html index 1c0ec6f..de5769d 100644 --- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.html +++ b/src/app/modules/admin/pages/page-modifier/page-modifier.component.html @@ -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> diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss b/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss index e69de29..8a0fa8b 100644 --- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss +++ b/src/app/modules/admin/pages/page-modifier/page-modifier.component.scss @@ -0,0 +1,5 @@ +h1{ + color: rgba(0, 0, 0, 0.658); + font-size: 28px; + margin-top: 20px; +} diff --git a/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts b/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts index 70691bc..0f439fb 100644 --- a/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts +++ b/src/app/modules/admin/pages/page-modifier/page-modifier.component.ts @@ -1,4 +1,8 @@ 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({ selector: 'app-page-modifier', @@ -6,10 +10,72 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./page-modifier.component.scss'] }) 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 { + /** 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']); + }); } } diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html index 5cdaa12..3509686 100644 --- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html +++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html @@ -20,9 +20,9 @@ <td>{{products.price}}</td> <td>{{products.quantity}}</td> <td>{{products.inStock}}</td> - <!-- <td>{{products.Catégorie.}}</td> --> + <td>{{products.category}}</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> </tr> </tbody> diff --git a/src/app/modules/admin/services/admin.service.ts b/src/app/modules/admin/services/admin.service.ts index c4d1aa5..5e70439 100644 --- a/src/app/modules/admin/services/admin.service.ts +++ b/src/app/modules/admin/services/admin.service.ts @@ -45,4 +45,13 @@ export class AdminService { // getData(): Observable<any[]> { // 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); + } }