Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-4175 - added 'singleSelect' property for filters

Browse Source
This commit is contained in:
Valentin Mihai 2022-06-14 19:22:02 +03:00
parent 9ee7b12e4a
commit d4e2bd43ad
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/filtering/models/filter-group.model.ts
View File

@ -12,5 +12,6 @@ export interface IFilterGroup {
readonly hide?: boolean;
readonly checker?: (...args: unknown[]) => boolean;
readonly matchAll?: boolean;
readonly singleSelect?: boolean;
readonly checkerArgs?: unknown[];
}

14
src/lib/filtering/popup-filter/popup-filter.component.html
View File

@ -44,7 +44,7 @@
*ngFor="let filter of filters"
[ngTemplateOutletContext]="{
filter: filter,
filterTemplate: primaryGroup.filterTemplate,
filterGroup: primaryGroup,
atLeastOneIsExpandable: atLeastOneFilterIsExpandable$ | async
}"
[ngTemplateOutlet]="defaultFilterTemplate"
@ -60,7 +60,7 @@
*ngFor="let filter of secondaryGroup.filters"
[ngTemplateOutletContext]="{
filter: filter,
filterTemplate: secondaryGroup.filterTemplate,
filterGroup: secondaryGroup,
atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable$ | async
}"
[ngTemplateOutlet]="defaultFilterTemplate"
@ -96,7 +96,7 @@
#defaultFilterTemplate
let-atLeastOneIsExpandable="atLeastOneIsExpandable"
let-filter="filter"
let-filterTemplate="filterTemplate"
let-filterGroup="filterGroup"
>
<div (click)="toggleFilterExpanded($event, filter)" class="mat-menu-item flex">
<div *ngIf="filter.children?.length > 0" class="arrow-wrapper">
@ -107,14 +107,14 @@
<div *ngIf="atLeastOneIsExpandable && filter.children?.length === 0" class="arrow-wrapper spacer">&nbsp;</div>
<mat-checkbox
(click)="filterCheckboxClicked($event, filter)"
(click)="filterCheckboxClicked($event, filter, filterGroup)"
[checked]="filter.checked"
[indeterminate]="filter.indeterminate"
class="filter-menu-checkbox"
>
<ng-container
[ngTemplateOutletContext]="{ filter: filter }"
[ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
[ngTemplateOutlet]="filterGroup.filterTemplate ?? defaultFilterLabelTemplate"
></ng-container>
</mat-checkbox>
@ -123,10 +123,10 @@
<div *ngIf="filter.children?.length && filter.expanded">
<div (click)="$event.stopPropagation()" *ngFor="let child of filter.children" class="padding-left mat-menu-item">
<mat-checkbox (click)="filterCheckboxClicked($event, child, filter)" [checked]="child.checked">
<mat-checkbox (click)="filterCheckboxClicked($event, child, filterGroup, filter)" [checked]="child.checked">
<ng-container
[ngTemplateOutletContext]="{ filter: child }"
[ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
[ngTemplateOutlet]="filterGroup.filterTemplate ?? defaultFilterLabelTemplate"
></ng-container>
</mat-checkbox>

28
src/lib/filtering/popup-filter/popup-filter.component.ts
View File

@ -84,9 +84,13 @@ export class PopupFilterComponent implements OnInit {
this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$);
}
filterCheckboxClicked($event: MouseEvent, nestedFilter: INestedFilter, parent?: INestedFilter): void {
filterCheckboxClicked($event: MouseEvent, nestedFilter: INestedFilter, filterGroup: IFilterGroup, parent?: INestedFilter): void {
$event.stopPropagation();
if (filterGroup.singleSelect) {
this.deactivateFilters(nestedFilter.id);
}
// eslint-disable-next-line no-param-reassign
nestedFilter.checked = !nestedFilter.checked;
@ -110,10 +114,10 @@ export class PopupFilterComponent implements OnInit {
this._setFilters(this.primaryFiltersSlug, true);
}
deactivateFilters(): void {
this._setFilters(this.primaryFiltersSlug);
deactivateFilters(exceptedFilterId?: string): void {
this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId);
if (this.secondaryFiltersSlug) {
this._setFilters(this.secondaryFiltersSlug);
this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId);
}
}
@ -124,15 +128,17 @@ export class PopupFilterComponent implements OnInit {
this.filterService.refresh();
}
private _setFilters(filterGroup: string, checked = false) {
private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) {
const filters = this.filterService.getGroup(filterGroup)?.filters;
filters?.forEach(f => {
// eslint-disable-next-line no-param-reassign
f.checked = checked;
// eslint-disable-next-line no-param-reassign
f.indeterminate = false;
// eslint-disable-next-line no-return-assign,no-param-reassign
f.children?.forEach(ff => (ff.checked = checked));
if (f.id !== exceptedFilterId) {
// eslint-disable-next-line no-param-reassign
f.checked = checked;
// eslint-disable-next-line no-param-reassign
f.indeterminate = false;
// eslint-disable-next-line no-return-assign,no-param-reassign
f.children?.forEach(ff => (ff.checked = checked));
}
});
this.filterService.refresh();
}