Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #1 Fix: Case Insensitivity #3

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class MatTableFilterButtonComponent
{
public intlService = inject(MatTableFilterIntlService);
private cd = inject(ChangeDetectorRef);
private isCaseSensitive = true;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is no need to have another field to hold case sensitivity state. You can just use sensitivityType

operators: MatTableFilterDefaultOperator[] = [];
_filterFormGroup: FormGroup = new FormGroup({
operator: new FormControl('', [Validators.required]),
Expand All @@ -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;
}
Expand All @@ -62,6 +64,7 @@ export class MatTableFilterButtonComponent
key: this.columnKey,
operator: this._filterFormGroup.get('operator')?.value,
input: this._filterFormGroup.get('input')?.value,
isCaseSensitive: this.isCaseSensitive,
});
this._isFilterApplied = true;
this.menuTrigger.closeMenu();
Expand Down
3 changes: 3 additions & 0 deletions libs/mat-table-filter/src/lib/mat-table-filter-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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-sensivity';

@Component({
// eslint-disable-next-line @angular-eslint/component-selector
Expand All @@ -27,6 +28,7 @@ import {MatTableHeaderType} from './models/header-type';
export class MatTableFilterHeader implements AfterViewInit {
@Input({required: false}) matTableFilterHeaderType: MatTableHeaderType =
'string';
@Input({required: false}) isHeaderCaseSensitive: CaseSensitivityType = true;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The naming is important here. To infer the developer that this field is coming from MatTableFilterHeader, it should prefixed as matTableFilter. So changing the attribute name to matTableFilterCaseSensitive or matTableFilterIsCaseSensitive would be much better.

private triggererComponentType = inject(MAT_TABLE_TRIGGERER_TYPE);
private triggererInstance?: MatTableTriggerer<MatTableDefaultFilterSelection>;

Expand Down Expand Up @@ -58,6 +60,7 @@ export class MatTableFilterHeader implements AfterViewInit {
);
this.triggererInstance = this._triggererComponentRef.instance;
this.triggererInstance.headerType = this.matTableFilterHeaderType;
this.triggererInstance.sensitivityType = this.isHeaderCaseSensitive;
}

get selectedFilter$(): Observable<MatTableDefaultFilterSelection> {
Expand Down
2 changes: 2 additions & 0 deletions libs/mat-table-filter/src/lib/mat-table-filter-triggerer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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-sensivity';

export class MatTableTriggerer<T extends MatTableDefaultFilterSelection> {
protected matColumnDef = inject(MatColumnDef);
protected selectedFilterSubject = new Subject<T>();

public headerType!: MatTableHeaderType;
public sensitivityType!: CaseSensitivityType;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With my suggestion on holding this field as just plain boolean, this field's name can also changed to caseSensitive or isCaseSensitive.

public parentHovered!: boolean;

public get columnKey() {
Expand Down
1 change: 1 addition & 0 deletions libs/mat-table-filter/src/lib/models/case-sensivity.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type CaseSensitivityType = true | false;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is no need to create a type for sensitivity state.

1 change: 1 addition & 0 deletions libs/mat-table-filter/src/lib/models/filter-selection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment on lines +45 to +52
Copy link
Owner

@besimgurbuz besimgurbuz Jul 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a suggestion for this code block;

Suggested change
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);
}
const operatorFn = this.operators[filter.operator];
if (filter.isCaseSensitive) {
return operatorFn(value, filter.input);
}
return operatorFn(value.toString().toLowerCase(), filter.input?.toString()?.toLowerCase());

}
return true;
});
Expand Down