isa44.74/brief-la-belle-plante2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' into cecile

Browse Source
This commit is contained in:
Julian 2022-01-11 20:55:44 +01:00 committed by GitHub
commit 60a12b709d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 13207 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
db.json
View File

File diff suppressed because it is too large Load Diff

12705
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
src/app/components/avis-bar/avis-bar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-avis-bar',
@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
})
export class AvisBarComponent implements OnInit {
starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
@Output() stateNumber = new EventEmitter
starStateNumber: number = 0;
constructor() {
this.starStates = [];
@ -50,13 +52,17 @@ export class AvisBarComponent implements OnInit {
}
onClickStar(starIndex: number) {
this.starStateNumber = 0;
for (let i = 0; i < this.starStates.length ; i++) {
if(i <= starIndex) {
this.starStates[i].stateSelectedUser = true;
this.starStateNumber++;
} else {
this.starStates[i].stateSelectedUser = false;
}
}
//console.log(`Rating : ${this.starStateNumber}`);
this.stateNumber.emit(this.starStateNumber);
}
}

28
src/app/components/filter-side-bar/filter-side-bar.component.html
View File

@ -1,19 +1,19 @@
<div class="custom-side-bar flex-shrink-0 bg-white border-end">
<div class="p-3">
<span class="fs-5 fw-semibold">Filtres</span>
</div>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Catégories</p>
<div *ngFor="let category of listCategories; let indexCat = index" class="form-check">
<div class="p-3">
<span class="fs-5 fw-semibold">Filtres</span>
</div>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Catégories</p>
<div *ngFor="let category of listCategories; let indexCat = index" class="form-check">
<input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}">
<input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}" (click)="onCheckCategory(category,$event)">
<label class="form-check-label" for="checkBoxCategory{{indexCat}}">
{{ category }}
</label>
</div>
<div *ngIf="listCategories.length == 0 ">S
<div *ngIf="listCategories.length == 0 ">
Aucune catégorie disponible
</div>
</div>
@ -22,12 +22,12 @@
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Prix</p>
<div class="d-flex justify-content-center">
<input id="number" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
<input id="number" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
<input #minNum id="numberMin" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
<input #maxNum id="numberMax" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
</div>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-success m-3">Valider</a>
<button class="btn btn-success m-3" (click)="onSendValues(minNum, maxNum)">Valider</button>
</div>
</div>
</ul>
@ -36,8 +36,8 @@
<p class="mb-1 fs-5 fw-semibold">Avis</p>
<div class="flex-column justify-content-start">
<app-avis-bar></app-avis-bar>
<a href="#" class="btn btn-success me-2">Valider</a>
<app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
<button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
</div>
</div>
</ul>

45
src/app/components/filter-side-bar/filter-side-bar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-filter-side-bar',
@ -7,12 +7,51 @@ import { Component, Input, OnInit } from '@angular/core';
})
export class FilterSideBarComponent implements OnInit {
@Input() listCategories: string[];
constructor() {
@Output() checkCategory = new EventEmitter();
@Output() stateNumber = new EventEmitter();
@Output() rangeNumber = new EventEmitter();
filterStateNumber: number = 0;
public selectedCategory: string[];
constructor() {
this.listCategories = [];
this.selectedCategory = [];
}
ngOnInit(): void {
}
onCheckCategory(category: string, event: any) {
console.log(event)
if (event.target.checked == true) {
//console.log("true")
this.selectedCategory.push(category);
}
if (event.target.checked == false) {
//console.log("false")
this.selectedCategory = this.selectedCategory.filter(product => product !== category);
}
this.checkCategory.emit(this.selectedCategory);
//console.log("romain" , this.selectedCategory)
}
onStateNumberChange(stateNumber: number): void {
this.filterStateNumber = stateNumber;
}
onSendRating():void {
this.stateNumber.emit(this.filterStateNumber);
}
onSendValues(minNum: any, maxNum: any): void {
let rangeArray: number[] = [parseFloat(minNum.value), parseFloat(maxNum.value)];
console.log(typeof(rangeArray[0]));
this.rangeNumber.emit(rangeArray);
}
}

44
src/app/pages/page-accueil/page-accueil.component.html
View File

@ -1,28 +1,26 @@
<div class="d-flex align-items-stretch">
<app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
<app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
<div class="custom-main container p-3">
<input class="form-control"
type="text"
placeholder="Recherche ta belle plante"
aria-label="Input Recherche ta belle plante"
(input)="onRecherchePlante($event)">
<div class="custom-main container p-3">
<input class="form-control"
type="text"
placeholder="Recherche ta belle plante"
aria-label="Input Recherche ta belle plante"
(input)="onRecherchePlante($event)"
>
<div class="py-3">
Trier par :
<button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
<button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
</div>
<div class="py-3">
Trier par :
<button class="btn btn-outline-success btn-sm me-2">Prix</button>
<button class="btn btn-outline-success btn-sm me-2">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2">Avis</button>
</div>
<div class="row">
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product"
(clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>
</div>
<div class="row">
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product"
(clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>
</div>
</div>

170
src/app/pages/page-accueil/page-accueil.component.ts
View File

@ -3,6 +3,9 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
import * as _ from 'underscore';
import { contains, includes } from 'underscore';
@Component({
selector: 'app-page-accueil',
templateUrl: './page-accueil.component.html',
@ -10,18 +13,40 @@ import { contains, includes } from 'underscore';
})
export class PageAccueilComponent implements OnInit {
public listData: any[];
public listDataGlobal : any[];
public listDataGlobal: any[];
public listDataFilter: any[];
public listCategoriesFilter: string[];
public dataFilterCategory : any;
public rangeNumber: number[];
public stateNumber: number;
public isPricingFilterActive: boolean;
public isRatingFilterActive: boolean;
public clickCounter : any;
constructor(private plantouneService: PlantouneService) {
this.listData = [];
this.listDataGlobal! = [];
this.listDataGlobal = [];
this.listDataFilter = [];
this.listCategoriesFilter = [];
this.rangeNumber = [];
this.stateNumber = 0;
this.isPricingFilterActive = false;
this.isRatingFilterActive = false;
this.clickCounter = 0;
}
/**
* equivalent de la ligne du dessus
* equivalent de la ligne du dessus
*
* plantouneService;
*
* constructor(plantouneService: PlantouneService) {
* this.plantouneService = plantouneService; }
*/
@ -31,19 +56,21 @@ export class PageAccueilComponent implements OnInit {
this.plantouneService.getData().subscribe(
(listPlant: any[]) => {
console.log("Liste Plant : ", listPlant);
this.listDataGlobal = [... listPlant];
console.log(listPlant);
this.listDataGlobal = [...listPlant];
this.listDataFilter = [...this.listDataGlobal];
console.log(this.listDataGlobal);
/**
* Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
*/
const listAllCategories = listPlant.map(product => product.product_breadcrumb_label);
console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories)
console.log(listUniqCategories);
// console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories)
// console.log(listUniqCategories);
/**
* Technique native JS pour recupérer les catégories uniques de nos plantes
@ -55,7 +82,8 @@ export class PageAccueilComponent implements OnInit {
this.listCategoriesFilter = listUniqJsCategories;
this.listData = [...listPlant];
this.listData.length = 9;
console.log(this.listData);
}
)
}
@ -64,7 +92,6 @@ export class PageAccueilComponent implements OnInit {
this.plantouneService.plantLiked$.next('')
}
onRecherchePlante(choix: any) {
const search = choix.target.value
@ -80,4 +107,117 @@ onRecherchePlante(choix: any) {
if (this.listData.length >= 9) {this.listData.length=9}
}
}
}
onListCategory(categoryArray: string[]) {
// this.listData=listData;
//console.log(typeof(valueText));
if(categoryArray.length == 0) {
this.listData = [...this.listDataGlobal];
} else if(categoryArray.length > 0) {
let listProductsByCategory:string[] = [];
this.listDataGlobal.forEach(product => {
categoryArray.forEach(categorySelected => {
if (product.product_breadcrumb_label == categorySelected){
listProductsByCategory.push(product);
}
});
});
this.listData= [...listProductsByCategory];
}
if(this.listData.length>=9){
this.listData.length=9;
}
}
onRatingFilter(stateNumber: number): void {
this.stateNumber = stateNumber;
this.isRatingFilterActive = true;
this.onApplyFilters();
}
onPriceFilter(rangeNumber: number[]) {
this.rangeNumber = [...rangeNumber];
this.isPricingFilterActive = true;
this.onApplyFilters();
}
onApplyFilters(): void {
this.clickCounter = 0;
if(this.isPricingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
}
if(this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
}
if(this.isPricingFilterActive && this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0]
&& parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]
&& product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
console.log(this.listData);
}
if(this.listData.length >= 9) this.listData.length = 9;
}
//Tri des prix des plantes par ordre croissant ou décroissant
onPriceTri() : void {
this.clickCounter ++
console.log(this.clickCounter)
if (this.clickCounter %2) {
this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
}else{
this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price));
}
}
//Tri des noms des plantes par ordre alphanumérique
onAlphaTri() : void {
this.clickCounter ++
if (this.clickCounter %2) {
this.listData.sort((a, b) => (a.product_name > b.product_name) ? 1 : -1)
}else{
this.listData.sort((a, b) => (b.product_name > a.product_name) ? 1 : -1)
}
}
//Tri des avis des plantes par ordre croissant ou décroissant
onRatingTri() : void{
this.clickCounter ++
if (this.clickCounter %2) {
this.listData.sort((a, b) => (a.product_rating > b.product_rating) ? 1 : -1)
}else{
this.listData.sort((a, b) => (b.product_rating > a.product_rating) ? 1 : -1)
}
}
}