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

RED-5330: disable save button if no template or type selected

Browse Source
This commit is contained in:
Dan Percic 2022-12-12 17:30:21 +02:00
parent 6c3f25d75e
commit 9a40ee3599
6 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
View File

@ -51,10 +51,9 @@ export class FileDownloadBtnComponent implements OnChanges {
return;
}
const filesIds = this.files.map(f => f.id);
await this._fileDownloadService.downloadFiles({
dossierId: this.dossier.id,
fileIds: filesIds,
fileIds: this.files.map(f => f.id),
...result,
});
this._toaster.info(_('download-status.queued'));

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

@ -49,6 +49,10 @@ export class ExpandableFileActionsComponent implements OnChanges {
private readonly _dialog: MatDialog,
) {}
get overlappingElement() {
return this.helpModeKey === 'document_features_in_editor' ? OverlappingElements.USER_MENU : undefined;
}
ngOnChanges(changes: SimpleChanges) {
if (changes.actions || changes.maxWidth || changes.minWidth) {
let count = 0;
@ -91,6 +95,11 @@ export class ExpandableFileActionsComponent implements OnChanges {
}
}
onButtonClick(button: Action, $event: MouseEvent) {
button.action($event);
this.matMenu.closeMenu();
}
private async _downloadFiles($event: MouseEvent, files: File[], dossier: Dossier) {
$event.stopPropagation();
const ref = this._dialog.open<DownloadDialogComponent, DownloadDialogData, DownloadDialogResult>(DownloadDialogComponent, {
@ -102,21 +111,11 @@ export class ExpandableFileActionsComponent implements OnChanges {
return;
}
const filesIds = files.map(f => f.id);
await this._fileDownloadService.downloadFiles({
dossierId: dossier.id,
fileIds: filesIds,
fileIds: files.map(f => f.id),
...result,
});
this._toaster.info(_('download-status.queued'));
}
onButtonClick(button: Action, $event: MouseEvent) {
button.action($event);
this.matMenu.closeMenu();
}
get overlappingElement() {
return this.helpModeKey === 'document_features_in_editor' ? OverlappingElements.USER_MENU : undefined;
}
}

2
apps/red-ui/src/app/modules/shared/dialogs/download-dialog/download-dialog.component.html
View File

@ -46,7 +46,7 @@
</div>
</div>
<div class="dialog-actions">
<button color="primary" (click)="save()" mat-flat-button type="submit">
<button (click)="save()" [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
{{ 'download-dialog.actions.save' | translate }}
</button>
</div>

55
apps/red-ui/src/app/modules/shared/dialogs/download-dialog/download-dialog.component.ts
View File

@ -2,9 +2,10 @@ import { Component, Inject, OnInit } from '@angular/core';
import { Dossier, DownloadFileType, IReportTemplate } from '@red/domain';
import { downloadTypesForDownloadTranslations } from '@translations/download-types-translations';
import { ReportTemplateService } from '@services/report-template.service';
import { FormControl, FormGroup, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { AbstractControl, FormBuilder } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DefaultColorsService } from '@services/entity-services/default-colors.service';
import { List } from '@iqser/common-ui';
export interface DownloadDialogData {
readonly dossier: Dossier;
@ -12,15 +13,9 @@ export interface DownloadDialogData {
}
export interface DownloadDialogResult {
readonly downloadFileTypes: DownloadFileType[];
readonly reportTemplateIds: string[];
readonly redactionPreviewColor: string;
}
interface DownloadDialogForm {
redactionPreviewColor: FormControl<string>;
reportTemplateIds: FormControl<string[]>;
downloadFileTypes: FormControl<DownloadFileType[]>;
downloadFileTypes: List<DownloadFileType>;
reportTemplateIds: List;
redactionPreviewColor: string;
}
@Component({
@ -29,7 +24,7 @@ interface DownloadDialogForm {
styleUrls: ['./download-dialog.component.scss'],
})
export class DownloadDialogComponent implements OnInit {
downloadTypes: { key: DownloadFileType; label: string }[] = ['ORIGINAL', 'PREVIEW', 'DELTA_PREVIEW', 'REDACTED'].map(
readonly downloadTypes: { key: DownloadFileType; label: string }[] = ['ORIGINAL', 'PREVIEW', 'DELTA_PREVIEW', 'REDACTED'].map(
(type: DownloadFileType) => ({
key: type,
label: downloadTypesForDownloadTranslations[type],
@ -38,7 +33,15 @@ export class DownloadDialogComponent implements OnInit {
availableReportTypes: IReportTemplate[] = [];
form: FormGroup<DownloadDialogForm>;
readonly form = this._getForm();
constructor(
private readonly _defaultColorsService: DefaultColorsService,
private readonly _reportTemplateController: ReportTemplateService,
private readonly _formBuilder: FormBuilder,
private readonly _dialogRef: MatDialogRef<DownloadDialogComponent, DownloadDialogResult>,
@Inject(MAT_DIALOG_DATA) readonly data: DownloadDialogData,
) {}
get reportTypesLength() {
return this.form.controls.reportTemplateIds?.value?.length || 0;
@ -52,8 +55,6 @@ export class DownloadDialogComponent implements OnInit {
const dossierTemplateId = this.data.dossier.dossierTemplateId;
this.availableReportTypes = (await this._reportTemplateController.getAvailableReportTemplates(dossierTemplateId)) || [];
this.form = this._getForm();
}
reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
@ -72,7 +73,14 @@ export class DownloadDialogComponent implements OnInit {
this._dialogRef.close();
}
private _getForm(): UntypedFormGroup {
private _hasReportTemplateOrDownloadType(control: AbstractControl) {
const atLeastAReportSelected = control.get('reportTemplateIds')?.value.length > 0;
const atLeastATypeSelected = control.get('downloadFileTypes')?.value.length > 0;
return atLeastATypeSelected || atLeastAReportSelected ? null : { reportTemplateIds: true, downloadFileTypes: true };
}
private _getForm() {
const previewColor = this._defaultColorsService.getColor(this.data.dossier.dossierTemplateId, 'previewColor');
return this._formBuilder.group(
{
@ -81,19 +89,14 @@ export class DownloadDialogComponent implements OnInit {
redactionPreviewColor: [previewColor],
},
{
validators: control =>
control.value.reportTemplateIds?.length > 0 || control.value.downloadFileTypes?.length > 0
? null
: { downloadPackage: true },
validators: [control => this._hasReportTemplateOrDownloadType(control), control => this._isHexColor(control)],
},
);
}
constructor(
private readonly _defaultColorsService: DefaultColorsService,
private readonly _reportTemplateController: ReportTemplateService,
private readonly _formBuilder: UntypedFormBuilder,
private readonly _dialogRef: MatDialogRef<DownloadDialogComponent, DownloadDialogResult>,
@Inject(MAT_DIALOG_DATA) readonly data: DownloadDialogData,
) {}
private _isHexColor(control: AbstractControl) {
const color = control.get('redactionPreviewColor')?.value;
const isHexColor = /^#[0-9A-F]{6}$/i.test(color);
return isHexColor ? null : { redactionPreviewColor: true };
}
}

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

@ -1023,7 +1023,7 @@
},
"form": {
"redaction-preview-color": "Redaction preview color",
"redaction-preview-color-placeholder": ""
"redaction-preview-color-placeholder": "#000000"
},
"header": "Download options",
"unapproved-files-warning": "This download contains unapproved file(s)"

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

@ -1023,7 +1023,7 @@
},
"form": {
"redaction-preview-color": "Redaction preview color",
"redaction-preview-color-placeholder": ""
"redaction-preview-color-placeholder": "#000000"
},
"header": "Download options",
"unapproved-files-warning": "This download contains unapproved file(s)"