Filters, map, and list all interact in the way they should (with some…

… minor problems)

First problem, clicking an element in the list centers on the element correctly, but the map is not refreshed and is "blurry" (error in console) until the user clicks on the map (which causes a refresh). Second, ExpressionChangedAfterItHasBeenCheckedError occurs at line 121 in portal.component.html

package.json

@@ -11,7 +11,7 @@
     "ng": "ng",
     "start": "gulp watch:locale | ng serve --host 0.0.0.0 --port 4202 --proxy-config proxy.conf.json",
     "start-pwa": "ng build --configuration pwa --output-path ./dist/pwa && npm run serve.pwa",
-    "build": "ng build --output-hashing=none --configuration production",
+    "build": "ng build --output-hashing none --configuration production",
     "package":"cat dist/igo2-quebec/{runtime,polyfills,main}.js > elements/igo2-qc-element.js",
     "lint": "ng lint",
     "lint.fix": "ng lint --fix",

src/app/app.module.ts

@@ -96,15 +96,21 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
     }),
     { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: defaultTooltipOptions }
   ],
+  entryComponents: [
+    AppComponent
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {
+  public injector: Injector;
   constructor(injector: Injector) {
-    const el = createCustomElement(AppComponent, {injector});
-    customElements.define("igo2-quebec-integrable", el);
+    this.injector = injector;
   }
 
-  ngDoBootstrap() { }
+  ngDoBootstrap() {
+    const el = createCustomElement(AppComponent, {injector: this.injector});
+    customElements.define("igo2-quebec-integrable", el);
+  }
 }
 
 function appInitializerFactory(

src/app/pages/filters/filterServices/filters-additional-properties.service.ts

@@ -6,9 +6,9 @@ import { Subject } from 'rxjs';
 })
 export class FiltersAdditionalPropertiesService {
 
-  private eventSubject = new Subject<Map<number, Map<string, string>>>();
+  private eventSubject = new Subject<Map<string, Map<string, string>>>();
 
-  emitEvent(newMap: Map<number, Map<string, string>>) {
+  emitEvent(newMap: Map<string, Map<string, string>>) {
     this.eventSubject.next(newMap);
   }
 

src/app/pages/filters/simple-filters.component.scss

@@ -136,7 +136,7 @@
 }
 
 .disabled {
-	color: gray;
+	color: gray !important;
 }
 
 .filter-info {

src/app/pages/filters/simple-filters.component.ts

@@ -1,3 +1,4 @@
+import { SortBy } from './../list/simple-feature-list.interface';
 import { FiltersAdditionalTypesService } from './filterServices/filters-additional-types.service';
 import { FiltersActiveFiltersService } from './filterServices/filters-active-filters.service';
 import { FiltersSharedMethodsService } from './filterServices/filters-shared-methods.service';
@@ -14,6 +15,7 @@ import { Subscription } from 'rxjs';
 import { FiltersOptionService } from './filterServices/filters-option-service.service';
 import { ListEntitiesService } from '../list/listServices/list-entities-services.service';
 import { FiltersTypesService } from './filterServices/filters-types.service';
+import { FilteredEntitiesService } from '../list/listServices/filtered-entities.service';
 
 @Component({
   selector: 'app-simple-filters',
@@ -43,12 +45,13 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
   public entitiesAll: Array<Object>;  //entities
   public entitiesList: Array<Object>;   //entities list provided by the service
   public additionalTypes: Array<string> = [];  //list of all additional filter types (corresponding to the keys of the map in additional properties)
-  public additionalProperties: Map<number, Map<string, string>> = new Map(); //map of all additional properties by entity id e.g. {80029: {municipalite: Trois-Rivières}, {mrc: ...}}
+  // public additionalProperties: Map<number, Map<string, string>> = new Map(); //map of all additional properties by entity id e.g. {80029: {municipalite: Trois-Rivières}, {mrc: ...}}
+  public additionalProperties: Map<string, Map<string, string>> = new Map(); //map of all additional properties by entity id e.g. {80029: {municipalite: Trois-Rivières}, {mrc: ...}}
   public properties: Array<string>; //string value of all properties that exist in the entities (e.g. "id", "nom", etc.)
   public propertiesMap: Map<string, Array<Option>> = new Map(); //string of all properties (keys) and all values associated with this property
   public filterTypes: Array<string> = [];
 
-  constructor(private filterTypesService: FiltersTypesService, private additionalTypesService: FiltersAdditionalTypesService, private cdRef: ChangeDetectorRef, private activeFilterService: FiltersActiveFiltersService, private listEntitiesService: ListEntitiesService, private filterMethods: FiltersSharedMethodsService, private additionalPropertiesService: FiltersAdditionalPropertiesService, private configService: ConfigService, private http: HttpClient, private formBuilder: FormBuilder, private filterOptionService: FiltersOptionService) {
+  constructor(private filteredEntitiesService: FilteredEntitiesService, private filterTypesService: FiltersTypesService, private additionalTypesService: FiltersAdditionalTypesService, private cdRef: ChangeDetectorRef, private activeFilterService: FiltersActiveFiltersService, private listEntitiesService: ListEntitiesService, private filterMethods: FiltersSharedMethodsService, private additionalPropertiesService: FiltersAdditionalPropertiesService, private configService: ConfigService, private http: HttpClient, private formBuilder: FormBuilder, private filterOptionService: FiltersOptionService) {
 
   }
 
@@ -207,7 +210,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
 		// // if type is not included in terrAPI...
   	// } else
 
-    console.log("propertyMap ", this.propertiesMap);
+    // console.log("propertyMap ", this.propertiesMap);
 
     if (this.propertiesMap.has(filter.type)){
       this.filterTypes.push(filter.type);
@@ -227,7 +230,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
       this.filterTypes.push(filter.type);
       let options: Array<Option> = [];
       for(let entity of this.entitiesAll) {
-        console.log("entity ", entity);
+        // console.log("entity ", entity);
         let longitude = entity["geometry"]["coordinates"][0];
         let latitude = entity["geometry"]["coordinates"][1];
         let coords: string = longitude + "," + latitude;
@@ -240,21 +243,23 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
           if(typeof locationData === "string"){
             let op: Option = {type: filter.type, code: feature.properties.code, nom: feature.properties.nom};
             // console.log("option ", op);
-            if(!this.additionalProperties.get(entity["properties"]["id"])){
+            // console.log("ENTITYYY ", entity)
+            let coords: string = entity["geometry"]["coordinates"][0] + "," + entity["geometry"]["coordinates"][1];
+            if(!this.additionalProperties.get(coords)){
               let newTypeMap: Map<string, string> = new Map();
               newTypeMap.set(filter.type, locationData)
-              this.additionalProperties.set(entity["properties"]["id"], new Map(newTypeMap));
+              this.additionalProperties.set(coords, new Map(newTypeMap));
             }
             else{
-              let oldMap = this.additionalProperties.get(entity["properties"]["id"]);
+              let oldMap = this.additionalProperties.get(coords);
               let newMap: Map<string, string> = new Map();
               newMap.set(filter.type, locationData)
 
               //combine the 2 maps
               const combinedMap = new Map([...oldMap, ...newMap]);
-              this.additionalProperties.set(entity["properties"]["id"], new Map(combinedMap));
+              this.additionalProperties.set(coords, new Map(combinedMap));
 
-              console.log("combinedMap ", combinedMap);
+              // console.log("combinedMap ", combinedMap);
             }
             if(!this.additionalTypes.includes(filter.type)){
               this.additionalTypes.push(filter.type);
@@ -273,7 +278,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
       typeOptions = {type: filter.type, description: filter.description, options: options};
       // console.log("entities do not contain ", filter.type);
     }
-    console.log("additionalProperties end ", this.additionalProperties);
+    // console.log("additionalProperties end ", this.additionalProperties);
 		return typeOptions;
 	}
 
@@ -375,7 +380,8 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
         }
       }
     }
-    return filteredOptions;
+    //sort alphabetically
+    return filteredOptions.sort((a,b) => a["nom"] > b["nom"] ? 1 : a["nom"] < b["nom"] ? -1 : 0);
   }
 
   /**
@@ -409,6 +415,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
         element.code !== selectedOption.code || element.nom !== selectedOption.nom || element.type !== selectedOption.type);
       this.activeFilters.set(selectedOption.type, temp);
     }
+    // console.log("emitting AF")
     this.activeFilterService.emitEvent(this.activeFilters);
     // this.activeFiltersUpdate.emit(this.activeFilters);
 
@@ -563,10 +570,10 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
   }
 
   public updateCount() {
-    console.log("updatecount entitiesList ", this.entitiesList);
-    console.log("alltypesOptions before: ", this.filteredTypesOptions)
+    // console.log("updatecount entitiesList ", this.entitiesList);
+    // console.log("alltypesOptions before: ", this.filteredTypesOptions)
     for(let filter of this.filteredTypesOptions){
-      console.log("AAAAAA", filter.type, "AAAAA");
+      // console.log("AAAAAA", filter.type, "AAAAA");
       let type: string = filter.type;
 
       //determine if we need to use additional properties or if it is contained in the entities list by default
@@ -579,8 +586,8 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
               if(additionalProperty[0] === type){
                 if(additionalProperty[1] === option.nom) {
                   for(let entity of this.entitiesList){
-
-                    if(entity["properties"]["id"] === id){
+                    let coords: string = entity["geometry"]["coordinates"][0] + "," + entity["geometry"]["coordinates"][1];
+                    if(coords === id){
                       option.count++;
                     }
                   }
@@ -592,7 +599,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
           }
           // console.log("entry ", entry);
         }
-        console.log("additionalProperties ", this.additionalProperties);
+        // console.log("additionalProperties ", this.additionalProperties);
       }else{
         for(let option of filter.options){
           option.count = 0;
@@ -608,7 +615,7 @@ export class SimpleFiltersComponent implements OnInit, OnDestroy {
       }
     }
     this.cdRef.detectChanges();
-    console.log("alltypesOptions after: ", this.filteredTypesOptions)
+    // console.log("alltypesOptions after: ", this.filteredTypesOptions)
 
   }
 

src/app/pages/list/listServices/entities-all.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EntitiesAllService {
+
+  private eventSubject = new Subject<Array<Object>>();
+
+  emitEvent(entitiesAll: Array<Object>) {
+    this.eventSubject.next(entitiesAll);
+  }
+
+  onEvent() {
+    return this.eventSubject.asObservable();
+  }
+}

src/app/pages/list/listServices/filtered-entities.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Feature } from 'geojson';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FilteredEntitiesService {
+
+  private eventSubject = new Subject<Array<Feature>>();
+
+  emitEvent(filteredEntities: Array<Feature>) {
+    this.eventSubject.next(filteredEntities);
+  }
+
+  onEvent() {
+    return this.eventSubject.asObservable();
+  }
+}

src/app/pages/list/simple-feature-list.component.html

@@ -23,16 +23,16 @@
                 </div>
               </div>
               <div class="info">
-                <div *ngIf="attribute.header === 'h1'"
+                <div *ngIf="attribute.header === 'title'"
                 class="title"
-                [matTooltip]="!entityIsSelected ? ('simpleFeatureList.selectEntity' | translate) : ('simpleFeatureList.unselectEntity' | translate)"
+                [matTooltip]="'simpleFeatureList.selectEntity' | translate"
                 tooltip-position="below"
                 matTooltipShowDelay="500"
                 [ngClass]="attribute.header"
-                (click)="!entityIsSelected ? selectEntity(entity) : unselectEntity(entity)"
+                (click)="selectEntity(entity)"
                 [innerHTML]="createAttribute(entity, attribute) | translate">
                 </div>
-                <div *ngIf="!attribute.header || attribute.header !== 'h1'"
+                <div *ngIf="!attribute.header || attribute.header !== 'title'"
                 [ngClass]="attribute.header ? attribute.header : 'standard'"
                 [innerHTML]="createAttribute(entity, attribute) | translate">
                 </div>
@@ -41,20 +41,6 @@
           </ng-container>
         </ng-container>
       </div>
-      <div class="selectButton">
-        <button
-          mat-mini-fab
-          class="mat-elevation-z0"
-          [color]="!entityIsSelected ? 'primary' : 'warn'"
-          [matTooltip]="!entityIsSelected ? ('simpleFeatureList.selectEntity' | translate) : ('simpleFeatureList.unselectEntity' | translate)"
-          tooltip-position="below"
-          matTooltipShowDelay="500">
-          <mat-icon
-            [svgIcon]="!entityIsSelected ? 'magnify-plus-outline' : 'close'"
-            (click)="!entityIsSelected ? selectEntity(entity) : unselectEntity(entity)">
-          </mat-icon>
-        </button>
-      </div>
     </div>
   </div>
 

src/app/pages/list/simple-feature-list.component.scss

@@ -22,6 +22,12 @@
     line-height: 24px;
     margin: 5px 0px 5px 0px;
     color: #095797;
+    margin: 1px 0px 1px 0px;
+    cursor: pointer;
+}
+
+.title:hover {
+    text-decoration: underline;
 }
 
 .standard {
@@ -30,20 +36,17 @@
     // margin-top: 16px;
 }
 
+.small {
+    font-weight: 100;
+    font-size: 13px;
+}
+
 .attribute, .description {
     font-family: "Open Sans", sans-serif;
     // font-size: 16px;
     // line-height: 24px;
 }
 
-.title{
-    cursor: pointer;
-}
-
-.title:hover {
-    text-decoration: underline;
-}
-
 .selectButton, .unselectButton {
     padding: 0px 16px;
 }
@@ -63,7 +66,3 @@
 .info {
     font-weight: 700;
 }
-
-.title {
-    margin: 1px 0px 1px 0px;
-}