From 634d66203c0e48a9d88b1f5248acfa91e20ca3ec Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 3 Nov 2020 19:43:56 +0100
Subject: [PATCH] fix: bug fixes + modal refacto
---
src/app/home/home.component.ts | 15 ++--
src/app/models/address.model.ts | 2 +-
src/app/models/structure.model.ts | 6 +-
.../components/card/card.component.ts | 4 +-
.../modal-filter/modal-filter.component.html | 3 +-
.../modal-filter/modal-filter.component.ts | 15 +++-
.../components/search/search.component.html | 20 +++--
.../components/search/search.component.ts | 78 ++++++++++---------
8 files changed, 85 insertions(+), 58 deletions(-)
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index e5291b763..54325dc33 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -55,12 +55,15 @@ export class HomeComponent implements OnInit {
return new Promise((resolve, reject) => {
this.getCoord(structure.voie).subscribe((coord: GeoJson) => {
structure.address = coord.properties.name + ' - ' + coord.properties.postcode + ' ' + coord.properties.city;
- structure.distance = this.geoJsonService.getDistance(
- coord.geometry.getLon(),
- coord.geometry.getLat(),
- this.currentLocation.geometry.getLon(),
- this.currentLocation.geometry.getLat(),
- 'M'
+ structure.distance = parseInt(
+ this.geoJsonService.getDistance(
+ coord.geometry.getLon(),
+ coord.geometry.getLat(),
+ this.currentLocation.geometry.getLon(),
+ this.currentLocation.geometry.getLat(),
+ 'M'
+ ),
+ 10
);
resolve(structure);
});
diff --git a/src/app/models/address.model.ts b/src/app/models/address.model.ts
index b91f488bb..312a24fbd 100644
--- a/src/app/models/address.model.ts
+++ b/src/app/models/address.model.ts
@@ -11,6 +11,6 @@ export class Address {
}
public queryString(): string {
- return this.text + ' ' + this.citycode;
+ return this.text + ' ' + this.zipcode;
}
}
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 6cc2c585f..9be7c612c 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -35,7 +35,7 @@ export class Structure {
public hours: Week;
public isOpen: boolean;
public openedOn: OpeningDay;
- public distance?: string;
+ public distance?: number;
public address?: string;
constructor(obj?: any) {
@@ -86,9 +86,9 @@ export class Structure {
return 3;
} else {
// If it's in km
- if (parseInt(this.distance, 10) > 10000) {
+ if (this.distance > 10000) {
return 3;
- } else if (parseInt(this.distance, 10) < 5000) {
+ } else if (this.distance < 5000) {
// If it's between 0 and 500 m
return 1;
} else {
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index 606792875..4050fe759 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/src/app/structure-list/components/card/card.component.ts
@@ -22,8 +22,8 @@ export class CardComponent implements OnInit {
* Display distance in m or km according to value
*/
public formatDistance(): string {
- if (this.structure.distance.length > 3) {
- return (parseInt(this.structure.distance, 10) / 1000).toFixed(1).toString() + ' km';
+ if (this.structure.distance > 1000) {
+ return (this.structure.distance / 1000).toFixed(1).toString() + ' km';
} else {
return this.structure.distance + ' m';
}
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.html b/src/app/structure-list/components/modal-filter/modal-filter.component.html
index 98f61f1d4..803b9225d 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.html
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.html
@@ -1,9 +1,8 @@
<div
- *ngIf="modalType"
(clickOutside)="closeModal()"
fxLayout="column"
fxLayoutAlign="space-between"
- [ngClass]="['modal', 'modal' + modalType]"
+ [ngClass]="['modal', 'modal' + getModalType()]"
>
<div class="body-wrap">
<div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.ts b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
index d987c05f2..d8b0096bb 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.ts
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
@@ -1,5 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
+import { TypeModal } from '../../enum/typeModal.enum';
import { Category } from '../../models/category.model';
import { Module } from '../../models/module.model';
@@ -14,7 +15,7 @@ export class ModalFilterComponent implements OnInit {
searchTerm: '',
});
}
- @Input() public modalType: string;
+ @Input() public modalType: TypeModal;
@Input() public categories: Category[];
@Input() public modules: Module[] = [];
@Output() searchEvent = new EventEmitter();
@@ -25,7 +26,6 @@ export class ModalFilterComponent implements OnInit {
searchForm: FormGroup;
ngOnInit(): void {
// Manage checkbox
- console.log('init');
this.checkedModules = this.modules.slice();
}
@@ -64,6 +64,17 @@ export class ModalFilterComponent implements OnInit {
this.searchEvent.emit(m);
}
+ public getModalType(): string {
+ switch (this.modalType) {
+ case TypeModal.training:
+ return 'training';
+ case TypeModal.moreFilters:
+ return 'moreFilters';
+ default:
+ return '';
+ }
+ }
+
public closeModal(): void {
this.closeEvent.emit();
}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index fb135ddad..8915f8038 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -28,8 +28,11 @@
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[0], containCheckedFilters: numberAccompanimentChecked }"
- (click)="openModal(TypeModal[0])"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.accompaniment,
+ containCheckedFilters: numberAccompanimentChecked
+ }"
+ (click)="openModal(TypeModal.accompaniment)"
fxLayout="row"
fxLayoutAlign="space-between center"
>
@@ -38,8 +41,8 @@
</button>
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[1], containCheckedFilters: numberTrainingChecked }"
- (click)="openModal(TypeModal[1])"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal.training, containCheckedFilters: numberTrainingChecked }"
+ (click)="openModal(TypeModal.training)"
fxLayout="row"
fxLayoutAlign="space-between center"
>
@@ -48,8 +51,11 @@
</button>
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[2], containCheckedFilters: numberMoreFiltersChecked }"
- (click)="openModal(TypeModal[2])"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.moreFilters,
+ containCheckedFilters: numberMoreFiltersChecked
+ }"
+ (click)="openModal(TypeModal.moreFilters)"
fxLayout="row"
fxLayoutAlign="space-between center"
>
@@ -57,7 +63,7 @@
<div class="arrow"></div>
</button>
</div>
- <div *ngIf="modalTypeOpened">
+ <div *ngIf="modalTypeOpened != null">
<app-modal-filter
[modalType]="modalTypeOpened"
[categories]="categories"
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 01799e3b7..783819ea6 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, Type } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { forkJoin } from 'rxjs';
import { TypeModal } from '../../enum/typeModal.enum';
@@ -26,14 +26,14 @@ export class SearchComponent implements OnInit {
public searchForm: FormGroup;
// Modal variable
public categories: Category[];
- public modalTypeOpened: string; // todo: utiliser enum
+ public modalTypeOpened: TypeModal; // todo: utiliser enum
public isOpenModal = false;
// Checkbox variable
public checkedModulesFilter: Module[];
- public numberTrainingChecked: number = 0;
- public numberAccompanimentChecked: number = 0;
- public numberMoreFiltersChecked: number = 0;
+ public numberTrainingChecked = 0;
+ public numberAccompanimentChecked = 0;
+ public numberMoreFiltersChecked = 0;
ngOnInit(): void {
// Will store the different categories
@@ -78,28 +78,28 @@ export class SearchComponent implements OnInit {
// Check if some modules is checked in filters
if (this.checkedModulesFilter !== checkedModules) {
- // First btn filter
- if (this.modalTypeOpened === TypeModal[0]) {
- // Check if some modules is checked on first filter and store number of modules checked
- checkedModules.length && this.numberTrainingChecked + this.numberMoreFiltersChecked != checkedModules.length
- ? (this.numberAccompanimentChecked =
- checkedModules.length - (this.numberTrainingChecked + this.numberMoreFiltersChecked))
- : (this.numberAccompanimentChecked = 0);
- } // Second btn filter
- else if (this.modalTypeOpened === TypeModal[1]) {
- // Check if some modules is checked on first filter and store number of modules checked
- checkedModules.length &&
- this.numberAccompanimentChecked + this.numberMoreFiltersChecked != checkedModules.length
- ? (this.numberTrainingChecked =
- checkedModules.length - (this.numberAccompanimentChecked + this.numberMoreFiltersChecked))
- : (this.numberTrainingChecked = 0);
- } // Third btn filter
- else if (this.modalTypeOpened === TypeModal[2]) {
- // Check if some modules is checked on first filter and store number of modules checked
- checkedModules.length && this.numberAccompanimentChecked + this.numberTrainingChecked != checkedModules.length
- ? (this.numberMoreFiltersChecked =
- checkedModules.length - (this.numberAccompanimentChecked + this.numberTrainingChecked))
- : (this.numberMoreFiltersChecked = 0);
+ // First btn
+ switch (this.modalTypeOpened) {
+ case TypeModal.accompaniment:
+ this.numberAccompanimentChecked = this.countCheckFiltersOnModules(
+ checkedModules,
+ this.numberTrainingChecked + this.numberMoreFiltersChecked
+ );
+ break;
+ case TypeModal.training:
+ this.numberTrainingChecked = this.countCheckFiltersOnModules(
+ checkedModules,
+ this.numberAccompanimentChecked + this.numberMoreFiltersChecked
+ );
+ break;
+ case TypeModal.moreFilters:
+ this.numberMoreFiltersChecked = this.countCheckFiltersOnModules(
+ checkedModules,
+ this.numberAccompanimentChecked + this.numberTrainingChecked
+ );
+ break;
+ default:
+ throw new Error('Modal type not handle');
}
}
// Store checked modules
@@ -110,13 +110,21 @@ export class SearchComponent implements OnInit {
inputTerm ? this.applyFilter(inputTerm) : this.applyFilter(null);
}
+ // Check if some modules is checked on first filter and store number of modules checked
+ public countCheckFiltersOnModules(checkedModules: Module[], value: number): number {
+ if (checkedModules.length && value !== checkedModules.length) {
+ return checkedModules.length - value;
+ } else {
+ return 0;
+ }
+ }
// Open the modal and display the list according to the right filter button
- public openModal(option: string): void {
+ public openModal(modalType: TypeModal): void {
this.categories = [];
- if (this.modalTypeOpened !== option) {
+ if (this.modalTypeOpened !== modalType) {
if (!this.isOpenModal) {
- this.modalTypeOpened = option;
- this.fakeData(option);
+ this.modalTypeOpened = modalType;
+ this.fakeData(modalType);
this.isOpenModal = true;
} else {
this.isOpenModal = false;
@@ -143,8 +151,8 @@ export class SearchComponent implements OnInit {
}
// Get the correct list of checkbox/modules depending on the type of modal.
- private fakeData(option: string): void {
- if (option === TypeModal[0]) {
+ private fakeData(option: TypeModal): void {
+ if (option === TypeModal.accompaniment) {
forkJoin([this.searchService.getCategoriesAccompaniment(), this.searchService.getFakeCounterModule()]).subscribe(
(res) => {
const categories: Category[] = res[0];
@@ -155,7 +163,7 @@ export class SearchComponent implements OnInit {
});
}
);
- } else if (option === TypeModal[1]) {
+ } else if (option === TypeModal.training) {
forkJoin([this.searchService.getCategoriesTraining(), this.searchService.getFakeCounterModule()]).subscribe(
(res) => {
const categories: Category[] = res[0];
@@ -166,7 +174,7 @@ export class SearchComponent implements OnInit {
});
}
);
- } else if (option === TypeModal[2]) {
+ } else if (option === TypeModal.moreFilters) {
forkJoin([this.searchService.getCategoriesMoreFilters(), this.searchService.getFakeCounterModule()]).subscribe(
(res) => {
const categories: Category[] = res[0];
--
GitLab