From 7440dd597d131731e3b297da594b1ce3cb5bbd87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 26 Apr 2021 16:34:58 +0300 Subject: [PATCH] File attributes primary & type --- ...-edit-file-attribute-dialog.component.html | 21 ++++-- ...-edit-file-attribute-dialog.component.scss | 9 +++ ...dd-edit-file-attribute-dialog.component.ts | 4 +- .../active-fields-listing.component.html | 40 ++++------- .../active-fields-listing.component.scss | 4 +- .../active-fields-listing.component.ts | 15 ++++ ...-attributes-csv-import-dialog.component.ts | 68 +++++++++---------- ...e-attributes-listing-screen.component.html | 6 +- ...e-attributes-listing-screen.component.scss | 4 ++ .../document-info/document-info.component.ts | 2 +- .../document-info-dialog.component.ts | 2 +- .../shared/directives/sync-width.directive.ts | 5 +- apps/red-ui/src/assets/i18n/en.json | 19 +++--- .../src/lib/model/fileAttributeConfig.ts | 12 +++- 14 files changed, 121 insertions(+), 90 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 b75cfe10c..a08394b04 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 @@ -20,12 +20,25 @@ /> -
- {{ 'add-edit-file-attribute.form.read-only' | translate }} +
+ + + + {{ 'file-attribute-types.' + type | translate }} + +
-
- {{ 'add-edit-file-attribute.form.visible' | translate }} +
+
+ {{ 'add-edit-file-attribute.form.read-only' | translate }} +
+ +
+ + {{ 'add-edit-file-attribute.form.primary' | translate }} + +
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss index e69de29bb..21b66161f 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.scss @@ -0,0 +1,9 @@ +.options-wrapper { + display: flex; + align-items: center; + margin-top: 24px; + + > *:not(:last-child) { + margin-right: 32px; + } +} 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 2e4580cfb..56afda115 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 @@ -13,6 +13,7 @@ export class AddEditFileAttributeDialogComponent { public fileAttributeForm: FormGroup; public fileAttribute: FileAttributeConfig; public ruleSetId: string; + public readonly typeOptions = [FileAttributeConfig.TypeEnum.TEXT, FileAttributeConfig.TypeEnum.NUMBER, FileAttributeConfig.TypeEnum.DATE]; constructor( private readonly _appStateService: AppStateService, @@ -26,8 +27,9 @@ export class AddEditFileAttributeDialogComponent { this.fileAttributeForm = this._formBuilder.group({ label: [this.fileAttribute?.label, Validators.required], csvColumnHeader: [this.fileAttribute?.csvColumnHeader, Validators.required], + type: [this.fileAttribute?.type || FileAttributeConfig.TypeEnum.TEXT, Validators.required], readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], - visible: [this.fileAttribute?.visible] + primaryAttribute: [this.fileAttribute?.primaryAttribute] }); } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html index a4ade48a0..d0e9c7fee 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html @@ -18,13 +18,7 @@ icon="red:read-only" > - - + - - - - - - @@ -85,9 +66,10 @@ >
@@ -146,8 +128,8 @@
- - {{ 'file-attributes-csv-import.types.' + type | translate }} + + {{ 'file-attribute-types.' + type | translate }} @@ -156,11 +138,13 @@
-
+
+ +
div { @@ -78,7 +78,7 @@ cdk-virtual-scroll-viewport { &.has-scrollbar:hover { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 30px minmax(0, 25vw) 150px auto auto auto; + grid-template-columns: 30px minmax(0, 350px) 150px auto auto auto; } } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts index 84c01afd9..9fb18a78a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts @@ -1,6 +1,7 @@ import { Component, EventEmitter, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { BaseListingComponent } from '../../../../shared/base/base-listing.component'; import { Field } from '../file-attributes-csv-import-dialog.component'; +import { FileAttributeConfig } from '@redaction/red-ui-http'; @Component({ selector: 'redaction-active-fields-listing', @@ -13,6 +14,8 @@ export class ActiveFieldsListingComponent extends BaseListingComponent im @Output() public setHoveredColumn = new EventEmitter(); @Output() public toggleFieldActive = new EventEmitter(); + public readonly typeOptions = [FileAttributeConfig.TypeEnum.TEXT, FileAttributeConfig.TypeEnum.NUMBER, FileAttributeConfig.TypeEnum.DATE]; + protected readonly _selectionKey = 'csvColumn'; constructor(protected readonly _injector: Injector) { @@ -27,6 +30,7 @@ export class ActiveFieldsListingComponent extends BaseListingComponent im } public deactivateSelection() { + this.allEntities.filter((field) => this.isEntitySelected(field)).forEach((field) => (field.primaryAttribute = false)); this.allEntities = [...this.allEntities.filter((field) => !this.isEntitySelected(field))]; this.allEntitiesChange.emit(this.allEntities); this.selectedEntitiesIds = []; @@ -37,4 +41,15 @@ export class ActiveFieldsListingComponent extends BaseListingComponent im this.allEntities.find((f) => f.csvColumn === csvColumn)[attribute] = value; } } + + public togglePrimary(field: Field) { + if (field.primaryAttribute) { + field.primaryAttribute = false; + } else { + for (const f of this.allEntities) { + f.primaryAttribute = false; + } + field.primaryAttribute = true; + } + } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index 28c7f6a75..4baa14973 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -3,7 +3,7 @@ import { AbstractControl, FormGroup, ValidatorFn, Validators } from '@angular/fo import { AppStateService } from '../../../../state/app-state.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import * as Papa from 'papaparse'; -import { FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; +import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; @@ -11,19 +11,13 @@ import { BaseListingComponent } from '../../../shared/base/base-listing.componen import { NotificationService, NotificationType } from '../../../../services/notification.service'; import { TranslateService } from '@ngx-translate/core'; -enum FieldType { - Text = 'Text', - Number = 'Number', - Date = 'Date' -} - export interface Field { id?: string; csvColumn: string; name: string; - type: FieldType; + type: FileAttributeConfig.TypeEnum; readonly: boolean; - display: boolean; + primaryAttribute: boolean; editingName?: boolean; temporaryName?: string; } @@ -107,9 +101,9 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent entity.id = existing.id; entity.name = existing.label; entity.temporaryName = existing.label; - // TODO: entity.type - entity.display = existing.visible; + entity.type = existing.type; entity.readonly = !existing.editable; + entity.primaryAttribute = existing.primaryAttribute; this.toggleFieldActive(entity); } } @@ -174,9 +168,9 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent csvColumn, name: csvColumn, temporaryName: csvColumn, - type: isNumber ? FieldType.Number : FieldType.Text, + type: isNumber ? FileAttributeConfig.TypeEnum.NUMBER : FileAttributeConfig.TypeEnum.TEXT, readonly: false, - display: true + primaryAttribute: false }; } @@ -189,29 +183,33 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent } public async save() { + const newPrimary = !!this.activeFields.find((attr) => attr.primaryAttribute); + + if (newPrimary) { + this.data.existingConfiguration.fileAttributeConfigs.forEach((attr) => (attr.primaryAttribute = false)); + } + + const fileAttributes = { + ...this.baseConfigForm.getRawValue(), + fileAttributeConfigs: [ + ...this.data.existingConfiguration.fileAttributeConfigs.filter( + (a) => !this.allEntities.find((entity) => entity.csvColumn === a.csvColumnHeader) + ), + ...this.activeFields.map((field) => { + return { + id: field.id, + csvColumnHeader: field.csvColumn, + editable: !field.readonly, + label: field.name, + type: field.type, + primaryAttribute: field.primaryAttribute + }; + }) + ] + }; + try { - await this._fileAttributesControllerService - .setFileAttributesConfig( - { - ...this.baseConfigForm.getRawValue(), - fileAttributeConfigs: [ - ...this.data.existingConfiguration.fileAttributeConfigs.filter( - (a) => !this.allEntities.find((entity) => entity.csvColumn === a.csvColumnHeader) - ), - ...this.activeFields.map((field) => { - return { - id: field.id, - csvColumnHeader: field.csvColumn, - editable: !field.readonly, - label: field.name, - visible: field.display - }; - }) - ] - }, - this.ruleSetId - ) - .toPromise(); + await this._fileAttributesControllerService.setFileAttributesConfig(fileAttributes, this.ruleSetId).toPromise(); this._notificationService.showToastNotification( this._translateService.instant('file-attributes-csv-import.save.success', { count: this.activeFields.length }), null, 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 4a3fe6302..c3d752e6e 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 @@ -117,9 +117,7 @@ {{ attribute.label }}
-
- Free text -
+
- +
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 1b2c2630c..0be3ec515 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 @@ -68,3 +68,7 @@ redaction-table-col-name::ng-deep { display: none; visibility: hidden; } + +.table-item > div:not(.selection-column) redaction-round-checkbox { + cursor: default; +} diff --git a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.ts index 6bbffa6b8..0bb39dc03 100644 --- a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.ts +++ b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.ts @@ -15,7 +15,7 @@ export class DocumentInfoComponent implements OnInit { public fileAttributesConfig: FileAttributeConfig[]; constructor(private readonly _appStateService: AppStateService, private readonly _dialogService: ProjectsDialogService) { - this.fileAttributesConfig = this._appStateService.fileAttributesConfig.filter((attr) => attr.visible); + this.fileAttributesConfig = this._appStateService.fileAttributesConfig; } ngOnInit(): void {} diff --git a/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.ts b/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.ts index 5be9779ef..01b5df424 100644 --- a/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.ts +++ b/apps/red-ui/src/app/modules/projects/dialogs/document-info-dialog/document-info-dialog.component.ts @@ -30,7 +30,7 @@ export class DocumentInfoDialogComponent implements OnInit { async ngOnInit() { this.attributes = (await this._fileAttributesService.getFileAttributesConfiguration(this._project.ruleSetId).toPromise()).fileAttributeConfigs.filter( - (attr) => attr.visible && attr.editable + (attr) => attr.editable ); const formConfig = this.attributes.reduce((acc, attr) => ({ ...acc, [attr.id]: [this.file.fileAttributes.attributeIdToValue[attr.id]] }), {}); this.documentInfoForm = this._formBuilder.group(formConfig); diff --git a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts index aaf9ace4a..bbcc3db1b 100644 --- a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts +++ b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts @@ -33,7 +33,7 @@ export class SyncWidthDirective implements AfterViewInit, OnDestroy { this.el.nativeElement.setAttribute('synced', true); - const { tableRow, length } = this._sampleRow; + const { tableRow, length } = this._sampleRow(tableRows); const hasExtraColumns = headerItems.length !== length ? 1 : 0; @@ -56,8 +56,7 @@ export class SyncWidthDirective implements AfterViewInit, OnDestroy { this.matchWidth(); } - private get _sampleRow(): { tableRow: Element; length: number } { - const tableRows = document.getElementsByClassName(this.redactionSyncWidth); + private _sampleRow(tableRows: HTMLCollectionOf): { tableRow: Element; length: number } { let length = 0; let tableRow: Element; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 798fdce6d..f798c728c 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -634,10 +634,16 @@ "column-header": "CSV Column Header", "column-header-placeholder": "Enter CSV Column Header", "read-only": "Make Read-Only", - "visible": "Visible in Document Info" + "type": "Type", + "primary": "Set as Primary" }, "save": "Save Attribute" }, + "file-attribute-types": { + "TEXT": "Free Text", + "NUMBER": "Number", + "DATE": "Date" + }, "add-edit-dictionary": { "title": { "edit": "Edit {{name}} Dictionary", @@ -1199,9 +1205,6 @@ "read-only": "Make Read-only", "enable-read-only": "Enable Read-only for all attributes", "disable-read-only": "Disable Read-only for all attributes", - "display": "Toggle Display", - "enable-display": "Enable Display for all attributes", - "disable-display": "Disable Display for all attributes", "type": "Type" } }, @@ -1210,17 +1213,13 @@ "name": "Name", "type": "Type", "read-only": "Read-Only", - "display": "Display" + "primary": "primary", + "primary-info-tooltip": "The value of the attribute set as primary shows up under the file name in the documents list." }, "quick-activation": { "all": "All", "none": "None" }, - "types": { - "Text": "Free Text", - "Number": "Number", - "Date": "Date" - }, "action": { "edit-name": "Edit Name", "save-name": "Save", diff --git a/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts b/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts index 27d4039c6..76131bc73 100644 --- a/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts +++ b/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts @@ -15,5 +15,15 @@ export interface FileAttributeConfig { editable?: boolean; id?: string; label?: string; - visible?: boolean; + primaryAttribute?: boolean; + type?: FileAttributeConfig.TypeEnum; +} + +export namespace FileAttributeConfig { + export type TypeEnum = 'TEXT' | 'NUMBER' | 'DATE'; + export const TypeEnum = { + TEXT: 'TEXT' as TypeEnum, + NUMBER: 'NUMBER' as TypeEnum, + DATE: 'DATE' as TypeEnum + }; }