disabled click on filters when there is no available option and added 'disabled' property for quick filters
This commit is contained in:
parent
aebdfd0f2e
commit
d67d556b68
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 ?? [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -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 }}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user