From f0c440876402cb4f603583537eca36f9038cc6fa Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Tue, 10 Aug 2021 17:54:27 +0300
Subject: [PATCH] add quick filters

---
 src/assets/styles/_variables.scss             |  1 +
 src/index.ts                                  |  1 +
 src/lib/common-ui.module.ts                   |  3 +-
 .../quick-filters.component.html              |  8 +++++
 .../quick-filters.component.scss              | 34 +++++++++++++++++++
 .../quick-filters/quick-filters.component.ts  | 16 +++++++++
 6 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/filtering/quick-filters/quick-filters.component.html
 create mode 100644 src/lib/filtering/quick-filters/quick-filters.component.scss
 create mode 100644 src/lib/filtering/quick-filters/quick-filters.component.ts

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index a78bd55..96c6bcb 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -6,3 +6,4 @@ $btn-bg: #f0f1f4 !default;
 $warn: #fdbd00 !default;
 $white: white !default;
 $separator: rgba(226, 228, 233, 0.9) !default;
+$quick-filter-border: #d3d5da !default;
diff --git a/src/index.ts b/src/index.ts
index 849fbdb..3ba9aa9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,6 +15,7 @@ export * from './lib/filtering/filter.service';
 export * from './lib/filtering/models/filter.model';
 export * from './lib/filtering/models/filter-group.model';
 export * from './lib/filtering/models/nested-filter.model';
+export * from './lib/filtering/quick-filters/quick-filters.component';
 export * from './lib/sorting/sort-by.pipe';
 export * from './lib/sorting/sorting.service';
 export * from './lib/sorting/models/sorting-option.model';
diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index 4961fd7..a71045b 100644
--- a/src/lib/common-ui.module.ts
+++ b/src/lib/common-ui.module.ts
@@ -11,6 +11,7 @@ import { RoundCheckboxComponent } from './inputs/round-checkbox/round-checkbox.c
 import { SortByPipe } from './sorting/sort-by.pipe';
 import { HumanizePipe } from './utils/pipes/humanize.pipe';
 import { TableColumnNameComponent } from './tables/table-column-name/table-column-name.component';
+import { QuickFiltersComponent } from './filtering/quick-filters/quick-filters.component';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
@@ -18,7 +19,7 @@ const inputs = [RoundCheckboxComponent];
 
 const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
 
-const components = [...buttons, ...inputs, TableColumnNameComponent];
+const components = [...buttons, ...inputs, TableColumnNameComponent, QuickFiltersComponent];
 
 const pipes = [SortByPipe, HumanizePipe];
 
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.html b/src/lib/filtering/quick-filters/quick-filters.component.html
new file mode 100644
index 0000000..fcf7646
--- /dev/null
+++ b/src/lib/filtering/quick-filters/quick-filters.component.html
@@ -0,0 +1,8 @@
+<div
+    (click)="filterService.toggleFilter('quickFilters', filter.key)"
+    *ngFor="let filter of quickFilters"
+    [class.active]="filter.checked"
+    class="quick-filter"
+>
+    {{ filter.label }}
+</div>
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss
new file mode 100644
index 0000000..879adf8
--- /dev/null
+++ b/src/lib/filtering/quick-filters/quick-filters.component.scss
@@ -0,0 +1,34 @@
+@import '../../../assets/styles/common';
+
+:host {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+}
+
+.quick-filter {
+    box-sizing: border-box;
+    border: 1px solid $quick-filter-border;
+    border-radius: 17px;
+    background-color: $btn-bg;
+    padding: 0 14px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+        background-color: $white;
+    }
+
+    &.active {
+        background-color: $white;
+        font-weight: 600;
+        border: none;
+    }
+
+    &:not(:last-child) {
+        margin-right: 8px;
+    }
+}
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.ts b/src/lib/filtering/quick-filters/quick-filters.component.ts
new file mode 100644
index 0000000..977956e
--- /dev/null
+++ b/src/lib/filtering/quick-filters/quick-filters.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Required } from '../../utils/decorators/required.decorator';
+import { NestedFilter } from '../models/nested-filter.model';
+import { FilterService } from '../filter.service';
+
+@Component({
+    selector: 'iqser-quick-filters',
+    templateUrl: './quick-filters.component.html',
+    styleUrls: ['./quick-filters.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QuickFiltersComponent {
+    @Input() @Required() quickFilters!: Set<NestedFilter>;
+
+    constructor(readonly filterService: FilterService) {}
+}