From 232f2df003181c98267b4d22ffd7312c27756f6a Mon Sep 17 00:00:00 2001 From: Valentin Date: Sun, 22 Aug 2021 23:30:06 +0300 Subject: [PATCH] File Attributes - added 'filterable' and 'displayedInFileList' to file attributes - added dynamic filters and columns for new added file attributes --- ...-edit-file-attribute-dialog.component.html | 12 ++++ ...dd-edit-file-attribute-dialog.component.ts | 4 +- ...e-attributes-listing-screen.component.html | 6 ++ ...e-attributes-listing-screen.component.scss | 4 +- ...ile-attributes-listing-screen.component.ts | 8 +++ .../dossier-overview-screen.component.html | 5 ++ .../dossier-overview-screen.component.scss | 4 +- .../dossier-overview-screen.component.ts | 57 ++++++++++++++++++- .../page-header/page-header.component.ts | 2 + apps/red-ui/src/assets/i18n/en.json | 4 ++ 10 files changed, 99 insertions(+), 7 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 58077d3e8..38076491c 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -51,6 +51,18 @@ {{ 'add-edit-file-attribute.form.primary' | translate }} + +
+ + {{ 'add-edit-file-attribute.form.filterable' | translate }} + +
+ +
+ + {{ 'add-edit-file-attribute.form.displayedInFileList' | translate }} + +
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 692d3961e..f6b36782f 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -32,7 +32,9 @@ export class AddEditFileAttributeDialogComponent { csvColumnHeader: [this.fileAttribute?.csvColumnHeader, Validators.required], type: [this.fileAttribute?.type || FileAttributeConfig.TypeEnum.TEXT, Validators.required], readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], - primaryAttribute: [this.fileAttribute?.primaryAttribute] + primaryAttribute: [this.fileAttribute?.primaryAttribute], + filterable: [this.fileAttribute?.filterable], + displayedInFileList: [this.fileAttribute?.displayedInFileList] }); } diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index c8d698324..7f708f4a9 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -62,6 +62,12 @@
{{ attribute.csvColumnHeader }}
+
+ +
+
+ +
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss index bcf8a931d..404839f0e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss @@ -11,7 +11,7 @@ iqser-table-header::ng-deep .header-item { .content-container cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 11px; + grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 11px; .table-item { > div:not(.scrollbar-placeholder) { @@ -36,7 +36,7 @@ iqser-table-header::ng-deep .header-item { } &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index 358e4737b..7fc0cb789 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -37,6 +37,14 @@ export class FileAttributesListingScreenComponent extends ListingComponent @@ -104,6 +105,10 @@
+
+ {{ fileStatus.fileAttributes.attributeIdToValue[config.id] }} +
+
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss index b28ed76bb..857affaff 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss @@ -17,7 +17,7 @@ iqser-table-column-name::ng-deep { cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px; + grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px; .table-item { > div { @@ -67,7 +67,7 @@ cdk-virtual-scroll-viewport { &.has-scrollbar:hover { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto; + grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto; } } } 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 f5b52aa64..04fced365 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 @@ -30,6 +30,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { annotationFilterChecker } from '@shared/components/filters/popup-filter/utils/filter-utils'; import { PermissionsService } from '@services/permissions.service'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; +import { FileAttributeConfig } from '@redaction/red-ui-http'; @Component({ templateUrl: './dossier-overview-screen.component.html', @@ -50,7 +51,7 @@ export class DossierOverviewScreenComponent extends ListingComponent[] = [ + tableColumnConfigs: readonly TableColumnConfig[] = [ { label: _('dossier-overview.table-col-names.name'), sortByKey: 'filename' @@ -79,6 +80,7 @@ export class DossierOverviewScreenComponent extends ListingComponent[] = []; + for (const config of this.displayedInFileListAttributes) { + if (config.displayedInFileList) { + dynamicColumns.push({ label: config.label }); + } + } + this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)]; + + // const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper'); + // this._renderer.setStyle(element, 'grid-template-columns', 'auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px'); + // this._renderer.addClass(element, 'has-scrollbar:hover') + // console.log('element: ', element); + } + + get displayedInFileListAttributes() { + return this.fileAttributeConfigs.filter(config => config.displayedInFileList); + } + recentlyModifiedChecker = (file: FileStatusWrapper) => moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment()); @@ -256,6 +282,8 @@ export class DossierOverviewScreenComponent extends ListingComponent(); const allDistinctNeedsWork = new Set(); + const dynamicFilters = new Map>(); + this.entitiesService.all.forEach(file => { allDistinctPeople.add(file.currentReviewer); allDistinctFileStatusWrapper.add(file.status); @@ -269,6 +297,31 @@ export class DossierOverviewScreenComponent extends ListingComponent { + if (config.filterable) { + const filterKey = `${config.id}:${config.label}`; + let filters = dynamicFilters.get(filterKey); + if (!filters) { + dynamicFilters.set(filterKey, new Set()); + filters = dynamicFilters.get(filterKey); + } + filters.add(file.fileAttributes?.attributeIdToValue[config.id]); + } + }); + }); + + dynamicFilters.forEach((filterValue: Set, filterKey: string) => { + const id = filterKey.split(':')[0]; + const key = filterKey.split(':')[1]; + this.filterService.addFilterGroup({ + slug: key, + label: key, + icon: 'red:template', + filters: [...filterValue].map((value: string) => ({ key: value, label: value })), + checker: (input: FileStatusWrapper, filter: NestedFilter) => filter.label === input.fileAttributes.attributeIdToValue[id] + }); }); const statusFilters = [...allDistinctFileStatusWrapper].map(item => ({ diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts index c6fb9a83d..866c188df 100644 --- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts @@ -5,6 +5,7 @@ import { FilterService, SearchService } from '@iqser/common-ui'; import { distinctUntilChanged, map } from 'rxjs/operators'; import { combineLatest, Observable, of } from 'rxjs'; import { SearchPosition, SearchPositions } from '@shared/components/page-header/models/search-positions.type'; +import { FileAttributeConfig } from '@redaction/red-ui-http'; @Component({ selector: 'redaction-page-header', @@ -18,6 +19,7 @@ export class PageHeaderComponent { @Input() showCloseButton: boolean; @Input() actionConfigs: readonly ActionConfig[]; @Input() buttonConfigs: readonly ButtonConfig[]; + @Input() fileAttributeConfigs: readonly FileAttributeConfig[]; @Input() searchPlaceholder: string; @Input() searchWidth: number | 'full'; @Input() searchPosition: SearchPosition = SearchPositions.afterFilters; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 137125493..8c1710754 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -82,6 +82,8 @@ "form": { "column-header": "CSV Column Header", "column-header-placeholder": "Enter CSV Column Header", + "displayedInFileList": "Displayed In File List", + "filterable": "Filterable", "name": "Attribute Name", "name-placeholder": "Enter Name", "primary": "Set as Primary", @@ -928,6 +930,8 @@ "search": "Search by attribute name...", "table-col-names": { "csv-column": "CSV Column", + "displayed-in-file-list": "Dis. In File List", + "filterable": "Filterable", "name": "Name", "primary": "Primary", "primary-info-tooltip": "The value of the attribute set as primary shows up under the file name in the documents list.",