Store last filtered value between toggling of lists

src/app/list-toggle/list-toggle.component.html

@@ -1,4 +1,4 @@
-<mat-button-toggle-group class="tui-button-toggle" name="fontStyle" aria-label="Font Style" value="{{toggleValue}}">
+<mat-button-toggle-group class="tui-button-toggle" name="fontStyle" aria-label="Font Style">
     <mat-button-toggle value="folders" (click)="onSelect(listType.Folder)">Folders</mat-button-toggle>
     <mat-button-toggle value="devices" (click)="onSelect(listType.Device)">Devices</mat-button-toggle>
 </mat-button-toggle-group>

src/app/list-toggle/list-toggle.component.ts

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { StType } from '../type';
+import { MatButtonToggleGroup } from '@angular/material/button-toggle';
 
 
 
@@ -10,8 +11,9 @@ import { StType } from '../type';
 })
 
 export class ListToggleComponent implements OnInit {
+  @ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup;
   public listType = StType;
-  public toggleValue: string = "folders";
+  // public toggleValue: string = "folders";
   @Output() listTypeEvent = new EventEmitter<StType>();
 
   constructor() { }

src/app/lists/device-list/device-list.component.ts

@@ -30,7 +30,9 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   ) { };
 
   applyFilter(event: Event) {
+    // Set previous filter value
     const filterValue = (event.target as HTMLInputElement).value;
+    this.filterService.previousInputs.set(StType.Device, filterValue);
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
@@ -50,13 +52,20 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
 
+    const changeText = (text: string) => {
+      this.dataSource.filter = text.trim().toLowerCase();
+      this.filterValue = text;
+      this.cdr.detectChanges();
+    }
+
+    // Set previous value
+    changeText(this.filterService.previousInputs.get(StType.Device));
+
     // Listen for filter changes from other components
     this.filterService.filterChanged$.subscribe(
       input => {
         if (input.type === StType.Device) {
-          this.dataSource.filter = input.text.trim().toLowerCase();
-          this.filterValue = input.text;
-          this.cdr.detectChanges();
+          changeText(input.text);
         }
       });
   }

src/app/lists/folder-list/folder-list.component.ts

@@ -32,6 +32,7 @@ export class FolderListComponent implements AfterViewInit, OnInit {
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
+    this.filterService.previousInputs.set(StType.Folder, filterValue);
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
@@ -51,14 +52,21 @@ export class FolderListComponent implements AfterViewInit, OnInit {
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
 
+    const changeText = (text: string) => {
+      this.dataSource.filter = text.trim().toLowerCase();
+      this.filterValue = text;
+      this.cdr.detectChanges();
+    }
+
+    // Set previous value
+    changeText(this.filterService.previousInputs.get(StType.Folder));
+
     // Listen for filter changes from other components
     this.filterService.filterChanged$
       .subscribe(
         input => {
           if (input.type === StType.Folder) {
-            this.dataSource.filter = input.text.trim().toLowerCase();
-            this.filterValue = input.text;
-            this.cdr.detectChanges();
+            changeText(input.text);
           }
         });
   }

src/app/lists/status-list/status-list.component.ts

@@ -27,10 +27,10 @@ export class StatusListComponent {
 
         switch (input.type) {
           case StType.Folder:
-            this.toggle.toggleValue = "folders";
+            this.toggle.group.value = "folders";
             break;
           case StType.Device:
-            this.toggle.toggleValue = "devices";
+            this.toggle.group.value = "devices";
             break;
         }
       });

src/app/services/filter.service.ts

@@ -12,6 +12,13 @@ export interface FilterInput {
 }
 
 export class FilterService {
+  previousInputs = new Map<StType, string>(
+    [
+      [StType.Folder, ""],
+      [StType.Device, ""],
+    ]
+
+  )
 
   constructor() { }
 
@@ -20,6 +27,7 @@ export class FilterService {
   filterChanged$ = this.filterChangeSource.asObservable();
 
   changeFilter(input: FilterInput) {
+    this.previousInputs.set(input.type, input.text)
     this.filterChangeSource.next(input);
   }
 }

src/styles.scss

@@ -88,7 +88,7 @@ html, body {
 
 a {
     text-decoration: underline;
-    color: mat-color($tech-ui-primary);
+    color: #000000;
 }
 
 .tui-card {