manager: smoother reports navigation filter clearing (fixes #9022) (#9052)

Co-authored-by: dogi <[email protected]>

Author: Mutugiii

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.11",
+  "version": "0.20.12",
   "myplanet": {
-    "latest": "v0.30.1",
-    "min": "v0.29.1"
+    "latest": "v0.30.25",
+    "min": "v0.29.25"
   },
   "scripts": {
     "ng": "ng",

src/app/manager-dashboard/reports/logs-myplanet.component.html

@@ -35,7 +35,7 @@
         <mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
       </mat-select>
     </mat-form-field>
-    <button mat-raised-button (click)="clearFilters()" color="primary" [disabled]="!searchValue && !selectedVersion && !selectedType && disableShowAllTime" class="margin-lr-5">
+    <button mat-raised-button (click)="clearFilters()" color="primary" [disabled]="!searchValue && !selectedVersion && !selectedType && isDefaultTimeFilter" class="margin-lr-5">
       <span i18n>Clear</span>
     </button>
     <mat-icon>search</mat-icon>
@@ -94,7 +94,7 @@
       </form>
     </mat-toolbar-row>
     <mat-toolbar-row *ngIf="showFiltersRow">
-      <button mat-raised-button color="primary" (click)="clearFilters()" [disabled]="!searchValue && !selectedVersion && !selectedType && disableShowAllTime" class="margin-lr-5">
+      <button mat-raised-button color="primary" (click)="clearFilters()" [disabled]="!searchValue && !selectedVersion && !selectedType && isDefaultTimeFilter" class="margin-lr-5">
         <span i18n>Clear</span>
       </button>
       <mat-icon>search</mat-icon>

src/app/manager-dashboard/reports/logs-myplanet.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnInit, HostListener } from '@angular/core';
-import { CouchService } from '../../shared/couchdb.service';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { forkJoin } from 'rxjs';
+import { CouchService } from '../../shared/couchdb.service';
 import { StateService } from '../../shared/state.service';
 import { PlanetMessageService } from '../../shared/planet-message.service';
 import { ManagerService } from '../manager.service';
 import { filterSpecificFields } from '../../shared/table-helpers';
 import { attachNamesToPlanets, areNoChildren, filterByDate } from './reports.utils';
 import { CsvService } from '../../shared/csv.service';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 import { ReportsService } from './reports.service';
 
@@ -17,14 +17,12 @@ import { ReportsService } from './reports.service';
 })
 export class LogsMyPlanetComponent implements OnInit {
 
+  private readonly defaultTimeFilter: string = '24h';
+  private allPlanets: any[] = [];
   apklogs: any[] = [];
   isEmpty = false;
-  private allPlanets: any[] = [];
   searchValue = '';
   planetType = this.stateService.configuration.planetType;
-  get childType() {
-    return this.planetType === 'center' ? $localize`Community` : $localize`Nation`;
-  }
   startDate: Date = new Date(new Date().setFullYear(new Date().getDate() - 1));
   endDate: Date = new Date();
   selectedChildren: any[] = [];
@@ -35,14 +33,19 @@ export class LogsMyPlanetComponent implements OnInit {
   selectedVersion = '';
   types: string[] = [];
   selectedType = '';
-  disableShowAllTime = true;
   showFiltersRow = false;
   deviceType: DeviceType;
   deviceTypes: typeof DeviceType = DeviceType;
   selectedTimeFilter = '24h';
   showCustomDateFields = false;
   timeFilterOptions = this.activityService.standardTimeFilters;
   isLoading = false;
+  get childType() {
+    return this.planetType === 'center' ? $localize`Community` : $localize`Nation`;
+  }
+  get isDefaultTimeFilter(): boolean {
+    return this.selectedTimeFilter === this.defaultTimeFilter;
+  }
 
   constructor(
     private csvService: CsvService,
@@ -76,7 +79,6 @@ export class LogsMyPlanetComponent implements OnInit {
       if (!this.logsForm.errors?.invalidDates) {
         this.applyFilters();
       }
-      this.updateShowAllTimeButton();
     });
   }
 
@@ -85,12 +87,6 @@ export class LogsMyPlanetComponent implements OnInit {
     this.deviceType = this.deviceInfoService.getDeviceType({ tablet: 1350 });
   }
 
-  updateShowAllTimeButton() {
-    const startIsMin = new Date(this.startDate).setHours(0, 0, 0, 0) === new Date(this.minDate).setHours(0, 0, 0, 0);
-    const endIsToday = new Date(this.endDate).setHours(0, 0, 0, 0) === new Date(this.today).setHours(0, 0, 0, 0);
-    this.disableShowAllTime = startIsMin && endIsToday;
-  }
-
   filterData(filterValue: string) {
     this.searchValue = filterValue;
     this.apklogs = this.allPlanets.filter(planet => filterSpecificFields([ 'name', 'doc.code' ])(planet, filterValue));
@@ -179,10 +175,12 @@ export class LogsMyPlanetComponent implements OnInit {
   }
 
   applyFilters() {
-    this.apklogs = this.allPlanets.map(planet => ({
-      ...planet,
-      children: this.filterLogs(planet.children)
-    }));
+    this.apklogs = this.allPlanets
+      .filter(planet => !this.searchValue || filterSpecificFields([ 'name', 'doc.code' ])(planet, this.searchValue))
+      .map(planet => ({
+        ...planet,
+        children: this.filterLogs(planet.children)
+      }));
     this.isEmpty = areNoChildren(this.apklogs);
   }
 

src/app/manager-dashboard/reports/reports-myplanet.component.html

@@ -29,7 +29,7 @@
         <mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
       </mat-select>
     </mat-form-field>
-    <button mat-raised-button (click)="clearFilters()" color="primary" [disabled]="!searchValue && !selectedVersion && disableShowAllTime" class="margin-lr-5">
+    <button mat-raised-button (click)="clearFilters()" color="primary" [disabled]="!searchValue && !selectedVersion && isDefaultTimeFilter" class="margin-lr-5">
       <span i18n>Clear</span>
     </button>
     <mat-icon>search</mat-icon>
@@ -97,10 +97,7 @@
       </form>
     </mat-toolbar-row>
     <mat-toolbar-row *ngIf="showFiltersRow">
-      <button mat-raised-button color="primary" (click)="resetDateFilter()" [disabled]="disableShowAllTime" class="margin-lr-5">
-        <span i18n>Show All Time</span>
-      </button>
-      <button mat-raised-button color="primary" (click)="clearFilters()" [disabled]="!searchValue && !selectedVersion && disableShowAllTime" class="margin-lr-5">
+      <button mat-raised-button color="primary" (click)="clearFilters()" [disabled]="!searchValue && !selectedVersion && isDefaultTimeFilter" class="margin-lr-5">
         <span i18n>Clear</span>
       </button>
       <mat-icon>search</mat-icon>

src/app/manager-dashboard/reports/reports-myplanet.component.ts

@@ -19,6 +19,7 @@ import { CsvService } from '../../shared/csv.service';
 })
 export class ReportsMyPlanetComponent implements OnInit {
 
+  private readonly defaultTimeFilter: string = 'all';
   private allPlanets: any[] = [];
   searchValue = '';
   planets: any[] = [];
@@ -30,9 +31,6 @@ export class ReportsMyPlanetComponent implements OnInit {
   deviceTypes: typeof DeviceType = DeviceType;
   planetType = this.stateService.configuration.planetType;
   configuration = this.stateService.configuration;
-  get childType() {
-    return this.planetType === 'center' ? 'Community' : 'Nation';
-  }
   hubId: string | null = null;
   hub = { spokes: [] };
   startDate: Date = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
@@ -42,10 +40,15 @@ export class ReportsMyPlanetComponent implements OnInit {
   today = new Date();
   versions: string[] = [];
   selectedVersion = '';
-  disableShowAllTime = true;
   selectedTimeFilter = 'all';
   timeFilterOptions = this.activityService.standardTimeFilters;
   showCustomDateFields = false;
+  get childType() {
+    return this.planetType === 'center' ? 'Community' : 'Nation';
+  }
+  get isDefaultTimeFilter(): boolean {
+    return this.selectedTimeFilter === this.defaultTimeFilter;
+  }
 
   constructor(
     private csvService: CsvService,
@@ -83,7 +86,6 @@ export class ReportsMyPlanetComponent implements OnInit {
       if (!this.reportsForm.errors?.invalidDates) {
         this.applyFilters();
       }
-      this.updateShowAllTimeButton();
     });
   }
 
@@ -146,12 +148,6 @@ export class ReportsMyPlanetComponent implements OnInit {
     return new Date(earliest);
   }
 
-  updateShowAllTimeButton() {
-    const startIsMin = new Date(this.startDate).setHours(0, 0, 0, 0) === new Date(this.minDate).setHours(0, 0, 0, 0);
-    const endIsToday = new Date(this.endDate).setHours(0, 0, 0, 0) === new Date(this.today).setHours(0, 0, 0, 0);
-    this.disableShowAllTime = startIsMin && endIsToday;
-  }
-
   onVersionChange(version: string) {
     this.selectedVersion = version;
     this.applyFilters();