feat(synthese): improve data loading and parsing

Code refactoring and improvements.
Move search bar toggle button in the middle of page height (like
Validation, and more visible).

Author: jpm-cbna

frontend/src/app/syntheseModule/services/store.service.ts

@@ -4,8 +4,53 @@ import { Injectable } from '@angular/core';
   providedIn: 'root',
 })
 export class SyntheseStoreService {
-  public idSyntheseList: Array<number>;
-  public gridData: Array<any>;
-  public pointData: Array<any>;
+  public idSyntheseList: Set<number> = new Set();
+  private gridData: Object = {};
+  private pointData: Object = {};
+
   constructor() {}
+
+  public hasData(type): boolean {
+    let hasData = false;
+    if (type == 'grid') {
+      hasData = this.gridData && Object.keys(this.gridData).length > 0;
+      console.log(`Grid data length: ${this.gridData && Object.keys(this.gridData).length > 0}`);
+      console.log(`Grid data: ${this.gridData}`, this.gridData);
+    } else if (type == 'point') {
+      hasData = this.pointData && Object.keys(this.pointData).length > 0;
+      console.log(`Point data length: ${this.pointData && Object.keys(this.pointData).length > 0}`);
+      console.log(`Point data: ${this.pointData}`, this.pointData);
+    } else {
+      throw new Error(`Unknown data type: ${type}`);
+    }
+    return hasData;
+  }
+
+  public getData(type): Object {
+    let storedData = {};
+    if (type == 'grid') {
+      storedData = this.gridData;
+    } else if (type == 'point') {
+      storedData = this.pointData;
+    } else {
+      throw new Error(`Unknown data type: ${type}`);
+    }
+    return storedData;
+  }
+
+  public setData(type, data: Object) {
+    if (type === 'grid') {
+      this.gridData = data;
+    } else if (type === 'point') {
+      this.pointData = data;
+    } else {
+      throw new Error(`Unknown data type: ${type}`);
+    }
+  }
+
+  public clearData() {
+    this.idSyntheseList = new Set();
+    this.gridData = {};
+    this.pointData = {};
+  }
 }

frontend/src/app/syntheseModule/synthese-results/synthese-list/modal-download/modal-download.component.ts

@@ -25,11 +25,19 @@ export class SyntheseModalDownloadComponent {
   }
 
   downloadObservations(format, view_name) {
-    this._dataService.downloadObservations(this._storeService.idSyntheseList, format, view_name);
+    this._dataService.downloadObservations(
+      Array.from(this._storeService.idSyntheseList),
+      format,
+      view_name
+    );
   }
 
   downloadTaxons(format, filename) {
-    this._dataService.downloadTaxons(this._storeService.idSyntheseList, format, filename);
+    this._dataService.downloadTaxons(
+      Array.from(this._storeService.idSyntheseList),
+      format,
+      filename
+    );
   }
 
   downloadStatusOrMetadata(url, filename) {

frontend/src/app/syntheseModule/synthese.component.html

@@ -15,43 +15,40 @@
   data-qa="pnx-synthese"
 >
   <nav
-    [(ngbCollapse)]="isCollapseSyntheseNavBar"
-    #navBar
     id="sidebar"
+    #navBar
+    [(ngbCollapse)]="isSearchBarReduced"
   >
     <pnx-synthese-search (searchClicked)="onSearchEvent()"></pnx-synthese-search>
   </nav>
 
   <div class="row row-sm page-content">
     <button
-      (click)="isCollapseSyntheseNavBar = !isCollapseSyntheseNavBar"
-      [attr.aria-expanded]="!isCollapseSyntheseNavBar"
-      #buttonToggle
-      [style.left.px]="marginButton"
-      (click)="mooveButton()"
-      type="button"
       id="sidebarCollapse"
       class="btn btn-toogle-sidenav box-shadow"
+      type="button"
+      (click)="isSearchBarReduced = !isSearchBarReduced"
+      [attr.aria-expanded]="!isSearchBarReduced"
     >
       <i
-        [hidden]="searchBarHidden"
+        [hidden]="isSearchBarReduced"
         class="fa fa-caret-left"
       ></i>
       <i
-        [hidden]="!searchBarHidden"
+        [hidden]="!isSearchBarReduced"
         class="fa fa-caret-right"
       ></i>
     </button>
     <div class="col-sm-12 col-md-7 padding-sm">
       <pnx-synthese-carte
         (onAreasToggle)="fetchOrRenderData($event)"
-        [inputSyntheseData]="_mapListService.geojsonData"
+        [inputSyntheseData]="mapListService.geojsonData"
       ></pnx-synthese-carte>
     </div>
     <div class="col-sm-12 col-md-5 padding-sm">
       <pnx-synthese-list
-        [inputSyntheseData]="_mapListService.tableData"
-        [searchBarHidden]="searchBarHidden"
+        [inputSyntheseData]="mapListService.tableData"
+        [searchBarHidden]="isSearchBarReduced"
         data-qa="pnx-synthese-list"
       ></pnx-synthese-list>
     </div>

frontend/src/app/syntheseModule/synthese.component.scss

@@ -17,30 +17,22 @@
 @media (min-width: 1000px) {
   #sidebar {
     width: 250px;
-    // min-width: 250px;
-    // max-width: 250px;
   }
   #sidebar.active {
     margin-left: -250px;
   }
 }
-
 @media (min-width: 1200px) {
   #sidebar {
     width: 300px;
-    // min-width: 250px;
-    // max-width: 250px;
   }
   #sidebar.active {
     margin-left: -300px;
   }
 }
-
 @media (min-width: 1500px) {
   #sidebar {
     width: 350px;
-    // min-width: 250px;
-    // max-width: 250px;
   }
   #sidebar.active {
     margin-left: -350px;
@@ -50,26 +42,20 @@
 .btn-toogle-sidenav {
   z-index: 10000;
   position: absolute;
-  //left: 248px;
-  padding: 0px 5px;
-  padding: 0px 5px;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 0px;
+  top: 50%;
+  padding: 0 5px;
+  height: 50px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  background-color: white;
 }
 .btn-toogle-sidenav:focus {
   box-shadow:
     4px 5px 8px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
 }
-
 #sidebar.active .btn-toogle-sidenav {
-  z-index: 10000;
-  position: absolute;
-  left: 0px;
-  padding: 0px 5px;
-  padding: 0px 5px;
-  border-bottom-left-radius: 0px;
-  border-top-left-radius: 0px;
+  left: 0;
 }
 
 .page-content {