Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Add file attribute

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-19 23:56:37 +02:00
parent 75e624881c
commit 9c38dd83cb
8 changed files with 158 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

55
apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
View File

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

18
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -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();

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

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

41
apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts
View File

@ -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) {

12
apps/red-ui/src/assets/i18n/en.json
View File

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

2
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -146,7 +146,7 @@ form {
}
}
label {
&:not(.ignore-label-styles) label {
opacity: 0.7;
font-size: 11px;
letter-spacing: 0;

29
apps/red-ui/src/assets/styles/red-toggle.scss
View File

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