From a9b6801b2299550603a74086e4edd91a4010e6d1 Mon Sep 17 00:00:00 2001 From: Jesse Lucas Date: Thu, 2 Apr 2020 11:50:57 -0400 Subject: [PATCH] Store last filtered value between toggling of lists --- src/app/list-toggle/list-toggle.component.html | 2 +- src/app/list-toggle/list-toggle.component.ts | 6 ++++-- .../lists/device-list/device-list.component.ts | 15 ++++++++++++--- .../lists/folder-list/folder-list.component.ts | 14 +++++++++++--- .../lists/status-list/status-list.component.ts | 4 ++-- src/app/services/filter.service.ts | 8 ++++++++ src/styles.scss | 2 +- 7 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/app/list-toggle/list-toggle.component.html b/src/app/list-toggle/list-toggle.component.html index bbd52d54f..97e3beda3 100644 --- a/src/app/list-toggle/list-toggle.component.html +++ b/src/app/list-toggle/list-toggle.component.html @@ -1,4 +1,4 @@ - + Folders Devices \ No newline at end of file diff --git a/src/app/list-toggle/list-toggle.component.ts b/src/app/list-toggle/list-toggle.component.ts index cab39e70d..733973476 100644 --- a/src/app/list-toggle/list-toggle.component.ts +++ b/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(); constructor() { } diff --git a/src/app/lists/device-list/device-list.component.ts b/src/app/lists/device-list/device-list.component.ts index fc1c1af22..26c5f600f 100644 --- a/src/app/lists/device-list/device-list.component.ts +++ b/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); } }); } diff --git a/src/app/lists/folder-list/folder-list.component.ts b/src/app/lists/folder-list/folder-list.component.ts index 6c1185ff1..d5c08e4dd 100644 --- a/src/app/lists/folder-list/folder-list.component.ts +++ b/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); } }); } diff --git a/src/app/lists/status-list/status-list.component.ts b/src/app/lists/status-list/status-list.component.ts index 04aa42cc3..beca46992 100644 --- a/src/app/lists/status-list/status-list.component.ts +++ b/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; } }); diff --git a/src/app/services/filter.service.ts b/src/app/services/filter.service.ts index 2cf2a2611..d66da853b 100644 --- a/src/app/services/filter.service.ts +++ b/src/app/services/filter.service.ts @@ -12,6 +12,13 @@ export interface FilterInput { } export class FilterService { + previousInputs = new Map( + [ + [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); } } diff --git a/src/styles.scss b/src/styles.scss index a4664d9bd..bb17af248 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -88,7 +88,7 @@ html, body { a { text-decoration: underline; - color: mat-color($tech-ui-primary); + color: #000000; } .tui-card {