(hertzbeat) branch master updated: [bugfix] fix search value not clear (#2688)

[go...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

gongchao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git


The following commit(s) were added to refs/heads/master by this push:
     new 4d9900b56 [bugfix] fix search value not clear (#2688)
4d9900b56 is described below

commit 4d9900b56b87b2f1f8917c5b243bd5a9cd2455eb
Author: aias00 <ro...@163.com>
AuthorDate: Mon Sep 9 23:00:49 2024 +0800

    [bugfix] fix search value not clear (#2688)
    
    Co-authored-by: shown <yu...@gmail.com>
    Co-authored-by: Calvin <na...@163.com>
---
 .../app/layout/basic/widgets/search.component.ts   | 41 +++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/web-app/src/app/layout/basic/widgets/search.component.ts b/web-app/src/app/layout/basic/widgets/search.component.ts
index a1b7c2a9f..05d9a9728 100644
--- a/web-app/src/app/layout/basic/widgets/search.component.ts
+++ b/web-app/src/app/layout/basic/widgets/search.component.ts
@@ -10,8 +10,9 @@ import {
   OnDestroy,
   Output
 } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, tap, filter } from 'rxjs/operators';
 
 import { Monitor } from '../../../pojo/Monitor';
 import { MonitorService } from '../../../service/monitor.service';
@@ -38,12 +39,7 @@ import { MonitorService } from '../../../service/monitor.service';
       />
     </nz-input-group>
     <nz-autocomplete nzBackfill="false" nzDefaultActiveFirstOption #auto>
-      <nz-auto-option
-        *ngFor="let option of options"
-        [nzValue]="option.id"
-        [nzLabel]="option.name"
-        [routerLink]="['/monitors/' + option.id]"
-      >
+      <nz-auto-option *ngFor="let option of options" [nzValue]="option.id" [nzLabel]="option.name" (click)="onOptionSelect(option)">
         <a>
           {{ 'monitor.name' | i18n }} : {{ option.name }}
           <span style="left:50% ; position: absolute;">{{ 'monitor.host' | i18n }} : {{ option.host }}</span>
@@ -79,10 +75,23 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
   }
   @Output() readonly toggleChangeChange = new EventEmitter<boolean>();
 
-  constructor(private el: ElementRef<HTMLElement>, private cdr: ChangeDetectorRef, private monitorSvc: MonitorService) {}
+  constructor(
+    private router: Router,
+    private el: ElementRef<HTMLElement>,
+    private cdr: ChangeDetectorRef,
+    private monitorSvc: MonitorService
+  ) {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+      this.resetSearch();
+    });
+  }
 
   ngAfterViewInit(): void {
     this.qIpt = this.el.nativeElement.querySelector('.ant-input') as HTMLInputElement;
+    this.initOptions();
+  }
+
+  initOptions() {
     this.search$
       .pipe(
         debounceTime(500),
@@ -135,6 +144,22 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
     this.search$.next((ev.target as HTMLInputElement).value);
   }
 
+  onOptionSelect(option: any) {
+    this.router.navigate([`/monitors/${option.id}`]);
+    this.resetSearch();
+    if (this.qIpt) {
+      this.qIpt.blur();
+    }
+    this.qBlur();
+  }
+
+  resetSearch() {
+    if (this.qIpt) {
+      this.qIpt!.value = '';
+    }
+    this.initOptions();
+  }
+
   ngOnDestroy(): void {
     this.search$.complete();
     this.search$.unsubscribe();


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@hertzbeat.apache.org
For additional commands, e-mail: notifications-help@hertzbeat.apache.org