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

RED-4169 - Improved Upload / Overwrite file dialog

Browse Source
This commit is contained in:
Valentin Mihai 2022-06-09 13:55:01 +03:00
parent 78b1539a43
commit 9ba2477f56
8 changed files with 90 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
View File

@ -1,27 +1,48 @@
<section class="dialog">
<div class="dialog-header heading-l" translate="overwrite-files-dialog.title"></div>
<div
class="dialog-header heading-l"
[translate]="filename ? 'overwrite-files-dialog.file-title' : 'overwrite-files-dialog.archive-title'"
></div>
<div class="dialog-content">
<p [innerHTML]="'overwrite-files-dialog.question' | translate: { filename: filename }" class="mb-24"></p>
<p *ngIf="filename" [innerHTML]="'overwrite-files-dialog.file-question' | translate: { filename: filename }" class="mb-24"></p>
<p *ngIf="!filename" [innerHTML]="'overwrite-files-dialog.archive-question' | translate" class="mb-24"></p>
<form [formGroup]="form">
<iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
<div *ngIf="filename" class="iqser-input-group mt-0">
<mat-checkbox color="primary" formControlName="rememberChoice" name="primaryAttribute">
{{ 'overwrite-files-dialog.remember' | translate }}
</mat-checkbox>
</div>
</form>
</div>
<div class="dialog-actions">
<iqser-icon-button
(action)="selectOption(false)"
[disabled]="!form.valid"
[label]="'overwrite-files-dialog.options.current-files' | translate"
*ngIf="!filename"
(action)="selectOption()"
[disabled]="rememberChoice"
[label]="'overwrite-files-dialog.options.proceed' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<iqser-icon-button
(action)="selectOption(true)"
[disabled]="!form.valid"
[label]="'overwrite-files-dialog.options.all-files' | translate"
[type]="iconButtonTypes.dark"
></iqser-icon-button>
<ng-container *ngIf="filename">
<iqser-icon-button
*ngIf="filename"
(action)="selectOption()"
[disabled]="rememberChoice"
[label]="'overwrite-files-dialog.options.current-files' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<iqser-icon-button
*ngIf="filename"
(action)="selectOption(true)"
[label]="'overwrite-files-dialog.options.all-files' | translate"
[type]="iconButtonTypes.dark"
[boldText]="true"
></iqser-icon-button>
</ng-container>
<div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
</div>
</section>

13
apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
View File

@ -40,14 +40,23 @@ export class OverwriteFilesDialogComponent {
) {
this.form = this._formBuilder.group({
option: [this.options[0], Validators.required],
rememberChoice: [false],
});
}
get rememberChoice() {
return this.form.get('rememberChoice').value;
}
cancel() {
this.dialogRef.close();
}
selectOption(remember: boolean) {
this.dialogRef.close({ option: this.form.get('option').value.value, remember });
selectOption(applyToAllFiles: boolean = false) {
this.dialogRef.close({
option: this.form.get('option').value.value,
rememberChoice: this.rememberChoice,
applyToAllFiles,
});
}
}

25
apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
View File

@ -5,7 +5,7 @@ import { interval, Subject, Subscription } from 'rxjs';
import { ConfigService } from '@services/config.service';
import { TranslateService } from '@ngx-translate/core';
import { IFileUploadResult, OverwriteFileOption, OverwriteFileOptions } from '@red/domain';
import { isAcceptedFileType, isCsv } from '@utils/file-drop-utils';
import { isAcceptedFileType, isCsv, isZip } from '@utils/file-drop-utils';
import { ErrorMessageService, GenericService, HeadersConfiguration, RequiredParam, Validate } from '@iqser/common-ui';
import { FilesMapService } from '@services/files/files-map.service';
import { switchMap, tap, throttleTime } from 'rxjs/operators';
@ -70,18 +70,35 @@ export class FileUploadService extends GenericService<IFileUploadResult> impleme
const maxSizeMB = this._configService.values.MAX_FILE_SIZE_MB;
const maxSizeBytes = maxSizeMB * 1024 * 1024;
const dossierFiles = this._filesMapService.get(dossierId);
let option: OverwriteFileOption;
let option: OverwriteFileOption = localStorage.getItem('overwriteFileOption') as OverwriteFileOption;
for (let idx = 0; idx < files.length; ++idx) {
const file = files[idx];
let currentOption = option;
if (dossierFiles.find(pf => pf.filename === file.file.name)) {
if (isZip(file)) {
const res = await this._dialogService.openOverwriteFileDialog(null);
if (res.cancel) {
return;
}
if (res.option === OverwriteFileOptions.PARTIAL_OVERWRITE) {
file.keepManualRedactions = true;
}
if (res.option === OverwriteFileOptions.SKIP) {
delete file.keepManualRedactions;
}
} else if (dossierFiles.find(pf => pf.filename === file.file.name)) {
if (!option) {
const res = await this._dialogService.openOverwriteFileDialog(file.file.name);
if (res.cancel) {
return;
}
if (res.rememberChoice) {
localStorage.setItem('overwriteFileOption', res.option);
}
currentOption = res.option;
option = res.remember ? currentOption : undefined;
option = res.applyToAllFiles ? currentOption : undefined;
}
if (currentOption === OverwriteFileOptions.PARTIAL_OVERWRITE) {

4
apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts
View File

@ -14,7 +14,9 @@ const dialogConfig = {
export class UploadDownloadDialogService {
constructor(private readonly _dialog: MatDialog) {}
openOverwriteFileDialog(filename: string): Promise<{ option?: OverwriteFileOption; remember?: boolean; cancel?: boolean }> {
openOverwriteFileDialog(
filename: string,
): Promise<{ option?: OverwriteFileOption; rememberChoice?: boolean; applyToAllFiles?: boolean; cancel?: boolean }> {
const ref = this._dialog.open(OverwriteFilesDialogComponent, {
...dialogConfig,
data: filename,

17
apps/red-ui/src/app/utils/file-drop-utils.ts
View File

@ -13,6 +13,14 @@ const validDocumentMimeTypes = [
const validDocumentExtensions = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
export function isPdf(file: FileUploadModel): boolean {
return file.file.type?.toLowerCase() === 'application/pdf' || file.file.name.toLowerCase().endsWith('.pdf');
}
export function isZip(file: FileUploadModel): boolean {
return file.file.type?.toLowerCase() === 'application/zip' || file.file.name.toLowerCase().endsWith('.zip');
}
export function isCsv(file: FileUploadModel): boolean {
return file.file.type?.toLowerCase() === 'text/csv' || file.file.name.toLowerCase().endsWith('.csv');
}
@ -25,14 +33,7 @@ export function isDocument(file: FileUploadModel): boolean {
export type Files = FileList | File[];
export function isAcceptedFileType(file: FileUploadModel): boolean {
return (
file.file.type?.toLowerCase() === 'application/pdf' ||
file.file.name.toLowerCase().endsWith('.pdf') ||
file.file.type?.toLowerCase() === 'application/zip' ||
file.file.name.toLowerCase().endsWith('.zip') ||
isDocument(file) ||
isCsv(file)
);
return isPdf(file) || isZip(file) || isDocument(file) || isCsv(file);
}
export function convertFiles(files: FileList | File[], dossier: Dossier): FileUploadModel[] {

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

@ -690,7 +690,6 @@
},
"digital-signature-screen": {
"action": {
"certificate-not-valid-error": "",
"delete-error": "Die digitale Signatur konnte nicht entfernt werden, bitte versuchen Sie es erneut.",
"delete-success": "Die digitale Signatur wurde gelöscht. Geschwärzte Dateien werden nicht länger mit einer Signatur versehen!",
"remove": "",
@ -1689,6 +1688,10 @@
}
},
"overwrite-files-dialog": {
"archive-question": "",
"archive-title": "",
"file-question": "<b>{filename}</b> ist bereits vorhanden. Wie möchten Sie fortfahren?",
"file-title": "Das Dokument existiert bereits!",
"options": {
"all-files": "",
"cancel": "Alle Uploads abbrechen",
@ -1701,13 +1704,13 @@
"description": "",
"label": ""
},
"proceed": "",
"skip": {
"description": "",
"label": ""
}
},
"question": "<b>{filename}</b> ist bereits vorhanden. Wie möchten Sie fortfahren?",
"title": "Das Dokument existiert bereits!"
"remember": ""
},
"page": "Seite",
"page-rotation": {

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

@ -1688,8 +1688,12 @@
}
},
"overwrite-files-dialog": {
"archive-question": "Dossier is not empty, so files might overlap with the contents of the archive you are uploading. Choose how to proceed in case of duplicates:",
"archive-title": "Uploading a ZIP archive",
"file-question": "<b>{filename}</b> already exists. Choose how to proceed:",
"file-title": "File already exists!",
"options": {
"all-files": "Apply to all remaining files in current upload",
"all-files": "Apply to all files of current upload",
"cancel": "Cancel upload",
"current-files": "Apply to current file",
"full-overwrite": {
@ -1700,13 +1704,13 @@
"description": "Manual changes are kept only if the affected redactions are still at the same position in the file. Some redactions could be misplaced if the content of the file changed.",
"label": "Overwrite and keep manual changes"
},
"proceed": "Proceed",
"skip": {
"description": "The upload will be skipped and the existing file will not be replaced.",
"label": "Keep the existing file and do not overwrite"
}
},
"question": "<b>{filename}</b> already exists. Choose how to proceed:",
"title": "Document already exists!"
"remember": "Remember choice and don't ask me again"
},
"page": "Page {page} - {count} {count, plural, one{annotation} other{annotations}}",
"page-rotation": {

2
libs/common-ui

@ -1 +1 @@
Subproject commit 43a9067bf3c712316c78223a243ae98868e46932
Subproject commit 9c7f6f232929e0b680f442ec7f035b797a5b7132