text-filter working
This commit is contained in:
Yubing325
parent
970cc15210
commit
c7584f250a
@ -5,8 +5,8 @@ import { FormsModule } from '@angular/forms';
|
||||
import { NumberFilterComponent } from './number-filter/number-filter.component';
|
||||
import { DatetimeFilterComponent } from './datetime-filter/datetime-filter.component';
|
||||
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
||||
|
||||
|
||||
import { PopoverModule } from 'ngx-bootstrap/popover';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
|
||||
|
||||
@ -17,6 +17,8 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
BsDatepickerModule.forRoot(),
|
||||
PopoverModule.forRoot(),
|
||||
BsDropdownModule.forRoot()
|
||||
],
|
||||
exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
|
||||
})
|
||||
|
||||
@ -1,6 +1,57 @@
|
||||
<label class="ml-2">
|
||||
<span>Filter: </span><input type="text" [(ngModel)]="searchTerm">
|
||||
</label>
|
||||
<ng-template #popTemplate>
|
||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
|
||||
<option *ngFor="let filter of filterTypes">{{filter}}</option>
|
||||
</select>
|
||||
|
||||
<input type="text" class="form-control" placeholder="column value" aria-label="Username"
|
||||
aria-describedby="basic-addon1" [(ngModel)]="filterValue">
|
||||
<button class="btn btn-primary" (click)="applyFilter()">Filter</button>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<span [popover]="popTemplate" popoverTitle="Template ref content inside">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve"
|
||||
width="13px" height="13px">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c0.001,4.836,2.054,9.445,5.649,12.681l165.018,148.514V460.8
|
||||
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||
V263.595l165.018-148.48c3.604-3.243,5.658-7.866,5.649-12.715V17.067C477.871,7.641,470.23,0,460.804,0z M443.737,94.805
|
||||
L278.72,243.285c-3.604,3.243-5.657,7.866-5.649,12.715v143.053l-68.267,34.133V256c-0.001-4.836-2.054-9.445-5.649-12.68
|
||||
L34.137,94.805V34.133h409.6V94.805z" />
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
|
||||
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { IFilter, ISimpleFilter } from '../../models/IFilter';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -8,39 +9,35 @@ import { Subscription } from 'rxjs';
|
||||
templateUrl: './text-filter.component.html',
|
||||
styleUrls: ['./text-filter.component.scss']
|
||||
})
|
||||
export class TextFilterComponent implements OnInit, OnDestroy {
|
||||
export class TextFilterComponent implements OnInit {
|
||||
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Output() filteredResults: EventEmitter<any> = new EventEmitter();
|
||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||
|
||||
private _dataSubscription: Subscription;
|
||||
@Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
|
||||
title = 'Welcome word';
|
||||
content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
|
||||
|
||||
private _searchTerm: string;
|
||||
|
||||
filterType: string = 'Contains';
|
||||
filterValue: string = null;
|
||||
|
||||
get searchTerm(): string {
|
||||
return this._searchTerm;
|
||||
get filterTypes(){
|
||||
return ["contains","equals","startsWith"]
|
||||
}
|
||||
|
||||
set searchTerm(value: string) {
|
||||
this._searchTerm = value;
|
||||
//this.filteredResults.emit(this.dataFilter(value));
|
||||
}
|
||||
|
||||
// dataFilter(searchString: string) {
|
||||
// return this.latestResult.data.filter(x =>
|
||||
// x.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1);
|
||||
// }
|
||||
|
||||
constructor() { }
|
||||
ngOnDestroy(): void {
|
||||
this._dataSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||
this.latestResult = newData;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
applyFilter(){
|
||||
this.onFilter.emit(<ISimpleFilter>{
|
||||
path: "name",
|
||||
value: this.filterValue,
|
||||
type: this.filterType,
|
||||
and: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
export interface IFilter {
|
||||
type: string;
|
||||
and?: boolean;
|
||||
}
|
||||
|
||||
export interface ISimpleFilter extends IFilter {
|
||||
path: string;
|
||||
value: any;
|
||||
}
|
||||
@ -5,9 +5,6 @@
|
||||
<tr>
|
||||
<th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
|
||||
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
||||
<ng-container *ngFor="let filter of filters" >
|
||||
<ng-container [ngTemplateOutlet]="filter.template"></ng-container>
|
||||
</ng-container>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -16,6 +13,9 @@
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
|
||||
></ng-container>
|
||||
<ng-container *ngFor="let filter of filters" >
|
||||
<ng-container [ngTemplateOutlet]="filter.template"></ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<h2>grid-filter-demo works!</h2>
|
||||
<psbx-datetime-filter></psbx-datetime-filter>
|
||||
<button class="btn btn-danger" (click)="test()">Test</button>
|
||||
|
||||
|
||||
<ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
|
||||
tableClasses="table table-sm table-dark table-striped table-bordered">
|
||||
@ -10,11 +10,12 @@
|
||||
[dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create Record</button>
|
||||
</ng-container>
|
||||
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" (filteredResults)="filteredResults = $event"></psbx-ds-text-filter>
|
||||
|
||||
|
||||
<ng-container psDataGridCol="id">
|
||||
<div *psDataGridColHeader>ID</div>
|
||||
<div *psDataGridCell="let model">{{model.id}}</div>
|
||||
<psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" (onFilter)="filterMerchants($event)" ></psbx-ds-text-filter>
|
||||
<!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
|
||||
|
||||
</psfa-ds-sort-icon> -->
|
||||
|
||||
@ -20,6 +20,7 @@ export class GridFilterDemoComponent implements OnInit {
|
||||
|
||||
pages:any;
|
||||
filteredResults:any;
|
||||
somefilter:any;
|
||||
|
||||
createDataSource(): IDataSource<IMerchant> {
|
||||
return this.merchantService.createDataSource();
|
||||
@ -28,9 +29,12 @@ export class GridFilterDemoComponent implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
this.merchantDataSource.refresh();
|
||||
|
||||
}
|
||||
|
||||
test(){
|
||||
console.log(this.filteredResults);
|
||||
filterMerchants(event){
|
||||
this.somefilter = event;
|
||||
this.merchantDataSource.filters[0]=this.somefilter;
|
||||
this.merchantDataSource.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user