Add file attribute

apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html

@@ -1 +1,25 @@
-<p>add-edit-file-attribute-dialog works!</p>
+<section class="dialog">
+    <div class="dialog-header heading-l">
+        {{ (fileAttribute ? 'add-edit-file-attribute.title.edit' : 'add-edit-file-attribute.title.new') | translate: { name: fileAttribute?.name } }}
+    </div>
+
+    <form (submit)="saveFileAttribute()" [formGroup]="fileAttributeForm">
+        <div class="dialog-content">
+            <div class="red-input-group required w-300">
+                <label translate="add-edit-file-attribute.form.name"></label>
+                <input formControlName="name" name="name" type="text" placeholder="{{ 'add-edit-file-attribute.form.name-placeholder' | translate }}" />
+            </div>
+
+            <div class="red-input-group ignore-label-styles">
+                <mat-slide-toggle formControlName="readonly" color="primary">{{ 'add-edit-file-attribute.form.read-only' | translate }}</mat-slide-toggle>
+            </div>
+        </div>
+        <div class="dialog-actions">
+            <button [disabled]="fileAttributeForm.invalid || !changed" color="primary" mat-flat-button type="submit">
+                {{ 'add-edit-file-attribute.save' | translate }}
+            </button>
+        </div>
+    </form>
+
+    <redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
+</section>

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 {
+export class AddEditFileAttributeDialogComponent {
-    constructor() {}
+    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<AddEditFileAttributeDialogComponent>,
+        @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);
+    }
 }

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<AddEditFileAttributeDialogComponent> {
+        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();
 

apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html

@@ -125,3 +125,5 @@
         <div class="right-container"></div>
     </div>
 </section>
+
+<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

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) {
+        } finally {
-            // TODO: Remove
+            this.displayedAttributes = [...this.attributes];
-            this.attributes = [
+            this._executeSearch();
-                {
+            this.viewReady = true;
-                    name: 'Atribut',
-                    editable: true,
-                    id: '1',
-                    visible: true
-                },
-                {
-                    name: 'Alt atribut',
-                    editable: false,
-                    id: '2',
-                    visible: 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) {

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",

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;

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);
+        }
     }
 }