Compare commits
33 Commits
ajout-subj
...
main
Author | SHA1 | Date | |
---|---|---|---|
|
adfd1db2ff | ||
|
d09b147af2 | ||
|
4aced57191 | ||
|
a2ddf52c88 | ||
|
200221dc5c | ||
|
4f5e6cd180 | ||
|
33c431921d | ||
|
bd4468a9d6 | ||
|
983533e4e1 | ||
|
a2cf4f55ed | ||
|
49edb1782d | ||
|
be9e510a94 | ||
|
a99dbc57ab | ||
|
426c359dbf | ||
|
7d8e72e4ac | ||
|
1b5b7f0e3e | ||
|
1b18f648a0 | ||
|
e8c45f87e9 | ||
|
5e8d6c3532 | ||
|
26c96850ca | ||
|
2773b54531 | ||
|
2ba13fa864 | ||
|
19d48cc995 | ||
|
03a825ec76 | ||
|
f2279bc977 | ||
|
d9800d3ae5 | ||
|
4d93763aa5 | ||
|
2d808feb25 | ||
|
04f3b22fd3 | ||
|
1f747c6933 | ||
|
8db3a6cde1 | ||
|
1406011efc | ||
|
1afa24289d |
@ -1,12 +1,12 @@
|
|||||||
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
|
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light shadow ">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">🪴 La Belle Plante</a>
|
<a class="navbar-brand" href="#">🪴 La Belle Plante</a>
|
||||||
<button class="navbar-toggler"
|
<button class="navbar-toggler"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#navbarNavAltMarkup"
|
data-bs-target="#navbarNavAltMarkup"
|
||||||
aria-controls="navbarNavAltMarkup"
|
aria-controls="navbarNavAltMarkup"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-label="Toggle navigation">
|
aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@ -21,6 +21,7 @@
|
|||||||
<a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>
|
<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">Plante likée : {{ likeCounter }}</a>
|
||||||
<a class="nav-link disabled" *ngIf="likeCounter > 1">Plantes likées : {{ 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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,126 +1,104 @@
|
|||||||
<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
|
<div class="form-plant">
|
||||||
<div class="form-floating">
|
<form [formGroup]="plantForm" (ngSubmit)="onSubmit()">
|
||||||
<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':
|
[ngClass]="{
|
||||||
plantForm.controls['nameFc'].touched &&
|
'is-valid': plantForm.controls['nameFc'].valid,
|
||||||
plantForm.controls['nameFc'].valid,
|
'is-invalid': !plantForm.controls['nameFc'].valid
|
||||||
'is-invalid':
|
}"
|
||||||
plantForm.controls['nameFc'].touched &&
|
/>
|
||||||
!plantForm.controls['nameFc'].valid
|
<label for="floatingInputName">Nom</label>
|
||||||
}"
|
</div>
|
||||||
/>
|
<div class="form-floating">
|
||||||
<label for="floatingInputName">Nom</label>
|
<input
|
||||||
</div>
|
type="text"
|
||||||
<div class="form-floating">
|
class="form-control"
|
||||||
<input
|
id="floatingInputPrice"
|
||||||
type="text"
|
placeholder=""
|
||||||
class="form-control"
|
name="price"
|
||||||
id="floatingInputPrice"
|
formControlName="priceFc"
|
||||||
placeholder=""
|
[ngClass]="{
|
||||||
name="price"
|
'is-valid': plantForm.controls['priceFc'].valid,
|
||||||
formControlName="priceFc"
|
'is-invalid': !plantForm.controls['priceFc'].valid
|
||||||
[ngClass]="{
|
}"
|
||||||
'is-valid':
|
/>
|
||||||
plantForm.controls['priceFc'].touched &&
|
<label for="floatingInputPrice">Prix</label>
|
||||||
plantForm.controls['priceFc'].valid,
|
</div>
|
||||||
'is-invalid':
|
<div class="form-floating">
|
||||||
plantForm.controls['priceFc'].touched &&
|
<input
|
||||||
!plantForm.controls['priceFc'].valid
|
type="number"
|
||||||
}"
|
class="form-control"
|
||||||
/>
|
id="floatingInputQuantity"
|
||||||
<label for="floatingInputPrice">Prix</label>
|
placeholder=""
|
||||||
</div>
|
name="quantity"
|
||||||
<div class="form-floating">
|
formControlName="quantityFc"
|
||||||
<input
|
[ngClass]="{
|
||||||
type="number"
|
'is-valid': plantForm.controls['quantityFc'].valid,
|
||||||
class="form-control"
|
'is-invalid': !plantForm.controls['quantityFc'].valid
|
||||||
id="floatingInputQuantity"
|
}"
|
||||||
placeholder=""
|
/>
|
||||||
name="quantity"
|
<label for="floatingInputQuantity">Quantité</label>
|
||||||
formControlName="quantityFc"
|
</div>
|
||||||
[ngClass]="{
|
<div class="form-floating select">
|
||||||
'is-valid':
|
<select
|
||||||
plantForm.controls['quantityFc'].touched &&
|
class="form-control"
|
||||||
plantForm.controls['quantityFc'].valid,
|
id="floatingInputCategory"
|
||||||
'is-invalid':
|
placeholder=""
|
||||||
plantForm.controls['quantityFc'].touched &&
|
name="category"
|
||||||
!plantForm.controls['quantityFc'].valid
|
formControlName="categoryFc"
|
||||||
}"
|
>
|
||||||
/>
|
<option value="plantes fleuries">Plantes fleuries</option>
|
||||||
<label for="floatingInputQuantity">Quantité</label>
|
<option value="orchides">Orchidées</option>
|
||||||
</div>
|
<option value="cactus et plantes grasses">Cactus et plantes grasses</option>
|
||||||
<div class="form-floating">
|
<option value="bonsas">Bonsas</option>
|
||||||
<input
|
<option value="plantes vertes">Plantes vertes</option>
|
||||||
type="text"
|
<option value="palmier dintrieur">Palmier d'intérieur</option>
|
||||||
class="form-control"
|
</select>
|
||||||
id="floatingCategory"
|
<label value="category">Sélectionnez catégorie</label>
|
||||||
placeholder=""
|
</div>
|
||||||
name="category"
|
<div class="form-floating">
|
||||||
formControlName="categoryFc"
|
<input
|
||||||
[ngClass]="{
|
type="number"
|
||||||
'is-valid':
|
class="form-control"
|
||||||
plantForm.controls['categoryFc'].touched &&
|
id="floatingRating"
|
||||||
plantForm.controls['categoryFc'].valid,
|
placeholder=""
|
||||||
'is-invalid':
|
name="rating"
|
||||||
plantForm.controls['categoryFc'].touched &&
|
formControlName="ratingFc"
|
||||||
!plantForm.controls['categoryFc'].valid
|
[ngClass]="{
|
||||||
}"
|
'is-valid': plantForm.controls['ratingFc'].valid,
|
||||||
/>
|
'is-invalid': !plantForm.controls['ratingFc'].valid
|
||||||
<label for="floatingInputCategory">Catégorie</label>
|
}"
|
||||||
</div>
|
/>
|
||||||
<div class="form-floating">
|
<label for="floatingRating">Note</label>
|
||||||
<input
|
</div>
|
||||||
type="number"
|
<div class="form-floating select">
|
||||||
class="form-control"
|
<select
|
||||||
id="floatingRating"
|
class="form-control"
|
||||||
placeholder=""
|
id="floatingInputInStock"
|
||||||
name="rating"
|
placeholder=""
|
||||||
formControlName="ratingFc"
|
name="inStock"
|
||||||
[ngClass]="{
|
formControlName="inStockFc"
|
||||||
'is-valid':
|
>
|
||||||
plantForm.controls['ratingFc'].touched &&
|
<option value="disponible">Disponible</option>
|
||||||
plantForm.controls['ratingFc'].valid,
|
<option value="partiellement disponible">Partiellement disponible</option>
|
||||||
'is-invalid':
|
<option value="non disponible">Non disponible</option>
|
||||||
plantForm.controls['ratingFc'].touched &&
|
</select>
|
||||||
!plantForm.controls['ratingFc'].valid
|
<label value="disponible">Sélectionnez disponibilité</label>
|
||||||
}"
|
</div>
|
||||||
/>
|
|
||||||
<label for="floatingRating">Note</label>
|
<button
|
||||||
</div>
|
class="w-100 btn btn-lg btn-outline-success"
|
||||||
<div class="form-floating select">
|
type="submit"
|
||||||
<select
|
[disabled]="plantForm.invalid"
|
||||||
class="form-control"
|
>
|
||||||
id="floatingInputInStock"
|
{{ buttonLabel }}
|
||||||
placeholder=""
|
</button>
|
||||||
name="inStock"
|
</form>
|
||||||
formControlName="inStockFc"
|
</div>
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
@ -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: #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,5 +1,6 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||||
import { FormGroup } from '@angular/forms';
|
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { Plant } from '../../models/plant';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-formulaire',
|
selector: 'app-formulaire',
|
||||||
@ -8,10 +9,28 @@ 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;
|
||||||
|
@Output() submitted = new EventEmitter();
|
||||||
|
|
||||||
ngOnInit(): void {}
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
onSubmit(){}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,14 +1,12 @@
|
|||||||
import { Category } from "./category";
|
|
||||||
|
|
||||||
export class Plant {
|
export class Plant {
|
||||||
constructor(
|
constructor(
|
||||||
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','partiellement disponible', 'non disponible'],
|
||||||
public category:Category,
|
public category:string[]=['plantes fleuries','orchides','cactus et plantes grasses','bonsas','plantes vertes','palmier dintrieur'],
|
||||||
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,
|
||||||
public id?: number
|
public id: string = ''
|
||||||
){}
|
){}
|
||||||
}
|
}
|
||||||
|
@ -1 +1,2 @@
|
|||||||
<p>page-ajouter works!</p>
|
<h1>Ajouter une plante</h1>
|
||||||
|
<app-formulaire [plantInfos]="newplant" (submitted)="addPlant($event)" [buttonLabel]="'Ajouter une plante'"></app-formulaire>
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
h1{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(0, 0, 0, 0.658);
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
@ -1,15 +1,67 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
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({
|
@Component({
|
||||||
selector: 'app-page-ajouter',
|
selector: 'app-page-ajouter',
|
||||||
templateUrl: './page-ajouter.component.html',
|
templateUrl: './page-ajouter.component.html',
|
||||||
styleUrls: ['./page-ajouter.component.scss']
|
styleUrls: ['./page-ajouter.component.scss'],
|
||||||
})
|
})
|
||||||
export class PageAjouterComponent implements OnInit {
|
export class PageAjouterComponent implements OnInit {
|
||||||
|
public newplant = new Plant();
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
constructor(private fb: FormBuilder, private router: Router, private adminService: AdminService) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 +1,3 @@
|
|||||||
<p>page-modifier works!</p>
|
<h1>Modifier la plante</h1>
|
||||||
|
<app-formulaire *ngIf="editPlant" [plantInfos]="editPlant" (submitted)="update($event)" [buttonLabel]="'Modifier la plante'"></app-formulaire>
|
||||||
|
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
h1{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
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,FormGroup} from '@angular/forms';
|
||||||
|
import { ActivatedRoute, ParamMap, 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,73 @@ 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 {
|
||||||
|
editPlant!: Plant;
|
||||||
|
plantId!: string;
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
|
constructor(private adminService: AdminService,
|
||||||
|
private router: Router,
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private route: ActivatedRoute) {
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
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,29 +1,35 @@
|
|||||||
<table class="table" *ngIf="subCollection$ | async as collection">
|
<div id="container">
|
||||||
<thead class="thead-dark">
|
<div id="button">
|
||||||
<tr>
|
<button class="w-100 btn btn-lg btn-outline-success" routerLink="../ajouter">Ajouter une plante </button>
|
||||||
<th scope="col">Id</th>
|
</div>
|
||||||
<th scope="col">Nom</th>
|
<table class="table" *ngIf="subCollection$ | async as collection">
|
||||||
<th scope="col">Prix</th>
|
<thead class="thead-dark" style="background-color: #306340 ; color:#f3f7f4 ;">
|
||||||
<th scope="col">Quantité</th>
|
<tr>
|
||||||
<th scope="col">En stock</th>
|
<th scope="col">Id</th>
|
||||||
<th scope="col">Catégorie</th>
|
<th scope="col">Nom</th>
|
||||||
<th scope="col">Note</th>
|
<th scope="col">Prix</th>
|
||||||
<th scope="col">Modifier</th>
|
<th scope="col">Quantité</th>
|
||||||
<th scope="col">Supprimer</th>
|
<th scope="col">En stock</th>
|
||||||
|
<th scope="col">Catégorie</th>
|
||||||
|
<th scope="col">Note</th>
|
||||||
|
<th scope="col">Modifier</th>
|
||||||
|
<th scope="col">Supprimer</th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let products of collection">
|
||||||
|
<td>{{products.id}}</td>
|
||||||
|
<td>{{products.name}}</td>
|
||||||
|
<td>{{products.price}}</td>
|
||||||
|
<td>{{products.quantity}}</td>
|
||||||
|
<td>{{products.inStock}}</td>
|
||||||
|
<td>{{products.category}}</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>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr *ngFor="let products of collection">
|
|
||||||
<th scope="row">{{products.id}}</th>
|
|
||||||
<td>{{products.name}}</td>
|
|
||||||
<td>{{products.price}}</td>
|
|
||||||
<td>{{products.quantity}}</td>
|
|
||||||
<td>{{products.instock}}</td>
|
|
||||||
<!-- <td>{{products.Catégorie.}}</td> -->
|
|
||||||
<td>{{products.rating}}</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>
|
|
||||||
|
@ -0,0 +1,19 @@
|
|||||||
|
#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,8 +28,10 @@ export class PageTableauComponent implements OnInit {
|
|||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickDelete(id: number){
|
onClickDelete(id: string){
|
||||||
console.log(id);
|
this.adminService.onClickDelete(id).subscribe((resp) => {
|
||||||
|
console.log("Suppression successful : ", resp);
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { map, Observable, Subject } from 'rxjs';
|
import { map, Observable, Subject, tap } from 'rxjs';
|
||||||
import { environment } from 'src/environments/environment';
|
import { environment } from 'src/environments/environment';
|
||||||
import { Plant } from '../models/plant';
|
import { Plant } from '../models/plant';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class AdminService {
|
export class AdminService {
|
||||||
public collection$!: Observable<Plant[]>;
|
public collection$!: Observable<Plant[]>;
|
||||||
@ -21,7 +21,7 @@ export class AdminService {
|
|||||||
//console.log("avant mapping: ", tabObj);
|
//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()
|
// 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 tabObj.map((obj: any) => {
|
||||||
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);
|
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);
|
||||||
})
|
})
|
||||||
}));
|
}));
|
||||||
//this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
|
//this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
|
||||||
@ -31,13 +31,29 @@ export class AdminService {
|
|||||||
public refreshCollection(): void {
|
public refreshCollection(): void {
|
||||||
// On se sert de notre flux de donnée type observable froid
|
// On se sert de notre flux de donnée type observable froid
|
||||||
this.collection$.subscribe((listPlant: Plant[]) => {
|
this.collection$.subscribe((listPlant: Plant[]) => {
|
||||||
this.plantCollection = [...listPlant];
|
|
||||||
// Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
|
// Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
|
||||||
this.subCollection$.next(listPlant);
|
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[]> {
|
// 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