diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.html index 10fd11d1e..7e59a8a6d 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.html +++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.html @@ -36,11 +36,13 @@
+ [(ngModel)]="inputTag" + (keyup)="searchByInputTag()" + class="clr-input no-outline" />
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.scss index 627ecb3e4..3d3a910cb 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.scss +++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.scss @@ -35,3 +35,8 @@ .search-dropdown-toggle { margin-right: 5px; } + +.no-outline:focus { + border: none; + background: none; +} diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.ts index 0ada32cbb..4935a690c 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.ts +++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component.ts @@ -3,19 +3,23 @@ import { ElementRef, EventEmitter, Input, + OnDestroy, + OnInit, Output, Renderer2, ViewChild, } from '@angular/core'; import { ArtifactFilterEvent, multipleFilter } from '../../../../artifact'; import { Label } from '../../../../../../../../../../ng-swagger-gen/models/label'; +import { Subject, Subscription } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; @Component({ selector: 'app-artifact-filter', templateUrl: './artifact-filter.component.html', styleUrls: ['./artifact-filter.component.scss'], }) -export class ArtifactFilterComponent { +export class ArtifactFilterComponent implements OnInit, OnDestroy { @Input() withDivider: boolean = false; @ViewChild('filterArea') @@ -31,6 +35,9 @@ export class ArtifactFilterComponent { filterEvent = new EventEmitter(); readonly searchId: string = 'search-btn'; readonly typeSelectId: string = 'type-select'; + inputTag: string; + private _keyupEventSubject: Subject = new Subject(); + private _keyupEventSubscription: Subscription; constructor(private renderer: Renderer2) { // click outside, then close dropdown this.renderer.listen('window', 'click', (e: Event) => { @@ -45,6 +52,26 @@ export class ArtifactFilterComponent { } }); } + ngOnInit(): void { + if (!this._keyupEventSubscription) { + this._keyupEventSubscription = this._keyupEventSubject + .pipe(debounceTime(500)) + .subscribe(inputTag => { + this.filterEvent.emit({ + type: this.filterByType, + isLabel: false, + isInputTag: true, + stringValue: inputTag, + }); + }); + } + } + ngOnDestroy(): void { + if (this._keyupEventSubscription) { + this._keyupEventSubscription.unsubscribe(); + this._keyupEventSubscription = null; + } + } selectFilterType() { this.selectedValue = null; @@ -87,4 +114,7 @@ export class ArtifactFilterComponent { } return []; } + searchByInputTag() { + this._keyupEventSubject.next(this.inputTag); + } } diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts index f06d8586b..9a9608df1 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts +++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts @@ -816,7 +816,12 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy { } } else { if (e?.stringValue) { - this.filters.push(`${e.type}=${e?.stringValue}`); + if (e?.isInputTag) { + // for input tag, use fuzzy match + this.filters.push(`${e.type}=~${e?.stringValue}`); + } else { + this.filters.push(`${e.type}=${e?.stringValue}`); + } } } this.refresh(); diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.ts b/src/portal/src/app/base/project/repository/artifact/artifact.ts index f5a9704cb..776a625ba 100644 --- a/src/portal/src/app/base/project/repository/artifact/artifact.ts +++ b/src/portal/src/app/base/project/repository/artifact/artifact.ts @@ -130,5 +130,6 @@ export interface ArtifactFilterEvent { type?: string; stringValue?: string; isLabel?: boolean; + isInputTag?: boolean; label?: Label; }