disabled click on filters when there is no available option and added 'disabled' property for quick filters

This commit is contained in:
Valentin 2021-11-20 23:27:42 +02:00
parent aebdfd0f2e
commit d67d556b68
6 changed files with 19 additions and 0 deletions

View File

@ -7,4 +7,5 @@ export interface IFilter {
readonly topLevelFilter?: boolean; readonly topLevelFilter?: boolean;
readonly checker?: (obj?: unknown) => boolean; readonly checker?: (obj?: unknown) => boolean;
readonly required?: boolean; readonly required?: boolean;
readonly disabled?: boolean;
} }

View File

@ -5,12 +5,14 @@ import { INestedFilter } from './nested-filter.model';
export class NestedFilter extends Filter implements INestedFilter, IListable { export class NestedFilter extends Filter implements INestedFilter, IListable {
expanded: boolean; expanded: boolean;
indeterminate: boolean; indeterminate: boolean;
disabled?: boolean;
readonly children: Filter[]; readonly children: Filter[];
constructor(nestedFilter: INestedFilter) { constructor(nestedFilter: INestedFilter) {
super(nestedFilter); super(nestedFilter);
this.expanded = !!nestedFilter.expanded; this.expanded = !!nestedFilter.expanded;
this.indeterminate = !!nestedFilter.indeterminate; this.indeterminate = !!nestedFilter.indeterminate;
this.disabled = !!nestedFilter.disabled;
this.children = nestedFilter.children ?? []; this.children = nestedFilter.children ?? [];
} }
} }

View File

@ -3,6 +3,7 @@
<iqser-icon-button <iqser-icon-button
[attr.aria-expanded]="expanded$ | async" [attr.aria-expanded]="expanded$ | async"
[disabled]="primaryFiltersDisabled$ | async" [disabled]="primaryFiltersDisabled$ | async"
[ngClass]="{'disabled': primaryFiltersDisabled$ | async}"
[icon]="primaryGroup.icon" [icon]="primaryGroup.icon"
[label]="primaryGroup.label || ('filter-menu.label' | translate)" [label]="primaryGroup.label || ('filter-menu.label' | translate)"
[matMenuTriggerFor]="filterMenu" [matMenuTriggerFor]="filterMenu"

View File

@ -44,3 +44,7 @@
iqser-input-with-action { iqser-input-with-action {
padding: 0 8px 8px 8px; padding: 0 8px 8px 8px;
} }
.disabled {
pointer-events: none;
}

View File

@ -3,6 +3,7 @@
(click)="filterService.toggleFilter('quickFilters', filter.id)" (click)="filterService.toggleFilter('quickFilters', filter.id)"
*ngFor="let filter of filters" *ngFor="let filter of filters"
[class.active]="filter.checked" [class.active]="filter.checked"
[class.disabled]="filter.disabled"
class="quick-filter" class="quick-filter"
> >
{{ filter.label }} {{ filter.label }}

View File

@ -26,6 +26,16 @@
border: none; border: none;
} }
&.disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
&:hover {
background-color: var(--iqser-btn-bg);
}
}
&:not(:last-child) { &:not(:last-child) {
margin-right: 8px; margin-right: 8px;
} }