Dashboard disease tabs (#299)

* Dashboard disease tabs

* Fixes

Co-authored-by: Sandor Ban <[email protected]>

Author: sandorbanvitagroup

src/app/_services/api/dashboard.service.ts

@@ -23,7 +23,6 @@ export class DashboardService {
     const requestPayload: any = {};
 
     if (filters.length) {
-      requestPayload.disease = 'CORONAVIRUS'; // TODO: DELETE THIS WHEN DISEASE SELECTION IS IMPLEMENTED
       filters.forEach((filter: any) => {
         requestPayload[filter.field] = filter.value;
       });

src/app/dashboard/components/dashboard-disease-menu/dashboard-disease-menu.component.html

@@ -1 +1,5 @@
-<p>dashboard-disease-menu works!</p>
+<div class="dashboard-disease-menu">
+  <mat-tab-group (selectedTabChange)="tabChange($event)">
+    <mat-tab *ngFor="let disease of diseases" [label]="disease.value"></mat-tab>
+  </mat-tab-group>
+</div>

src/app/dashboard/components/dashboard-disease-menu/dashboard-disease-menu.component.ts

@@ -1,8 +1,45 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Disease } from '../../../_constants/enums';
+import { Filter } from '../../../_models/common';
+import { EnumToKeyValuePipe } from '../../../_pipes/enum-to-key-value/enum-to-key-value.pipe';
+import { FilterService } from '../../../_services/filter.service';
 
 @Component({
   selector: 'app-dashboard-disease-menu',
   templateUrl: './dashboard-disease-menu.component.html',
   styleUrls: ['./dashboard-disease-menu.component.scss'],
+  providers: [EnumToKeyValuePipe],
 })
-export class DashboardDiseaseMenuComponent {}
+export class DashboardDiseaseMenuComponent implements OnInit, OnDestroy {
+  currentFilters: Filter[] = [];
+  diseases: any[] = [];
+  subscriptions: Subscription[] = [];
+  constructor(public filterService: FilterService, public enumToKeyValuePipe: EnumToKeyValuePipe) {
+    this.diseases = enumToKeyValuePipe.transform(Disease);
+  }
+
+  removePrevDiseaseFilter(): void {
+    const newFilters: Filter[] = this.currentFilters.filter((f) => f.field !== 'disease');
+    this.currentFilters = newFilters;
+  }
+
+  tabChange(event: any): void {
+    const selectedFilter = { field: 'disease', value: this.diseases[event.index].key };
+    this.removePrevDiseaseFilter();
+    this.currentFilters.push(selectedFilter);
+    this.filterService.setFilters(this.currentFilters);
+  }
+
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.filterService.getFilters().subscribe((val) => {
+        this.currentFilters = val.filters;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+}

src/app/dashboard/components/dashboard-filters/dashboard-filters.component.ts

@@ -335,13 +335,15 @@ export class DashboardFiltersComponent implements OnInit, OnDestroy, AfterViewIn
       previousDateTo,
       newCaseDateType,
       region,
+      disease,
     }) => ({
       dateFrom,
       dateTo,
       previousDateFrom,
       previousDateTo,
       newCaseDateType,
       region,
+      disease,
     }))(this.form.value);
     const filters: any[] = [];
     Object.entries(relevantValues).forEach(([field, value]) => {

src/theme/common.scss

@@ -369,3 +369,23 @@ strong {
     margin-bottom: 10px;
   }
 }
+
+// dashboard-disease-menu
+.dashboard-disease-menu {
+  .mat-tab-label {
+    min-width: 100px;
+    padding: 15px;
+  }
+
+  .mat-tab-header {
+    border: none;
+  }
+
+  .mat-tab-group {
+    &.mat-primary {
+      .mat-ink-bar {
+        background-color: black;
+      }
+    }
+  }
+}