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

Finished file attributes

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-25 19:13:58 +02:00
parent 5636656f76
commit 77fc8c1b48
15 changed files with 118 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/red-ui/src/app/components/document-info/document-info.component.html
View File

@ -2,7 +2,7 @@
<div>
<redaction-circle-button
icon="red:edit"
(action)="closeDocumentInfoView.emit()"
(action)="edit()"
tooltipPosition="before"
tooltip="file-preview.tabs.document-info.edit"
></redaction-circle-button>
@ -17,7 +17,10 @@
<div class="right-content" redactionHasScrollbar>
<div class="section">
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
<div class="attribute" *ngFor="let attr of fileAttributesConfig">
<div class="small-label">{{ attr.label }}:</div>
<div>{{ file.fileAttributes.attributeIdToValue[attr.id] || '-' }}</div>
</div>
</div>
<div class="section small-label stats-subtitle">

10
apps/red-ui/src/app/components/document-info/document-info.component.scss
View File

@ -46,3 +46,13 @@
border-bottom: 1px solid $separator;
}
}
.attribute {
> .small-label {
margin-bottom: 6px;
}
&:not(:last-child) {
margin-bottom: 16px;
}
}

17
apps/red-ui/src/app/components/document-info/document-info.component.ts
View File

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FileStatus } from '@redaction/red-ui-http';
import { FileAttributeConfig, FileAttributesControllerService, FileStatus } from '@redaction/red-ui-http';
import { AppStateService } from '../../state/app-state.service';
import { DialogService } from '../../dialogs/dialog.service';
@Component({
selector: 'redaction-document-info',
@ -11,11 +12,23 @@ export class DocumentInfoComponent implements OnInit {
@Input() file: FileStatus;
@Output() closeDocumentInfoView = new EventEmitter();
constructor(private _appStateService: AppStateService) {}
public fileAttributesConfig: FileAttributeConfig[];
constructor(
private readonly _appStateService: AppStateService,
private readonly _fileAttributesService: FileAttributesControllerService,
private readonly _dialogService: DialogService
) {
this.fileAttributesConfig = this._appStateService.fileAttributesConfig.filter((attr) => attr.visible);
}
ngOnInit(): void {}
public get project() {
return this._appStateService.getProjectById(this.file.projectId);
}
public edit() {
this._dialogService.openDocumentInfoDialog(this.file);
}
}

2
apps/red-ui/src/app/components/project-details/project-details.component.html
View File

@ -58,7 +58,7 @@
</div>
</div>
<div class="pb-32 small-label stats-subtitle">
<div class="pb-32 small-label stats-subtitle" [class.mt-24]="!hasFiles">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
<span>{{ 'project-overview.project-details.stats.documents' | translate: { count: appStateService.activeProject.files.length } }}</span>

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

@ -10,9 +10,23 @@
<input formControlName="label" name="label" type="text" placeholder="{{ 'add-edit-file-attribute.form.name-placeholder' | translate }}" />
</div>
<div class="red-input-group required w-300">
<label translate="add-edit-file-attribute.form.column-header"></label>
<input
formControlName="csvColumnHeader"
name="csvColumnHeader"
type="text"
placeholder="{{ 'add-edit-file-attribute.form.column-header-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 class="red-input-group ignore-label-styles">
<mat-slide-toggle formControlName="visible" color="primary">{{ 'add-edit-file-attribute.form.visible' | translate }}</mat-slide-toggle>
</div>
</div>
<div class="dialog-actions">
<button [disabled]="fileAttributeForm.invalid || !changed" color="primary" mat-flat-button type="submit">

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

@ -3,7 +3,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppStateService } from '../../state/app-state.service';
import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { computerize } from '../../utils/functions';
@Component({
selector: 'redaction-add-edit-file-attribute-dialog',
@ -27,6 +26,7 @@ export class AddEditFileAttributeDialogComponent {
this.fileAttributeForm = this._formBuilder.group({
label: [this.fileAttribute?.label, Validators.required],
csvColumnHeader: [this.fileAttribute?.csvColumnHeader, Validators.required],
readonly: [this.fileAttribute ? !this.fileAttribute.editable : false],
visible: [this.fileAttribute?.visible]
});
@ -52,7 +52,6 @@ export class AddEditFileAttributeDialogComponent {
const fileAttribute: FileAttributeConfig = {
id: this.fileAttribute?.id,
editable: !this.fileAttributeForm.get('readonly').value,
csvColumnHeader: this.fileAttribute?.csvColumnHeader || computerize(this.fileAttributeForm.get('label').value),
...this.fileAttributeForm.getRawValue()
};
await this._fileAttributesService.setFileAttributesConfiguration(fileAttribute, this.ruleSetId).toPromise();

2
apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts
View File

@ -28,7 +28,7 @@ export class ConfirmDeleteFileAttributeDialogComponent {
}
async deleteFileAttribute() {
console.log('deleting...');
await this._fileAttributesService.deleteFileAttributesConfiguration(this.ruleSetId, this.fileAttribute.id).toPromise();
this.dialogRef.close(true);
}

15
apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.html
View File

@ -1,17 +1,12 @@
<section class="dialog">
<section *ngIf="!!documentInfoForm" class="dialog">
<div class="dialog-header heading-l" translate="document-info.title"></div>
<form (submit)="saveDocumentInfo()" [formGroup]="documentInfoForm">
<div class="dialog-content">
{{ file.filename }}
<!-- <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 class="red-input-group w-300" *ngFor="let attr of attributes">
<label>{{ attr.label }}</label>
<input [formControlName]="attr.id" [name]="attr.id" type="text" />
</div>
</div>
<div class="dialog-actions">
<button [disabled]="documentInfoForm.invalid" color="primary" mat-flat-button type="submit">

29
apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.ts
View File

@ -1,8 +1,9 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FileAttributesControllerService, FileStatus } from '@redaction/red-ui-http';
import { FileAttributeConfig, FileAttributesControllerService, FileStatus } from '@redaction/red-ui-http';
import { AppStateService } from '../../state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ProjectWrapper } from '../../state/model/project.wrapper';
@Component({
selector: 'redaction-document-info-dialog',
@ -12,6 +13,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
export class DocumentInfoDialogComponent implements OnInit {
public documentInfoForm: FormGroup;
public file: FileStatus;
public attributes: FileAttributeConfig[];
private _project: ProjectWrapper;
constructor(
private readonly _appStateService: AppStateService,
@ -21,16 +25,21 @@ export class DocumentInfoDialogComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: FileStatus
) {
this.file = this.data;
console.log(this.data);
this.documentInfoForm = this._formBuilder.group({
// name: [this.fileAttribute?.name, Validators.required],
// readonly: [this.fileAttribute ? !this.fileAttribute.editable : false],
// visible: [this.fileAttribute?.visible]
});
this._project = this._appStateService.getProjectById(this.file.projectId);
}
ngOnInit(): void {}
async ngOnInit() {
this.attributes = (await this._fileAttributesService.getFileAttributesConfiguration(this._project.ruleSetId).toPromise()).fileAttributeConfigs.filter(
(attr) => attr.visible && attr.editable
);
const formConfig = this.attributes.reduce((acc, attr) => ({ ...acc, [attr.id]: [this.file.fileAttributes.attributeIdToValue[attr.id]] }), {});
this.documentInfoForm = this._formBuilder.group(formConfig);
}
public saveDocumentInfo() {}
public async saveDocumentInfo() {
const attributeIdToValue = { ...this.file.fileAttributes.attributeIdToValue, ...this.documentInfoForm.getRawValue() };
await this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.file.projectId, this.file.fileId).toPromise();
this.file.fileAttributes = { attributeIdToValue };
this.dialogRef.close(true);
}
}

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

@ -46,10 +46,9 @@ export class FileAttributesListingScreenComponent implements OnInit {
this.viewReady = false;
try {
const response = await this._fileAttributesService.getFileAttributesConfiguration(this._appStateService.activeRuleSetId).toPromise();
this.attributes = response?.fileAttributes || [];
this.attributes = response?.fileAttributeConfigs || [];
} catch (e) {
} finally {
this.displayedAttributes = [...this.attributes];
this._executeSearch();
this.viewReady = true;
}

6
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -204,7 +204,11 @@
</div>
<div class="right-container">
<redaction-document-info *ngIf="viewReady && viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
<redaction-document-info
*ngIf="viewReady && viewDocumentInfo"
[file]="fileData.fileStatus.fileStatus"
(closeDocumentInfoView)="viewDocumentInfo = false"
>
</redaction-document-info>
<redaction-file-workload

4
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -85,6 +85,10 @@ cdk-virtual-scroll-viewport {
&.has-scrollbar:hover {
padding-right: 13px;
}
redaction-project-details {
width: 100%;
}
}
.reanalyse-link {

19
apps/red-ui/src/app/state/app-state.service.ts
View File

@ -1,6 +1,8 @@
import { EventEmitter, Injectable } from '@angular/core';
import {
DictionaryControllerService,
FileAttributeConfig,
FileAttributesControllerService,
FileManagementControllerService,
FileStatus,
Project,
@ -29,6 +31,7 @@ export interface AppState {
activeProjectId: string;
activeFileId: string;
activeRuleSetId: string;
activeFileAttributesConfig: FileAttributeConfig[];
activeDictionaryType: string;
totalAnalysedPages?: number;
totalDocuments?: number;
@ -56,7 +59,8 @@ export class AppStateService {
private readonly _dictionaryControllerService: DictionaryControllerService,
private readonly _ruleSetControllerService: RuleSetControllerService,
private readonly _statusControllerService: StatusControllerService,
private readonly _versionsControllerService: VersionsControllerService
private readonly _versionsControllerService: VersionsControllerService,
private readonly _fileAttributesService: FileAttributesControllerService
) {
this._appState = {
projects: [],
@ -64,6 +68,7 @@ export class AppStateService {
activeProjectId: null,
activeFileId: null,
activeRuleSetId: null,
activeFileAttributesConfig: [],
activeDictionaryType: null,
versions: {}
};
@ -141,6 +146,10 @@ export class AppStateService {
return this.ruleSets.find((rs) => rs.ruleSetId === id);
}
public get fileAttributesConfig(): FileAttributeConfig[] {
return this._appState.activeFileAttributesConfig;
}
get activeDictionaryType(): string {
return this._appState.activeDictionaryType;
}
@ -306,8 +315,16 @@ export class AppStateService {
this._appState.activeProjectId = projectId;
if (!this.activeProject) {
this._appState.activeProjectId = null;
this._appState.activeFileAttributesConfig = [];
this._router.navigate(['/ui/projects']);
return;
}
this._fileAttributesService
.getFileAttributesConfiguration(this.getProjectById(projectId).ruleSetId)
.toPromise()
.then((data) => {
this._appState.activeFileAttributesConfig = data.fileAttributeConfigs;
});
}
activateFile(projectId: string, fileId: string) {

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

@ -604,7 +604,10 @@
"form": {
"name": "Attribute Name",
"name-placeholder": "Enter Name",
"read-only": "Make Read-Only"
"column-header": "CSV Column Header",
"column-header-placeholder": "Enter CSV Column Header",
"read-only": "Make Read-Only",
"visible": "Visible in Document Info"
},
"save": "Save Attribute"
},
@ -746,7 +749,7 @@
"checkbox-2": "All inputted details on the documents will be lost"
},
"document-info": {
"title": "Introduce Document Info",
"title": "Introduce File Attributes",
"save": "Save Document Info",
"save-approval": "Save and Send for Approval"
},

26
libs/red-ui-http/src/lib/model/fileStatus.ts
View File

@ -9,15 +9,12 @@
* https://github.com/swagger-api/swagger-codegen.git
* Do not edit the class manually.
*/
import { FileAttributes } from './fileAttributes';
/**
* Object containing information on a specific file.
*/
export interface FileStatus {
/**
* Time of last analysis
*/
analysisDuration?: number;
/**
* Date and time when the file was added to the system.
*/
@ -26,6 +23,10 @@ export interface FileStatus {
* Shows if all manual changes have been applied by a reanalysis.
*/
allManualRedactionsApplied?: boolean;
/**
* Shows how long the last analysis took
*/
analysisDuration?: number;
/**
* Shows the date of approval, if approved.
*/
@ -38,6 +39,7 @@ export interface FileStatus {
* Shows which dictionary versions was used during the analysis.
*/
dictionaryVersion?: number;
fileAttributes?: FileAttributes;
/**
* The ID of the file.
*/
@ -50,6 +52,10 @@ export interface FileStatus {
* Shows if any hints were found during the analysis.
*/
hasHints?: boolean;
/**
* Shows if any images were found during the analysis.
*/
hasImages?: boolean;
/**
* Shows if any redactions were found during the analysis.
*/
@ -58,6 +64,10 @@ export interface FileStatus {
* Shows if any requests were found during the analysis.
*/
hasRequests?: boolean;
/**
* Shows if there is any change between the previous and current analysis.
*/
hasUpdates?: boolean;
/**
* Shows the last date of a successful analysis.
*/
@ -78,14 +88,6 @@ export interface FileStatus {
* The number of times the file has been analyzed.
*/
numberOfAnalyses?: number;
/**
* Shows if any images were found during the analysis.
*/
hasImages?: boolean;
/**
* Shows if there is any change between the previous and current analysis.
*/
hasUpdates?: boolean;
/**
* The number of pages of the file.
*/