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

Pull request #362: VM/RED-3797

Browse Source 
Merge in RED/ui from VM/RED-3797 to master

* commit 'a160e036ccd5e2d6e4b7112bcd874f4eeda08360':
  RED-3797 - removed commented code
  RED-3797 - added drag&drop directive to upload file on a specific area for importing document redactions
  RED-3797 - added checkbox that allows the user to define the pages to import the redactions from
  RED-3797 - added logic to attach file
  RED-3797 - WIP on adding import redaction dialog
This commit is contained in:
Valentin-Gabriel Mihai 2022-04-18 18:16:00 +02:00
commit 080e096679
14 changed files with 629 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
View File

@ -25,7 +25,7 @@ import {
import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { PermissionsService } from '@services/permissions.service';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
import { ConfigService } from '../config.service';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
@ -49,7 +49,7 @@ import { NGXLogger } from 'ngx-logger';
dossiersServiceProvider,
],
})
export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnDestroy, OnAttach {
export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnAttach {
readonly listingModes = ListingModes;
readonly circleButtonTypes = CircleButtonTypes;
readonly tableHeaderLabel = _('dossier-overview.table-header.title');
@ -103,6 +103,9 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
this.dossierTemplateId = this.#currentDossier.dossierTemplateId;
this.files$ = merge(this.#files$, this.#dossierFilesChange$).pipe(shareLast());
this._updateFileAttributes();
_router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
this._fileDropOverlayService.cleanupFileDropHandling();
});
}
get checkedRequiredFilters(): NestedFilter[] {
@ -159,11 +162,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
this._loadingService.stop();
}
ngOnDestroy(): void {
this._fileDropOverlayService.cleanupFileDropHandling();
super.ngOnDestroy();
}
ngOnAttach() {
this._fileDropOverlayService.initFileDropHandling(this.dossierId);
this._setRemovableSubscriptions();

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

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

@ -4,14 +4,6 @@
<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"
/>
<ng-container *ngIf="isFilePreview || isDossierOverviewWorkflow">
<ng-container *ngTemplateOutlet="actions"></ng-container>
</ng-container>

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

@ -1,14 +1,4 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
HostBinding,
Input,
OnChanges,
Optional,
ViewChild,
} from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, Optional, ViewChild } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { Action, ActionTypes, Dossier, File } from '@red/domain';
import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
@ -53,8 +43,6 @@ export class FileActionsComponent implements OnChanges {
@Input() maxWidth: number;
@Input() fileActionsHelpModeKey: 'document_features' | 'editor_document_features' = 'document_features';
@ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef;
toggleTooltip?: string;
assignTooltip?: string;
buttonType?: CircleButtonType;
@ -105,7 +93,6 @@ export class FileActionsComponent implements OnChanges {
private readonly _reanalysisService: ReanalysisService,
private readonly _router: Router,
private readonly _changeRef: ChangeDetectorRef,
private readonly _redactionImportService: RedactionImportService,
) {}
@HostBinding('class.keep-visible')
@ -146,7 +133,7 @@ export class FileActionsComponent implements OnChanges {
},
{
type: ActionTypes.circleBtn,
action: ($event: MouseEvent) => this._triggerImportRedactions($event),
action: ($event: MouseEvent) => this._openImportRedactionsDialog($event),
tooltip: _('dossier-overview.import-redactions'),
icon: 'red:import_redactions',
show: this.showImportRedactions,
@ -290,18 +277,6 @@ export class FileActionsComponent implements OnChanges {
);
}
async importRedactions(files: FileList) {
const fileToImport = files[0];
if (!fileToImport) {
console.error('No file to import!');
return;
}
const import$ = this._redactionImportService.importRedactions(this.file.dossierId, this.file.fileId, fileToImport);
await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error }));
}
forceReanalysisAction($event: LongPressEvent) {
this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled;
this._setup();
@ -318,9 +293,9 @@ export class FileActionsComponent implements OnChanges {
return ref.afterClosed();
}
private _triggerImportRedactions($event: MouseEvent) {
private _openImportRedactionsDialog($event: MouseEvent) {
$event.stopPropagation();
this.importRedactionsInput.nativeElement.click();
this._dialogService.openDialog('importRedactions', null, { dossierId: this.file.dossierId, fileId: this.file.fileId });
}
private _openDeleteFileDialog($event: MouseEvent) {

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

@ -0,0 +1,49 @@
<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="!fileToImport"
(click)="triggerAttachFile()"
redactionDragDropFileUpload
(fileDropped)="attachFile($event)"
>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="import-redactions-dialog.upload-area-text"></div>
</div>
<ng-container *ngIf="fileToImport">
<div class="file-area">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ fileToImport.name }}</p>
<mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
</div>
<div class="only-for-pages">
<mat-checkbox
(change)="onlyForSpecificPages = !onlyForSpecificPages"
[checked]="onlyForSpecificPages"
class="filter-menu-checkbox"
color="primary"
>
{{ 'import-redactions-dialog.only-for-specific-pages' | translate }}
</mat-checkbox>
<div *ngIf="onlyForSpecificPages" class="iqser-input-group datepicker-wrapper">
<input />
</div>
</div>
</ng-container>
</div>
<div class="dialog-actions">
<button color="primary" mat-flat-button type="submit" (click)="save()" [disabled]="!fileToImport">
{{ '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>
<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" accept="application/pdf" />

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

@ -0,0 +1,72 @@
@use 'variables';
.upload-area,
.file-area {
display: flex;
align-items: center;
border-radius: 8px;
width: 586px;
background: variables.$grey-2;
}
.upload-area {
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;
}
}
.file-area {
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);
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 490px;
}
}
.only-for-pages {
margin-top: 16px;
margin-left: 21px;
min-height: 34px;
display: flex;
flex-direction: row;
align-items: center;
mat-checkbox {
width: fit-content;
margin-right: 16px;
}
}

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

@ -0,0 +1,69 @@
import { Component, ElementRef, Inject, Injector, ViewChild } from '@angular/core';
import { BaseDialogComponent, LoadingService, Toaster } from '@iqser/common-ui';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { firstValueFrom } from 'rxjs';
import { RedactionImportService } from '../../../dossier/shared/services/redaction-import.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { HttpStatusCode } from '@angular/common/http';
interface ImportData {
dossierId: string;
fileId: string;
}
@Component({
templateUrl: './import-redactions-dialog.html',
styleUrls: ['./import-redactions-dialog.scss'],
})
export class ImportRedactionsDialogComponent extends BaseDialogComponent {
@ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
fileToImport: File | null;
onlyForSpecificPages = false;
constructor(
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<ImportRedactionsDialogComponent>,
private readonly _loadingService: LoadingService,
private readonly _redactionImportService: RedactionImportService,
private readonly _toaster: Toaster,
@Inject(MAT_DIALOG_DATA)
readonly data: ImportData,
) {
super(_injector, _dialogRef);
}
triggerAttachFile() {
this.attachFileInput.nativeElement.click();
}
attachFile(event) {
const files = event.target['files'];
this.fileToImport = files[0];
// input field needs to be set as empty in case the same file will be selected second time
event.target.value = '';
if (!this.fileToImport) {
console.error('No file to import!');
return;
}
}
removeFile() {
this.fileToImport = null;
this.onlyForSpecificPages = false;
}
async save(): Promise<void> {
this._loadingService.start();
const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);
const result: any = await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error }));
this._loadingService.stop();
if (result.status === HttpStatusCode.Ok) {
this._toaster.success(_('import-redactions-dialog.http.success'));
this.close();
}
}
}

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 = [

41
apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts Normal file
View File

@ -0,0 +1,41 @@
import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
@Directive({
selector: '[redactionDragDropFileUpload]',
})
export class DragDropFileUploadDirective {
@Output() readonly fileDropped = new EventEmitter<any>();
@HostBinding('style.background-color') private background = DEFAULT_BACKGROUND_COLOR;
@HostListener('dragover', ['$event'])
onDragOver(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes('Files')) {
this.background = DRAG_OVER_BACKGROUND_COLOR;
}
}
@HostListener('dragleave', ['$event'])
onDragLeave(event) {
event.preventDefault();
event.stopPropagation();
this.background = DEFAULT_BACKGROUND_COLOR;
}
@HostListener('drop', ['$event'])
onDrop(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.types.includes('Files')) {
this.background = DEFAULT_BACKGROUND_COLOR;
const files = event.dataTransfer.files;
if (files.length > 0) {
this.fileDropped.emit({ target: { files } });
}
}
}
}

3
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -30,6 +30,7 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component
import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { DragDropFileUploadDirective } from '@shared/directives/drag-drop-file-upload.directive';
const buttons = [FileDownloadBtnComponent, UserButtonComponent];
@ -54,7 +55,7 @@ const components = [
...buttons,
];
const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective, DragDropFileUploadDirective];
const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];

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

@ -1453,6 +1453,19 @@
"logo": "Logo",
"signature": "Signatur"
},
"import-redactions-dialog": {
"actions": {
"cancel": "",
"import": ""
},
"details": "",
"http": {
"success": ""
},
"only-for-specific-pages": "",
"title": "",
"upload-area-text": ""
},
"initials-avatar": {
"unassigned": "Unbekannt",
"you": "Sie"

15
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,19 @@
"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.",
"http": {
"success": "Redactions has been imported!"
},
"only-for-specific-pages": "Import only for page(s)",
"title": "Import document with redactions",
"upload-area-text": "Click or drag & drop anywhere on this area..."
},
"initials-avatar": {
"unassigned": "Unassigned",
"you": "You"

2
libs/common-ui

@ -1 +1 @@
Subproject commit 6a0e22e68441a1dbbaaa38cfebed1aa8e8bb91be
Subproject commit d8c2a342baa6acb330132c44000562bdd823f620

691
paligo-theme/paligo-styles/redacto-theme.css
View File

File diff suppressed because it is too large Load Diff