From fa55c645edc387db2368f0a46b9b66df03952f41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 3 Jun 2021 17:53:47 +0300 Subject: [PATCH 1/2] Dossier listing quick filters --- .../confirm-delete-users-dialog.component.ts | 4 +- .../dictionary-overview-screen.component.ts | 4 +- .../dossier-details.component.ts | 2 +- .../dossier-listing-actions.component.ts | 4 +- .../dossier-listing-details.component.ts | 2 +- .../file-workload.component.html | 4 +- .../file-workload/file-workload.component.ts | 2 +- .../team-members-manager.component.ts | 10 +-- .../type-filter/type-filter.component.ts | 2 +- .../dossier-dictionary-dialog.component.ts | 4 +- .../edit-dossier-dictionary.component.ts | 4 +- .../dossier-listing-screen.component.html | 49 ++++++------ .../dossier-listing-screen.component.scss | 4 + .../dossier-listing-screen.component.ts | 74 +++++++++++++------ .../dossier-overview-screen.component.html | 12 +-- .../dossier-overview-screen.component.ts | 23 +++--- .../file-preview-screen.component.ts | 7 +- .../services/annotation-processing.service.ts | 4 +- .../shared/base/base-listing.component.ts | 9 ++- .../popup-filter}/model/filter.model.ts | 0 .../popup-filter/popup-filter.component.html} | 0 .../popup-filter/popup-filter.component.scss} | 2 +- .../popup-filter/popup-filter.component.ts} | 8 +- .../popup-filter}/utils/filter-utils.ts | 32 ++++---- .../quick-filters.component.html | 8 ++ .../quick-filters.component.scss | 32 ++++++++ .../quick-filters/quick-filters.component.ts | 29 ++++++++ .../simple-doughnut-chart.component.ts | 2 +- .../src/app/modules/shared/shared.module.ts | 9 ++- apps/red-ui/src/assets/i18n/en.json | 6 ++ 30 files changed, 240 insertions(+), 112 deletions(-) rename apps/red-ui/src/app/modules/shared/components/{filter => filters/popup-filter}/model/filter.model.ts (100%) rename apps/red-ui/src/app/modules/shared/components/{filter/filter.component.html => filters/popup-filter/popup-filter.component.html} (100%) rename apps/red-ui/src/app/modules/shared/components/{filter/filter.component.scss => filters/popup-filter/popup-filter.component.scss} (90%) rename apps/red-ui/src/app/modules/shared/components/{filter/filter.component.ts => filters/popup-filter/popup-filter.component.ts} (95%) rename apps/red-ui/src/app/modules/shared/components/{filter => filters/popup-filter}/utils/filter-utils.ts (84%) create mode 100644 apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html create mode 100644 apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss create 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/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.ts index 0f48fea5c..c02558f73 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.ts @@ -21,9 +21,9 @@ export class ConfirmDeleteUsersDialogComponent { private readonly _appStateService: AppStateService, public dialogRef: MatDialogRef ) { - this.dossiersCount = this._appStateService.allDossiers.filter(pw => { + this.dossiersCount = this._appStateService.allDossiers.filter(dw => { for (const user of this.users) { - if (pw.memberIds.indexOf(user.userId) !== -1) { + if (dw.memberIds.indexOf(user.userId) !== -1) { return true; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts index 6625e9a75..4c3031908 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts @@ -7,8 +7,8 @@ import { TranslateService } from '@ngx-translate/core'; import { saveAs } from 'file-saver'; import { ComponentHasChanges } from '@guards/can-deactivate.guard'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { DictionaryManagerComponent } from '../../../shared/components/dictionary-manager/dictionary-manager.component'; -import { DictionarySaveService } from '../../../shared/services/dictionary-save.service'; +import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component'; +import { DictionarySaveService } from '@shared/services/dictionary-save.service'; import { TypeValueWrapper } from '../../../../models/file/type-value.wrapper'; @Component({ diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts index d557f7046..4144e4501 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts @@ -3,11 +3,11 @@ import { AppStateService } from '@state/app-state.service'; import { groupBy } from '@utils/functions'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { Router } from '@angular/router'; -import { FilterModel } from '@shared/components/filter/model/filter.model'; import { PermissionsService } from '@services/permissions.service'; import { TranslateChartService } from '@services/translate-chart.service'; import { StatusSorter } from '@utils/sorters/status-sorter'; import { DossiersDialogService } from '../../services/dossiers-dialog.service'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; @Component({ selector: 'redaction-dossier-details', diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts index 208c03ad5..ede465beb 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts @@ -36,8 +36,8 @@ export class DossierListingActionsComponent { }); } - getDossierStatusConfig(pw: DossierWrapper) { - const obj = pw.files.reduce((acc, file) => { + getDossierStatusConfig(dw: DossierWrapper) { + const obj = dw.files.reduce((acc, file) => { const status = file.status; if (!acc[status]) { acc[status] = 1; diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts index b57f2b1b5..0b2166287 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { AppStateService } from '@state/app-state.service'; -import { FilterModel } from '@shared/components/filter/model/filter.model'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; @Component({ selector: 'redaction-dossier-listing-details', 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 4a550ce2c..ed53fa1cb 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 @@ -6,14 +6,14 @@ class="all-caps-label primary pointer" translate="file-preview.tabs.annotations.select" > - + >
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts index 2bf75786f..44e61517c 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts @@ -9,13 +9,13 @@ import { TemplateRef, ViewChild } from '@angular/core'; -import { FilterModel } from '@shared/components/filter/model/filter.model'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import scrollIntoView from 'scroll-into-view-if-needed'; import { debounce } from '@utils/debounce'; import { FileDataModel } from '@models/file/file-data.model'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts index ff746d625..98b759cfa 100644 --- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts @@ -92,11 +92,11 @@ export class TeamMembersManagerComponent implements OnInit { const ownerId = this.selectedOwnerId; const memberIds = this.selectedMembersList; const approverIds = this.selectedApproversList; - const pw = Object.assign({}, this.dossierWrapper); - pw.dossier.memberIds = memberIds; - pw.dossier.approverIds = approverIds; - pw.dossier.ownerId = ownerId; - result = await this._appStateService.addOrUpdateDossier(pw.dossier); + const dw = Object.assign({}, this.dossierWrapper); + dw.dossier.memberIds = memberIds; + dw.dossier.approverIds = approverIds; + dw.dossier.ownerId = ownerId; + result = await this._appStateService.addOrUpdateDossier(dw.dossier); this.save.emit(result); } catch (error) { this._notificationService.showToastNotification( diff --git a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts b/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts index cc34c5248..4b551a172 100644 --- a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnInit } from '@angular/core'; -import { FilterModel } from '@shared/components/filter/model/filter.model'; import { AppStateService } from '@state/app-state.service'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; @Component({ selector: 'redaction-type-filter', diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.ts index 5032c4f56..179bc9acd 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.ts @@ -1,8 +1,8 @@ import { Component, Inject, ViewChild } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { DossierWrapper } from '../../../../state/model/dossier.wrapper'; -import { DictionaryManagerComponent } from '../../../shared/components/dictionary-manager/dictionary-manager.component'; -import { DictionarySaveService } from '../../../shared/services/dictionary-save.service'; +import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component'; +import { DictionarySaveService } from '@shared/services/dictionary-save.service'; import { AppStateService } from '../../../../state/app-state.service'; import { PermissionsService } from '../../../../services/permissions.service'; diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts index 05718d395..17dd822a0 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts @@ -2,9 +2,9 @@ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core import { AppStateService } from '../../../../../state/app-state.service'; import { DossierWrapper } from '../../../../../state/model/dossier.wrapper'; import { EditDossierSectionInterface } from '../edit-dossier-section.interface'; -import { DictionarySaveService } from '../../../../shared/services/dictionary-save.service'; -import { DictionaryManagerComponent } from '../../../../shared/components/dictionary-manager/dictionary-manager.component'; import { PermissionsService } from '../../../../../services/permissions.service'; +import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component'; +import { DictionarySaveService } from '@shared/services/dictionary-save.service'; @Component({ selector: 'redaction-edit-dossier-dictionary', diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html index 75f56b59b..3d43f24f9 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html @@ -2,36 +2,36 @@
- - + - + - + + > + +
@@ -107,63 +112,63 @@
- {{ pw.dossier.dossierName }} + {{ dw.dossier.dossierName }}
- {{ getDossierTemplate(pw).name }} + {{ getDossierTemplate(dw).name }}
- {{ documentCount(pw) }} + {{ documentCount(dw) }}
- {{ pw.totalNumberOfPages }} + {{ dw.totalNumberOfPages }}
- {{ userCount(pw) }} + {{ userCount(dw) }}
- {{ pw.dossier.date | date: 'mediumDate' }} + {{ dw.dossier.date | date: 'mediumDate' }}
-
+
- {{ pw.dossier.dueDate | date: 'mediumDate' }} + {{ dw.dossier.dueDate | date: 'mediumDate' }}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss index d101f19d8..7ccd36056 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss @@ -4,6 +4,10 @@ .content-container { position: relative; + .header-item { + justify-content: space-between; + } + cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: 2fr 1fr 1fr auto 11px; 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 f4f1bb404..b0763931a 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 @@ -4,14 +4,6 @@ import { AppStateService } from '@state/app-state.service'; import { UserService } from '@services/user.service'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { groupBy } from '@utils/functions'; -import { FilterModel } from '@shared/components/filter/model/filter.model'; -import { - annotationFilterChecker, - dossierMemberChecker, - dossierStatusChecker, - dossierTemplateChecker, - processFilters -} from '@shared/components/filter/utils/filter-utils'; import { TranslateService } from '@ngx-translate/core'; import { PermissionsService } from '@services/permissions.service'; import { DossierWrapper } from '@state/model/dossier.wrapper'; @@ -21,11 +13,21 @@ import { TranslateChartService } from '@services/translate-chart.service'; import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter'; import { StatusSorter } from '@utils/sorters/status-sorter'; import { NavigationEnd, NavigationStart, Router } from '@angular/router'; -import { FilterComponent } from '@shared/components/filter/filter.component'; import { DossiersDialogService } from '../../services/dossiers-dialog.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { BaseListingComponent } from '@shared/base/base-listing.component'; import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; +import { PopupFilterComponent } from '@shared/components/filters/popup-filter/popup-filter.component'; +import { + annotationFilterChecker, + dossierMemberChecker, + dossierStatusChecker, + dossierTemplateChecker, + processFilters, + quickFiltersChecker +} from '@shared/components/filters/popup-filter/utils/filter-utils'; +import { QuickFiltersComponent } from '../../../shared/components/filters/quick-filters/quick-filters.component'; @Component({ selector: 'redaction-dossier-listing-screen', @@ -47,17 +49,19 @@ export class DossierListingScreenComponent } = { statusFilters: [] }; + quickFilters: FilterModel[]; readonly itemSize = 85; @ViewChild(CdkVirtualScrollViewport) scrollBar: CdkVirtualScrollViewport; protected readonly _searchKey = 'name'; protected readonly _sortKey = 'dossier-listing'; + @ViewChild(QuickFiltersComponent) protected _quickFiltersComponent: QuickFiltersComponent; private _dossierAutoUpdateTimer: Subscription; private _lastScrollPosition: number; - @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent; - @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent; - @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent; - @ViewChild('dossierTemplateFilter') private _dossierTemplateFilterComponent: FilterComponent; - + @ViewChild('statusFilter') private _statusFilterComponent: PopupFilterComponent; + @ViewChild('peopleFilter') private _peopleFilterComponent: PopupFilterComponent; + @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: PopupFilterComponent; + @ViewChild('dossierTemplateFilter') + private _dossierTemplateFilterComponent: PopupFilterComponent; private _routerEventsScrollPositionSub: Subscription; private _fileChangedSub: Subscription; @@ -92,12 +96,13 @@ export class DossierListingScreenComponent return this.allEntities.length - this.activeDossiersCount; } - protected get _filterComponents(): FilterComponent[] { + protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] { return [ this._statusFilterComponent, this._peopleFilterComponent, this._needsWorkFilterComponent, - this._dossierTemplateFilterComponent + this._dossierTemplateFilterComponent, + this._quickFiltersComponent ]; } @@ -116,7 +121,11 @@ export class DossierListingScreenComponent matchAll: true, checkerArgs: this.permissionsService }, - { values: this.dossierTemplateFilters, checker: dossierTemplateChecker } + { values: this.dossierTemplateFilters, checker: dossierTemplateChecker }, + { + values: this.quickFilters, + checker: quickFiltersChecker(this.quickFilters) + } ]; } @@ -174,12 +183,12 @@ export class DossierListingScreenComponent return dossier.numberOfMembers; } - canOpenDossier(pw: DossierWrapper): boolean { - return !!pw; + canOpenDossier(dw: DossierWrapper): boolean { + return !!dw; } - getDossierTemplate(pw: DossierWrapper): DossierTemplateModel { - return this._appStateService.getDossierTemplateById(pw.dossier.dossierTemplateId); + getDossierTemplate(dw: DossierWrapper): DossierTemplateModel { + return this._appStateService.getDossierTemplateById(dw.dossier.dossierTemplateId); } openAddDossierDialog(): void { @@ -303,5 +312,28 @@ export class DossierListingScreenComponent this.dossierTemplateFilters, dossierTemplateFilters ); + + this.quickFilters = [ + { + key: this.user.id, + label: 'dossier-listing.quick-filters.my-dossiers', + checker: (dw: DossierWrapper) => dw.ownerId === this.user.id + }, + { + key: this.user.id, + label: 'dossier-listing.quick-filters.to-approve', + checker: (dw: DossierWrapper) => dw.approverIds.includes(this.user.id) + }, + { + key: this.user.id, + label: 'dossier-listing.quick-filters.to-review', + checker: (dw: DossierWrapper) => dw.memberIds.includes(this.user.id) + }, + { + key: this.user.id, + label: 'dossier-listing.quick-filters.other', + checker: (dw: DossierWrapper) => !dw.memberIds.includes(this.user.id) + } + ]; } } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index 9a3d652fb..3133e2b44 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -2,28 +2,28 @@
- - + - + + > { return []; } - protected get _filterComponents(): FilterComponent[] { + protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] { return []; } diff --git a/apps/red-ui/src/app/modules/shared/components/filter/model/filter.model.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts similarity index 100% rename from apps/red-ui/src/app/modules/shared/components/filter/model/filter.model.ts rename to apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts diff --git a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html similarity index 100% rename from apps/red-ui/src/app/modules/shared/components/filter/filter.component.html rename to apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html diff --git a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss similarity index 90% rename from apps/red-ui/src/app/modules/shared/components/filter/filter.component.scss rename to apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss index f0b532ec5..3df1d09d4 100644 --- a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/red-variables'; +@import '../../../../../../assets/styles/red-variables'; .filter-menu-options, .filter-menu-header { diff --git a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts similarity index 95% rename from apps/red-ui/src/app/modules/shared/components/filter/filter.component.ts rename to apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts index 2659b84f5..b899ed9e8 100644 --- a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts @@ -12,9 +12,9 @@ import { handleCheckedValue } from './utils/filter-utils'; import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; @Component({ - selector: 'redaction-filter', - templateUrl: './filter.component.html', - styleUrls: ['./filter.component.scss'], + selector: 'redaction-popup-filter', + templateUrl: './popup-filter.component.html', + styleUrls: ['./popup-filter.component.scss'], providers: [ { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, @@ -25,7 +25,7 @@ import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; } ] }) -export class FilterComponent implements OnChanges { +export class PopupFilterComponent implements OnChanges { @Output() filtersChanged = new EventEmitter<{ primary: FilterModel[]; secondary?: FilterModel[]; diff --git a/apps/red-ui/src/app/modules/shared/components/filter/utils/filter-utils.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts similarity index 84% rename from apps/red-ui/src/app/modules/shared/components/filter/utils/filter-utils.ts rename to apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts index 1b66e8fac..40679fd19 100644 --- a/apps/red-ui/src/app/modules/shared/components/filter/utils/filter-utils.ts +++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts @@ -1,7 +1,7 @@ import { FilterModel } from '../model/filter.model'; -import { FileStatusWrapper } from '@models/file/file-status.wrapper'; -import { DossierWrapper } from '@state/model/dossier.wrapper'; -import { PermissionsService } from '@services/permissions.service'; +import { FileStatusWrapper } from '../../../../../../models/file/file-status.wrapper'; +import { DossierWrapper } from '../../../../../../state/model/dossier.wrapper'; +import { PermissionsService } from '../../../../../../services/permissions.service'; export function processFilters(oldFilters: FilterModel[], newFilters: FilterModel[]) { copySettings(oldFilters, newFilters); @@ -157,20 +157,26 @@ export const annotationFilterChecker = ( } }; -export const dossierStatusChecker = (pw: DossierWrapper, filter: FilterModel) => - pw.hasStatus(filter.key); +export const dossierStatusChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.hasStatus(filter.key); -export const dossierMemberChecker = (pw: DossierWrapper, filter: FilterModel) => - pw.hasMember(filter.key); +export const dossierMemberChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.hasMember(filter.key); -export const dossierTemplateChecker = (pw: DossierWrapper, filter: FilterModel) => - pw.dossierTemplateId === filter.key; +export const dossierTemplateChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.dossierTemplateId === filter.key; -export const dueDateChecker = (pw: DossierWrapper, filter: FilterModel) => - pw.dueDateMatches(filter.key); +export const dueDateChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.dueDateMatches(filter.key); -export const addedDateChecker = (pw: DossierWrapper, filter: FilterModel) => - pw.addedDateMatches(filter.key); +export const addedDateChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.addedDateMatches(filter.key); + +export const dossierApproverChecker = (dw: DossierWrapper, filter: FilterModel) => + dw.approverIds.includes(filter.key); + +export const quickFiltersChecker = (quickFilters: FilterModel[]) => (dw: DossierWrapper) => + quickFilters.reduce((acc, filter) => acc || (filter.checked && filter.checker(dw)), false); export function getFilteredEntities( entities: any[], 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 new file mode 100644 index 000000000..3a607d7f2 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html @@ -0,0 +1,8 @@ +
+ {{ filter.label | translate }} +
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 new file mode 100644 index 000000000..5347cf580 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.scss @@ -0,0 +1,32 @@ +@import '../../../../../../assets/styles/red-variables'; + +:host { + display: flex; +} + +.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 new file mode 100644 index 000000000..f318b070c --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.ts @@ -0,0 +1,29 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { FilterModel } from '../popup-filter/model/filter.model'; + +@Component({ + selector: 'redaction-quick-filters', + templateUrl: './quick-filters.component.html', + styleUrls: ['./quick-filters.component.scss'] +}) +export class QuickFiltersComponent { + @Output() filtersChanged = new EventEmitter(); + @Input() filters: FilterModel[]; + + constructor() {} + + get hasActiveFilters(): boolean { + return this.filters.filter(f => f.checked).length > 0; + } + + deactivateAllFilters() { + for (const filter of this.filters) { + filter.checked = false; + } + } + + toggle(filter: FilterModel) { + filter.checked = !filter.checked; + this.filtersChanged.emit(this.filters); + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index 006b752c8..9710bff1a 100644 --- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { Color } from '@utils/types'; -import { FilterModel } from '../filter/model/filter.model'; +import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model'; export class DoughnutChartConfig { value: number; 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 7f8c8f6a6..ea408fa11 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 { HasScrollbarDirective } from './directives/has-scrollbar.directive'; import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component'; import { HiddenActionComponent } from './components/hidden-action/hidden-action.component'; import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component'; -import { FilterComponent } from './components/filter/filter.component'; import { EmptyStateComponent } from './components/empty-state/empty-state.component'; import { SortByPipe } from './components/sort-pipe/sort-by.pipe'; import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component'; @@ -35,6 +34,8 @@ 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'; const buttons = [ ChevronButtonComponent, @@ -55,7 +56,7 @@ const components = [ StatusBarComponent, DictionaryAnnotationIconComponent, HiddenActionComponent, - FilterComponent, + PopupFilterComponent, ConfirmationDialogComponent, EmptyStateComponent, SortByPipe, @@ -84,9 +85,9 @@ const modules = [ ]; @NgModule({ - declarations: [...components, ...utils], + declarations: [...components, ...utils, QuickFiltersComponent], imports: [CommonModule, ...modules, MonacoEditorModule], - exports: [...modules, ...components, ...utils], + exports: [...modules, ...components, ...utils, QuickFiltersComponent], providers: [ { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 7a0c749f3..31fbcdad3 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -137,6 +137,12 @@ }, "no-match": { "title": "No dossiers match your current filters." + }, + "quick-filters": { + "my-dossiers": "My Dossiers", + "to-approve": "To Approve", + "to-review": "To Review", + "other": "Other" } }, "add-dossier-dialog": { From da5360bacfec21a8b43527e78f693a3123927458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 3 Jun 2021 20:08:59 +0300 Subject: [PATCH 2/2] RED-1549: Dossier overview quick filters --- .../modules/app-config/app-config.service.ts | 1 + .../dossier-listing-screen.component.scss | 4 -- .../dossier-listing-screen.component.ts | 6 +- .../dossier-overview-screen.component.html | 5 ++ .../dossier-overview-screen.component.ts | 70 ++++++++++++++++++- .../popup-filter/model/filter.model.ts | 1 + .../popup-filter/utils/filter-utils.ts | 3 - .../quick-filters.component.scss | 2 + apps/red-ui/src/assets/config/config.json | 1 + apps/red-ui/src/assets/i18n/en.json | 6 ++ docker/red-ui/docker-entrypoint.sh | 2 + 11 files changed, 90 insertions(+), 11 deletions(-) diff --git a/apps/red-ui/src/app/modules/app-config/app-config.service.ts b/apps/red-ui/src/app/modules/app-config/app-config.service.ts index b0689d802..cf68cbd88 100644 --- a/apps/red-ui/src/app/modules/app-config/app-config.service.ts +++ b/apps/red-ui/src/app/modules/app-config/app-config.service.ts @@ -17,6 +17,7 @@ export enum AppConfigKey { ADMIN_CONTACT_URL = 'ADMIN_CONTACT_URL', AUTO_READ_TIME = 'AUTO_READ_TIME', MAX_FILE_SIZE_MB = 'MAX_FILE_SIZE_MB', + RECENT_PERIOD_IN_HOURS = 'RECENT_PERIOD_IN_HOURS', DELETE_RETENTION_HOURS = 'DELETE_RETENTION_HOURS', APP_NAME = 'APP_NAME', diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss index 7ccd36056..d101f19d8 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss @@ -4,10 +4,6 @@ .content-container { position: relative; - .header-item { - justify-content: space-between; - } - cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: 2fr 1fr 1fr auto 11px; 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 b0763931a..18987c562 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 @@ -24,8 +24,7 @@ import { dossierMemberChecker, dossierStatusChecker, dossierTemplateChecker, - processFilters, - quickFiltersChecker + processFilters } from '@shared/components/filters/popup-filter/utils/filter-utils'; import { QuickFiltersComponent } from '../../../shared/components/filters/quick-filters/quick-filters.component'; @@ -124,7 +123,8 @@ export class DossierListingScreenComponent { values: this.dossierTemplateFilters, checker: dossierTemplateChecker }, { values: this.quickFilters, - checker: quickFiltersChecker(this.quickFilters) + checker: (dw: DossierWrapper) => + this.quickFilters.reduce((acc, f) => acc || (f.checked && f.checker(dw)), false) } ]; } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index 3133e2b44..794c14beb 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -106,6 +106,11 @@ (reload)="bulkActionPerformed()" [selectedFileIds]="selectedEntitiesIds" > + +
f.required && f.checked); + } + + get checkedNotRequiredFilters() { + return this.quickFilters.filter(f => !f.required && f.checked); + } + protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] { return [ this._statusFilterComponent, this._peopleFilterComponent, - this._needsWorkFilterComponent + this._needsWorkFilterComponent, + this._quickFiltersComponent ]; } @@ -118,6 +135,16 @@ export class DossierOverviewScreenComponent checker: annotationFilterChecker, matchAll: true, checkerArgs: this.permissionsService + }, + { + values: this.quickFilters, + checker: (file: FileStatusWrapper) => + this.checkedRequiredFilters.reduce((acc, f) => acc && f.checker(file), true) && + (this.checkedNotRequiredFilters.length === 0 || + this.checkedNotRequiredFilters.reduce( + (acc, f) => acc || f.checker(file), + false + )) } ]; } @@ -287,6 +314,11 @@ export class DossierOverviewScreenComponent this.collapsedDetails = !this.collapsedDetails; } + recentlyModifiedChecker = (file: FileStatusWrapper) => + moment(file.lastUpdated) + .add(this._appConfigService.getConfig('RECENT_PERIOD_IN_HOURS'), 'hours') + .isAfter(moment()); + protected _preFilter() { this.detailsContainerFilters = { needsWorkFilters: this.needsWorkFilters.map(f => ({ ...f })), @@ -378,5 +410,41 @@ export class DossierOverviewScreenComponent (a, b) => RedactionFilterSorter[a.key] - RedactionFilterSorter[b.key] ); this.needsWorkFilters = processFilters(this.needsWorkFilters, needsWorkFilters); + + this._computeQuickFilters(); + } + + private _computeQuickFilters() { + if (this.allEntities.filter(this.recentlyModifiedChecker).length > 0) { + this.quickFilters = [ + { + key: this.user.id, + label: 'dossier-overview.quick-filters.recent', + required: true, + checker: this.recentlyModifiedChecker + } + ]; + } else { + this.quickFilters = []; + } + + this.quickFilters = [ + ...this.quickFilters, + { + key: this.user.id, + label: 'dossier-overview.quick-filters.assigned-to-me', + checker: (file: FileStatusWrapper) => file.currentReviewer === this.user.id + }, + { + key: this.user.id, + label: 'dossier-overview.quick-filters.unassigned', + checker: (file: FileStatusWrapper) => !file.currentReviewer + }, + { + key: this.user.id, + label: 'dossier-overview.quick-filters.assigned-to-others', + checker: (file: FileStatusWrapper) => file.currentReviewer !== this.user.id + } + ]; } } diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts index 4f65e85cd..16686cf98 100644 --- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts +++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts @@ -9,4 +9,5 @@ export interface FilterModel { matches?: number; filters?: FilterModel[]; checker?: (obj?) => boolean; + required?: boolean; } diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts index 40679fd19..1eb819636 100644 --- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts +++ b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts @@ -175,9 +175,6 @@ export const addedDateChecker = (dw: DossierWrapper, filter: FilterModel) => export const dossierApproverChecker = (dw: DossierWrapper, filter: FilterModel) => dw.approverIds.includes(filter.key); -export const quickFiltersChecker = (quickFilters: FilterModel[]) => (dw: DossierWrapper) => - quickFilters.reduce((acc, filter) => acc || (filter.checked && filter.checker(dw)), false); - export function getFilteredEntities( entities: any[], filters: { values: FilterModel[]; checker: Function; matchAll?: boolean; checkerArgs?: any }[] 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 index 5347cf580..b6eec662a 100644 --- 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 @@ -2,6 +2,8 @@ :host { display: flex; + flex: 1; + justify-content: flex-end; } .quick-filter { diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index c9c9c08ef..49ce0c5cf 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -10,6 +10,7 @@ "LICENSE_START": "01-01-2021", "LICENSE_END": "31-12-2021", "LICENSE_PAGE_COUNT": 1000000, + "RECENT_PERIOD_IN_HOURS": 24, "MAX_FILE_SIZE_MB": 100, "DELETE_RETENTION_HOURS": 96 } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 31fbcdad3..a1f474edf 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -333,6 +333,12 @@ "reanalyse-dossier": { "success": "Files scheduled for reanalysis.", "error": "Failed to schedule files for reanalysis. Please try again." + }, + "quick-filters": { + "recent": "Recent", + "assigned-to-me": "Assigned to me", + "unassigned": "Unassigned", + "assigned-to-others": "Assigned to others" } }, "file-preview": { diff --git a/docker/red-ui/docker-entrypoint.sh b/docker/red-ui/docker-entrypoint.sh index 7d1f4cae9..ac66ed5d3 100755 --- a/docker/red-ui/docker-entrypoint.sh +++ b/docker/red-ui/docker-entrypoint.sh @@ -10,6 +10,7 @@ ADMIN_CONTACT_URL="${ADMIN_CONTACT_URL:-}" AUTO_READ_TIME="${AUTO_READ_TIME:-1.5}" MAX_FILE_SIZE_MB="${MAX_FILE_SIZE_MB:-50}" DELETE_RETENTION_HOURS="${DELETE_RETENTION_HOURS:-96}" +RECENT_PERIOD_IN_HOURS="${RECENT_PERIOD_IN_HOURS:-24}" BACKEND_APP_VERSION="${BACKEND_APP_VERSION:-4.7.0}" @@ -35,6 +36,7 @@ echo '{ "APP_NAME":"'"$APP_NAME"'", "AUTO_READ_TIME":'"$AUTO_READ_TIME"', "MAX_FILE_SIZE_MB":"'"$MAX_FILE_SIZE_MB"'", + "RECENT_PERIOD_IN_HOURS":"'"RECENT_PERIOD_IN_HOURS"'", "DELETE_RETENTION_HOURS":"'"$DELETE_RETENTION_HOURS"'", "API_URL":"'"$API_URL"'" }' > /usr/share/nginx/html/ui/assets/config/config.json