fix search box issue (#15097)

* fix search box issue

* fix compilation error
This commit is contained in:
Alan Ren
2021-04-12 13:05:19 -07:00
committed by GitHub
parent ba89351ff4
commit 862ffcf7d2
3 changed files with 17 additions and 9 deletions

View File

@@ -99,6 +99,8 @@
white-space: nowrap;
width: 200px;
align-content: flex-start;
display: flex;
flex-direction: column;
}
.slick-header-menu .filter .filter-option {

View File

@@ -139,12 +139,12 @@ export class HeaderFilter<T extends Slick.SlickData> {
.appendTo($item);
}
private addMenuInput(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>) {
private addMenuInput(menu: JQuery<HTMLElement>, columnDef: Slick.Column<T>): void {
const self = this;
jQuery('<input class="input" placeholder="Search" style="margin-top: 5px; width: 206px">')
.data('column', columnDef)
.bind('keyup', (e) => {
const filterVals = this.getFilterValuesByInput(jQuery(e.target));
.bind('keyup', async (e) => {
const filterVals = await this.getFilterValuesByInput(jQuery(e.target));
self.updateFilterInputs(menu, columnDef, filterVals);
})
.appendTo(menu);
@@ -375,14 +375,20 @@ export class HeaderFilter<T extends Slick.SlickData> {
return Array.from(seen);
}
private getFilterValuesByInput($input: JQuery<HTMLElement>): Array<string> {
private async getFilterValuesByInput($input: JQuery<HTMLElement>): Promise<Array<string>> {
const column = $input.data('column'),
filter = $input.val() as string,
dataView = this.grid.getData() as Slick.DataProvider<T>,
dataView = this.grid.getData() as IDisposableDataProvider<T>,
seen: Set<any> = new Set();
dataView.getItems().forEach(item => {
const value = item[column.field];
let columnValues: any[];
if (dataView.getColumnValues) {
columnValues = await dataView.getColumnValues(this.columnDef);
} else {
columnValues = dataView.getItems().map(item => item[column.field]);
}
columnValues.forEach(value => {
const valueArr = value instanceof Array ? value : [(!value ? '' : value)];
if (filter.length > 0) {
const lowercaseFilter = filter.toString().toLowerCase();
@@ -399,7 +405,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
return Array.from(seen).sort((v) => { return v; });
}
private getAllFilterValues(data: Array<Slick.SlickData>, column: Slick.Column<T>) {
private getAllFilterValues(data: Array<T>, column: Slick.Column<T>) {
const seen: Set<any> = new Set();
data.forEach(items => {

View File

@@ -586,7 +586,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom
return seen.sort((v) => { return v; });
}
private getFilterValuesByInput($input: JQuery<HTMLElement>): Array<string> {
private async getFilterValuesByInput($input: JQuery<HTMLElement>): Promise<Array<string>> {
const column = $input.data('column'),
filter = $input.val() as string,
dataView = this['grid'].getData() as Slick.DataProvider<Slick.SlickData>,