From d67d556b684927bf9afe6bcd1eb6c231a6566d8d Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Sat, 20 Nov 2021 23:27:42 +0200
Subject: [PATCH] disabled click on filters when there is no available option
 and added 'disabled' property for quick filters

---
 src/lib/filtering/models/filter.model.ts               |  1 +
 src/lib/filtering/models/nested-filter.ts              |  2 ++
 .../filtering/popup-filter/popup-filter.component.html |  1 +
 .../filtering/popup-filter/popup-filter.component.scss |  4 ++++
 .../quick-filters/quick-filters.component.html         |  1 +
 .../quick-filters/quick-filters.component.scss         | 10 ++++++++++
 6 files changed, 19 insertions(+)

diff --git a/src/lib/filtering/models/filter.model.ts b/src/lib/filtering/models/filter.model.ts
index ef431a1..c955f26 100644
--- a/src/lib/filtering/models/filter.model.ts
+++ b/src/lib/filtering/models/filter.model.ts
@@ -7,4 +7,5 @@ export interface IFilter {
     readonly topLevelFilter?: boolean;
     readonly checker?: (obj?: unknown) => boolean;
     readonly required?: boolean;
+    readonly disabled?: boolean;
 }
diff --git a/src/lib/filtering/models/nested-filter.ts b/src/lib/filtering/models/nested-filter.ts
index 56b6b8a..5560c52 100644
--- a/src/lib/filtering/models/nested-filter.ts
+++ b/src/lib/filtering/models/nested-filter.ts
@@ -5,12 +5,14 @@ import { INestedFilter } from './nested-filter.model';
 export class NestedFilter extends Filter implements INestedFilter, IListable {
     expanded: boolean;
     indeterminate: boolean;
+    disabled?: boolean;
     readonly children: Filter[];
 
     constructor(nestedFilter: INestedFilter) {
         super(nestedFilter);
         this.expanded = !!nestedFilter.expanded;
         this.indeterminate = !!nestedFilter.indeterminate;
+        this.disabled = !!nestedFilter.disabled;
         this.children = nestedFilter.children ?? [];
     }
 }
diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html
index 438a2dc..7a27e41 100644
--- a/src/lib/filtering/popup-filter/popup-filter.component.html
+++ b/src/lib/filtering/popup-filter/popup-filter.component.html
@@ -3,6 +3,7 @@
         <iqser-icon-button
             [attr.aria-expanded]="expanded$ | async"
             [disabled]="primaryFiltersDisabled$ | async"
+            [ngClass]="{'disabled': primaryFiltersDisabled$ | async}"
             [icon]="primaryGroup.icon"
             [label]="primaryGroup.label || ('filter-menu.label' | translate)"
             [matMenuTriggerFor]="filterMenu"
diff --git a/src/lib/filtering/popup-filter/popup-filter.component.scss b/src/lib/filtering/popup-filter/popup-filter.component.scss
index 7325f79..97a3f53 100644
--- a/src/lib/filtering/popup-filter/popup-filter.component.scss
+++ b/src/lib/filtering/popup-filter/popup-filter.component.scss
@@ -44,3 +44,7 @@
 iqser-input-with-action {
     padding: 0 8px 8px 8px;
 }
+
+.disabled {
+    pointer-events: none;
+}
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.html b/src/lib/filtering/quick-filters/quick-filters.component.html
index baf9b6f..b35d198 100644
--- a/src/lib/filtering/quick-filters/quick-filters.component.html
+++ b/src/lib/filtering/quick-filters/quick-filters.component.html
@@ -3,6 +3,7 @@
         (click)="filterService.toggleFilter('quickFilters', filter.id)"
         *ngFor="let filter of filters"
         [class.active]="filter.checked"
+        [class.disabled]="filter.disabled"
         class="quick-filter"
     >
         {{ filter.label }}
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss
index 0974792..e011abd 100644
--- a/src/lib/filtering/quick-filters/quick-filters.component.scss
+++ b/src/lib/filtering/quick-filters/quick-filters.component.scss
@@ -26,6 +26,16 @@
         border: none;
     }
 
+    &.disabled {
+        opacity: 0.3;
+        cursor: default;
+        pointer-events: none;
+
+        &:hover {
+            background-color: var(--iqser-btn-bg);
+        }
+    }
+
     &:not(:last-child) {
         margin-right: 8px;
     }