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

RED-3797 - WIP on adding import redaction dialog

Browse Source
This commit is contained in:
Valentin Mihai 2022-04-12 18:26:28 +03:00
parent 98f435b901
commit 85494df4cc
10 changed files with 150 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
View File

@ -4,8 +4,9 @@ import { AddDossierDialogComponent } from '../dialogs/add-dossier-dialog/add-dos
import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
import { ImportRedactionsDialogComponent } from '../../file-preview/dialogs/import-redactions-dialog/import-redactions-dialog';
type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile';
type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile' | 'importRedactions';
@Injectable()
export class DossiersDialogService extends DialogService<DialogType> {
@ -26,6 +27,10 @@ export class DossiersDialogService extends DialogService<DialogType> {
component: AssignReviewerApproverDialogComponent,
dialogConfig: { disableClose: false },
},
importRedactions: {
component: ImportRedactionsDialogComponent,
dialogConfig: { disableClose: false },
},
};
constructor(protected readonly _dialog: MatDialog) {

14
apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
View File

@ -4,13 +4,13 @@
<iqser-status-bar *ngIf="showStatusBar" [configs]="[{ color: file.workflowStatus, length: 1 }]"></iqser-status-bar>
</div>
<input
#importRedactionsInput
(change)="importRedactions($event.target['files'])"
class="file-upload-input"
type="file"
accept="application/pdf"
/>
<!--<input-->
<!-- #importRedactionsInput-->
<!-- (change)="importRedactions($event.target['files'])"-->
<!-- class="file-upload-input"-->
<!-- type="file"-->
<!-- accept="application/pdf"-->
<!--/>-->
<ng-container *ngIf="isFilePreview || isDossierOverviewWorkflow">
<ng-container *ngTemplateOutlet="actions"></ng-container>

5
apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
View File

@ -53,7 +53,7 @@ export class FileActionsComponent implements OnChanges {
@Input() maxWidth: number;
@Input() fileActionsHelpModeKey: 'document_features' | 'editor_document_features' = 'document_features';
@ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef;
// @ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef;
toggleTooltip?: string;
assignTooltip?: string;
@ -320,7 +320,8 @@ export class FileActionsComponent implements OnChanges {
private _triggerImportRedactions($event: MouseEvent) {
$event.stopPropagation();
this.importRedactionsInput.nativeElement.click();
this._dialogService.openDialog('importRedactions', null, null);
// this.importRedactionsInput.nativeElement.click();
}
private _openDeleteFileDialog($event: MouseEvent) {

27
apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html Normal file
View File

@ -0,0 +1,27 @@
<section class="dialog">
<div translate="import-redactions-dialog.title" class="dialog-header heading-l"></div>
<div class="dialog-content">
<div translate="import-redactions-dialog.details" class="mb-24"></div>
<div class="upload-area" *ngIf="!hasFile" (click)="hasFile = true">
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="import-redactions-dialog.upload-area-text"></div>
</div>
<ng-container *ngIf="hasFile">
<div class="file-area">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{file.name}}</p>
<mat-icon svgIcon="iqser:trash" (click)="hasFile = false"></mat-icon>
</div>
</ng-container>
</div>
<div class="dialog-actions">
<button color="primary" mat-flat-button type="submit" [disabled]="!hasFile">
{{ 'import-redactions-dialog.actions.import' | translate }}
</button>
<div class="all-caps-label cancel" mat-dialog-close translate="import-redactions-dialog.actions.cancel"></div>
</div>
<iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
</section>

64
apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss Normal file
View File

@ -0,0 +1,64 @@
@use 'variables';
.upload-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 586px;
background: variables.$grey-2;
gap: 16px;
height: 88px;
cursor: pointer;
mat-icon,
div {
opacity: 0.5;
transition: 0.1s;
}
mat-icon {
margin-left: 32px;
}
div {
font-size: 16px;
font-weight: 500;
}
//&:hover {
// mat-icon {
// transform: scale(1.2);
// }
//
// div {
// font-size: 19px;
// }
//}
}
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 586px;
background: variables.$grey-2;
gap: 10px;
height: 48px;
mat-icon:first-child {
opacity: 0.5;
margin-left: 16px;
}
mat-icon:last-child {
margin-left: auto;
margin-right: 16px;
cursor: pointer;
}
mat-icon {
transform: scale(0.7);
}
}

21
apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, Injector } from '@angular/core';
import { BaseDialogComponent } from '@iqser/common-ui';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
templateUrl: './import-redactions-dialog.html',
styleUrls: ['./import-redactions-dialog.scss'],
})
export class ImportRedactionsDialogComponent extends BaseDialogComponent {
hasFile = false;
file = {
name: 'File with redactions.pdf',
};
constructor(protected readonly _injector: Injector, protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>) {
super(_injector, _dialogRef);
}
save(): void {}
}

2
apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
View File

@ -38,6 +38,7 @@ import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/docu
import { ManualRedactionService } from './services/manual-redaction.service';
import { AnnotationWrapperComponent } from './components/annotation-wrapper/annotation-wrapper.component';
import { AnnotationReferenceComponent } from './components/annotation-reference/annotation-reference.component';
import { ImportRedactionsDialogComponent } from './dialogs/import-redactions-dialog/import-redactions-dialog';
const routes: Routes = [
{
@ -59,6 +60,7 @@ const dialogs = [
HighlightActionDialogComponent,
AcceptRecommendationDialogComponent,
DocumentInfoDialogComponent,
ImportRedactionsDialogComponent,
];
const components = [

9
apps/red-ui/src/assets/i18n/de.json
View File

@ -1453,6 +1453,15 @@
"logo": "Logo",
"signature": "Signatur"
},
"import-redactions-dialog": {
"actions": {
"cancel": "",
"import": ""
},
"details": "",
"upload-area-text": "",
"title": ""
},
"initials-avatar": {
"unassigned": "Unbekannt",
"you": "Sie"

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

@ -822,7 +822,7 @@
"edit": "Edit Dossier",
"upload-document": "Upload Document"
},
"import-redactions": "Import redactions from other file",
"import-redactions": "Import redactions",
"new-rule": {
"toast": {
"actions": {
@ -1453,6 +1453,15 @@
"logo": "Logo",
"signature": "Signature"
},
"import-redactions-dialog": {
"actions": {
"cancel": "Cancel",
"import": "Import"
},
"details": "To apply redactions from another document, you first need to upload it.",
"upload-area-text": "Click or drag & drop anywhere on this area...",
"title": "Import document with redactions"
},
"initials-avatar": {
"unassigned": "Unassigned",
"you": "You"

2
libs/common-ui

@ -1 +1 @@
Subproject commit 3c0d4368c70975255478d5ee038587c1ea97ecf8
Subproject commit d8c2a342baa6acb330132c44000562bdd823f620