From 3bebc49d9693693e8db6c22216d1c7083ac4a158 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Thu, 19 Aug 2021 17:27:10 +0300 Subject: [PATCH] move popup filter to common lib --- .../file-workload.component.html | 4 +- .../dossier-listing-screen.component.ts | 7 +- .../dossier-overview-screen.component.ts | 2 +- .../file-preview-screen.component.ts | 2 +- .../popup-filter/popup-filter.component.html | 109 ------------------ .../popup-filter/popup-filter.component.scss | 41 ------- .../popup-filter/popup-filter.component.ts | 102 ---------------- .../page-header/page-header.component.html | 2 +- .../src/app/modules/shared/shared.module.ts | 2 - .../popup-filter => }/utils/filter-utils.ts | 0 apps/red-ui/src/assets/styles/_variables.scss | 1 + libs/common-ui | 2 +- 12 files changed, 8 insertions(+), 266 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts rename apps/red-ui/src/app/{modules/shared/components/filters/popup-filter => }/utils/filter-utils.ts (100%) diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html index c52caa0e3..6f929ff40 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html @@ -9,11 +9,11 @@ class="all-caps-label primary pointer" translate="file-preview.tabs.annotations.select" > - + > diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts index 68718440f..fcd588b0d 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts @@ -20,12 +20,7 @@ import { DefaultListingServices, ListingComponent, NestedFilter, TableColumnConf import { workloadTranslations } from '../../translations/workload-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { fileStatusTranslations } from '../../translations/file-status-translations'; -import { - annotationFilterChecker, - dossierMemberChecker, - dossierStatusChecker, - dossierTemplateChecker -} from '@shared/components/filters/popup-filter/utils/filter-utils'; +import { annotationFilterChecker, dossierMemberChecker, dossierStatusChecker, dossierTemplateChecker } from '@utils/filter-utils'; import { PermissionsService } from '@services/permissions.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts index 5e91c0cd1..74e03def6 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts @@ -38,7 +38,7 @@ import { UserPreferenceService } from '@services/user-preference.service'; import { workloadTranslations } from '../../translations/workload-translations'; import { fileStatusTranslations } from '../../translations/file-status-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { annotationFilterChecker } from '@shared/components/filters/popup-filter/utils/filter-utils'; +import { annotationFilterChecker } from '@utils/filter-utils'; import { PermissionsService } from '@services/permissions.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { FileAttributeConfig } from '@redaction/red-ui-http'; diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 630093728..1e9e14b39 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -34,7 +34,7 @@ import { LoadingService } from '@services/loading.service'; import { clearStamps, stampPDFPage } from '@utils/page-stamper'; import { TranslateService } from '@ngx-translate/core'; import { fileStatusTranslations } from '../../translations/file-status-translations'; -import { handleFilterDelta } from '@shared/components/filters/popup-filter/utils/filter-utils'; +import { handleFilterDelta } from '@utils/filter-utils'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f']; diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html deleted file mode 100644 index 335429b53..000000000 --- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - -
-
-
-
-
-
-
- -
- -
- -
-
-
-
- -
- -
-
- - - - - {{ filter?.label }} - - - -
-
- - -
-
 
- - - - -
- -
-
- - - - - -
-
- - diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss deleted file mode 100644 index f5bd6e27e..000000000 --- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -.filter-menu-options, -.filter-menu-header { - display: flex; - justify-content: space-between; - padding: 8px 16px 16px 16px; - width: 350px; - - .actions { - display: flex; - - > *:not(:last-child) { - margin-right: 8px; - } - } -} - -.filter-content { - max-height: 570px; - overflow: auto; -} - -.filter-menu-options { - margin-top: 8px; - padding: 16px 16px 3px; -} - -.filter-options { - background-color: $grey-2; - padding-bottom: 8px; -} - -::ng-deep .filter-menu-checkbox { - width: 100%; - - label { - width: 100%; - height: 100%; - } -} diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts deleted file mode 100644 index c40c56257..000000000 --- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core'; -import { FilterGroup, FilterService, handleCheckedValue, NestedFilter } from '@iqser/common-ui'; -import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; -import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; -import { delay, distinctUntilChanged, map, shareReplay } from 'rxjs/operators'; - -@Component({ - selector: 'redaction-popup-filter', - templateUrl: './popup-filter.component.html', - styleUrls: ['./popup-filter.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: MAT_CHECKBOX_DEFAULT_OPTIONS, - useValue: { - clickAction: 'noop', - color: 'primary' - } - } - ] -}) -export class PopupFilterComponent implements OnInit { - @Input() actionsTemplate: TemplateRef; - @Input() primaryFiltersSlug: string; - @Input() secondaryFiltersSlug: string; - - atLeastOneFilterIsExpandable$?: Observable; - atLeastOneSecondaryFilterIsExpandable$?: Observable; - hasActiveFilters$?: Observable; - readonly expanded = new BehaviorSubject(null); - readonly expanded$ = this.expanded.asObservable().pipe(delay(200)); - - primaryFilterGroup$?: Observable; - secondaryFilterGroup$?: Observable; - - constructor(readonly filterService: FilterService) {} - - ngOnInit(): void { - this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug); - this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug); - this.hasActiveFilters$ = combineLatest([this.primaryFilterGroup$, this.secondaryFilterGroup$]).pipe( - map(([primary, secondary]) => [...primary.filters, ...(secondary?.filters || [])]), - map(filters => filters.some(f => f.checked || f.indeterminate)), - distinctUntilChanged() - ); - this.atLeastOneFilterIsExpandable$ = this.primaryFilterGroup$.pipe( - map(group => group.filters.some(f => this.isExpandable(f))), - distinctUntilChanged(), - shareReplay() - ); - this.atLeastOneSecondaryFilterIsExpandable$ = this.secondaryFilterGroup$.pipe( - map(group => group?.filters.some(f => this.isExpandable(f))), - distinctUntilChanged(), - shareReplay() - ); - } - - filterCheckboxClicked($event: MouseEvent, nestedFilter: NestedFilter, parent?: NestedFilter): void { - $event.stopPropagation(); - - nestedFilter.checked = !nestedFilter.checked; - - if (parent) { - handleCheckedValue(parent); - } else { - if (nestedFilter.indeterminate) nestedFilter.checked = false; - nestedFilter.indeterminate = false; - nestedFilter.children?.forEach(f => (f.checked = nestedFilter.checked)); - } - - this.filterService.refresh(); - } - - activatePrimaryFilters(): void { - this._setFilters(this.primaryFiltersSlug, true); - } - - deactivateFilters(): void { - this._setFilters(this.primaryFiltersSlug); - if (this.secondaryFiltersSlug) this._setFilters(this.secondaryFiltersSlug); - } - - toggleFilterExpanded($event: MouseEvent, nestedFilter: NestedFilter): void { - $event.stopPropagation(); - nestedFilter.expanded = !nestedFilter.expanded; - this.filterService.refresh(); - } - - isExpandable(nestedFilter: NestedFilter): boolean { - return nestedFilter?.children?.length > 0; - } - - private _setFilters(filterGroup: string, checked = false) { - const filters = this.filterService.getGroup(filterGroup).filters; - filters.forEach(f => { - f.checked = checked; - f.indeterminate = false; - f.children?.forEach(ff => (ff.checked = checked)); - }); - this.filterService.refresh(); - } -} diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html index 4f620c312..486a71672 100644 --- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html +++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html @@ -7,7 +7,7 @@ - + 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 46abe1990..4513ac018 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -24,7 +24,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 { 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'; import { PageHeaderComponent } from './components/page-header/page-header.component'; @@ -42,7 +41,6 @@ const components = [ SimpleDoughnutChartComponent, DictionaryAnnotationIconComponent, HiddenActionComponent, - PopupFilterComponent, ConfirmationDialogComponent, EmptyStateComponent, SelectComponent, diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts similarity index 100% rename from apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts rename to apps/red-ui/src/app/utils/filter-utils.ts diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss index be6a0f8ce..9aeb20b26 100644 --- a/apps/red-ui/src/assets/styles/_variables.scss +++ b/apps/red-ui/src/assets/styles/_variables.scss @@ -36,6 +36,7 @@ $dark: $black; $btn-bg-hover: $grey-4; $btn-bg: $grey-6; +$filter-bg: $grey-2; $quick-filter-border: $grey-5; $separator: rgba(226, 228, 233, 0.9); diff --git a/libs/common-ui b/libs/common-ui index d31b702c2..c20bac823 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit d31b702c22ac1a9e925db673ef83f56c7137071b +Subproject commit c20bac823277e659c1c9797bdd034a9f5b2fc539