From ee433cdee2d5c1e34a43a54da2e40f0f16a6ca07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 21 Jul 2022 21:38:17 +0300 Subject: [PATCH] Filter card --- .../filter-card/filter-card.component.html | 101 ++++++++++++++ .../filter-card/filter-card.component.scss | 46 ++++++ .../filter-card/filter-card.component.ts | 132 ++++++++++++++++++ src/lib/filtering/filter.service.ts | 9 ++ src/lib/filtering/filters.module.ts | 3 +- .../popup-filter/popup-filter.component.html | 110 ++------------- .../popup-filter/popup-filter.component.scss | 45 ------ .../popup-filter/popup-filter.component.ts | 89 +----------- 8 files changed, 302 insertions(+), 233 deletions(-) create mode 100644 src/lib/filtering/filter-card/filter-card.component.html create mode 100644 src/lib/filtering/filter-card/filter-card.component.scss create mode 100644 src/lib/filtering/filter-card/filter-card.component.ts diff --git a/src/lib/filtering/filter-card/filter-card.component.html b/src/lib/filtering/filter-card/filter-card.component.html new file mode 100644 index 0000000..db78647 --- /dev/null +++ b/src/lib/filtering/filter-card/filter-card.component.html @@ -0,0 +1,101 @@ + + + + +
+ +
+ +
+
+
+
+ + +
+ + + + {{ filter?.label }} + + + +
+
+
+
+
+
+
+ + + +
+
+ + +
+ +
 
+ + + + + + +
+ +
+
+ + + + + +
+
+ diff --git a/src/lib/filtering/filter-card/filter-card.component.scss b/src/lib/filtering/filter-card/filter-card.component.scss new file mode 100644 index 0000000..b5caea8 --- /dev/null +++ b/src/lib/filtering/filter-card/filter-card.component.scss @@ -0,0 +1,46 @@ +@use '../../../assets/styles/common-mixins' as mixins; + +.filter-menu-options, +.filter-menu-header { + display: flex; + justify-content: space-between; + padding: 8px 16px 16px 16px; + min-width: var(--filter-card-min-width); + + .actions { + display: flex; + + > *:not(:last-child) { + margin-right: 8px; + } + } +} + +.filter-content { + @include mixins.scroll-bar; + max-height: 570px; + overflow: auto; +} + +.filter-menu-options { + margin-top: 8px; + padding: 16px 16px 3px; +} + +.filter-options { + background-color: var(--iqser-side-nav); + padding-bottom: 8px; +} + +iqser-input-with-action { + padding: 0 8px 8px 8px; +} + +::ng-deep .filter-menu-checkbox { + width: 100%; + + label { + width: 100%; + height: 100%; + } +} diff --git a/src/lib/filtering/filter-card/filter-card.component.ts b/src/lib/filtering/filter-card/filter-card.component.ts new file mode 100644 index 0000000..4d265b8 --- /dev/null +++ b/src/lib/filtering/filter-card/filter-card.component.ts @@ -0,0 +1,132 @@ +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, TemplateRef } from '@angular/core'; +import { combineLatest, Observable, pipe } from 'rxjs'; +import { IFilter } from '../models/filter.model'; +import { INestedFilter } from '../models/nested-filter.model'; +import { IFilterGroup } from '../models/filter-group.model'; +import { handleCheckedValue } from '../filter-utils'; +import { FilterService } from '../filter.service'; +import { SearchService } from '../../search'; +import { Filter } from '../models/filter'; +import { map } from 'rxjs/operators'; +import { shareDistinctLast, shareLast } from '../../utils'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; + +const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length; +const atLeastOneIsExpandable = pipe( + map(group => !!group?.filters.some(areExpandable)), + shareDistinctLast(), +); + +@Component({ + selector: 'iqser-filter-card [primaryFiltersSlug]', + templateUrl: './filter-card.component.html', + styleUrls: ['./filter-card.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: MAT_CHECKBOX_DEFAULT_OPTIONS, + useValue: { + clickAction: 'noop', + color: 'primary', + }, + }, + ], +}) +export class FilterCardComponent implements OnInit { + @Input() primaryFiltersSlug!: string; + @Input() actionsTemplate?: TemplateRef; + @Input() secondaryFiltersSlug = ''; + @Input() primaryFiltersLabel: string = _('filter-menu.filter-types'); + @Input() minWidth = 350; + + primaryFilterGroup$!: Observable; + secondaryFilterGroup$!: Observable; + primaryFilters$!: Observable; + + atLeastOneFilterIsExpandable$?: Observable; + atLeastOneSecondaryFilterIsExpandable$?: Observable; + + constructor( + readonly filterService: FilterService, + readonly searchService: SearchService, + private readonly _elementRef: ElementRef, + ) {} + + private get _primaryFilters$(): Observable { + return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe( + map(([group]) => this.searchService.searchIn(group?.filters ?? [])), + shareLast(), + ); + } + + ngOnInit() { + this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareLast()); + this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareLast()); + this.primaryFilters$ = this._primaryFilters$; + + this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$); + this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$); + + (this._elementRef.nativeElement as HTMLElement).style.setProperty('--filter-card-min-width', `${this.minWidth}px`); + } + + filterCheckboxClicked($event: MouseEvent, nestedFilter: INestedFilter, filterGroup: IFilterGroup, parent?: INestedFilter): void { + $event.stopPropagation(); + + if (filterGroup.singleSelect) { + this.deactivateFilters(nestedFilter.id); + } + + // eslint-disable-next-line no-param-reassign + nestedFilter.checked = !nestedFilter.checked; + + if (parent) { + handleCheckedValue(parent); + } else { + // eslint-disable-next-line no-param-reassign + if (nestedFilter.indeterminate) { + nestedFilter.checked = false; + } + // eslint-disable-next-line no-param-reassign + nestedFilter.indeterminate = false; + // eslint-disable-next-line no-return-assign,no-param-reassign + nestedFilter.children?.forEach(f => (f.checked = !!nestedFilter.checked)); + } + + this.filterService.refresh(); + } + + activatePrimaryFilters(): void { + this._setFilters(this.primaryFiltersSlug, true); + } + + deactivateFilters(exceptedFilterId?: string): void { + this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId); + if (this.secondaryFiltersSlug) { + this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId); + } + } + + toggleFilterExpanded($event: MouseEvent, nestedFilter: INestedFilter): void { + $event.stopPropagation(); + // eslint-disable-next-line no-param-reassign + nestedFilter.expanded = !nestedFilter.expanded; + this.filterService.refresh(); + } + + private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) { + const filters = this.filterService.getGroup(filterGroup)?.filters; + filters?.forEach(f => { + if (f.id !== exceptedFilterId) { + // eslint-disable-next-line no-param-reassign + f.checked = checked; + // eslint-disable-next-line no-param-reassign + f.indeterminate = false; + // eslint-disable-next-line no-return-assign,no-param-reassign + f.children?.forEach(ff => (ff.checked = checked)); + } + }); + this.filterService.refresh(); + } +} diff --git a/src/lib/filtering/filter.service.ts b/src/lib/filtering/filter.service.ts index 19d7246..5f88b84 100644 --- a/src/lib/filtering/filter.service.ts +++ b/src/lib/filtering/filter.service.ts @@ -102,6 +102,15 @@ export class FilterService { ); } + updateFilterGroups(newFilters: IFilterGroup[]): void { + const filters = this.filterGroups.map(oldFilter => { + const newFilter = newFilters.find(f => f.slug === oldFilter.slug); + return newFilter ? newFilter : oldFilter; + }); + + this.#filterGroups$.next(filters); + } + addSingleFilter(filter: IFilter) { if (!this.#singleFilters.has(filter.id)) { return this.#singleFilters.set(filter.id, new BehaviorSubject(filter)); diff --git a/src/lib/filtering/filters.module.ts b/src/lib/filtering/filters.module.ts index aa445f8..f3143f8 100644 --- a/src/lib/filtering/filters.module.ts +++ b/src/lib/filtering/filters.module.ts @@ -10,10 +10,11 @@ import { IqserIconsModule } from '../icons'; import { IqserInputsModule } from '../inputs'; import { IqserHelpModeModule } from '../help-mode'; import { SingleFilterComponent } from './single-filter/single-filter.component'; +import { FilterCardComponent } from './filter-card/filter-card.component'; const matModules = [MatCheckboxModule, MatMenuModule]; const modules = [TranslateModule, IqserButtonsModule, IqserIconsModule, IqserInputsModule, IqserHelpModeModule]; -const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterComponent]; +const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterComponent, FilterCardComponent]; @NgModule({ declarations: [...components], diff --git a/src/lib/filtering/popup-filter/popup-filter.component.html b/src/lib/filtering/popup-filter/popup-filter.component.html index bc55ca3..66b5ee8 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.html +++ b/src/lib/filtering/popup-filter/popup-filter.component.html @@ -5,7 +5,7 @@ [class.disabled]="primaryFiltersDisabled$ | async" [disabled]="primaryFiltersDisabled$ | async" [icon]="primaryGroup.icon" - [label]="primaryGroup.label || ('filter-menu.label' | translate)" + [label]="primaryGroup.label.capitalize() || ('filter-menu.label' | translate)" [matMenuTriggerFor]="filterMenu" [showDot]="hasActiveFilters$ | async" id="{{ primaryGroup.slug }}" @@ -17,7 +17,7 @@ [attr.aria-expanded]="expanded$ | async" [class.disabled]="primaryFiltersDisabled$ | async" [disabled]="primaryFiltersDisabled$ | async" - [label]="primaryGroup.label || ('filter-menu.label' | translate)" + [label]="primaryGroup.label.capitalize() || ('filter-menu.label' | translate)" [matMenuTriggerFor]="filterMenu" [showDot]="hasActiveFilters$ | async" > @@ -30,106 +30,12 @@ xPosition="before" > - - - - -
- -
- -
-
-
-
- - -
+ - - - {{ filter?.label }} - - - -
-
-
-
-
-
-
- - - -
-
- - -
- -
 
- - - - - - -
- -
-
- - - - - -
-
- diff --git a/src/lib/filtering/popup-filter/popup-filter.component.scss b/src/lib/filtering/popup-filter/popup-filter.component.scss index 2e05059..add3363 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.scss +++ b/src/lib/filtering/popup-filter/popup-filter.component.scss @@ -1,50 +1,5 @@ @use '../../../assets/styles/common-mixins' as mixins; -.filter-menu-options, -.filter-menu-header { - display: flex; - justify-content: space-between; - padding: 8px 16px 16px 16px; - min-width: 350px; - - .actions { - display: flex; - - > *:not(:last-child) { - margin-right: 8px; - } - } -} - -.filter-content { - @include mixins.scroll-bar; - max-height: 570px; - overflow: auto; -} - -.filter-menu-options { - margin-top: 8px; - padding: 16px 16px 3px; -} - -.filter-options { - background-color: var(--iqser-side-nav); - padding-bottom: 8px; -} - -::ng-deep .filter-menu-checkbox { - width: 100%; - - label { - width: 100%; - height: 100%; - } -} - -iqser-input-with-action { - padding: 0 8px 8px 8px; -} - .disabled { pointer-events: none; } diff --git a/src/lib/filtering/popup-filter/popup-filter.component.ts b/src/lib/filtering/popup-filter/popup-filter.component.ts index 79e7431..50573b4 100644 --- a/src/lib/filtering/popup-filter/popup-filter.component.ts +++ b/src/lib/filtering/popup-filter/popup-filter.component.ts @@ -1,47 +1,27 @@ import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core'; -import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; -import { BehaviorSubject, combineLatest, Observable, pipe } from 'rxjs'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { delay, map } from 'rxjs/operators'; import { any, shareDistinctLast, shareLast } from '../../utils'; -import { handleCheckedValue } from '../filter-utils'; import { FilterService } from '../filter.service'; import { IFilterGroup } from '../models/filter-group.model'; -import { INestedFilter } from '../models/nested-filter.model'; import { SearchService } from '../../search'; import { Filter, IFilter } from '..'; -import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; - -const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length; -const atLeastOneIsExpandable = pipe( - map(group => !!group?.filters.some(areExpandable)), - shareDistinctLast(), -); @Component({ selector: 'iqser-popup-filter [primaryFiltersSlug]', templateUrl: './popup-filter.component.html', styleUrls: ['./popup-filter.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: MAT_CHECKBOX_DEFAULT_OPTIONS, - useValue: { - clickAction: 'noop', - color: 'primary', - }, - }, - SearchService, - ], + providers: [SearchService], }) export class PopupFilterComponent implements OnInit { @Input() primaryFiltersSlug!: string; @Input() actionsTemplate?: TemplateRef; @Input() secondaryFiltersSlug = ''; - @Input() primaryFiltersLabel: string = _('filter-menu.filter-types'); + @Input() primaryFiltersLabel?: string; - atLeastOneFilterIsExpandable$?: Observable; - atLeastOneSecondaryFilterIsExpandable$?: Observable; hasActiveFilters$?: Observable; + readonly expanded = new BehaviorSubject(false); readonly expanded$ = this.expanded.asObservable().pipe(delay(200)); @@ -82,66 +62,5 @@ export class PopupFilterComponent implements OnInit { this.hasActiveFilters$ = this._hasActiveFilters$; this.primaryFiltersDisabled$ = this._primaryFiltersDisabled$; - this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$); - this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$); - } - - filterCheckboxClicked($event: MouseEvent, nestedFilter: INestedFilter, filterGroup: IFilterGroup, parent?: INestedFilter): void { - $event.stopPropagation(); - - if (filterGroup.singleSelect) { - this.deactivateFilters(nestedFilter.id); - } - - // eslint-disable-next-line no-param-reassign - nestedFilter.checked = !nestedFilter.checked; - - if (parent) { - handleCheckedValue(parent); - } else { - // eslint-disable-next-line no-param-reassign - if (nestedFilter.indeterminate) { - nestedFilter.checked = false; - } - // eslint-disable-next-line no-param-reassign - nestedFilter.indeterminate = false; - // eslint-disable-next-line no-return-assign,no-param-reassign - nestedFilter.children?.forEach(f => (f.checked = !!nestedFilter.checked)); - } - - this.filterService.refresh(); - } - - activatePrimaryFilters(): void { - this._setFilters(this.primaryFiltersSlug, true); - } - - deactivateFilters(exceptedFilterId?: string): void { - this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId); - if (this.secondaryFiltersSlug) { - this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId); - } - } - - toggleFilterExpanded($event: MouseEvent, nestedFilter: INestedFilter): void { - $event.stopPropagation(); - // eslint-disable-next-line no-param-reassign - nestedFilter.expanded = !nestedFilter.expanded; - this.filterService.refresh(); - } - - private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) { - const filters = this.filterService.getGroup(filterGroup)?.filters; - filters?.forEach(f => { - if (f.id !== exceptedFilterId) { - // eslint-disable-next-line no-param-reassign - f.checked = checked; - // eslint-disable-next-line no-param-reassign - f.indeterminate = false; - // eslint-disable-next-line no-return-assign,no-param-reassign - f.children?.forEach(ff => (ff.checked = checked)); - } - }); - this.filterService.refresh(); } }