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

Moved all dialogs into dialog service

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-22 01:10:14 +03:00
parent 68039dc366
commit a18851275d
8 changed files with 129 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/red-ui/src/app/dialogs/assign-project-members-dialog/assign-project-members-dialog.component.ts
View File

@ -1,7 +1,7 @@
import { Component, Inject } from '@angular/core';
import { Project, ProjectControllerService } from '@redaction/red-ui-http';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
import { AppStateService } from '../../state/app-state.service';
import { UserService } from '../../user/user.service';
import { MatSelectionListChange } from '@angular/material/list';
import { NotificationService, NotificationType } from '../../notification/notification.service';
@ -12,25 +12,24 @@ import { NotificationService, NotificationType } from '../../notification/notifi
styleUrls: ['./assign-project-members-dialog.component.scss']
})
export class AssignProjectMembersDialogComponent {
private _project: Project;
public memberIds: string[];
constructor(private readonly _projectControllerService: ProjectControllerService,
private readonly _notificationService: NotificationService,
public readonly userService: UserService,
private readonly _appStateService: AppStateService,
public dialogRef: MatDialogRef<AssignProjectMembersDialogComponent>) {
this._loadProject();
public dialogRef: MatDialogRef<AssignProjectMembersDialogComponent>,
@Inject(MAT_DIALOG_DATA) public _project: Project) {
this._loadMembers();
}
private _loadProject() {
this._project = this._appStateService.activeProject.project;
private _loadMembers() {
this.memberIds = [...this._project.memberIds];
}
private _reloadProject() {
this._appStateService.addOrUpdateProject(this._project).then(() => {
this._loadProject();
this._loadMembers();
});
}

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

@ -1,7 +1,13 @@
import { Injectable } from '@angular/core';
import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { FileStatus, FileUploadControllerService, Project } from '@redaction/red-ui-http';
import {
FileStatus,
FileUploadControllerService,
ManualRedactionControllerService,
ManualRedactionEntry,
Project
} from '@redaction/red-ui-http';
import { ConfirmationDialogComponent } from '../common/confirmation-dialog/confirmation-dialog.component';
import { NotificationService, NotificationType } from '../notification/notification.service';
import { TranslateService } from '@ngx-translate/core';
@ -9,10 +15,14 @@ import { AppStateService, ProjectWrapper } from '../state/app-state.service';
import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component';
import { AssignOwnerDialogComponent } from './assign-owner-dialog/assign-owner-dialog.component';
import { ProjectDetailsDialogComponent } from './project-details-dialog/project-details-dialog.component';
import { AssignProjectMembersDialogComponent } from './assign-project-members-dialog/assign-project-members-dialog.component';
import { ManualRedactionDialogComponent } from './manual-redaction-dialog/manual-redaction-dialog.component';
import { Annotations } from '@pdftron/webviewer';
const dialogConfig = {
width: '600px',
maxWidth: '90vw'
maxWidth: '90vw',
autoFocus: false,
};
@Injectable({
@ -24,7 +34,8 @@ export class DialogService {
private readonly _translateService: TranslateService,
private readonly _appStateService: AppStateService,
private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _notificationService: NotificationService) {
private readonly _notificationService: NotificationService,
private readonly _manualRedactionControllerService: ManualRedactionControllerService) {
}
@ -38,11 +49,7 @@ export class DialogService {
public openDeleteFileDialog($event: MouseEvent, projectId: string, fileId: string, cb?: Function) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
...dialogConfig,
autoFocus: false
});
const dialogRef = this._dialog.open(ConfirmationDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(result => {
if (result) {
const file = this._appStateService.getFileById(projectId, fileId);
@ -59,10 +66,59 @@ export class DialogService {
});
}
public openManualRedactionDialog($event: ManualRedactionEntry) {
this._dialog.open(ManualRedactionDialogComponent, {
...dialogConfig,
autoFocus: true,
data: $event
});
}
public acceptSuggestionAnnotation($event: MouseEvent, annotation: Annotations.Annotation, projectId: string, fileId: string) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, dialogConfig);
const parts = annotation.Id.split(':');
const annotationId = parts[parts.length - 1];
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._manualRedactionControllerService.approveRequest(projectId, fileId, annotationId).subscribe(() => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.confirm-annotation.success.label'), null, NotificationType.SUCCESS);
}, (err) => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.confirm-annotation.failed.label', err), null, NotificationType.ERROR);
});
}
});
}
public suggestRemoveAnnotation($event: MouseEvent, annotation: Annotations.Annotation, projectId: string, fileId: string) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw'
});
const parts = annotation.Id.split(':');
const annotationId = parts[parts.length - 1];
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._manualRedactionControllerService.undo(projectId, fileId, annotationId).subscribe(ok => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS);
}, (err) => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label', err), null, NotificationType.ERROR);
});
}
});
}
public openEditProjectDialog($event: MouseEvent, project: Project) {
$event.stopPropagation();
this._dialog.open(AddEditProjectDialogComponent, {
...dialogConfig,
autoFocus: true,
data: project
});
}
@ -95,9 +151,19 @@ export class DialogService {
}
public openAddProjectDialog(cb?: Function): void {
const dialogRef = this._dialog.open(AddEditProjectDialogComponent, dialogConfig);
const dialogRef = this._dialog.open(AddEditProjectDialogComponent, {
...dialogConfig,
autoFocus: true,
});
dialogRef.afterClosed().subscribe(result => {
if (result && cb) cb();
});
}
public openAssignProjectMembersDialog(project: Project) {
this._dialog.open(AssignProjectMembersDialogComponent, {
...dialogConfig,
data: project
});
}
}

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

@ -20,7 +20,7 @@
<button mat-icon-button>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button mat-icon-button>
<button mat-icon-button (click)="openAssignFileOwnerDialog($event)">
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button mat-icon-button (click)="reanalyseFile($event)">
@ -59,12 +59,12 @@
[fileStatus]="appStateService.activeFile"
(fileReady)="fileReady('ANNOTATED')"
(pageChanged)="viewerPageChanged($event)"
(manualAnnotationRequested)="handleManualAnnotationRequest($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)"
(annotationSelected)="handleAnnotationSelected($event)"
(annotationsAdded)="handleAnnotationsAdded($event)"></redaction-pdf-viewer>
<redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
(pageChanged)="viewerPageChanged($event)"
(manualAnnotationRequested)="handleManualAnnotationRequest($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)"
(fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
</div>

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -105,6 +105,7 @@ redaction-pdf-viewer {
position: relative;
display: flex;
gap: 10px;
border-left: 2px solid transparent;
redaction-annotation-icon {
margin-top: 6px;

85
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -1,22 +1,11 @@
import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
AddRedactionRequest, FileStatus,
FileUploadControllerService,
ManualRedactionControllerService,
ManualRedactionEntry,
ProjectControllerService, ReanalysisControllerService,
StatusControllerService
} from '@redaction/red-ui-http';
import { TranslateService } from '@ngx-translate/core';
import {NotificationService, NotificationType} from '../../../notification/notification.service';
import { MatDialog } from '@angular/material/dialog';
import { ManualRedactionEntry, ReanalysisControllerService } from '@redaction/red-ui-http';
import { AppStateService } from '../../../state/app-state.service';
import { ViewerSyncService } from '../service/viewer-sync.service';
import { Annotations } from '@pdftron/webviewer';
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
import { AnnotationUtils } from '../../../utils/annotation-utils';
import { ManualRedactionDialogComponent } from '../../../dialogs/manual-redaction-dialog/manual-redaction-dialog.component';
import { UserService } from '../../../user/user.service';
import { debounce } from '../../../utils/debounce';
import scrollIntoView from 'scroll-into-view-if-needed';
@ -25,7 +14,6 @@ import { FiltersService } from '../service/filters.service';
import { FileDownloadService } from '../service/file-download.service';
import { saveAs } from 'file-saver';
import { FileType } from '../model/file-type';
import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog/confirmation-dialog.component';
import { DialogService } from '../../../dialogs/dialog.service';
@Component({
@ -54,18 +42,11 @@ export class FilePreviewScreenComponent implements OnInit {
public readonly appStateService: AppStateService,
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _activatedRoute: ActivatedRoute,
private readonly _statusControllerService: StatusControllerService,
private readonly _translateService: TranslateService,
private readonly _notificationService: NotificationService,
private readonly _viewerSyncService: ViewerSyncService,
private readonly _dialog: MatDialog,
private readonly _dialogService: DialogService,
private readonly _router: Router,
private readonly _manualRedactionControllerService: ManualRedactionControllerService,
private readonly _userService: UserService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _projectControllerService: ProjectControllerService,
private readonly _reanalysisControllerService: ReanalysisControllerService,
private readonly _filtersService: FiltersService,
private ngZone: NgZone) {
@ -121,6 +102,12 @@ export class FilePreviewScreenComponent implements OnInit {
});
}
public openAssignFileOwnerDialog($event: MouseEvent) {
$event.stopPropagation();
// TODO
console.log('not implemented yet');
}
public fileReady(viewer: string) {
this._readyViewers.push(viewer);
this._changeDetectorRef.detectChanges();
@ -175,13 +162,9 @@ export class FilePreviewScreenComponent implements OnInit {
this._viewerComponent.navigateToPage(pageNumber);
}
handleManualAnnotationRequest($event: ManualRedactionEntry) {
public openManualRedactionDialog($event: ManualRedactionEntry) {
this.ngZone.run(() => {
this._dialog.open(ManualRedactionDialogComponent, {
width: '600px',
maxWidth: '90vw',
data: $event
});
this._dialogService.openManualRedactionDialog($event);
});
}
@ -223,59 +206,24 @@ export class FilePreviewScreenComponent implements OnInit {
}
}
getType(annotation: Annotations.Annotation): string {
public getType(annotation: Annotations.Annotation): string {
return AnnotationUtils.getType(annotation);
}
getDictionary(annotation: Annotations.Annotation): string {
public getDictionary(annotation: Annotations.Annotation): string {
return AnnotationUtils.getDictionary(annotation);
}
acceptSuggestionAnnotation($event: MouseEvent, annotation: Annotations.Annotation) {
$event.stopPropagation();
public acceptSuggestionAnnotation($event: MouseEvent, annotation: Annotations.Annotation) {
this.ngZone.run(() => {
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw'
});
const parts = annotation.Id.split(':');
const annotationId = parts[parts.length - 1];
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._manualRedactionControllerService.approveRequest(this.appStateService.activeProjectId, this.appStateService.activeFile.fileId, annotationId).subscribe(ok => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.confirm-annotation.success.label'), null, NotificationType.SUCCESS);
}, (err) => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.confirm-annotation.failed.label', err), null, NotificationType.ERROR);
});
}
});
this._dialogService.acceptSuggestionAnnotation($event, annotation, this.projectId, this.fileId);
});
}
suggestRemoveAnnotation($event: MouseEvent, annotation: Annotations.Annotation) {
$event.stopPropagation();
public suggestRemoveAnnotation($event: MouseEvent, annotation: Annotations.Annotation) {
this.ngZone.run(() => {
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw'
});
const parts = annotation.Id.split(':');
const annotationId = parts[parts.length - 1];
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._manualRedactionControllerService.undo(this.appStateService.activeProjectId, this.appStateService.activeFile.fileId, annotationId).subscribe(ok => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS);
}, (err) => {
this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label', err), null, NotificationType.ERROR);
});
}
});
this._dialogService.suggestRemoveAnnotation($event, annotation, this.projectId, this.fileId);
});
}
public downloadFile(type: FileType | string) {
@ -322,8 +270,7 @@ export class FilePreviewScreenComponent implements OnInit {
this.expandedFilters[key] = value;
}
isManuallyAddedAnnotation(annotation: Annotations.Annotation) {
public isManuallyAddedAnnotation(annotation: Annotations.Annotation) {
return annotation.Id.indexOf('request:') >= 0;
}
}

39
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -9,15 +9,13 @@ import {
Output,
ViewChild
} from '@angular/core';
import {AppConfigKey, AppConfigService} from '../../../app-config/app-config.service';
import {FileStatus, ManualRedactionEntry, Rectangle} from '@redaction/red-ui-http';
import WebViewer, {Annotations, WebViewerInstance} from '@pdftron/webviewer';
import {TranslateService} from '@ngx-translate/core';
import {ViewerSyncService} from '../service/viewer-sync.service';
import {MatDialog} from "@angular/material/dialog";
import {FileDownloadService} from "../service/file-download.service";
import {FileType} from "../model/file-type";
import {AppStateService} from "../../../state/app-state.service";
import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service';
import { FileStatus, ManualRedactionEntry, Rectangle } from '@redaction/red-ui-http';
import WebViewer, { Annotations, WebViewerInstance } from '@pdftron/webviewer';
import { TranslateService } from '@ngx-translate/core';
import { ViewerSyncService } from '../service/viewer-sync.service';
import { FileDownloadService } from '../service/file-download.service';
import { FileType } from '../model/file-type';
@Component({
@ -36,18 +34,15 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntry>();
@Output() pageChanged = new EventEmitter<number>();
@ViewChild('viewer', {static: true}) viewer: ElementRef;
@ViewChild('viewer', { static: true }) viewer: ElementRef;
wvInstance: WebViewerInstance;
_fileData: Blob;
constructor(
private readonly _appStateService: AppStateService,
private readonly _viewerSyncService: ViewerSyncService,
private readonly _translateService: TranslateService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _dialog: MatDialog,
private readonly _appConfigService: AppConfigService) {
constructor(private readonly _viewerSyncService: ViewerSyncService,
private readonly _translateService: TranslateService,
private readonly _fileDownloadService: FileDownloadService,
private readonly _appConfigService: AppConfigService) {
}
ngOnInit() {
@ -61,10 +56,10 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
ngAfterViewInit(): void {
this._fileDownloadService.loadFile(this.fileType, this.fileId, (data) => {
this._fileData = data
this._fileData = data;
}, () => this._fileData).subscribe(() => {
this._loadViewer(this._fileData);
})
});
}
private _loadViewer(pdfBlob: any) {
@ -98,7 +93,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
});
instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf'});
instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf' });
});
}
@ -128,7 +123,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
onClick: () => {
const selectedQuads = this.wvInstance.docViewer.getSelectedTextQuads();
const text = this.wvInstance.docViewer.getSelectedText();
const entry: ManualRedactionEntry = {positions: []};
const entry: ManualRedactionEntry = { positions: [] };
for (const key of Object.keys(selectedQuads)) {
for (const quad of selectedQuads[key]) {
entry.positions.push(this.toPosition(parseInt(key, 10), quad));
@ -152,7 +147,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
},
height: height,
width: selectedQuad.x3 - selectedQuad.x4
}
};
}
private _configureHeader() {

6
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -89,9 +89,9 @@
[matTooltip]="'project-listing.report.action.label'|translate">
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<!-- <button mat-icon-button (click)="editProject($event,pw.project)">-->
<!-- <mat-icon svgIcon="red:edit"></mat-icon>-->
<!-- </button>-->
<!-- <button mat-icon-button (click)="editProject($event,pw.project)">-->
<!-- <mat-icon svgIcon="red:edit"></mat-icon>-->
<!-- </button>-->
<button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
[matTooltip]="'project-listing.assign.action.label'|translate">
<mat-icon svgIcon="red:assign"></mat-icon>

42
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -1,28 +1,16 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
FileStatus,
FileUploadControllerService,
ProjectControllerService,
ReanalysisControllerService,
StatusControllerService
} from '@redaction/red-ui-http';
import { NotificationService, NotificationType } from '../../notification/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { FileStatus, ReanalysisControllerService, StatusControllerService } from '@redaction/red-ui-http';
import { NotificationService } from '../../notification/notification.service';
import { AppStateService } from '../../state/app-state.service';
import { ProjectDetailsDialogComponent } from '../../dialogs/project-details-dialog/project-details-dialog.component';
import { FileDropOverlayService } from '../../upload/file-drop/service/file-drop-overlay.service';
import { FileUploadModel } from '../../upload/model/file-upload.model';
import { FileUploadService } from '../../upload/file-upload.service';
import { UploadStatusOverlayService } from '../../upload/upload-status-dialog/service/upload-status-overlay.service';
import { AddEditProjectDialogComponent } from '../../dialogs/add-edit-project-dialog/add-edit-project-dialog.component';
import { UserService } from '../../user/user.service';
import { SortingOption } from '../../utils/types';
import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import { groupBy } from '../../utils/functions';
import { AssignProjectMembersDialogComponent } from '../../dialogs/assign-project-members-dialog/assign-project-members-dialog.component';
import { DialogService } from '../../dialogs/dialog.service';
@ -44,21 +32,16 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public documentsChartData: DoughnutChartConfig[] = [];
constructor(public readonly appStateService: AppStateService,
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _activatedRoute: ActivatedRoute,
private readonly _statusControllerService: StatusControllerService,
private readonly _translateService: TranslateService,
private readonly _notificationService: NotificationService,
private readonly _dialog: MatDialog,
private readonly _dialogService: DialogService,
private readonly _fileUploadService: FileUploadService,
private readonly _uploadStatusOverlayService: UploadStatusOverlayService,
private readonly _reanalysisControllerService: ReanalysisControllerService,
private readonly _router: Router,
private readonly _userService: UserService,
private readonly _fileDropOverlayService: FileDropOverlayService,
private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _projectControllerService: ProjectControllerService) {
private readonly _fileDropOverlayService: FileDropOverlayService) {
this._activatedRoute.params.subscribe(params => {
this.appStateService.activateProject(params.projectId);
});
@ -113,16 +96,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public openDeleteFileDialog($event: MouseEvent, fileStatus: FileStatus) {
this._dialogService.openDeleteFileDialog($event, fileStatus.projectId, fileStatus.fileId, () => {
this._calculateChartConfig();
})
});
}
public openDetailsDialog($event: MouseEvent) {
$event.stopPropagation();
this._dialog.open(ProjectDetailsDialogComponent, {
width: '600px',
maxWidth: '90vw',
data: this.appStateService.activeProject
});
this._dialogService.openProjectDetailsDialog($event, this.appStateService.activeProject);
}
public openEditProjectDialog($event: MouseEvent) {
@ -132,15 +110,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public openDeleteProjectDialog($event: MouseEvent) {
this._dialogService.openDeleteProjectDialog($event, this.appStateService.activeProject.project, () => {
this._router.navigate(['/ui/projects']);
})
});
}
public openAssignProjectMembersDialog() {
this._dialog.open(AssignProjectMembersDialogComponent, {
width: '400px',
maxWidth: '90vw',
autoFocus: false
});
this._dialogService.openAssignProjectMembersDialog(this.activeProject);
}
public reanalyseFile($event: MouseEvent, fileStatus: FileStatus) {