feat: data download unit filtering

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -36,6 +37,7 @@ import {ToastModule} from 'primeng/toast';
   providers: [
     ConfirmationService,
     MessageService,
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
   ],
   bootstrap: [AppComponent]
 })

src/app/shared/nav-bar/components/data-download/data-download-popup.component.html

@@ -1,5 +1,5 @@
 <p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Data download"
-          [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
+          [baseZIndex]="10000" [className]="'popup-form'">
 
   <form [formGroup]="downloadForm">
     <div class="input-group form-group">
@@ -25,6 +25,10 @@
         <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2021" inputId="navigators" formControlName="to"></p-calendar>
       </div>
     </div>
+    <p-listbox [options]="units" formControlName="selectedUnits" [metaKeySelection]="false" [checkbox]="true" [filter]="true" filterPlaceHolder="Search and select units"
+               optionLabel="description" optionValue="unitId"
+               emptyFilterMessage="No units for specified filter" [multiple]="true" [listStyle]="{'max-height':'250px'}" [style]="{'width':'100%'}">
+    </p-listbox>
   </form>
   <div *ngIf="inProgress" class="download-progress">Export in progress<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar></div>
   <p-footer>

src/app/shared/nav-bar/components/data-download/data-download-popup.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import {HttpResponse} from '@angular/common/http';
 import {map} from 'rxjs/operators';
 import {ObservationService} from '../../../api/endpoints/services/observation.service';
@@ -7,8 +7,10 @@ import { ToastService } from '../../../services/toast.service';
 import { SensorsService } from '../../../api/endpoints/services/sensors.service';
 import { DataService } from '../../../api/endpoints/services/data.service';
 import { Sensor } from '../../../api/endpoints/models/sensor';
+import { Unit } from '../../../api/endpoints/models/unit';
 import * as moment from 'moment-timezone';
 import { DashboardComponent } from '../../../../dashboard/components/dashboard.component';
+import { formatDate } from '@angular/common';
 
 @Component({
   selector: 'app-data-download-popup',
@@ -19,13 +21,15 @@ export class DataDownloadPopupComponent implements OnInit {
 
   downloadForm: FormGroup;
   items: FormArray;
-  dateFrom: Date = moment().hour(0).minutes(0).subtract(7, 'days').toDate();
+  dateFrom: Date = moment().hour(0).minutes(0).subtract(1, 'days').toDate();
   dateTo: Date = moment().toDate();
+  selectedUnits: Unit[];
 
   inProgress: Boolean = false;
   @Input() isVisible;
   @Output() isVisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Input() sensors: Sensor[];
+  @Input() units: Unit[];
 
   constructor(
     private formBuilder: FormBuilder,
@@ -48,33 +52,27 @@ export class DataDownloadPopupComponent implements OnInit {
     this.downloadForm = this.formBuilder.group({
       from: [this.dateFrom, Validators.required],
       to: [this.dateTo, Validators.required],
-      sensor_id: ['', Validators.required]
+      sensor_id: [null, Validators.required],
+      selectedUnits: new FormControl([])
     });
 
     this.dataService.getData().subscribe(data => {
       if (data && data.length > 0) {
+        this.units = Array.from(data, d =>  d.unit );
         let firstUnitId: number = data[0].unit.unitId;
+
         this.sensorsService.getUnitSensors({ unit_id: firstUnitId }).subscribe(sens => {
           if (sens) {
             this.sensors = sens;
+            this.downloadForm.patchValue({
+              selectedUnits: Array.from(this.units, u => u.unitId)
+            });
           }
         });
       }
     }, err => this.toastService.showError(err.error.message));
   }
 
-
-  /**
-   * Clear form
-   */
-  clearFormArray() {
-    const frmArray = this.downloadForm?.get('sensors') as FormArray;
-    if (frmArray) {
-      frmArray.clear();
-    }
-    this.downloadForm.reset();
-  }
-
   /**
    * Insert unit with sensor and position if form valid
    */

src/app/shared/nav-bar/nav-bar.module.ts

@@ -10,8 +10,8 @@ import {ReactiveFormsModule} from '@angular/forms';
 import { UnitInsertPopupComponent } from './components/unit-insert-popup/unit-insert-popup.component';
 import { DataDownloadPopupComponent } from './components/data-download/data-download-popup.component';
 import { CalendarModule } from 'primeng/calendar';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { ProgressBarModule } from 'primeng/progressbar';
+import { ListboxModule } from 'primeng/listbox';
 
 @NgModule({
   declarations: [NavBarComponent, UserInsertPopupComponent, UnitInsertPopupComponent, DataDownloadPopupComponent],
@@ -26,7 +26,7 @@ import { ProgressBarModule } from 'primeng/progressbar';
     DialogModule,
     ReactiveFormsModule,
     CalendarModule,
-    ProgressSpinnerModule,
+    ListboxModule,
     ProgressBarModule
   ]
 })