scottk/siembol
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/siembol.git synced 2025-11-04 20:38:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Config-editor-ui: small search optimisation (#539)

Browse Source
This commit is contained in:
Celie Valentiny
2022-02-17 15:08:02 +00:00
committed by GitHub
parent d9210c7371
commit d88e94e833
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config-editor/config-editor-ui/package-lock.json generated
View File

File diff suppressed because one or more lines are too long

6
config-editor/config-editor-ui/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "rule-editor.ui", "name": "rule-editor.ui",
"version": "2.3.1-dev", "version": "2.3.2-dev",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
@@ -22,7 +22,7 @@
"dependencies": { "dependencies": {
"@angular-devkit/build-angular": "^13.2.3", "@angular-devkit/build-angular": "^13.2.3",
"@angular/animations": "^13.2.2", "@angular/animations": "^13.2.2",
"@angular/cdk": "^13.2.2", "@angular/cdk": "^13.2.3",
"@angular/common": "^13.2.2", "@angular/common": "^13.2.2",
"@angular/compiler": "^13.2.2", "@angular/compiler": "^13.2.2",
"@angular/core": "^13.2.2", "@angular/core": "^13.2.2",
@@ -88,7 +88,7 @@
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-node": "^10.5.0", "ts-node": "^10.5.0",
"typescript": "~4.5.4", "typescript": "~4.5.4",
"webpack": "^5.68.0" "webpack": "^5.69.0"
}, },
"peerDependencies": {} "peerDependencies": {}
} }

28
config-editor/config-editor-ui/src/app/components/search/search.component.ts
View File

@@ -1,4 +1,6 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({ @Component({
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
@@ -13,35 +15,41 @@ export class SearchComponent implements OnInit {
@Input() filterMyConfigs: boolean; @Input() filterMyConfigs: boolean;
@Input() filterUndeployed: boolean; @Input() filterUndeployed: boolean;
@Input() filterUpgradable: boolean; @Input() filterUpgradable: boolean;
@Output() searchTermChange: EventEmitter<string> = new EventEmitter<string>(); @Output() readonly searchTermChange: EventEmitter<string> = new EventEmitter<string>();
@Output() myConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly myConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() undeployedConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly undeployedConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() updatedConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() readonly updatedConfigsChange: EventEmitter<boolean> = new EventEmitter<boolean>();
debouncer: Subject<string> = new Subject<string>();
myConfigs = true; myConfigs = true;
ngOnInit(): void { ngOnInit(): void {
this.searchBox.nativeElement.focus(); this.searchBox.nativeElement.focus();
this.debouncer
.pipe(debounceTime(300), distinctUntilChanged())
.subscribe(
(searchTerm: string) => this.searchTermChange.emit(searchTerm)
);
} }
public onSearch(searchTerm: string) { onSearch(searchTerm: string) {
this.searchTermChange.emit(searchTerm); this.debouncer.next(searchTerm);
} }
public onClearSearch() { onClearSearch() {
this.onSearch(''); this.onSearch('');
this.searchTerm = ''; this.searchTerm = '';
} }
public clickMyConfigs($event: boolean) { clickMyConfigs($event: boolean) {
this.myConfigsChange.emit($event); this.myConfigsChange.emit($event);
} }
public clickNotDeployed($event: boolean) { clickNotDeployed($event: boolean) {
this.undeployedConfigsChange.emit($event); this.undeployedConfigsChange.emit($event);
} }
public clickUpdatedConfigs($event: boolean) { clickUpdatedConfigs($event: boolean) {
this.updatedConfigsChange.emit($event); this.updatedConfigsChange.emit($event);
} }
} }