Skip to content

Commit 55f93f8

Browse files
borschborsch
committed
list enabled filter types
1 parent e9e0ea3 commit 55f93f8

5 files changed

Lines changed: 54 additions & 16 deletions

File tree

‎projects/angular-datatable-advanced-examples/src/app/app.component.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Component } from '@angular/core';
1+
import {Component} from '@angular/core';
22
import {HttpClient, HttpParams} from '@angular/common/http';
33
import {map} from 'rxjs/operators';
44
import {CogMenu, RowsLoader} from '../../../angular-datatable-advanced/src/lib/model/models';
55
import {Column} from '../../../angular-datatable-advanced/src/lib/model/column';
66
import {FilterIn} from '../../../angular-datatable-advanced/src/lib/model/filter-in';
77
import {Observable, of} from 'rxjs';
8+
import {FilterType} from '../../../angular-datatable-advanced/src/lib/model/filter';
89

910
@Component({
1011
selector: 'app-root',
@@ -74,6 +75,26 @@ export class AppComponent {
7475
dateFormat: 'd/m/Y',
7576
altInput: true
7677
}
78+
}, {
79+
columnKey: 'testRangeOnly',
80+
columnName: 'Test date picker: range only',
81+
filterable: true,
82+
enabledFilters: [FilterType.RANGE],
83+
filterDateOptions: {
84+
altFormat: 'd/m/Y',
85+
dateFormat: 'd/m/Y',
86+
altInput: true
87+
}
88+
}, {
89+
columnKey: 'testMultipleEnabled',
90+
columnName: 'Test date picker: multiple allowed',
91+
filterable: true,
92+
enabledFilters: [FilterType.RANGE, FilterType.GREATER_THAN_OR_EQUALS, FilterType.LESS_THAN_OR_EQUALS],
93+
filterDateOptions: {
94+
altFormat: 'd/m/Y',
95+
dateFormat: 'd/m/Y',
96+
altInput: true
97+
}
7798
}
7899
];
79100

‎projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<mat-header-cell class="ada-th" *matHeaderCellDef>
1111
{{column.column.columnName}}
1212
<span mat-sort-header class="ada-sort" [disabled]="!column.column.sortable"></span>
13-
<ada-filter [column]="column" [filterUpdateSubject]="filterUpdateSubject" *ngIf="column.column.filterable"></ada-filter>
13+
<ada-filter [column]="column" [filterUpdateSubject]="filterUpdateSubject" *ngIf="column.column.filterable" [enabledFilterTypes]="column.column.enabledFilters"></ada-filter>
1414
</mat-header-cell>
1515
<mat-cell class="ada-td" *matCellDef="let row" [innerHTML]="renderCell(row, column.column)" (click)="column.column.onClick && column.column.onClick(row)"></mat-cell>
1616
</ng-container>

‎projects/angular-datatable-advanced/src/lib/components/filter/filter.component.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
&nbsp;
33
<mat-icon [matMenuTriggerFor]="menu">search</mat-icon>
44
<mat-menu #menu="matMenu" class="filter-menu">
5-
<div (click)="ignoreMenuClick($event);" class="ada-filter-block">
5+
<div (click)="ignoreMenuClick($event);" class="ada-filter-block" *ngIf="!isSingleFilterEnabled()">
66
<select class="ada-filter-input" [(ngModel)]="filterType">
7-
<option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect()">Contains</option>
8-
<option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect()">Starts with</option>
9-
<option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect()">Ends with</option>
10-
<option value="EQUALS" *ngIf="!hasSetSelect()">Equals</option>
11-
<option value="NOT_EQUALS" *ngIf="!hasSetSelect()">Not equals</option>
12-
<option value="RANGE" *ngIf="!hasSetSelect()">Range</option>
13-
<option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect()">In</option>
14-
<option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect()">Not in</option>
15-
<option value="GREATER_THAN" *ngIf="hasDateTimeSelect()">Greater than</option>
16-
<option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect()">Greater than or equals</option>
17-
<option value="LESS_THAN" *ngIf="hasDateTimeSelect()">Less than</option>
18-
<option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect()">Less than or equals</option>
7+
<option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.CONTAINS)">Contains</option>
8+
<option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.STARTS_WITH)">Starts with</option>
9+
<option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.ENDS_WITH)">Ends with</option>
10+
<option value="EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.EQUALS)">Equals</option>
11+
<option value="NOT_EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.NOT_EQUALS)">Not equals</option>
12+
<option value="RANGE" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.RANGE)">Range</option>
13+
<option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.IN)">In</option>
14+
<option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.NIN)">Not in</option>
15+
<option value="GREATER_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN)">Greater than</option>
16+
<option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN_OR_EQUALS)">Greater than or equals</option>
17+
<option value="LESS_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN)">Less than</option>
18+
<option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN_OR_EQUALS)">Less than or equals</option>
1919
</select>
2020
</div>
2121
<div (click)="ignoreMenuClick($event);" *ngIf="hasSetSelect()" class="ada-filter-block">

‎projects/angular-datatable-advanced/src/lib/components/filter/filter.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ export class FilterComponent implements OnInit {
1515
column: ExtendedColumn;
1616
@Input()
1717
filterUpdateSubject: BehaviorSubject<ExtendedColumn>;
18+
@Input()
19+
enabledFilterTypes: Array<FilterType> = null;
1820

21+
FILTER_TYPES = FilterType;
1922
filterIn: Array<FilterIn> = [];
2023
filterType: FilterType = FilterType.EQUALS;
2124
// default filter
@@ -39,6 +42,12 @@ export class FilterComponent implements OnInit {
3942
this.filterType = FilterType.IN;
4043
});
4144
}
45+
46+
if (this.enabledFilterTypes) {
47+
if (this.isSingleFilterEnabled() || this.enabledFilterTypes.indexOf(this.filterType) < 0) {
48+
this.filterType = this.enabledFilterTypes[0];
49+
}
50+
}
4251
}
4352

4453
applyFilter() {
@@ -93,6 +102,13 @@ export class FilterComponent implements OnInit {
93102
}
94103
}
95104

105+
isFilterEnabled(filterType: FilterType): boolean {
106+
return !this.enabledFilterTypes || this.enabledFilterTypes.indexOf(filterType) > -1;
107+
}
108+
109+
isSingleFilterEnabled() {
110+
return this.enabledFilterTypes && this.enabledFilterTypes.length === 1;
111+
}
96112
}
97113

98114
@Pipe({

‎projects/angular-datatable-advanced/src/lib/model/column.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Filter} from './filter';
1+
import {Filter, FilterType} from './filter';
22
import {FilterIn} from './filter-in';
33
import {Observable} from 'rxjs';
44
import {FlatpickrDefaultsInterface} from 'angularx-flatpickr/flatpickr-defaults.service';
@@ -8,6 +8,7 @@ export class Column {
88
columnName: string;
99
sortable?: boolean;
1010
filterable?: boolean;
11+
enabledFilters?: Array<FilterType> = null;
1112
cellRender?: (row: any) => string;
1213
filterIn?: Array<FilterIn> = [];
1314
filterInPromise?: Observable<Array<FilterIn>> = null;

0 commit comments

Comments
 (0)