From 7e66364b8805f8391da26b802ea82fc79e96a793 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Tue, 10 Aug 2021 17:55:46 +0300
Subject: [PATCH] move quick filters

---
 .../quick-filters.component.html              |  8 -----
 .../quick-filters.component.scss              | 34 -------------------
 .../quick-filters/quick-filters.component.ts  | 14 --------
 .../table-header/table-header.component.html  |  2 +-
 .../table-header/table-header.component.ts    |  2 +-
 .../src/app/modules/shared/shared.module.ts   |  2 --
 apps/red-ui/src/assets/styles/_variables.scss |  1 +
 libs/common-ui                                |  2 +-
 8 files changed, 4 insertions(+), 61 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.ts

diff --git a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html
deleted file mode 100644
index 533c9d10a..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div
-    (click)="filterService.toggleFilter('quickFilters', filter.key)"
-    *ngFor="let filter of quickFilters$ | async"
-    [class.active]="filter.checked"
-    class="quick-filter"
->
-    {{ filter.label }}
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
deleted file mode 100644
index c692e2ffc..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-:host {
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-}
-
-.quick-filter {
-    box-sizing: border-box;
-    border: 1px solid $grey-5;
-    border-radius: 17px;
-    background-color: $grey-6;
-    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/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.ts b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.ts
deleted file mode 100644
index e94e736a6..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FilterService } from '@iqser/common-ui';
-
-@Component({
-    selector: 'redaction-quick-filters',
-    templateUrl: './quick-filters.component.html',
-    styleUrls: ['./quick-filters.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class QuickFiltersComponent {
-    readonly quickFilters$ = this.filterService.getFilterModels$('quickFilters');
-
-    constructor(readonly filterService: FilterService) {}
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
index 9f0d95c9a..adabeee5a 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <redaction-quick-filters *ngIf="hasQuickFilters$ | async"></redaction-quick-filters>
+    <iqser-quick-filters *ngIf="quickFilters$ | async as quickFilters" [quickFilters]="quickFilters"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>
diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
index f3f4e98ba..f2eeb0d2c 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
@@ -15,7 +15,7 @@ export class TableHeaderComponent<T extends object> {
     @Input() selectionEnabled = false;
     @Input() bulkActions: TemplateRef<any>;
 
-    readonly hasQuickFilters$ = this.filterService.getGroup$('quickFilters').pipe(map(filters => !!filters));
+    readonly quickFilters$ = this.filterService.getFilterModels$('quickFilters').pipe(map(filters => new Set(filters)));
 
     constructor(readonly entitiesService: EntitiesService<T>, readonly filterService: FilterService) {}
 }
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 35ebd9184..b65587c85 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -27,7 +27,6 @@ import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
 import { SideNavComponent } from '@shared/components/side-nav/side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { QuickFiltersComponent } from './components/filters/quick-filters/quick-filters.component';
 import { PopupFilterComponent } from '@shared/components/filters/popup-filter/popup-filter.component';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component';
@@ -54,7 +53,6 @@ const components = [
     SelectComponent,
     SideNavComponent,
     DictionaryManagerComponent,
-    QuickFiltersComponent,
     AssignUserDropdownComponent,
     PageHeaderComponent,
 
diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss
index fe3412d18..fd75a9385 100644
--- a/apps/red-ui/src/assets/styles/_variables.scss
+++ b/apps/red-ui/src/assets/styles/_variables.scss
@@ -35,5 +35,6 @@ $dark: $black;
 
 $btn-bg-hover: $grey-4;
 $btn-bg: $grey-6;
+$quick-filter-border: $grey-5;
 
 $separator: rgba(226, 228, 233, 0.9);
diff --git a/libs/common-ui b/libs/common-ui
index 6811739c7..f0c440876 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 6811739c7967a5f9fd8bb62f2b62e47e14ce0430
+Subproject commit f0c440876402cb4f603583537eca36f9038cc6fa