fix: bug fixes + modal refacto

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

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

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 {

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

src/app/structure-list/components/modal-filter/modal-filter.component.html

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

src/app/structure-list/components/modal-filter/modal-filter.component.ts

 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();
   }

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"

src/app/structure-list/components/search/search.component.ts

-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];