manager: smoother myplanet reports (fixes #7619) (#7626)

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

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "myplanet": {
-    "latest": "v0.20.58",
-    "min": "v0.19.58"
+    "latest": "v0.20.61",
+    "min": "v0.19.61"
   },
   "scripts": {
     "ng": "ng",

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

@@ -1,15 +1,28 @@
-<!-- Request template -->
 <mat-toolbar>
-  <button class="btnBack" mat-icon-button routerLink="/manager">
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <span i18n>myPlanet Report</span>
-  <span class="toolbar-fill"></span>
+  <mat-toolbar-row>
+    <button class="btnBack" mat-icon-button routerLink="/manager">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span i18n>myPlanet Report</span>
+    <span class="toolbar-fill"></span>
+    <ng-container *ngIf="!isMobile">
+      <ng-container *ngTemplateOutlet="searchView"></ng-container>
+    </ng-container>
+    <button mat-icon-button *ngIf="isMobile" (click)="this.showFiltersRow = !this.showFiltersRow" ><mat-icon>filter_list</mat-icon></button>
+  </mat-toolbar-row>
+  <mat-toolbar-row *ngIf="showFiltersRow">
+    <ng-container *ngIf="isMobile">
+      <ng-container *ngTemplateOutlet="searchView"></ng-container>
+    </ng-container>
+  </mat-toolbar-row>
+</mat-toolbar>
+
+<ng-template #searchView>
   <mat-icon>search</mat-icon>
   <mat-form-field class="font-size-1">
-    <input matInput (keyup)="filterData($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
+    <input matInput (keyup)="filterData($event.target.value)" [(ngModel)]="searchValue" i18n-placeholder placeholder="Search">
   </mat-form-field>
-</mat-toolbar>
+</ng-template>
 
 <div class="space-container">
   <mat-toolbar>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { CouchService } from '../../shared/couchdb.service';
 import { forkJoin, of } from 'rxjs';
 import { StateService } from '../../shared/state.service';
@@ -10,6 +10,7 @@ import { attachNamesToPlanets, getDomainParams, areNoChildren } from './reports.
 import { ActivatedRoute } from '@angular/router';
 import { switchMap, map } from 'rxjs/operators';
 import { findDocuments } from '../../shared/mangoQueries';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   templateUrl: './reports-myplanet.component.html'
@@ -20,6 +21,9 @@ export class ReportsMyPlanetComponent implements OnInit {
   searchValue = '';
   planets: any[] = [];
   isEmpty = false;
+  isMobile: boolean;
+  deviceType: DeviceType;
+  showFiltersRow = false;
   planetType = this.stateService.configuration.planetType;
   configuration = this.stateService.configuration;
   get childType() {
@@ -34,13 +38,23 @@ export class ReportsMyPlanetComponent implements OnInit {
     private planetMessageService: PlanetMessageService,
     private managerService: ManagerService,
     private reportsService: ReportsService,
-    private route: ActivatedRoute
-  ) {}
+    private route: ActivatedRoute,
+    private deviceInfoService: DeviceInfoService,
+  ) {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
 
   ngOnInit() {
     this.getMyPlanetList(this.route.snapshot.params.hubId);
   }
 
+  @HostListener('window:resize') onResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+    this.showFiltersRow = false
+  }
+
   filterData(filterValue: string) {
     this.searchValue = filterValue;
     this.planets = this.allPlanets.filter(planet => filterSpecificFields([ 'name', 'doc.code' ])(planet, filterValue));