Add table search
This commit is contained in:
parent
83b8db9ae1
commit
1791b4e5cd
|
@ -1,3 +1,11 @@
|
||||||
|
<ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
|
||||||
|
<div class="row mt-5">
|
||||||
|
<div class="col-xs-12 col-12">
|
||||||
|
<input type="text" class="form-control" placeholder="{{ 'search'|translate|titlecase }}" [(ngModel)]="searchText" (ngModelChange)="onSearchTextChange($event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<div id="list" class="table-responsive mt-4">
|
<div id="list" class="table-responsive mt-4">
|
||||||
<table *ngIf="sourceType === 'list'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
|
<table *ngIf="sourceType === 'list'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
|
||||||
<thead>
|
<thead>
|
||||||
|
|
|
@ -18,6 +18,22 @@ export class TableComponent implements OnInit, OnDestroy {
|
||||||
@Input() refreshInterval?: number;
|
@Input() refreshInterval?: number;
|
||||||
|
|
||||||
enablePaginationTypes: string[] = ['logs', 'services', 'trainings'];
|
enablePaginationTypes: string[] = ['logs', 'services', 'trainings'];
|
||||||
|
searchPropertiesBlacklist: string[] = [
|
||||||
|
"chief_id",
|
||||||
|
"type_id",
|
||||||
|
"pivot",
|
||||||
|
"place_id",
|
||||||
|
"display_name",
|
||||||
|
"licence",
|
||||||
|
"lat",
|
||||||
|
"lon",
|
||||||
|
"id",
|
||||||
|
"updated_at",
|
||||||
|
"added_by_id",
|
||||||
|
"updated_by_id",
|
||||||
|
"changed_id",
|
||||||
|
"editor_id"
|
||||||
|
]
|
||||||
|
|
||||||
_maxPaginationSize: number = 10;
|
_maxPaginationSize: number = 10;
|
||||||
_rowsPerPage: number = 20;
|
_rowsPerPage: number = 20;
|
||||||
|
@ -43,12 +59,16 @@ export class TableComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
public data: any = [];
|
public data: any = [];
|
||||||
public displayedData: any = [];
|
public displayedData: any = [];
|
||||||
|
public originalData: any = [];
|
||||||
|
|
||||||
public loadDataInterval: NodeJS.Timer | undefined = undefined;
|
public loadDataInterval: NodeJS.Timer | undefined = undefined;
|
||||||
|
|
||||||
public currentPage: number = 1;
|
public currentPage: number = 1;
|
||||||
public totalElements: number = 1;
|
public totalElements: number = 1;
|
||||||
|
|
||||||
|
public searchText: string = "";
|
||||||
|
public searchData: any = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private api: ApiClientService,
|
private api: ApiClientService,
|
||||||
public auth: AuthService,
|
public auth: AuthService,
|
||||||
|
@ -69,11 +89,13 @@ export class TableComponent implements OnInit, OnDestroy {
|
||||||
if(!this.sourceType) this.sourceType = "list";
|
if(!this.sourceType) this.sourceType = "list";
|
||||||
this.api.get(this.sourceType).then((data: any) => {
|
this.api.get(this.sourceType).then((data: any) => {
|
||||||
this.data = data.filter((row: any) => typeof row.hidden !== 'undefined' ? !row.hidden : true);
|
this.data = data.filter((row: any) => typeof row.hidden !== 'undefined' ? !row.hidden : true);
|
||||||
|
this.originalData = this.data;
|
||||||
this.totalElements = this.data.length;
|
this.totalElements = this.data.length;
|
||||||
if(this.currentPage == 1) this.displayedData = this.data.slice(0, this.rowsPerPage);
|
if(this.currentPage == 1) this.displayedData = this.data.slice(0, this.rowsPerPage);
|
||||||
if(this.sourceType === 'list') {
|
if(this.sourceType === 'list') {
|
||||||
this.api.availableUsers = this.data.filter((row: any) => row.available).length;
|
this.api.availableUsers = this.data.filter((row: any) => row.available).length;
|
||||||
}
|
}
|
||||||
|
this.initializeSearchData();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,6 +105,42 @@ export class TableComponent implements OnInit, OnDestroy {
|
||||||
this.displayedData = this.data.slice(startItem, endItem);
|
this.displayedData = this.data.slice(startItem, endItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initializeSearchData() {
|
||||||
|
const searchPropertiesBlacklist = this.searchPropertiesBlacklist;
|
||||||
|
function flattenObj(obj: any, parent: any, res: any = {}){
|
||||||
|
//Based on https://stackoverflow.com/a/56253298
|
||||||
|
for(let key in obj){
|
||||||
|
if(typeof obj[key] == 'undefined' || obj[key] == null) continue;
|
||||||
|
if(searchPropertiesBlacklist.includes(key)) continue;
|
||||||
|
let propName = parent ? parent + '_' + key : key;
|
||||||
|
if(typeof obj[key] == 'object'){
|
||||||
|
flattenObj(obj[key], propName, res);
|
||||||
|
} else {
|
||||||
|
res[propName] = obj[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.searchData = this.data.map((row: any) => flattenObj(row, null));
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearchTextChange(search: string) {
|
||||||
|
if(search.length == 0) {
|
||||||
|
this.data = this.originalData;
|
||||||
|
this.displayedData = this.data.slice(0, this.rowsPerPage);
|
||||||
|
this.totalElements = this.data.length;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.data = this.originalData.filter((row: any, index: number) => {
|
||||||
|
return Object.values(this.searchData[index]).some((value: any) => {
|
||||||
|
return value.toString().toLowerCase().includes(search.toLowerCase());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.displayedData = this.data.slice(0, this.rowsPerPage);
|
||||||
|
this.totalElements = this.data.length;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
console.log(this.sourceType);
|
console.log(this.sourceType);
|
||||||
this.loadTableData();
|
this.loadTableData();
|
||||||
|
|
Loading…
Reference in New Issue