diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 009bd4ee4..32cb2d4e9 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -106,6 +106,7 @@ import { MatSliderModule } from '@angular/material/slider'; import { PendingChangesGuard } from './utils/can-deactivate.guard'; import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component'; import { KeycloakService } from 'keycloak-angular'; +import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -330,6 +331,7 @@ const matImports = [ PdfViewerScreenComponent, HtmlDebugScreenComponent, ReportDownloadBtnComponent, + FileDownloadBtnComponent, ProjectListingActionsComponent, RuleSetActionsComponent, RuleSetViewSwitchComponent diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html index 141c9b2d0..59bcae55b 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html @@ -51,17 +51,15 @@ - - - - + { - saveAs(data, fileStatus.filename); - }); - } } diff --git a/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.html b/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.html new file mode 100644 index 000000000..08e86e1a9 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.html @@ -0,0 +1,19 @@ + + + +
+
+
+
+
+
+ diff --git a/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.scss b/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.ts new file mode 100644 index 000000000..1e85cfc61 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/file-download-btn/file-download-btn.component.ts @@ -0,0 +1,86 @@ +import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; +import { PermissionsService } from '../../../common/service/permissions.service'; +import { ProjectWrapper } from '../../../state/model/project.wrapper'; +import { FileStatusWrapper } from '../../../screens/file/model/file-status.wrapper'; +import { FileManagementControllerService } from '@redaction/red-ui-http'; +import { StatusOverlayService } from '../../../upload-download/status-overlay.service'; +import { FileDownloadService } from '../../../upload-download/file-download.service'; +import { SingleFileDownloadService } from '../../../screens/file/service/single-file-download.service'; +import { saveAs } from 'file-saver'; + +export type MenuState = 'OPEN' | 'CLOSED'; + +@Component({ + selector: 'redaction-file-download-btn', + templateUrl: './file-download-btn.component.html', + styleUrls: ['./file-download-btn.component.scss'] +}) +export class FileDownloadBtnComponent { + @Input() project: ProjectWrapper; + @Input() file: FileStatusWrapper | FileStatusWrapper[]; + @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above'; + @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default'; + @Input() tooltipClass: string; + + @Output() menuStateChanged = new EventEmitter(); + + constructor( + private readonly _permissionsService: PermissionsService, + private readonly _fileDownloadService: FileDownloadService, + private readonly _singleFileDownloadService: SingleFileDownloadService, + private readonly _changeDetectorRef: ChangeDetectorRef, + private readonly _statusOverlayService: StatusOverlayService, + private readonly _fileManagementControllerService: FileManagementControllerService + ) {} + + openMenu($event: MouseEvent) { + $event.stopPropagation(); + this.menuStateChanged.emit('OPEN'); + } + + onMenuClosed() { + this.menuStateChanged.emit('CLOSED'); + } + + get canDownloadRedactedFiles() { + if (Array.isArray(this.file)) { + return this.file.reduce((acc, file) => acc && this._permissionsService.canDownloadRedactedFile(file), true); + } else { + return this._permissionsService.canDownloadRedactedFile(this.file); + } + } + + downloadRedactedFilesPreview($event: MouseEvent) { + $event.preventDefault(); + if (Array.isArray(this.file)) { + // Bulk Download + this._fileDownloadService.downloadProjectFiles( + this.file.map((file) => file.fileId), + this.project, + 'PREVIEW' + ); + this._statusOverlayService.openDownloadStatusOverlay(); + this._changeDetectorRef.detectChanges(); + } else { + this._fileManagementControllerService + .downloadPreviewFile(this.file.fileId, true, 'body') + .subscribe((data) => saveAs(data, (this.file).filename)); + } + } + + downloadRedactedFiles($event: MouseEvent) { + $event.preventDefault(); + if (Array.isArray(this.file)) { + // Bulk Download + this._fileDownloadService.downloadProjectFiles( + this.file.map((file) => file.fileId), + this.project, + 'REDACTED' + ); + this._statusOverlayService.openDownloadStatusOverlay(); + this._changeDetectorRef.detectChanges(); + } else { + this._singleFileDownloadService.loadFile('REDACTED', this.file).subscribe((data) => saveAs(data, (this.file).filename)); + } + } +} diff --git a/apps/red-ui/src/app/components/buttons/report-download-btn/report-download-btn.component.html b/apps/red-ui/src/app/components/buttons/report-download-btn/report-download-btn.component.html index 3e4c2e7ea..edcff43b6 100644 --- a/apps/red-ui/src/app/components/buttons/report-download-btn/report-download-btn.component.html +++ b/apps/red-ui/src/app/components/buttons/report-download-btn/report-download-btn.component.html @@ -1,7 +1,7 @@ { const selectedQuads = this.instance.docViewer.getSelectedTextQuads(); const text = this.instance.docViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text); + const mre = this._getManualRedactionEntry(selectedQuads, text, true); this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper(this.instance.docViewer.getSelectedTextQuads(), mre, 'FALSE_POSITIVE')); } }); @@ -308,7 +309,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { onClick: () => { const selectedQuads = this.instance.docViewer.getSelectedTextQuads(); const text = this.instance.docViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text); + const mre = this._getManualRedactionEntry(selectedQuads, text, true); this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper(this.instance.docViewer.getSelectedTextQuads(), mre, 'DICTIONARY')); } }); @@ -321,7 +322,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { onClick: () => { const selectedQuads = this.instance.docViewer.getSelectedTextQuads(); const text = this.instance.docViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text); + const mre = this._getManualRedactionEntry(selectedQuads, text, true); this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper(this.instance.docViewer.getSelectedTextQuads(), mre, 'REDACTION')); } }); @@ -339,20 +340,25 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { } } - private _getManualRedactionEntry(quads: any, text: string): ManualRedactionEntry { + private _getManualRedactionEntry(quads: any, text: string, convertQuads: boolean = false): ManualRedactionEntry { text = text.replace(/-\n/gi, ''); const entry: ManualRedactionEntry = { positions: [] }; for (const key of Object.keys(quads)) { for (const quad of quads[key]) { - entry.positions.push(this.toPosition(parseInt(key, 10), quad)); + const page = parseInt(key, 10); + entry.positions.push(this.toPosition(page, convertQuads ? this._translateQuads(page, quad) : quad)); } } entry.value = text; return entry; } + private _translateQuads(page: number, quads: any) { + const rotation = this.instance.docViewer.getCompleteRotation(page); + return translateQuads(page, rotation, quads); + } + private toPosition(page: number, selectedQuad: any): Rectangle { - console.log(selectedQuad); const pageHeight = this.instance.docViewer.getPageHeight(page); const height = selectedQuad.y2 - selectedQuad.y4; return { diff --git a/apps/red-ui/src/app/screens/file/service/file-download.service.ts b/apps/red-ui/src/app/screens/file/service/single-file-download.service.ts similarity index 99% rename from apps/red-ui/src/app/screens/file/service/file-download.service.ts rename to apps/red-ui/src/app/screens/file/service/single-file-download.service.ts index 1e8d75818..e2042bdf6 100644 --- a/apps/red-ui/src/app/screens/file/service/file-download.service.ts +++ b/apps/red-ui/src/app/screens/file/service/single-file-download.service.ts @@ -16,7 +16,7 @@ import { PermissionsService } from '../../../common/service/permissions.service' @Injectable({ providedIn: 'root' }) -export class FileDownloadService { +export class SingleFileDownloadService { constructor( private readonly _appStateService: AppStateService, private readonly _permissionsService: PermissionsService, diff --git a/apps/red-ui/src/app/screens/html-debug-screen/html-debug-screen.component.ts b/apps/red-ui/src/app/screens/html-debug-screen/html-debug-screen.component.ts index 23345d298..d0235b3b3 100644 --- a/apps/red-ui/src/app/screens/html-debug-screen/html-debug-screen.component.ts +++ b/apps/red-ui/src/app/screens/html-debug-screen/html-debug-screen.component.ts @@ -1,10 +1,10 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { FileDownloadService } from '../file/service/file-download.service'; import { DebugControllerService } from '@redaction/red-ui-http'; import { FileType } from '../file/model/file-type'; import { FileStatusWrapper } from '../file/model/file-status.wrapper'; import { mergeMap } from 'rxjs/operators'; +import { SingleFileDownloadService } from '../file/service/single-file-download.service'; @Component({ selector: 'redaction-html-debug-screen', @@ -21,7 +21,7 @@ export class HtmlDebugScreenComponent { private readonly _activatedRoute: ActivatedRoute, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _debugControllerService: DebugControllerService, - private readonly _fileDownloadService: FileDownloadService + private readonly _fileDownloadService: SingleFileDownloadService ) { this._activatedRoute.params.subscribe((params) => { this._fileId = params.fileId; diff --git a/apps/red-ui/src/app/screens/pdf-viewer-screen/pdf-viewer-screen.component.ts b/apps/red-ui/src/app/screens/pdf-viewer-screen/pdf-viewer-screen.component.ts index dc0a16f3e..2c4ac4f55 100644 --- a/apps/red-ui/src/app/screens/pdf-viewer-screen/pdf-viewer-screen.component.ts +++ b/apps/red-ui/src/app/screens/pdf-viewer-screen/pdf-viewer-screen.component.ts @@ -1,10 +1,10 @@ import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import WebViewer, { WebViewerInstance } from '@pdftron/webviewer'; import { environment } from '../../../environments/environment'; -import { FileDownloadService } from '../file/service/file-download.service'; import { ActivatedRoute } from '@angular/router'; import { FileType } from '../file/model/file-type'; import { FileStatusWrapper } from '../file/model/file-status.wrapper'; +import { SingleFileDownloadService } from '../file/service/single-file-download.service'; @Component({ selector: 'redaction-pdf-viewer-screen', @@ -22,7 +22,7 @@ export class PdfViewerScreenComponent implements OnInit { constructor( private readonly _activatedRoute: ActivatedRoute, private readonly _changeDetectorRef: ChangeDetectorRef, - private readonly _fileDownloadService: FileDownloadService + private readonly _fileDownloadService: SingleFileDownloadService ) { this._activatedRoute.params.subscribe((params) => { this._fileId = params.fileId; diff --git a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html index 66aa96c0b..3e9b4e80d 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html @@ -15,13 +15,7 @@ icon="red:assign" > - + this._appStateService.getFileById(this._appStateService.activeProject.project.projectId, fileId)); } @@ -115,20 +119,6 @@ export class BulkActionsComponent { return this.selectedFiles.reduce((acc, file) => acc && this._permissionsService.canUndoApproval(file), true); } - get canDownloadRedactedFiles() { - return this.selectedFiles.reduce((acc, file) => acc && this._permissionsService.canDownloadRedactedFile(file), true); - } - - // Bulk Download - downloadRedactedFiles() { - this._fileDownloadService.downloadProjectFiles( - this.selectedFiles.map((file) => file.fileId), - this._appStateService.activeProject - ); - this._statusOverlayService.openDownloadStatusOverlay(); - this._changeDetectorRef.detectChanges(); - } - private _performBulkAction(obs: Observable) { this.loading = true; obs.subscribe().add(() => { diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index b32d7c631..01623d5e7 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -59,13 +59,8 @@ - + + file.fileId), - this.appStateService.activeProject - ); - this._statusOverlayService.openDownloadStatusOverlay(); - this._changeDetectorRef.detectChanges(); - } - - public get canDownloadRedactedFiles() { - return ( - this.appStateService.activeProject.files.length > 0 && - this.appStateService.activeProject.files.reduce((acc, file) => acc && this.permissionsService.canDownloadRedactedFile(file), true) - ); - } } diff --git a/apps/red-ui/src/app/upload-download/file-download.service.ts b/apps/red-ui/src/app/upload-download/file-download.service.ts index 720d70131..b4a3f4ea7 100644 --- a/apps/red-ui/src/app/upload-download/file-download.service.ts +++ b/apps/red-ui/src/app/upload-download/file-download.service.ts @@ -34,8 +34,8 @@ export class FileDownloadService { }); } - public downloadProjectFiles(fileIds: string[], project: ProjectWrapper): void { - const item = { project, fileIds, completed: false, error: null }; + public downloadProjectFiles(fileIds: string[], project: ProjectWrapper, type: 'REDACTED' | 'PREVIEW'): void { + const item = { project, fileIds, type, completed: false, error: null }; this.downloads.push(item); this.scheduleDownload(item); } @@ -68,12 +68,22 @@ export class FileDownloadService { private _createSubscription(downloadModel: ProjectDownloadModel) { this.activeDownloadsCnt++; - const obs = this._fileManagementControllerService.downloadRedactedFiles( - { fileIds: downloadModel.fileIds }, - downloadModel.project.projectId, - false, - 'response' - ); + let obs; + if (downloadModel.type === 'REDACTED') { + obs = this._fileManagementControllerService.downloadRedactedFiles( + { fileIds: downloadModel.fileIds }, + downloadModel.project.projectId, + false, + 'response' + ); + } else { + obs = this._fileManagementControllerService.downloadPreviewFiles( + { fileIds: downloadModel.fileIds }, + downloadModel.project.projectId, + false, + 'response' + ); + } const subscription = obs.subscribe( async (event) => { if (event.status < 300) { diff --git a/apps/red-ui/src/app/upload-download/model/project-download.model.ts b/apps/red-ui/src/app/upload-download/model/project-download.model.ts index 245a6f98a..d38651b24 100644 --- a/apps/red-ui/src/app/upload-download/model/project-download.model.ts +++ b/apps/red-ui/src/app/upload-download/model/project-download.model.ts @@ -5,4 +5,5 @@ export interface ProjectDownloadModel { project: ProjectWrapper; completed: boolean; error: any; + type: 'REDACTED' | 'PREVIEW'; } diff --git a/apps/red-ui/src/app/utils/pdf-coordinates.ts b/apps/red-ui/src/app/utils/pdf-coordinates.ts new file mode 100644 index 000000000..e4274eb82 --- /dev/null +++ b/apps/red-ui/src/app/utils/pdf-coordinates.ts @@ -0,0 +1,53 @@ +enum PageRotation { + E_0 = 0, + E_90 = 1, + E_180 = 2, + E_270 = 3 +} + +export function translateQuads(page: number, rotation: number, quads: any) { + let result; + switch (rotation) { + case PageRotation.E_90: + result = { + x1: quads.x2, + x2: quads.x3, + x3: quads.x4, + x4: quads.x1, + y1: quads.y2, + y2: quads.y3, + y3: quads.y4, + y4: quads.y1 + }; + break; + case PageRotation.E_180: + result = { + x1: quads.x3, + x2: quads.x4, + x3: quads.x1, + x4: quads.x2, + y1: quads.y3, + y2: quads.y4, + y3: quads.y1, + y4: quads.y2 + }; + break; + case PageRotation.E_270: + result = { + x1: quads.x4, + x2: quads.x1, + x3: quads.x2, + x4: quads.x3, + y1: quads.y4, + y2: quads.y1, + y3: quads.y2, + y4: quads.y3 + }; + break; + case PageRotation.E_0: + default: + result = quads; + } + console.log(quads, result); + return result; +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 9d5979132..107ab7556 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -197,8 +197,9 @@ "upload-document": "Upload Document", "download-redacted-files": "Download Redacted Files" }, - "download-redacted-file": "Download Redacted File", - "download-redacted-files": "Download Redacted Files", + "download-file": "Download File(s)", + "download-redacted-file": "Download Redacted File(s)", + "download-redacted-file-preview": "Download Redacted File(s) Preview", "under-approval": "For Approval", "approve": "Approve", "under-review": "Under Review", diff --git a/libs/red-ui-http/src/lib/api/fileManagementController.service.ts b/libs/red-ui-http/src/lib/api/fileManagementController.service.ts index ab2ebafa0..a852c879e 100644 --- a/libs/red-ui-http/src/lib/api/fileManagementController.service.ts +++ b/libs/red-ui-http/src/lib/api/fileManagementController.service.ts @@ -146,6 +146,138 @@ export class FileManagementControllerService { }); } + /** + * Returns a downloadable byte stream of the redaction preview file with the specified fileId + * Use the optional \"inline\" request parameter to select, if this downloadAnnotated will be opened in the browser. + * @param fileId fileId + * @param inline inline + * @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 downloadPreviewFile(fileId: string, inline?: boolean, observe?: 'body', reportProgress?: boolean): Observable; + public downloadPreviewFile(fileId: string, inline?: boolean, observe?: 'response', reportProgress?: boolean): Observable>; + public downloadPreviewFile(fileId: string, inline?: boolean, observe?: 'events', reportProgress?: boolean): Observable>; + public downloadPreviewFile(fileId: string, inline?: boolean, observe: any = 'body', reportProgress: boolean = false): Observable { + if (fileId === null || fileId === undefined) { + throw new Error('Required parameter fileId was null or undefined when calling downloadPreviewFile.'); + } + + let queryParameters = new HttpParams({ encoder: new CustomHttpUrlEncodingCodec() }); + if (inline !== undefined && inline !== null) { + queryParameters = queryParameters.set('inline', inline); + } + + 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[] = ['*/*']; + 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[] = []; + + return this.httpClient.request('get', `${this.basePath}/download/preview/${encodeURIComponent(String(fileId))}`, { + responseType: 'blob', + params: queryParameters, + withCredentials: this.configuration.withCredentials, + headers: headers, + observe: observe, + reportProgress: reportProgress + }); + } + + /** + * Returns a downloadable byte stream of the requested files in a zip format + * Use the optional \"inline\" request parameter to select, if this report will be opened in the browser. + * @param body bulkDownloadRedactedRequest + * @param projectId The projectId + * @param inline inline + * @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 downloadPreviewFiles( + body: BulkDownloadRedactedRequest, + projectId: string, + inline?: boolean, + observe?: 'body', + reportProgress?: boolean + ): Observable; + public downloadPreviewFiles( + body: BulkDownloadRedactedRequest, + projectId: string, + inline?: boolean, + observe?: 'response', + reportProgress?: boolean + ): Observable>; + public downloadPreviewFiles( + body: BulkDownloadRedactedRequest, + projectId: string, + inline?: boolean, + observe?: 'events', + reportProgress?: boolean + ): Observable>; + public downloadPreviewFiles( + body: BulkDownloadRedactedRequest, + projectId: string, + inline?: boolean, + observe: any = 'body', + reportProgress: boolean = false + ): Observable { + if (body === null || body === undefined) { + throw new Error('Required parameter body was null or undefined when calling downloadPreviewFiles.'); + } + + if (projectId === null || projectId === undefined) { + throw new Error('Required parameter projectId was null or undefined when calling downloadPreviewFiles.'); + } + + let queryParameters = new HttpParams({ encoder: new CustomHttpUrlEncodingCodec() }); + if (inline !== undefined && inline !== null) { + queryParameters = queryParameters.set('inline', inline); + } + + 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[] = ['*/*']; + 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('post', `${this.basePath}/download/bulk/preview/${encodeURIComponent(String(projectId))}`, { + responseType: 'blob', + body: body, + params: queryParameters, + withCredentials: this.configuration.withCredentials, + headers: headers, + observe: observe, + reportProgress: reportProgress + }); + } + /** * Returns a downloadable byte stream of the annotated file with the specified fileId * Use the optional \"inline\" request parameter to select, if this downloadAnnotated will be opened in the browser.