From 9c38dd83cbb2f815f07f30a14dc6dd9895bda50d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 19 Mar 2021 23:56:37 +0200 Subject: [PATCH] Add file attribute --- ...-edit-file-attribute-dialog.component.html | 26 ++++++++- ...dd-edit-file-attribute-dialog.component.ts | 55 +++++++++++++++++-- apps/red-ui/src/app/dialogs/dialog.service.ts | 18 ++++++ ...e-attributes-listing-screen.component.html | 2 + ...ile-attributes-listing-screen.component.ts | 41 +++++++------- apps/red-ui/src/assets/i18n/en.json | 12 ++++ apps/red-ui/src/assets/styles/red-input.scss | 2 +- apps/red-ui/src/assets/styles/red-toggle.scss | 29 +++++++++- 8 files changed, 158 insertions(+), 27 deletions(-) diff --git a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index 9896e1169..e9c1a3078 100644 --- a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -1 +1,25 @@ -

add-edit-file-attribute-dialog works!

+
+
+ {{ (fileAttribute ? 'add-edit-file-attribute.title.edit' : 'add-edit-file-attribute.title.new') | translate: { name: fileAttribute?.name } }} +
+ +
+
+
+ + +
+ +
+ {{ 'add-edit-file-attribute.form.read-only' | translate }} +
+
+
+ +
+
+ + +
diff --git a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index 651fad810..c84ef475a 100644 --- a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -1,12 +1,59 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AppStateService } from '../../state/app-state.service'; +import { FileAttribute, FileAttributesControllerService } from '@redaction/red-ui-http'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'redaction-add-edit-file-attribute-dialog', templateUrl: './add-edit-file-attribute-dialog.component.html', styleUrls: ['./add-edit-file-attribute-dialog.component.scss'] }) -export class AddEditFileAttributeDialogComponent implements OnInit { - constructor() {} +export class AddEditFileAttributeDialogComponent { + public fileAttributeForm: FormGroup; + public fileAttribute: FileAttribute; + public ruleSetId: string; - ngOnInit(): void {} + constructor( + private readonly _appStateService: AppStateService, + private readonly _formBuilder: FormBuilder, + private readonly _fileAttributesService: FileAttributesControllerService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttribute; ruleSetId: string } + ) { + this.fileAttribute = data.fileAttribute; + this.ruleSetId = data.ruleSetId; + + this.fileAttributeForm = this._formBuilder.group({ + name: [this.fileAttribute?.name, Validators.required], + readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], + visible: [this.fileAttribute?.visible] + }); + } + + public get changed(): boolean { + if (!this.fileAttribute) return true; + + for (const key of Object.keys(this.fileAttributeForm.getRawValue())) { + if (key === 'readonly') { + if (this.fileAttribute.editable === this.fileAttributeForm.get(key).value) { + return true; + } + } else if (this.fileAttribute[key] !== this.fileAttributeForm.get(key).value) { + return true; + } + } + + return false; + } + + async saveFileAttribute() { + const fileAttribute = { + id: this.fileAttribute?.id, + editable: !this.fileAttributeForm.get('readonly').value, + ...this.fileAttributeForm.getRawValue() + }; + await this._fileAttributesService.setFileAttributesConfiguration({ fileAttributes: [fileAttribute] }, this.ruleSetId).toPromise(); + this.dialogRef.close(fileAttribute); + } } diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index bd10219b1..09e75dfc9 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -3,6 +3,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Colors, DictionaryControllerService, + FileAttribute, FileManagementControllerService, FileStatus, ManualRedactionControllerService, @@ -27,6 +28,7 @@ import { OverwriteFilesDialogComponent } from './overwrite-files-dialog/overwrit import { EditColorDialogComponent } from './edit-color-dialog/edit-color-dialog.component'; import { RemoveAnnotationsDialogComponent } from './remove-annotations-dialog/remove-annotations-dialog.component'; import { ForceRedactionDialogComponent } from './force-redaction-dialog/force-redaction-dialog.component'; +import { AddEditFileAttributeDialogComponent } from './add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component'; const dialogConfig = { width: '662px', @@ -336,6 +338,22 @@ export class DialogService { return ref; } + public openAddEditFileAttributeDialog(fileAttribute: FileAttribute, ruleSetId: string, cb?: Function): MatDialogRef { + const ref = this._dialog.open(AddEditFileAttributeDialogComponent, { + ...dialogConfig, + data: { fileAttribute, ruleSetId }, + autoFocus: true + }); + + ref.afterClosed().subscribe((result) => { + if (result && cb) { + cb(result); + } + }); + + return ref; + } + openRemoveAnnotationModal($event: MouseEvent, annotation: AnnotationWrapper, callback: () => void) { $event?.stopPropagation(); diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html index b56c31b1b..f3fa5afba 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html @@ -125,3 +125,5 @@
+ + diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts index e3eecb7c6..7482a8be9 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts @@ -6,6 +6,7 @@ import { AppStateService } from '../../../state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { debounce } from '../../../utils/debounce'; import { SortingOption, SortingService } from '../../../utils/sorting.service'; +import { DialogService } from '../../../dialogs/dialog.service'; @Component({ selector: 'redaction-file-attributes-listing-screen', @@ -17,6 +18,7 @@ export class FileAttributesListingScreenComponent implements OnInit { public attributes: FileAttribute[] = []; public displayedAttributes: FileAttribute[] = []; public selectedFileAttributeIds: string[] = []; + public viewReady = false; constructor( public readonly permissionsService: PermissionsService, @@ -24,7 +26,8 @@ export class FileAttributesListingScreenComponent implements OnInit { private readonly _formBuilder: FormBuilder, private readonly _fileAttributesService: FileAttributesControllerService, private readonly _appStateService: AppStateService, - private readonly _activatedRoute: ActivatedRoute + private readonly _activatedRoute: ActivatedRoute, + private readonly _dialogService: DialogService ) { this._appStateService.activateRuleSet(_activatedRoute.snapshot.params.ruleSetId); @@ -36,27 +39,19 @@ export class FileAttributesListingScreenComponent implements OnInit { } async ngOnInit() { + await this._loadData(); + } + + private async _loadData() { + this.viewReady = false; try { const response = await this._fileAttributesService.getFileAttributesConfiguration(this._appStateService.activeRuleSetId).toPromise(); this.attributes = response?.fileAttributes || []; - } catch (e) { - // TODO: Remove - this.attributes = [ - { - name: 'Atribut', - editable: true, - id: '1', - visible: true - }, - { - name: 'Alt atribut', - editable: false, - id: '2', - visible: true - } - ]; + } finally { + this.displayedAttributes = [...this.attributes]; + this._executeSearch(); + this.viewReady = true; } - this.displayedAttributes = [...this.attributes]; } public get noData(): boolean { @@ -72,12 +67,18 @@ export class FileAttributesListingScreenComponent implements OnInit { } @debounce(200) - private _executeSearch(value: { query: string }) { + private _executeSearch(value?: { query: string }) { + if (!value) { + value = { query: this.searchForm.get('query').value }; + } this.displayedAttributes = this.attributes.filter((attribute) => attribute.name.toLowerCase().includes(value.query.toLowerCase())); } - public openAddEditAttributeDialog($event: MouseEvent, attribute?: FileAttribute) { + public openAddEditAttributeDialog($event: MouseEvent, fileAttribute?: FileAttribute) { $event.stopPropagation(); + this._dialogService.openAddEditFileAttributeDialog(fileAttribute, this._appStateService.activeRuleSetId, async () => { + await this._loadData(); + }); } public toggleAttributeSelected($event: MouseEvent, attribute: FileAttribute) { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 16d75e479..db7e1ef41 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -583,6 +583,18 @@ "question": "Do you wish to proceed?" } }, + "add-edit-file-attribute": { + "title": { + "edit": "Edit {{name}} File Attribute", + "new": "Add New File Attribute" + }, + "form": { + "name": "Attribute Name", + "name-placeholder": "Enter Name", + "read-only": "Make Read-Only" + }, + "save": "Save Attribute" + }, "add-edit-dictionary": { "title": { "edit": "Edit {{name}} Dictionary", diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index f01563375..8c82292de 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -146,7 +146,7 @@ form { } } - label { + &:not(.ignore-label-styles) label { opacity: 0.7; font-size: 11px; letter-spacing: 0; diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss index 812e1d7df..65875cbc2 100644 --- a/apps/red-ui/src/assets/styles/red-toggle.scss +++ b/apps/red-ui/src/assets/styles/red-toggle.scss @@ -1,8 +1,11 @@ -mat-slide-toggle { +@import 'red-variables'; + +.mat-slide-toggle { .mat-slide-toggle-bar { height: 16px !important; width: 30px !important; border-radius: 16px !important; + background-color: $grey-4; } .mat-slide-toggle-thumb-container { @@ -15,5 +18,29 @@ mat-slide-toggle { .mat-slide-toggle-thumb { height: 12px !important; width: 12px !important; + box-shadow: none; + background-color: $grey-2; + } + + .mat-ripple { + display: none; + } + + .mat-slide-toggle-content { + font-family: Inter, sans-serif; + } + + &.mat-primary.mat-checked { + .mat-slide-toggle-bar { + background-color: $primary; + } + + .mat-slide-toggle-thumb { + background-color: $white; + } + + .mat-slide-toggle-thumb-container { + transform: translate3d(14px, 0, 0); + } } }