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

Pull request #166: RED-1298

Browse Source 
Merge in RED/ui from RED-1298 to master

* commit '97239187155e94d73524edf4bcfb32db9d637598':
  File attributes CSV import updates
  Display existing attributes at csv import
This commit is contained in:
Adina Teudan 2021-04-22 16:33:46 +02:00
commit 6045e0dcda
10 changed files with 192 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -10,7 +10,7 @@
</div>
</div>
<div class="right">
<form [formGroup]="baseConfigForm">
<form [formGroup]="baseConfigForm" (submit)="changedParseConfig && readFile()">
<div class="red-input-group required w-250">
<mat-form-field floatLabel="always">
<mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
@ -48,6 +48,12 @@
[placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
/>
</div>
<redaction-circle-button
*ngIf="changedParseConfig"
(action)="readFile()"
icon="red:check-alt"
tooltip="file-attributes-csv-import.parse-csv"
></redaction-circle-button>
</form>
</div>
</div>
@ -138,8 +144,8 @@
</div>
<div class="dialog-actions">
<button color="primary" mat-flat-button (click)="save()" [disabled]="baseConfigForm.invalid">
{{ 'file-attributes-csv-import.save' | translate }}
<button color="primary" mat-flat-button (click)="save()" [disabled]="changedParseConfig || baseConfigForm.invalid">
{{ 'file-attributes-csv-import.save.label' | translate }}
</button>
<div class="all-caps-label cancel" (click)="dialogRef.close()">{{ 'file-attributes-csv-import.cancel' | translate }}</div>

8
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -30,14 +30,16 @@
.right > form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-items: flex-end;
padding-left: 16px;
.red-input-group {
margin: 0 8px;
}
redaction-circle-button {
margin-left: 8px;
}
}
}

110
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
View File

@ -3,11 +3,13 @@ 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 { FileAttributesControllerService } from '@redaction/red-ui-http';
import { FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { BaseListingComponent } from '../../../shared/base/base-listing.component';
import { NotificationService, NotificationType } from '../../../../services/notification.service';
import { TranslateService } from '@ngx-translate/core';
enum FieldType {
Text = 'Text',
@ -16,6 +18,7 @@ enum FieldType {
}
export interface Field {
id?: string;
csvColumn: string;
name: string;
type: FieldType;
@ -44,15 +47,18 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
public filteredKeyOptions: Observable<string[]>;
public keepPreview = false;
public columnSample = [];
public initialParseConfig: { delimiter?: string; encoding?: string } = {};
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
constructor(
private readonly _appStateService: AppStateService,
private readonly _fileAttributesControllerService: FileAttributesControllerService,
private readonly _translateService: TranslateService,
private readonly _notificationService: NotificationService,
public dialogRef: MatDialogRef<FileAttributesCsvImportDialogComponent>,
protected readonly _injector: Injector,
@Inject(MAT_DIALOG_DATA) public data: { csv: File; ruleSetId: string }
@Inject(MAT_DIALOG_DATA) public data: { csv: File; ruleSetId: string; existingConfiguration: FileAttributesConfig }
) {
super(_injector);
this.csvFile = data.csv;
@ -64,7 +70,7 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
encoding: ['UTF-8', Validators.required]
});
this._readFile();
this.readFile();
}
private _autocompleteStringValidator(): ValidatorFn {
@ -76,7 +82,7 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
};
}
private _readFile() {
public readFile() {
const reader = new FileReader();
reader.addEventListener('load', async (event) => {
const parsedCsv = <any>event.target.result;
@ -84,24 +90,54 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
header: true,
delimiter: this.baseConfigForm.get('delimiter').value
});
if (!this.baseConfigForm.get('delimiter').value) {
this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
// Filter duplicate columns
if (this.parseResult?.data?.length) {
this.parseResult.meta.fields = Object.keys(this.parseResult.data[0]);
}
this.allEntities = this.parseResult.meta.fields.map((field) => this._buildAttribute(field));
this.displayedEntities = [...this.allEntities];
this.activeFields = [];
for (const entity of this.allEntities) {
const existing = this.data.existingConfiguration.fileAttributeConfigs.find((a) => a.csvColumnHeader === entity.csvColumn);
if (!!existing) {
entity.id = existing.id;
entity.name = existing.label;
entity.temporaryName = existing.label;
// TODO: entity.type
entity.display = existing.visible;
entity.readonly = !existing.editable;
this.toggleFieldActive(entity);
}
}
this.filteredKeyOptions = this.baseConfigForm.get('filenameMappingColumnHeaderName').valueChanges.pipe(
startWith(''),
startWith(this.baseConfigForm.get('filenameMappingColumnHeaderName').value as string),
map((value: string) =>
this.allEntities.filter((field) => field.csvColumn.toLowerCase().indexOf(value.toLowerCase()) !== -1).map((field) => field.csvColumn)
)
);
if (
this.data.existingConfiguration &&
this.allEntities.find((entity) => entity.csvColumn === this.data.existingConfiguration.filenameMappingColumnHeaderName)
) {
this.baseConfigForm.patchValue({ filenameMappingColumnHeaderName: this.data.existingConfiguration.filenameMappingColumnHeaderName });
}
this.initialParseConfig = {
delimiter: this.baseConfigForm.get('delimiter').value,
encoding: this.baseConfigForm.get('encoding').value
};
});
reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value);
}
public getSample(csvColumn: string) {
return this.parseResult?.data ? this.parseResult?.data[0][csvColumn] : '';
return this.parseResult?.data?.length ? this.parseResult?.data[0][csvColumn] : '';
}
public getEntries(csvColumn: string) {
@ -153,22 +189,41 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
}
public async save() {
await this._fileAttributesControllerService
.addOrUpdateFileAttributesConfig(
{
...this.baseConfigForm.getRawValue(),
fileAttributeConfigs: this.activeFields.map((field) => {
return {
csvColumnHeader: field.csvColumn,
editable: !field.readonly,
label: field.name,
visible: field.display
};
})
},
this.ruleSetId
)
.toPromise();
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();
this._notificationService.showToastNotification(
this._translateService.instant('file-attributes-csv-import.save.success', { count: this.activeFields.length }),
null,
NotificationType.SUCCESS
);
} catch (e) {
this._notificationService.showToastNotification(
this._translateService.instant('file-attributes-csv-import.save.error'),
null,
NotificationType.ERROR
);
}
this.dialogRef.close(true);
}
@ -187,4 +242,11 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
}
}, 0);
}
public get changedParseConfig(): boolean {
return (
this.initialParseConfig.delimiter !== this.baseConfigForm.get('delimiter').value ||
this.initialParseConfig.encoding !== this.baseConfigForm.get('encoding').value
);
}
}

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

@ -1,6 +1,6 @@
import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
import { PermissionsService } from '../../../../services/permissions.service';
import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
import { AppStateService } from '../../../../state/app-state.service';
import { ActivatedRoute } from '@angular/router';
import { AdminDialogService } from '../../services/admin-dialog.service';
@ -19,6 +19,8 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent<F
public viewReady = false;
public loading = false;
private _existingConfiguration: FileAttributesConfig;
@ViewChild('fileInput') private _fileInput: ElementRef;
constructor(
@ -40,6 +42,7 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent<F
private async _loadData() {
try {
const response = await this._fileAttributesService.getFileAttributesConfiguration(this._appStateService.activeRuleSetId).toPromise();
this._existingConfiguration = response;
this.allEntities = response?.fileAttributeConfigs || [];
} catch (e) {
} finally {
@ -75,7 +78,7 @@ export class FileAttributesListingScreenComponent extends BaseListingComponent<F
const csvFile = files[0];
this._fileInput.nativeElement.value = null;
this._dialogService.openImportFileAttributeCSVDialog(csvFile, this._appStateService.activeRuleSetId, async () => {
this._dialogService.openImportFileAttributeCSVDialog(csvFile, this._appStateService.activeRuleSetId, this._existingConfiguration, async () => {
await this._loadData();
});
}

10
apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
View File

@ -4,6 +4,7 @@ import {
Colors,
DictionaryControllerService,
FileAttributeConfig,
FileAttributesConfig,
FileManagementControllerService,
ManualRedactionControllerService,
RuleSetControllerService,
@ -124,10 +125,15 @@ export class AdminDialogService {
return ref;
}
public openImportFileAttributeCSVDialog(csv: File, ruleSetId: string, cb?: Function): MatDialogRef<FileAttributesCsvImportDialogComponent> {
public openImportFileAttributeCSVDialog(
csv: File,
ruleSetId: string,
existingConfiguration: FileAttributesConfig,
cb?: Function
): MatDialogRef<FileAttributesCsvImportDialogComponent> {
const ref = this._dialog.open(FileAttributesCsvImportDialogComponent, {
...largeDialogConfig,
data: { csv, ruleSetId }
data: { csv, ruleSetId, existingConfiguration }
});
ref.afterClosed().subscribe((result) => {

7
apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
View File

@ -1,6 +1,11 @@
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<div>
<div *ngIf="!multiSelectActive" class="all-caps-label primary pointer" (click)="multiSelectActive = true">SELECT</div>
<div
*ngIf="!multiSelectActive"
class="all-caps-label primary pointer"
(click)="multiSelectActive = true"
translate="file-preview.tabs.annotations.select"
></div>
<redaction-filter
(filtersChanged)="filtersChanged($event)"
[chevron]="true"

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

@ -319,7 +319,8 @@
}
},
"annotations": {
"label": "Workload"
"label": "Workload",
"select": "Select"
},
"is-excluded": "Redaction is disabled for this document."
},
@ -1167,13 +1168,18 @@
"file-attributes-csv-import": {
"title": "Select CSV columns to use as File Attributes",
"cancel": "Cancel",
"save": "Save Attributes",
"save": {
"label": "Save Attributes",
"success": "{{count}} File Attributes created successfully!",
"error": "Failed to create File Attributes!"
},
"delimiter": "Delimiter",
"delimiter-placeholder": ",",
"encoding": "Encoding",
"encoding-placeholder": "UTF-8",
"key-column": "Key Column",
"key-column-placeholder": "Select column...",
"parse-csv": "Parse CSV with new options",
"total-rows": "{{rows}} rows in total",
"available": "{{value}} available",
"selected": "{{value}} selected",

216
libs/red-ui-http/src/lib/api/fileAttributesController.service.ts
View File

@ -17,7 +17,6 @@ import { Observable } from 'rxjs';
import { FileAttributeConfig } from '../model/fileAttributeConfig';
import { FileAttributes } from '../model/fileAttributes';
import { FileAttributesBaseConfigRequest } from '../model/fileAttributesBaseConfigRequest';
import { FileAttributesConfig } from '../model/fileAttributesConfig';
import { BASE_PATH } from '../variables';
@ -53,156 +52,6 @@ export class FileAttributesControllerService {
return false;
}
/**
* Adds or updates file attributes base configuration
* None
* @param body fileAttributesBaseConfigRequest
* @param ruleSetId ruleSetId
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public addOrUpdateFileAttributesBaseConfig(
body: FileAttributesBaseConfigRequest,
ruleSetId: string,
observe?: 'body',
reportProgress?: boolean
): Observable<FileAttributesConfig>;
public addOrUpdateFileAttributesBaseConfig(
body: FileAttributesBaseConfigRequest,
ruleSetId: string,
observe?: 'response',
reportProgress?: boolean
): Observable<HttpResponse<FileAttributesConfig>>;
public addOrUpdateFileAttributesBaseConfig(
body: FileAttributesBaseConfigRequest,
ruleSetId: string,
observe?: 'events',
reportProgress?: boolean
): Observable<HttpEvent<FileAttributesConfig>>;
public addOrUpdateFileAttributesBaseConfig(
body: FileAttributesBaseConfigRequest,
ruleSetId: string,
observe: any = 'body',
reportProgress: boolean = false
): Observable<any> {
if (body === null || body === undefined) {
throw new Error('Required parameter body was null or undefined when calling addOrUpdateFileAttributesBaseConfig.');
}
if (ruleSetId === null || ruleSetId === undefined) {
throw new Error('Required parameter ruleSetId was null or undefined when calling addOrUpdateFileAttributesBaseConfig.');
}
let headers = this.defaultHeaders;
// authentication (RED-OAUTH) required
if (this.configuration.accessToken) {
const accessToken = typeof this.configuration.accessToken === 'function' ? this.configuration.accessToken() : this.configuration.accessToken;
headers = headers.set('Authorization', 'Bearer ' + accessToken);
}
// to determine the Accept header
const httpHeaderAccepts: string[] = ['application/json'];
const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
if (httpHeaderAcceptSelected !== undefined) {
headers = headers.set('Accept', httpHeaderAcceptSelected);
}
// to determine the Content-Type header
const consumes: string[] = ['application/json'];
const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
if (httpContentTypeSelected !== undefined) {
headers = headers.set('Content-Type', httpContentTypeSelected);
}
return this.httpClient.request<FileAttributesConfig>(
'post',
`${this.basePath}/fileAttributes/config/baseConfig/${encodeURIComponent(String(ruleSetId))}`,
{
body: body,
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
/**
* Adds or updates file attributes base configuration and a list of file attributes,
* None
* @param body fileAttributesConfig
* @param ruleSetId ruleSetId
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public addOrUpdateFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe?: 'body',
reportProgress?: boolean
): Observable<FileAttributesConfig>;
public addOrUpdateFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe?: 'response',
reportProgress?: boolean
): Observable<HttpResponse<FileAttributesConfig>>;
public addOrUpdateFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe?: 'events',
reportProgress?: boolean
): Observable<HttpEvent<FileAttributesConfig>>;
public addOrUpdateFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe: any = 'body',
reportProgress: boolean = false
): Observable<any> {
if (body === null || body === undefined) {
throw new Error('Required parameter body was null or undefined when calling addOrUpdateFileAttributesConfig.');
}
if (ruleSetId === null || ruleSetId === undefined) {
throw new Error('Required parameter ruleSetId was null or undefined when calling addOrUpdateFileAttributesConfig.');
}
let headers = this.defaultHeaders;
// authentication (RED-OAUTH) required
if (this.configuration.accessToken) {
const accessToken = typeof this.configuration.accessToken === 'function' ? this.configuration.accessToken() : this.configuration.accessToken;
headers = headers.set('Authorization', 'Bearer ' + accessToken);
}
// to determine the Accept header
const httpHeaderAccepts: string[] = ['application/json'];
const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
if (httpHeaderAcceptSelected !== undefined) {
headers = headers.set('Accept', httpHeaderAcceptSelected);
}
// to determine the Content-Type header
const consumes: string[] = ['application/json'];
const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
if (httpContentTypeSelected !== undefined) {
headers = headers.set('Content-Type', httpContentTypeSelected);
}
return this.httpClient.request<FileAttributesConfig>(
'put',
`${this.basePath}/fileAttributes/config/baseConfig/${encodeURIComponent(String(ruleSetId))}`,
{
body: body,
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
/**
* Delete a specific file attribute.
* None
@ -411,6 +260,71 @@ export class FileAttributesControllerService {
);
}
/**
* Set file attributes base configuration and a list of file attributes,
* None
* @param body fileAttributesConfig
* @param ruleSetId ruleSetId
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public setFileAttributesConfig(body: FileAttributesConfig, ruleSetId: string, observe?: 'body', reportProgress?: boolean): Observable<FileAttributesConfig>;
public setFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe?: 'response',
reportProgress?: boolean
): Observable<HttpResponse<FileAttributesConfig>>;
public setFileAttributesConfig(
body: FileAttributesConfig,
ruleSetId: string,
observe?: 'events',
reportProgress?: boolean
): Observable<HttpEvent<FileAttributesConfig>>;
public setFileAttributesConfig(body: FileAttributesConfig, ruleSetId: string, observe: any = 'body', reportProgress: boolean = false): Observable<any> {
if (body === null || body === undefined) {
throw new Error('Required parameter body was null or undefined when calling setFileAttributesConfig.');
}
if (ruleSetId === null || ruleSetId === undefined) {
throw new Error('Required parameter ruleSetId was null or undefined when calling setFileAttributesConfig.');
}
let headers = this.defaultHeaders;
// authentication (RED-OAUTH) required
if (this.configuration.accessToken) {
const accessToken = typeof this.configuration.accessToken === 'function' ? this.configuration.accessToken() : this.configuration.accessToken;
headers = headers.set('Authorization', 'Bearer ' + accessToken);
}
// to determine the Accept header
const httpHeaderAccepts: string[] = ['application/json'];
const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
if (httpHeaderAcceptSelected !== undefined) {
headers = headers.set('Accept', httpHeaderAcceptSelected);
}
// to determine the Content-Type header
const consumes: string[] = ['application/json'];
const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
if (httpContentTypeSelected !== undefined) {
headers = headers.set('Content-Type', httpContentTypeSelected);
}
return this.httpClient.request<FileAttributesConfig>(
'put',
`${this.basePath}/fileAttributes/config/baseConfig/${encodeURIComponent(String(ruleSetId))}`,
{
body: body,
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
/**
* Add or update a file attribute that can be used at importing csv.
* None

16
libs/red-ui-http/src/lib/model/fileAttributesBaseConfigRequest.ts
View File

@ -1,16 +0,0 @@
/**
* API Documentation for Redaction Gateway
* Description for redaction
*
* OpenAPI spec version: 1.0
*
*
* NOTE: This class is auto generated by the swagger code generator program.
* https://github.com/swagger-api/swagger-codegen.git
* Do not edit the class manually.
*/
export interface FileAttributesBaseConfigRequest {
delimiter?: string;
filenameMappingColumnHeaderName?: string;
}

1
libs/red-ui-http/src/lib/model/models.ts
View File

@ -64,7 +64,6 @@ export * from './fileAttributesConfig';
export * from './importCsvRequest';
export * from './importCsvResponse';
export * from './fileAttributeConfig';
export * from './fileAttributesBaseConfigRequest';
export * from './removeDownloadRequest';
export * from './sMTPConfigurationModel';
export * from './userSearchRequest';