mirror of
https://github.com/goharbor/harbor.git
synced 2024-11-22 18:25:56 +01:00
Auto-focus for filter component (#15672)
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
parent
fc1db450b2
commit
38e0910fc7
@ -5,7 +5,7 @@
|
||||
<div class="flex-xs-middle option-left">
|
||||
</div>
|
||||
<div class="flex-xs-middle option-right">
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
|
||||
<hbr-filter [width]="240" [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</span>
|
||||
|
@ -4,7 +4,7 @@
|
||||
<div class="flex-xs-middle option-left">
|
||||
</div>
|
||||
<div class="flex-xs-middle option-right">
|
||||
<hbr-filter [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
|
||||
<hbr-filter [width]="240" [withDivider]="true" filterPlaceholder='{{"SYSTEM_ROBOT.SEARCH_BY_NAME" | translate}}'></hbr-filter>
|
||||
<span class="refresh-btn" (click)="refresh()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</span>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<span>
|
||||
<clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
|
||||
<input [attr.readOnly]="readonly" [hidden]="!isShowSearchBox" type="text" class="filter-input clr-input" autofocus (keyup)="valueChange()" (focus)="inputFocus()"
|
||||
<input [style.width.px]="width" #inputElement [attr.readOnly]="readonly" [hidden]="!isShowSearchBox" type="text" class="filter-input clr-input" autofocus (keyup)="valueChange()" (focus)="inputFocus()"
|
||||
placeholder="{{placeHolder}}" [(ngModel)]="currentValue" />
|
||||
<span class="filter-divider" *ngIf="withDivider"></span>
|
||||
</span>
|
||||
|
@ -1,6 +1,6 @@
|
||||
.filter-icon {
|
||||
position: relative;
|
||||
right: -12px;
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.filter-divider {
|
||||
@ -24,5 +24,5 @@
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
padding-left: 15px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
@ -0,0 +1,36 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { SharedTestingModule } from "../../shared.module";
|
||||
import { FilterComponent } from "./filter.component";
|
||||
|
||||
describe('FilterComponent', () => {
|
||||
let component: FilterComponent;
|
||||
let fixture: ComponentFixture<FilterComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
SharedTestingModule,
|
||||
],
|
||||
declarations: [FilterComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FilterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
it('should be focused', async () => {
|
||||
await fixture.whenStable();
|
||||
const searchIcon: HTMLElement = fixture.nativeElement.querySelector('.search-btn');
|
||||
searchIcon.click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
const input: HTMLInputElement = fixture.nativeElement.querySelector('.filter-input:focus');
|
||||
expect(input).toBeTruthy();
|
||||
});
|
||||
});
|
@ -11,7 +11,7 @@
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
import { Component, Input, Output, OnInit, EventEmitter } from "@angular/core";
|
||||
import { Component, Input, Output, OnInit, EventEmitter, ViewChild, ElementRef, ChangeDetectorRef } from "@angular/core";
|
||||
import { Subject } from "rxjs";
|
||||
import { debounceTime } from 'rxjs/operators';
|
||||
|
||||
@ -35,6 +35,11 @@ export class FilterComponent implements OnInit {
|
||||
}
|
||||
@Input() expandMode: boolean = false;
|
||||
@Input() withDivider: boolean = false;
|
||||
@Input() width: number;
|
||||
@ViewChild("inputElement")
|
||||
inputElement: ElementRef;
|
||||
constructor(private cd: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.filterTerms
|
||||
@ -59,6 +64,10 @@ export class FilterComponent implements OnInit {
|
||||
return;
|
||||
}
|
||||
this.isExpanded = !this.isExpanded;
|
||||
if (this.isExpanded) {// Be focused when open search
|
||||
this.cd.detectChanges();
|
||||
this.inputElement.nativeElement.focus();
|
||||
}
|
||||
this.openFlag.emit(this.isExpanded);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user