From 4536cfbe094aee0299fae8a45d96719ceaddd644 Mon Sep 17 00:00:00 2001 From: Bahadir Date: Sun, 9 Jul 2023 08:47:13 +0300 Subject: [PATCH 1/2] adding sensitivty logic --- .../mat-table-filter-button.component.ts | 21 ++++++++++++++----- .../src/lib/mat-table-filter-header.ts | 4 ++++ .../src/lib/mat-table-filter-triggerer.ts | 2 ++ .../src/lib/models/case-sensivity.ts | 1 + 4 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 libs/mat-table-filter/src/lib/models/case-sensivity.ts diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts b/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts index 6e4e4f4..0a90d10 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts @@ -29,6 +29,7 @@ export class MatTableFilterButtonComponent { public intlService = inject(MatTableFilterIntlService); private cd = inject(ChangeDetectorRef); + private isCaseSensitive = true; operators: MatTableFilterDefaultOperator[] = []; _filterFormGroup: FormGroup = new FormGroup({ operator: new FormControl('', [Validators.required]), @@ -48,6 +49,7 @@ export class MatTableFilterButtonComponent ngOnInit(): void { if (this.headerType === 'string') { this.operators = MAT_TABLE_FILTER_STRING_DEFAULT_OPERATORS; + this.isCaseSensitive = this.sensitivityType; } else if (this.headerType === 'number') { this.operators = MAT_TABLE_FILTER_NUMBER_DEFAULT_OPERATORS; } @@ -58,11 +60,20 @@ export class MatTableFilterButtonComponent handleFormSubmit() { if (this._filterFormGroup.valid) { - this.selectedFilterSubject.next({ - key: this.columnKey, - operator: this._filterFormGroup.get('operator')?.value, - input: this._filterFormGroup.get('input')?.value, - }); + if(!this.isCaseSensitive){ + this.selectedFilterSubject.next({ + key: this.columnKey.toLowerCase().trim(), + operator: this._filterFormGroup.get('operator')?.value, + input: this._filterFormGroup.get('input')?.value.toLowerCase().trim(), + }); + }else{ + this.selectedFilterSubject.next({ + key: this.columnKey, + operator: this._filterFormGroup.get('operator')?.value, + input: this._filterFormGroup.get('input')?.value, + }); + } + this._isFilterApplied = true; this.menuTrigger.closeMenu(); } diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-header.ts b/libs/mat-table-filter/src/lib/mat-table-filter-header.ts index 73d16f2..78aba50 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-header.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-header.ts @@ -16,6 +16,7 @@ import { } from './mat-table-filter-triggerer'; import {MatTableDefaultFilterSelection} from './models'; import {MatTableHeaderType} from './models/header-type'; +import { CaseSensitivityType } from './models/case-sensitivity'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -27,6 +28,8 @@ import {MatTableHeaderType} from './models/header-type'; export class MatTableFilterHeader implements AfterViewInit { @Input({required: false}) matTableFilterHeaderType: MatTableHeaderType = 'string'; + @Input({required: false}) isHeaderCaseSensitive : CaseSensitivityType = + true; private triggererComponentType = inject(MAT_TABLE_TRIGGERER_TYPE); private triggererInstance?: MatTableTriggerer; @@ -58,6 +61,7 @@ export class MatTableFilterHeader implements AfterViewInit { ); this.triggererInstance = this._triggererComponentRef.instance; this.triggererInstance.headerType = this.matTableFilterHeaderType; + this.triggererInstance.sensitivityType = this.isHeaderCaseSensitive; } get selectedFilter$(): Observable { diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts b/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts index 87e5774..8f647fd 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts @@ -4,12 +4,14 @@ import {Observable, Subject} from 'rxjs'; import {MatTableFilterButtonComponent} from './mat-table-filter-button/mat-table-filter-button.component'; import {MatTableDefaultFilterSelection} from './models'; import {MatTableHeaderType} from './models/header-type'; +import { CaseSensitivityType } from './models/case-sensitivity'; export class MatTableTriggerer { protected matColumnDef = inject(MatColumnDef); protected selectedFilterSubject = new Subject(); public headerType!: MatTableHeaderType; + public sensitivityType! : CaseSensitivityType; public parentHovered!: boolean; public get columnKey() { diff --git a/libs/mat-table-filter/src/lib/models/case-sensivity.ts b/libs/mat-table-filter/src/lib/models/case-sensivity.ts new file mode 100644 index 0000000..af80c95 --- /dev/null +++ b/libs/mat-table-filter/src/lib/models/case-sensivity.ts @@ -0,0 +1 @@ +export type CaseSensitivityType = true | false; \ No newline at end of file From 9d5490ff0de96e694ef05019cf00368ee5124601 Mon Sep 17 00:00:00 2001 From: Bahadir Date: Mon, 10 Jul 2023 17:01:06 +0300 Subject: [PATCH 2/2] column values fix --- .../mat-table-filter-button.component.ts | 20 ++++++------------- .../src/lib/mat-table-filter-header.ts | 5 ++--- .../src/lib/mat-table-filter-triggerer.ts | 4 ++-- .../src/lib/models/filter-selection.ts | 1 + .../lib/services/mat-table-filter.service.ts | 9 ++++++++- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts b/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts index 0a90d10..89a3e38 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-button/mat-table-filter-button.component.ts @@ -60,20 +60,12 @@ export class MatTableFilterButtonComponent handleFormSubmit() { if (this._filterFormGroup.valid) { - if(!this.isCaseSensitive){ - this.selectedFilterSubject.next({ - key: this.columnKey.toLowerCase().trim(), - operator: this._filterFormGroup.get('operator')?.value, - input: this._filterFormGroup.get('input')?.value.toLowerCase().trim(), - }); - }else{ - this.selectedFilterSubject.next({ - key: this.columnKey, - operator: this._filterFormGroup.get('operator')?.value, - input: this._filterFormGroup.get('input')?.value, - }); - } - + this.selectedFilterSubject.next({ + key: this.columnKey, + operator: this._filterFormGroup.get('operator')?.value, + input: this._filterFormGroup.get('input')?.value, + isCaseSensitive: this.isCaseSensitive, + }); this._isFilterApplied = true; this.menuTrigger.closeMenu(); } diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-header.ts b/libs/mat-table-filter/src/lib/mat-table-filter-header.ts index 78aba50..fb2bcea 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-header.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-header.ts @@ -16,7 +16,7 @@ import { } from './mat-table-filter-triggerer'; import {MatTableDefaultFilterSelection} from './models'; import {MatTableHeaderType} from './models/header-type'; -import { CaseSensitivityType } from './models/case-sensitivity'; +import {CaseSensitivityType} from './models/case-sensivity'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -28,8 +28,7 @@ import { CaseSensitivityType } from './models/case-sensitivity'; export class MatTableFilterHeader implements AfterViewInit { @Input({required: false}) matTableFilterHeaderType: MatTableHeaderType = 'string'; - @Input({required: false}) isHeaderCaseSensitive : CaseSensitivityType = - true; + @Input({required: false}) isHeaderCaseSensitive: CaseSensitivityType = true; private triggererComponentType = inject(MAT_TABLE_TRIGGERER_TYPE); private triggererInstance?: MatTableTriggerer; diff --git a/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts b/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts index 8f647fd..0022b76 100644 --- a/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts +++ b/libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts @@ -4,14 +4,14 @@ import {Observable, Subject} from 'rxjs'; import {MatTableFilterButtonComponent} from './mat-table-filter-button/mat-table-filter-button.component'; import {MatTableDefaultFilterSelection} from './models'; import {MatTableHeaderType} from './models/header-type'; -import { CaseSensitivityType } from './models/case-sensitivity'; +import {CaseSensitivityType} from './models/case-sensivity'; export class MatTableTriggerer { protected matColumnDef = inject(MatColumnDef); protected selectedFilterSubject = new Subject(); public headerType!: MatTableHeaderType; - public sensitivityType! : CaseSensitivityType; + public sensitivityType!: CaseSensitivityType; public parentHovered!: boolean; public get columnKey() { diff --git a/libs/mat-table-filter/src/lib/models/filter-selection.ts b/libs/mat-table-filter/src/lib/models/filter-selection.ts index cbfa832..7d11ea3 100644 --- a/libs/mat-table-filter/src/lib/models/filter-selection.ts +++ b/libs/mat-table-filter/src/lib/models/filter-selection.ts @@ -4,6 +4,7 @@ export type MatTableDefaultFilterSelection = { key: string; operator: MatTableFilterDefaultOperator; input?: string | boolean | number; + isCaseSensitive?: boolean; }; const MAT_TABLE_FILTER_STRING_DEFAULT_OPERATORS_MAP = { diff --git a/libs/mat-table-filter/src/lib/services/mat-table-filter.service.ts b/libs/mat-table-filter/src/lib/services/mat-table-filter.service.ts index 855413e..b93ad7c 100644 --- a/libs/mat-table-filter/src/lib/services/mat-table-filter.service.ts +++ b/libs/mat-table-filter/src/lib/services/mat-table-filter.service.ts @@ -42,7 +42,14 @@ export class MatTableFilterService { const value = data[filter.key] as string | number | boolean; if (value !== undefined) { - return this.operators[filter.operator](value, filter.input); + if (filter.isCaseSensitive == false) { + return this.operators[filter.operator]( + value.toString().toLowerCase(), + filter.input?.toString().toLowerCase() + ); + } else { + return this.operators[filter.operator](value, filter.input); + } } return true; });