mirror of
https://github.com/octoleo/syncthing.git
synced 2024-09-19 21:29:01 +00:00
Store last filtered value between toggling of lists
This commit is contained in:
parent
d76f1fe356
commit
a9b6801b22
@ -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>
|
@ -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() { }
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -88,7 +88,7 @@ html, body {
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: mat-color($tech-ui-primary);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tui-card {
|
||||
|
Loading…
Reference in New Issue
Block a user