Compare commits
No commits in common. "main" and "ajout-subject" have entirely different histories.
main
...
ajout-subj
@ -21,7 +21,6 @@
|
||||
<a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
|
||||
<a class="nav-link disabled" *ngIf="likeCounter == 1">Plante likée : {{ likeCounter }}</a>
|
||||
<a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ likeCounter }}</a>
|
||||
<a routerLink="admin" routerLinkActive="active-custom" class="nav-link">Page administrateur</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@ import { PageTableauComponent } from './pages/page-tableau/page-tableau.componen
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'tableau', pathMatch: 'full'},
|
||||
{ path: 'modifier/:id', component: PageModifierComponent },
|
||||
{ path: 'modifier', component: PageModifierComponent },
|
||||
{ path: 'ajouter', component: PageAjouterComponent },
|
||||
{ path: 'tableau', component: PageTableauComponent },
|
||||
];
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div class="form-plant">
|
||||
<form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
|
||||
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
@ -9,8 +8,12 @@
|
||||
name="name"
|
||||
formControlName="nameFc"
|
||||
[ngClass]="{
|
||||
'is-valid': plantForm.controls['nameFc'].valid,
|
||||
'is-invalid': !plantForm.controls['nameFc'].valid
|
||||
'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>
|
||||
@ -24,8 +27,12 @@
|
||||
name="price"
|
||||
formControlName="priceFc"
|
||||
[ngClass]="{
|
||||
'is-valid': plantForm.controls['priceFc'].valid,
|
||||
'is-invalid': !plantForm.controls['priceFc'].valid
|
||||
'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>
|
||||
@ -39,28 +46,34 @@
|
||||
name="quantity"
|
||||
formControlName="quantityFc"
|
||||
[ngClass]="{
|
||||
'is-valid': plantForm.controls['quantityFc'].valid,
|
||||
'is-invalid': !plantForm.controls['quantityFc'].valid
|
||||
'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 select">
|
||||
<select
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="floatingInputCategory"
|
||||
id="floatingCategory"
|
||||
placeholder=""
|
||||
name="category"
|
||||
formControlName="categoryFc"
|
||||
>
|
||||
<option value="plantes fleuries">Plantes fleuries</option>
|
||||
<option value="orchides">Orchidées</option>
|
||||
<option value="cactus et plantes grasses">Cactus et plantes grasses</option>
|
||||
<option value="bonsas">Bonsas</option>
|
||||
<option value="plantes vertes">Plantes vertes</option>
|
||||
<option value="palmier dintrieur">Palmier d'intérieur</option>
|
||||
</select>
|
||||
<label value="category">Sélectionnez catégorie</label>
|
||||
[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
|
||||
@ -71,8 +84,12 @@
|
||||
name="rating"
|
||||
formControlName="ratingFc"
|
||||
[ngClass]="{
|
||||
'is-valid': plantForm.controls['ratingFc'].valid,
|
||||
'is-invalid': !plantForm.controls['ratingFc'].valid
|
||||
'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>
|
||||
@ -97,8 +114,13 @@
|
||||
type="submit"
|
||||
[disabled]="plantForm.invalid"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
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>
|
||||
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
.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: #306340;
|
||||
border-color: #306340;
|
||||
}
|
||||
|
||||
.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: #306340 !important;
|
||||
border-color: #306340 !important;
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Plant } from '../../models/plant';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-formulaire',
|
||||
@ -9,28 +8,10 @@ import { Plant } from '../../models/plant';
|
||||
})
|
||||
export class FormulaireComponent implements OnInit {
|
||||
plantForm!: FormGroup;
|
||||
@Input()buttonLabel!:String;
|
||||
@Input() plantInfos!: any;
|
||||
@Output() submitted = new EventEmitter();
|
||||
|
||||
constructor(private fb : FormBuilder) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log(this.plantInfos);
|
||||
this.plantForm = this.fb.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_qty, [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]),
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(){
|
||||
this.submitted.emit(this.plantForm.value)
|
||||
}
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
onSubmit(){}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { Category } from "./category";
|
||||
|
||||
export class Plant {
|
||||
constructor(
|
||||
public name: string='',
|
||||
public price: number =1,
|
||||
public quantity: number= 0,
|
||||
public inStock: string[]=['disponible','partiellement disponible', 'non disponible'],
|
||||
public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
|
||||
public instock: boolean= true,
|
||||
public category:Category,
|
||||
public urlPicture: string = "https//picsum.photos/id/18/200/300",
|
||||
public rating: number = 0,
|
||||
public id: string = ''
|
||||
public id?: number
|
||||
){}
|
||||
}
|
||||
|
||||
@ -1,2 +1 @@
|
||||
<h1>Ajouter une plante</h1>
|
||||
<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>
|
||||
<p>page-ajouter works!</p>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
h1{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: rgba(0, 0, 0, 0.658);
|
||||
font-size: 28px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -1,67 +1,15 @@
|
||||
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({
|
||||
selector: 'app-page-ajouter',
|
||||
templateUrl: './page-ajouter.component.html',
|
||||
styleUrls: ['./page-ajouter.component.scss'],
|
||||
styleUrls: ['./page-ajouter.component.scss']
|
||||
})
|
||||
export class PageAjouterComponent implements OnInit {
|
||||
public newplant = new Plant();
|
||||
|
||||
|
||||
constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
|
||||
|
||||
}
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
public addPlant(plant: any): void {
|
||||
const nameValue = plant.nameFc;
|
||||
const priceValue = plant.priceFc;
|
||||
const ratingValue = plant.ratingFc;
|
||||
const quantityValue = plant.quantityFc;
|
||||
const categoryValue = plant.categoryFc;
|
||||
const inStockValue = plant.inStockFc;
|
||||
|
||||
const plante: any = {
|
||||
product_name: nameValue,
|
||||
product_price: priceValue,
|
||||
product_qty: quantityValue,
|
||||
product_rating: ratingValue,
|
||||
product_breadcrumb_label: categoryValue,
|
||||
product_instock: [inStockValue],
|
||||
product_url_picture : "https//picsum.photos/id/18/200/300",
|
||||
product_discount_code : "",
|
||||
product_color: "",
|
||||
product_unitprice_ati: "",
|
||||
product_unitprice_tf: "",
|
||||
product_discount_tf: "",
|
||||
product_discount_ati: "",
|
||||
product_url_page: "",
|
||||
product_shipping_method: null,
|
||||
product_image_source: "",
|
||||
product_seller: "market place",
|
||||
product_web_only: "non"
|
||||
};
|
||||
|
||||
this.adminService.addPlant(plante)?.subscribe((resp)=>{
|
||||
this.router.navigate(['admin']);
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1 @@
|
||||
<h1>Modifier la plante</h1>
|
||||
<app-formulaire *ngIf="editPlant" [plantInfos]="editPlant" (submitted)="update($event)" [buttonLabel]="'Modifier la plante'"></app-formulaire>
|
||||
|
||||
<p>page-modifier works!</p>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
h1{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: rgba(0, 0, 0, 0.658);
|
||||
font-size: 28px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder,FormGroup} from '@angular/forms';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
import { Plant } from '../../models/plant';
|
||||
import { AdminService } from '../../services/admin.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-modifier',
|
||||
@ -10,73 +6,10 @@ import { AdminService } from '../../services/admin.service';
|
||||
styleUrls: ['./page-modifier.component.scss']
|
||||
})
|
||||
export class PageModifierComponent implements OnInit {
|
||||
editPlant!: Plant;
|
||||
plantId!: string;
|
||||
|
||||
|
||||
|
||||
constructor(private adminService: AdminService,
|
||||
private router: Router,
|
||||
private fb: FormBuilder,
|
||||
private route: ActivatedRoute) {
|
||||
}
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
/** Pour récuperer l'id de la plante à modifier et appel Api**/
|
||||
this.route.paramMap.subscribe((params : ParamMap) => {
|
||||
const id = params.get('id')
|
||||
if( id != null){
|
||||
this.plantId = id;
|
||||
//console.log(this.plantId);
|
||||
|
||||
this.adminService
|
||||
.getPlantById(this.plantId)
|
||||
.subscribe((plantData: any) => {
|
||||
this.editPlant = plantData;
|
||||
//console.log(this.editPlant);
|
||||
//console.log(this.editPlant.name);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** Méthode qui envoie les champs modifiés pour mise à jour **/
|
||||
public update(plant: any): void {
|
||||
//console.log(plant);
|
||||
const nameValue = plant.nameFc;
|
||||
const priceValue = plant.priceFc;
|
||||
const ratingValue = plant.ratingFc;
|
||||
const quantityValue = plant.quantityFc;
|
||||
const categoryValue = plant.categoryFc;
|
||||
const inStockValue = plant.inStockFc;
|
||||
|
||||
const plante: any = {
|
||||
id: this.plantId,
|
||||
product_name: nameValue,
|
||||
product_price: priceValue,
|
||||
product_qty: quantityValue,
|
||||
product_rating: ratingValue,
|
||||
product_breadcrumb_label: categoryValue,
|
||||
product_instock: [inStockValue],
|
||||
product_url_picture : "https//picsum.photos/id/18/200/300",
|
||||
product_discount_code : "",
|
||||
product_color: "",
|
||||
product_unitprice_ati: "",
|
||||
product_unitprice_tf: "",
|
||||
product_discount_tf: "",
|
||||
product_discount_ati: "",
|
||||
product_url_page: "",
|
||||
product_shipping_method: null,
|
||||
product_image_source: "",
|
||||
product_seller: "market place",
|
||||
product_web_only: "non"
|
||||
};
|
||||
this.adminService.updatePlant(plante)?.subscribe((resp) => {
|
||||
this.router.navigate(['admin']);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<div id="container">
|
||||
<div id="button">
|
||||
<button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
|
||||
</div>
|
||||
<table class="table" *ngIf="subCollection$ | async as collection">
|
||||
<thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">Id</th>
|
||||
<th scope="col">Nom</th>
|
||||
@ -19,17 +15,15 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let products of collection">
|
||||
<td>{{products.id}}</td>
|
||||
<th scope="row">{{products.id}}</th>
|
||||
<td>{{products.name}}</td>
|
||||
<td>{{products.price}}</td>
|
||||
<td>{{products.quantity}}</td>
|
||||
<td>{{products.inStock}}</td>
|
||||
<td>{{products.category}}</td>
|
||||
<td>{{products.instock}}</td>
|
||||
<!-- <td>{{products.Catégorie.}}</td> -->
|
||||
<td>{{products.rating}}</td>
|
||||
<td><a class="bi-pencil-square" style="color: #5472b1;" routerLink="../modifier/{{products.id}}"></a></td>
|
||||
<td class="bi-trash-fill" style="color: rgb(231, 73, 73); cursor: pointer;" (click)="onClickDelete(products.id)"></td>
|
||||
<td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
|
||||
<td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(5)"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
#container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
table{
|
||||
width: 75%;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
button{
|
||||
background-color: #306340;
|
||||
color: #f3f7f4 !important;
|
||||
border-color: #306340 !important;
|
||||
}
|
||||
#button{
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
|
||||
@ -28,10 +28,8 @@ export class PageTableauComponent implements OnInit {
|
||||
// })
|
||||
}
|
||||
|
||||
onClickDelete(id: string){
|
||||
this.adminService.onClickDelete(id).subscribe((resp) => {
|
||||
console.log("Suppression successful : ", resp);
|
||||
});
|
||||
onClickDelete(id: number){
|
||||
console.log(id);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { map, Observable, Subject, tap } from 'rxjs';
|
||||
import { map, Observable, Subject } from 'rxjs';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { Plant } from '../models/plant';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AdminService {
|
||||
public collection$!: Observable<Plant[]>;
|
||||
@ -21,7 +21,7 @@ export class AdminService {
|
||||
//console.log("avant mapping: ", tabObj);
|
||||
// Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
|
||||
return tabObj.map((obj: any) => {
|
||||
return new Plant(obj.product_name, obj.product_price,obj.product_qty,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
|
||||
return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
|
||||
})
|
||||
}));
|
||||
//this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
|
||||
@ -31,29 +31,13 @@ export class AdminService {
|
||||
public refreshCollection(): void {
|
||||
// On se sert de notre flux de donnée type observable froid
|
||||
this.collection$.subscribe((listPlant: Plant[]) => {
|
||||
this.plantCollection = [...listPlant];
|
||||
// Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
|
||||
this.subCollection$.next(listPlant);
|
||||
})
|
||||
}
|
||||
|
||||
addPlant(plant: Plant): Observable<any> | void {
|
||||
return this.httpClient.post(`${this.apiUrl}/list_products`, plant);
|
||||
}
|
||||
onClickDelete(id: string): Observable<any> {
|
||||
return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
|
||||
tap(() => this.refreshCollection())
|
||||
);
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user