isa44.74
/
Admin-La-Belle-Plante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/ajouter

This commit is contained in:
HarmandI 2022-03-22 09:52:51 +01:00 committed by GitHub
parent f2279bc977 26c96850ca
commit 5e8d6c3532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 269 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/modules/admin/admin-routing.module.ts
View File

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

203
src/app/modules/admin/components/formulaire/formulaire.component.html
View File

@ -1,101 +1,104 @@
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm"> <div class="form-plant">
<div class="form-floating"> <form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
<input <div class="form-floating">
type="text" <input
class="form-control" type="text"
id="floatingInputName" class="form-control"
placeholder="" id="floatingInputName"
name="name" placeholder=""
formControlName="nameFc" name="name"
[ngClass]="{ formControlName="nameFc"
'is-valid': plantForm.controls['nameFc'].valid, [ngClass]="{
'is-invalid': !plantForm.controls['nameFc'].valid 'is-valid': 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': !plantForm.controls['priceFc'].valid
/> }"
<label for="floatingInputPrice">Prix</label> />
</div> <label for="floatingInputPrice">Prix</label>
<div class="form-floating"> </div>
<input <div class="form-floating">
type="number" <input
class="form-control" type="number"
id="floatingInputQuantity" class="form-control"
placeholder="" id="floatingInputQuantity"
name="quantity" placeholder=""
formControlName="quantityFc" name="quantity"
[ngClass]="{ formControlName="quantityFc"
'is-valid': plantForm.controls['quantityFc'].valid, [ngClass]="{
'is-invalid': !plantForm.controls['quantityFc'].valid 'is-valid': plantForm.controls['quantityFc'].valid,
}" 'is-invalid': !plantForm.controls['quantityFc'].valid
/> }"
<label for="floatingInputQuantity">Quantité</label> />
</div> <label for="floatingInputQuantity">Quantité</label>
<div class="form-floating select"> </div>
<select <div class="form-floating select">
class="form-control" <select
id="floatingInputCategory" class="form-control"
placeholder="" id="floatingInputCategory"
name="category" placeholder=""
formControlName="categoryFc" name="category"
> formControlName="categoryFc"
<option value="plantes fleuries">Plantes fleuries</option> >
<option value="orchides">Orchidées</option> <option value="plantes fleuries">Plantes fleuries</option>
<option value="cactus et plantes grasses">Cactus et plantes grasses</option> <option value="orchides">Orchidées</option>
<option value="bonsas">Bonsas</option> <option value="cactus et plantes grasses">Cactus et plantes grasses</option>
<option value="plantes vertes">Plantes vertes</option> <option value="bonsas">Bonsas</option>
<option value="palmier dintrieur">Palmier d'intérieur</option> <option value="plantes vertes">Plantes vertes</option>
</select> <option value="palmier dintrieur">Palmier d'intérieur</option>
<label value="category">Sélectionnez catégorie</label> </select>
</div> <label value="category">Sélectionnez catégorie</label>
<div class="form-floating"> </div>
<input <div class="form-floating">
type="number" <input
class="form-control" type="number"
id="floatingRating" class="form-control"
placeholder="" id="floatingRating"
name="rating" placeholder=""
formControlName="ratingFc" name="rating"
[ngClass]="{ formControlName="ratingFc"
'is-valid': plantForm.controls['ratingFc'].valid, [ngClass]="{
'is-invalid': !plantForm.controls['ratingFc'].valid 'is-valid': plantForm.controls['ratingFc'].valid,
}" 'is-invalid': !plantForm.controls['ratingFc'].valid
/> }"
<label for="floatingRating">Note</label> />
</div> <label for="floatingRating">Note</label>
<div class="form-floating select"> </div>
<select <div class="form-floating select">
class="form-control" <select
id="floatingInputInStock" class="form-control"
placeholder="" id="floatingInputInStock"
name="inStock" placeholder=""
formControlName="inStockFc" name="inStock"
> formControlName="inStockFc"
<option value="disponible">Disponible</option> >
<option value="partiellement disponible">Partiellement disponible</option> <option value="disponible">Disponible</option>
<option value="non disponible">Non disponible</option> <option value="partiellement disponible">Partiellement disponible</option>
</select> <option value="non disponible">Non disponible</option>
<label value="disponible">Sélectionnez disponibilité</label> </select>
</div> <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>
<button
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="plantForm.invalid"
>
{{ buttonLabel }}
</button>
</form>

75
src/app/modules/admin/components/formulaire/formulaire.component.scss
View File

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

8
src/app/modules/admin/components/formulaire/formulaire.component.ts
View File

@ -10,8 +10,8 @@ import { AdminService } from '../../services/admin.service';
}) })
export class FormulaireComponent implements OnInit { export class FormulaireComponent implements OnInit {
plantForm!: FormGroup; plantForm!: FormGroup;
@Input() plantInfos!: Plant; @Input() plantInfos!: Plant;
@Input() isAdd : boolean = true;
@Input()buttonLabel!:String; @Input()buttonLabel!:String;
constructor(private fb : FormBuilder, private adminService: AdminService) { constructor(private fb : FormBuilder, private adminService: AdminService) {
@ -28,6 +28,10 @@ export class FormulaireComponent implements OnInit {
}); });
} }
onSubmit(){}
addPlant(){}
updatePlant(){}
} }

3
src/app/modules/admin/pages/page-modifier/page-modifier.component.html
View File

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

5
src/app/modules/admin/pages/page-modifier/page-modifier.component.scss
View File

@ -0,0 +1,5 @@
h1{
color: rgba(0, 0, 0, 0.658);
font-size: 28px;
margin-top: 20px;
}

68
src/app/modules/admin/pages/page-modifier/page-modifier.component.ts
View File

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

2
src/app/modules/admin/pages/page-tableau/page-tableau.component.html
View File

@ -22,7 +22,7 @@
<td>{{products.inStock}}</td> <td>{{products.inStock}}</td>
<td>{{products.category}}</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>

9
src/app/modules/admin/services/admin.service.ts
View File

@ -48,4 +48,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);
}
} }