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

Moved some dialogs into a service

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-22 00:16:27 +03:00
parent 86b7ccbda7
commit a8727c1d5b
9 changed files with 153 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts
View File

@ -32,7 +32,7 @@ export class AddEditProjectDialogComponent implements OnInit {
const project: Project = this._formToObject();
project.projectId = this.project?.projectId;
await this._appStateService.addOrUpdateProject(project);
this.dialogRef.close();
this.dialogRef.close(true);
}
private _formToObject(): Project {

78
apps/red-ui/src/app/dialogs/dialog.service.ts Normal file
View File

@ -0,0 +1,78 @@
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 { ConfirmationDialogComponent } from '../common/confirmation-dialog/confirmation-dialog.component';
import { NotificationService, NotificationType } from '../notification/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { AppStateService } from '../state/app-state.service';
import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component';
const dialogConfig = {
width: '600px',
maxWidth: '90vw'
};
@Injectable({
providedIn: 'root'
})
export class DialogService {
constructor(private readonly _dialog: MatDialog,
private readonly _translateService: TranslateService,
private readonly _appStateService: AppStateService,
private readonly _fileUploadControllerService: FileUploadControllerService,
private readonly _notificationService: NotificationService) {
}
public openFileDetailsDialog($event: MouseEvent, file: FileStatus) {
$event.stopPropagation();
this._dialog.open(FileDetailsDialogComponent, {
...dialogConfig,
data: file
});
}
public openDeleteFileDialog($event: MouseEvent, projectId: string, fileId: string, cb?: Function) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
...dialogConfig,
autoFocus: false
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const file = this._appStateService.getFileById(projectId, fileId);
this._fileUploadControllerService.deleteFile(file.projectId, file.fileId).subscribe(async () => {
await this._appStateService.reloadActiveProjectFiles();
if (cb) cb();
}, () => {
this._notificationService.showToastNotification(
this._translateService.instant('delete-file-error.label', file),
null,
NotificationType.ERROR);
});
}
});
}
public openEditProjectDialog($event: MouseEvent, project: Project) {
$event.stopPropagation();
this._dialog.open(AddEditProjectDialogComponent, {
...dialogConfig,
data: project
});
}
public openDeleteProjectDialog($event: MouseEvent, project: Project, cb?: Function) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(async result => {
if (result) {
await this._appStateService.deleteProject(project);
if (cb) cb();
}
});
}
}

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

@ -8,11 +8,29 @@
</mat-slide-toggle>
</div>
<div class="flex-2 filename page-title">
<div class="flex-1 filename page-title">
{{ appStateService.activeFile.filename }}
</div>
<div class="flex-1 download-container">
<div class="flex-1 actions-container">
<div class="actions-row">
<button mat-icon-button (click)="openDeleteFileDialog($event)">
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button mat-icon-button>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button mat-icon-button>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button mat-icon-button (click)="reanalyseFile($event)">
<mat-icon svgIcon="red:analyse"></mat-icon>
</button>
<button mat-icon-button (click)="openFileDetailsDialog($event)">
<mat-icon svgIcon="red:info"></mat-icon>
</button>
</div>
<button color="primary" mat-flat-button
[matMenuTriggerFor]="downloadMenu">
<span translate="file-preview.download.label"></span>
@ -156,9 +174,6 @@
</div>
</div>
</div>
<button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
<mat-icon svgIcon="red:info"></mat-icon>
</button>
</section>
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

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

@ -1,18 +1,17 @@
import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
AddRedactionRequest,
AddRedactionRequest, FileStatus,
FileUploadControllerService,
ManualRedactionControllerService,
ManualRedactionEntry,
ProjectControllerService,
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 { AppStateService } from '../../../state/app-state.service';
import { FileDetailsDialogComponent } from '../../../dialogs/file-details-dialog/file-details-dialog.component';
import { ViewerSyncService } from '../service/viewer-sync.service';
import { Annotations } from '@pdftron/webviewer';
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
@ -27,6 +26,7 @@ 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({
selector: 'redaction-file-preview-screen',
@ -59,12 +59,14 @@ export class FilePreviewScreenComponent implements OnInit {
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) {
this._activatedRoute.params.subscribe(params => {
@ -102,12 +104,20 @@ export class FilePreviewScreenComponent implements OnInit {
this._viewerSyncService.activateViewer('ANNOTATED');
}
public showDetailsDialog($event: MouseEvent) {
public openFileDetailsDialog($event: MouseEvent) {
this._dialogService.openFileDetailsDialog($event, this.appStateService.activeFile);
}
public reanalyseFile($event: MouseEvent) {
$event.stopPropagation();
this._dialog.open(FileDetailsDialogComponent, {
width: '600px',
maxWidth: '90vw',
data: this.appStateService.activeFile
this._reanalysisControllerService.reanalyzeFile(this.appStateService.activeProject.project.projectId, this.fileId).subscribe(async () => {
await this.appStateService.reloadActiveProjectFiles();
});
}
public openDeleteFileDialog($event: MouseEvent) {
this._dialogService.openDeleteFileDialog($event, this.projectId, this.fileId, () => {
this._router.navigate([`/ui/projects/${this.projectId}`]);
});
}

26
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
import { Project, ProjectControllerService } from '@redaction/red-ui-http';
import { MatDialog } from '@angular/material/dialog';
import { AddEditProjectDialogComponent } from '../../dialogs/add-edit-project-dialog/add-edit-project-dialog.component';
import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { NotificationService } from '../../notification/notification.service';
import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
@ -12,6 +11,7 @@ import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simp
import { SortingOption } from '../../utils/types';
import { groupBy } from '../../utils/functions';
import { AssignOwnerDialogComponent } from '../../dialogs/assign-owner-dialog/assign-owner-dialog.component';
import { DialogService } from '../../dialogs/dialog.service';
@Component({
selector: 'redaction-project-listing-screen',
@ -30,6 +30,7 @@ export class ProjectListingScreenComponent implements OnInit {
constructor(
public readonly appStateService: AppStateService,
private readonly _userService: UserService,
private readonly _dialogService: DialogService,
private readonly _projectControllerService: ProjectControllerService,
private readonly _translateService: TranslateService,
private readonly _notificationService: NotificationService,
@ -38,6 +39,10 @@ export class ProjectListingScreenComponent implements OnInit {
ngOnInit(): void {
this.appStateService.reset();
this._calculateData();
}
private _calculateData() {
this.projectsChartData = [
{ value: this.activeProjects, color: 'ACTIVE', label: 'active' },
{ value: this.inactiveProjects, color: 'DELETED', label: 'archived' }
@ -47,7 +52,6 @@ export class ProjectListingScreenComponent implements OnInit {
for (const key of Object.keys(groups)) {
this.documentsChartData.push({ value: groups[key].length, color: key, label: key });
}
}
public get user() {
@ -79,27 +83,25 @@ export class ProjectListingScreenComponent implements OnInit {
}
public openAddProjectDialog(project?: Project): void {
this._dialog.open(AddEditProjectDialogComponent, {
const dialogRef = this._dialog.open(AddEditProjectDialogComponent, {
width: '400px',
maxWidth: '90vw',
data: project
});
}
public openDeleteProjectDialog($event: MouseEvent, project: Project) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw'
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.appStateService.deleteProject(project);
this._calculateData();
}
});
}
public openDeleteProjectDialog($event: MouseEvent, project: Project) {
this._dialogService.openDeleteProjectDialog($event, project, () => {
this._calculateData();
});
}
public openDetailsDialog($event: MouseEvent, project: ProjectWrapper) {
$event.stopPropagation();
this._dialog.open(ProjectDetailsDialogComponent, {

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

@ -23,6 +23,7 @@ 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';
@Component({
@ -49,6 +50,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
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,
@ -109,22 +111,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
}
public openDeleteFileDialog($event: MouseEvent, fileStatus: FileStatus) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw',
autoFocus: false
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._fileUploadControllerService.deleteFile(fileStatus.projectId, fileStatus.fileId).subscribe(() => {
this._getFileStatus();
}, () => {
this._notificationService.showToastNotification(this._translateService.instant('project-overview.delete-file-error.label', fileStatus), null, NotificationType.ERROR);
});
}
});
this._dialogService.openDeleteFileDialog($event, fileStatus.projectId, fileStatus.fileId, () => {
this._calculateChartConfig();
})
}
public openDetailsDialog($event: MouseEvent) {
@ -137,28 +126,13 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
}
public openEditProjectDialog($event: MouseEvent) {
$event.stopPropagation();
this._dialog.open(AddEditProjectDialogComponent, {
width: '400px',
maxWidth: '90vw',
data: this.appStateService.activeProject.project
});
this._dialogService.openEditProjectDialog($event, this.appStateService.activeProject.project);
}
public openDeleteProjectDialog($event: MouseEvent) {
$event.stopPropagation();
const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
width: '400px',
maxWidth: '90vw'
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.appStateService.deleteProject(this.appStateService.activeProject.project);
this.ngOnDestroy();
this._router.navigate(['/ui/projects']);
}
});
this._dialogService.openDeleteProjectDialog($event, this.appStateService.activeProject.project, () => {
this._router.navigate(['/ui/projects']);
})
}
public openAssignProjectMembersDialog() {

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

@ -109,6 +109,10 @@ export class AppStateService {
return this.allProjects.find(project => project.project.projectId === id);
}
public getFileById(projectId: string, fileId: string) {
return this.getProjectById(projectId).files.find(file => file.fileId === fileId);
}
async loadAllProjects() {
const projects = await this._projectControllerService.getProjects().toPromise();
if (projects) {
@ -124,7 +128,7 @@ export class AppStateService {
async getFiles(projectId: string) {
const files = await this._statusControllerService.getProjectStatus(projectId).toPromise();
const project = this._appState.projects.find(p => p.project.projectId === projectId);
const project = this.getProjectById(projectId);
project.files = files;
this._computeStats();
return files;
@ -152,7 +156,7 @@ export class AppStateService {
}
deleteProject(project: Project) {
this._projectControllerService.deleteProject(project.projectId).subscribe(() => {
return this._projectControllerService.deleteProject(project.projectId).toPromise().then(() => {
const index = this._appState.projects.findIndex(p => p.project.projectId === project.projectId);
this._appState.projects.splice(index, 1);
this._appState.projects = [...this._appState.projects];

21
apps/red-ui/src/assets/icons/general/info.svg
View File

@ -1,14 +1,7 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="Capa_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512"
x="0px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
<g>
<path d="M437.02,74.98C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256
s26.629,132.667,74.98,181.02C123.333,485.371,187.62,512,256,512s132.667-26.629,181.02-74.98
C485.371,388.667,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,70c30.327,0,55,24.673,55,55c0,30.327-24.673,55-55,55
c-30.327,0-55-24.673-55-55C201,94.673,225.673,70,256,70z M326,420H186v-30h30V240h-30v-30h110v180h30V420z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>info</title>
<g id="info" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,0 C77.5,0 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 0,77.5 0,50 C0,22.5 22.5,0 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M50,38.25 C57.5,38.25 59.3203,42.6758 58.4805,48.1328 L55,70.7498 L55.0318998,70.7491065 C55.3367202,70.7391667 57.826087,70.5867565 62.5,68.2498 C62.5,68.2498 60,78.2498 50,78.2498 C42.5,78.2498 40.6797,73.824 41.5195,68.367 L45,45.75 L44.9681002,45.7506935 C44.6632798,45.7606333 42.173913,45.9130435 37.5,48.25 C37.5,48.25 40,38.25 50,38.25 Z M52.5,19.75 C56.6445,19.75 60,23.1094 60,27.25 C60,31.3906 56.6445,34.75 52.5,34.75 C48.3555,34.75 45,31.3906 45,27.25 C45,23.1094 48.3555,19.75 52.5,19.75 Z" id="Combined-Shape" fill="#283241" fill-rule="nonzero"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 790 B

After

Width:  |  Height:  |  Size: 1.1 KiB

6
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -119,12 +119,6 @@ html, body {
display: block;
}
.details-button {
position: fixed !important;
bottom: 20px;
right: 20px;
}
.detail-row {
opacity: 1;
font-family: Inconsolata, monospace, monospace;