updated add/edit dialogs to submit the form when press enter

This commit is contained in:
Valentin 2021-11-01 12:35:16 +02:00
parent 96ea96b54f
commit dee6bf77f4
16 changed files with 96 additions and 95 deletions

View File

@ -3,7 +3,7 @@
{{ dialogHeader }}
</div>
<form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group mb-14">
<label translate="add-edit-dictionary.form.technical-name"></label>
@ -47,10 +47,10 @@
type="text"
/>
<div
(colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
[colorPicker]="dictionaryForm.get('hexColor').value"
(colorPickerChange)="form.get('hexColor').setValue($event)"
[colorPicker]="form.get('hexColor').value"
[cpOutputFormat]="'hex'"
[style.background]="dictionaryForm.get('hexColor').value"
[style.background]="form.get('hexColor').value"
class="input-icon"
>
<mat-icon *ngIf="hasColor" svgIcon="red:color-picker"></mat-icon>
@ -95,7 +95,7 @@
</div>
<div class="dialog-actions">
<button [disabled]="dictionaryForm.invalid || !changed" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'add-edit-dictionary.save' | translate }}
</button>
</div>

View File

@ -2,7 +2,7 @@ import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { Toaster } from '@iqser/common-ui';
import { BaseDialogComponent, Toaster } from '@iqser/common-ui';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { AppStateService } from '@state/app-state.service';
@ -15,8 +15,8 @@ import { Dictionary, IDictionary } from '@red/domain';
templateUrl: './add-edit-dictionary-dialog.component.html',
styleUrls: ['./add-edit-dictionary-dialog.component.scss'],
})
export class AddEditDictionaryDialogComponent {
dictionaryForm: FormGroup;
export class AddEditDictionaryDialogComponent extends BaseDialogComponent {
form: FormGroup;
readonly dictionary: Dictionary;
technicalName = '';
private readonly _dossierTemplateId: string;
@ -31,9 +31,10 @@ export class AddEditDictionaryDialogComponent {
@Inject(MAT_DIALOG_DATA)
private readonly _data: { dictionary: Dictionary; dossierTemplateId: string },
) {
super();
this.dictionary = _data.dictionary;
this._dossierTemplateId = _data.dossierTemplateId;
this.dictionaryForm = _formBuilder.group({
this.form = _formBuilder.group({
label: [this.dictionary?.label, [Validators.required, Validators.minLength(3)]],
description: [this.dictionary?.description],
rank: [this.dictionary?.rank, Validators.required],
@ -42,7 +43,7 @@ export class AddEditDictionaryDialogComponent {
addToDictionaryAction: [!!this.dictionary?.addToDictionaryAction],
caseSensitive: [this.dictCaseSensitive],
});
this.dictionaryForm.get('label').valueChanges.subscribe(() => {
this.form.get('label').valueChanges.subscribe(() => {
this._updateTechnicalName();
});
}
@ -55,7 +56,7 @@ export class AddEditDictionaryDialogComponent {
}
get hasColor(): boolean {
const hexColorValue = this.dictionaryForm.get('hexColor').value;
const hexColorValue = this.form.get('hexColor').value;
return !hexColorValue || hexColorValue?.length === 0;
}
@ -68,12 +69,12 @@ export class AddEditDictionaryDialogComponent {
return true;
}
for (const key of Object.keys(this.dictionaryForm.getRawValue())) {
for (const key of Object.keys(this.form.getRawValue())) {
if (key === 'caseSensitive') {
if (this.dictCaseSensitive !== this.dictionaryForm.get(key).value) {
if (this.dictCaseSensitive !== this.form.get(key).value) {
return true;
}
} else if (this.dictionary[key] !== this.dictionaryForm.get(key).value) {
} else if (this.dictionary[key] !== this.form.get(key).value) {
return true;
}
}
@ -81,7 +82,7 @@ export class AddEditDictionaryDialogComponent {
return false;
}
saveDictionary(): void {
save(): void {
const dictionary = this._formToObject();
let observable: Observable<unknown>;
@ -108,7 +109,7 @@ export class AddEditDictionaryDialogComponent {
}
private _updateTechnicalName() {
const displayName = this.dictionaryForm.get('label').value.trim();
const displayName = this.form.get('label').value.trim();
const existingTechnicalNames = Object.keys(this._appStateService.dictionaryData[this._dossierTemplateId]);
const baseTechnicalName: string = toKebabCase(displayName);
let technicalName = baseTechnicalName;
@ -122,13 +123,13 @@ export class AddEditDictionaryDialogComponent {
private _formToObject(): IDictionary {
return {
type: this.dictionary?.type || this.technicalName,
label: this.dictionaryForm.get('label').value,
caseInsensitive: !this.dictionaryForm.get('caseSensitive').value,
description: this.dictionaryForm.get('description').value,
hexColor: this.dictionaryForm.get('hexColor').value,
hint: this.dictionaryForm.get('hint').value,
rank: this.dictionaryForm.get('rank').value,
addToDictionaryAction: this.dictionaryForm.get('addToDictionaryAction').value,
label: this.form.get('label').value,
caseInsensitive: !this.form.get('caseSensitive').value,
description: this.form.get('description').value,
hexColor: this.form.get('hexColor').value,
hint: this.form.get('hint').value,
rank: this.form.get('rank').value,
addToDictionaryAction: this.form.get('addToDictionaryAction').value,
dossierTemplateId: this._dossierTemplateId,
};
}

View File

@ -8,7 +8,7 @@
class="dialog-header heading-l"
></div>
<form (submit)="saveFileAttribute()" [formGroup]="dossierAttributeForm">
<form (submit)="saveDossierAttribute()" [formGroup]="dossierAttributeForm">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label translate="add-edit-dossier-attribute.form.label"></label>

View File

@ -1,8 +1,8 @@
import { Component, Inject, OnDestroy } from '@angular/core';
import { Component, HostListener, Inject, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AutoUnsubscribe, LoadingService, Toaster } from '@iqser/common-ui';
import { AutoUnsubscribe, IqserEventTarget, LoadingService, Toaster } from '@iqser/common-ui';
import { HttpErrorResponse } from '@angular/common/http';
import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
@ -56,7 +56,7 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl
return false;
}
saveFileAttribute() {
saveDossierAttribute() {
this._loadingService.start();
const attribute: IDossierAttributeConfig = {
@ -75,4 +75,12 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl
},
);
}
@HostListener('window:keydown.Enter', ['$event'])
onEnter(event: KeyboardEvent): void {
const node = (event.target as IqserEventTarget).localName;
if (this.dossierAttributeForm.valid && this.changed && node !== 'textarea') {
this.saveDossierAttribute();
}
}
}

View File

@ -8,7 +8,7 @@
class="dialog-header heading-l"
></div>
<form (submit)="saveDossierTemplate()" [formGroup]="dossierTemplateForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label translate="add-edit-dossier-template.form.name"></label>
@ -77,7 +77,7 @@
'download-type.label'
| translate
: {
length: dossierTemplateForm.controls['downloadFileTypes'].value.length
length: form.controls['downloadFileTypes'].value.length
}
"
[options]="downloadTypes"
@ -87,7 +87,7 @@
</div>
<div class="dialog-actions">
<button [disabled]="dossierTemplateForm.invalid || !changed" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'add-edit-dossier-template.save' | translate }}
</button>
</div>

View File

@ -7,7 +7,7 @@ import { Moment } from 'moment';
import { applyIntervalConstraints } from '@utils/date-inputs-utils';
import { downloadTypesTranslations } from '../../../../translations/download-types-translations';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { CONFLICT_ERROR_CODE, Toaster } from '@iqser/common-ui';
import { BaseDialogComponent, CONFLICT_ERROR_CODE, Toaster } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DownloadFileType, IDossierTemplate } from '@red/domain';
@ -15,8 +15,8 @@ import { DownloadFileType, IDossierTemplate } from '@red/domain';
templateUrl: './add-edit-dossier-template-dialog.component.html',
styleUrls: ['./add-edit-dossier-template-dialog.component.scss'],
})
export class AddEditDossierTemplateDialogComponent {
dossierTemplateForm: FormGroup;
export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent {
form: FormGroup;
hasValidFrom: boolean;
hasValidTo: boolean;
downloadTypesEnum: DownloadFileType[] = ['ORIGINAL', 'PREVIEW', 'REDACTED'];
@ -36,7 +36,8 @@ export class AddEditDossierTemplateDialogComponent {
public dialogRef: MatDialogRef<AddEditDossierTemplateDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly dossierTemplate: IDossierTemplate,
) {
this.dossierTemplateForm = this._formBuilder.group({
super();
this.form = this._formBuilder.group({
name: [this.dossierTemplate?.name, Validators.required],
description: [this.dossierTemplate?.description],
validFrom: [
@ -52,10 +53,10 @@ export class AddEditDossierTemplateDialogComponent {
this.hasValidFrom = !!this.dossierTemplate?.validFrom;
this.hasValidTo = !!this.dossierTemplate?.validTo;
this._previousValidFrom = this.dossierTemplateForm.get('validFrom').value;
this._previousValidTo = this.dossierTemplateForm.get('validTo').value;
this._previousValidFrom = this.form.get('validFrom').value;
this._previousValidTo = this.form.get('validTo').value;
this.dossierTemplateForm.valueChanges.subscribe(value => {
this.form.valueChanges.subscribe(value => {
this._applyValidityIntervalConstraints(value);
});
}
@ -65,8 +66,8 @@ export class AddEditDossierTemplateDialogComponent {
return true;
}
for (const key of Object.keys(this.dossierTemplateForm.getRawValue())) {
const formValue = this.dossierTemplateForm.get(key).value;
for (const key of Object.keys(this.form.getRawValue())) {
const formValue = this.form.get(key).value;
const objectValue = this.dossierTemplate[key];
if (key === 'validFrom') {
if (this.hasValidFrom !== !!objectValue || (this.hasValidFrom && !moment(objectValue).isSame(moment(formValue)))) {
@ -93,13 +94,13 @@ export class AddEditDossierTemplateDialogComponent {
return false;
}
async saveDossierTemplate() {
async save() {
try {
const dossierTemplate = {
dossierTemplateId: this.dossierTemplate?.dossierTemplateId,
...this.dossierTemplateForm.getRawValue(),
validFrom: this.hasValidFrom ? this.dossierTemplateForm.get('validFrom').value : null,
validTo: this.hasValidTo ? this.dossierTemplateForm.get('validTo').value : null,
...this.form.getRawValue(),
validFrom: this.hasValidFrom ? this.form.get('validFrom').value : null,
validTo: this.hasValidTo ? this.form.get('validTo').value : null,
};
await this._dossierTemplatesService.createOrUpdate(dossierTemplate).toPromise();
await this._dossierTemplatesService.loadAll().toPromise();
@ -115,21 +116,12 @@ export class AddEditDossierTemplateDialogComponent {
}
private _applyValidityIntervalConstraints(value): boolean {
if (
applyIntervalConstraints(
value,
this._previousValidFrom,
this._previousValidTo,
this.dossierTemplateForm,
'validFrom',
'validTo',
)
) {
if (applyIntervalConstraints(value, this._previousValidFrom, this._previousValidTo, this.form, 'validFrom', 'validTo')) {
return true;
}
this._previousValidFrom = this.dossierTemplateForm.get('validFrom').value;
this._previousValidTo = this.dossierTemplateForm.get('validTo').value;
this._previousValidFrom = this.form.get('validFrom').value;
this._previousValidTo = this.form.get('validTo').value;
return false;
}

View File

@ -8,7 +8,7 @@
class="dialog-header heading-l"
></div>
<form (submit)="saveFileAttribute()" [formGroup]="fileAttributeForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label translate="add-edit-file-attribute.form.name"></label>
@ -66,7 +66,7 @@
</div>
</div>
<div class="dialog-actions">
<button [disabled]="fileAttributeForm.invalid || !changed" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'add-edit-file-attribute.save' | translate }}
</button>
</div>

View File

@ -4,14 +4,15 @@ import { AppStateService } from '@state/app-state.service';
import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations';
import { BaseDialogComponent } from '@iqser/common-ui';
@Component({
selector: 'redaction-add-edit-file-attribute-dialog',
templateUrl: './add-edit-file-attribute-dialog.component.html',
styleUrls: ['./add-edit-file-attribute-dialog.component.scss'],
})
export class AddEditFileAttributeDialogComponent {
fileAttributeForm: FormGroup;
export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
form: FormGroup;
fileAttribute: IFileAttributeConfig;
dossierTemplateId: string;
readonly typeOptions = Object.keys(FileAttributeConfigTypes);
@ -24,10 +25,11 @@ export class AddEditFileAttributeDialogComponent {
@Inject(MAT_DIALOG_DATA)
public data: { fileAttribute: IFileAttributeConfig; dossierTemplateId: string },
) {
super();
this.fileAttribute = data.fileAttribute;
this.dossierTemplateId = data.dossierTemplateId;
this.fileAttributeForm = this._formBuilder.group({
this.form = this._formBuilder.group({
label: [this.fileAttribute?.label, Validators.required],
csvColumnHeader: [this.fileAttribute?.csvColumnHeader, Validators.required],
type: [this.fileAttribute?.type || FileAttributeConfigTypes.TEXT, Validators.required],
@ -43,12 +45,12 @@ export class AddEditFileAttributeDialogComponent {
return true;
}
for (const key of Object.keys(this.fileAttributeForm.getRawValue())) {
for (const key of Object.keys(this.form.getRawValue())) {
if (key === 'readonly') {
if (this.fileAttribute.editable === this.fileAttributeForm.get(key).value) {
if (this.fileAttribute.editable === this.form.get(key).value) {
return true;
}
} else if (this.fileAttribute[key] !== this.fileAttributeForm.get(key).value) {
} else if (this.fileAttribute[key] !== this.form.get(key).value) {
return true;
}
}
@ -56,11 +58,11 @@ export class AddEditFileAttributeDialogComponent {
return false;
}
saveFileAttribute() {
save() {
const fileAttribute: IFileAttributeConfig = {
id: this.fileAttribute?.id,
editable: !this.fileAttributeForm.get('readonly').value,
...this.fileAttributeForm.getRawValue(),
editable: !this.form.get('readonly').value,
...this.form.getRawValue(),
};
this.dialogRef.close(fileAttribute);
}

View File

@ -1,7 +1,7 @@
<section class="dialog">
<div [translate]="translations[colorKey]" class="dialog-header heading-l"></div>
<form (submit)="saveColors()" [formGroup]="colorForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required">
<label translate="edit-color-dialog.form.color"></label>
@ -13,14 +13,14 @@
type="text"
/>
<div
(colorPickerChange)="colorForm.get('color').setValue($event)"
[colorPicker]="colorForm.get('color').value"
(colorPickerChange)="form.get('color').setValue($event)"
[colorPicker]="form.get('color').value"
[cpOutputFormat]="'hex'"
[style.background]="colorForm.get('color').value"
[style.background]="form.get('color').value"
class="input-icon"
>
<mat-icon
*ngIf="!colorForm.get('color').value || colorForm.get('color').value?.length === 0"
*ngIf="!form.get('color').value || form.get('color').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>
@ -28,7 +28,7 @@
</div>
<div class="dialog-actions">
<button [disabled]="colorForm.invalid || !changed" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'edit-color-dialog.save' | translate }}
</button>
</div>

View File

@ -1,7 +1,7 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DefaultColorType, IColors } from '@red/domain';
import { Toaster } from '@iqser/common-ui';
import { BaseDialogComponent, Toaster } from '@iqser/common-ui';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { defaultColorsTranslations } from '../../translations/default-colors-translations';
@ -13,10 +13,10 @@ import { DictionaryService } from '@shared/services/dictionary.service';
templateUrl: './edit-color-dialog.component.html',
styleUrls: ['./edit-color-dialog.component.scss'],
})
export class EditColorDialogComponent {
export class EditColorDialogComponent extends BaseDialogComponent {
readonly colors: IColors;
readonly colorKey: DefaultColorType;
colorForm: FormGroup;
form: FormGroup;
translations = defaultColorsTranslations;
private readonly _initialColor: string;
private readonly _dossierTemplateId: string;
@ -30,24 +30,25 @@ export class EditColorDialogComponent {
@Inject(MAT_DIALOG_DATA)
private readonly _data: { colors: IColors; colorKey: DefaultColorType; dossierTemplateId: string },
) {
super();
this.colors = _data.colors;
this.colorKey = _data.colorKey;
this._dossierTemplateId = _data.dossierTemplateId;
this._initialColor = _data.colors[this.colorKey];
this.colorForm = this._formBuilder.group({
this.form = this._formBuilder.group({
color: [this.colors[this.colorKey], [Validators.required, Validators.minLength(7)]],
});
}
get changed(): boolean {
return this.colorForm.get('color').value !== this._initialColor;
return this.form.get('color').value !== this._initialColor;
}
async saveColors() {
async save() {
const colors = {
...this.colors,
[this.colorKey]: this.colorForm.get('color').value,
[this.colorKey]: this.form.get('color').value,
};
try {

View File

@ -8,7 +8,7 @@
class="dialog-header heading-l"
></div>
<form (submit)="save()" [formGroup]="justificationForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-400">
<label translate="add-edit-justification.form.name"></label>
@ -43,7 +43,7 @@
</div>
</div>
<div class="dialog-actions">
<button [disabled]="justificationForm.invalid || !changed" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'add-edit-justification.actions.save' | translate }}
</button>

View File

@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Justification } from '@red/domain';
import { JustificationsService } from '@services/entity-services/justifications.service';
import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
import { LoadingService } from '@iqser/common-ui';
import { BaseDialogComponent, LoadingService } from '@iqser/common-ui';
@Component({
selector: 'redaction-add-edit-justification-dialog',
@ -12,8 +12,8 @@ import { LoadingService } from '@iqser/common-ui';
styleUrls: ['./add-edit-justification-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddEditJustificationDialogComponent {
justificationForm: FormGroup;
export class AddEditJustificationDialogComponent extends BaseDialogComponent {
form: FormGroup;
constructor(
private readonly _formBuilder: FormBuilder,
@ -23,7 +23,8 @@ export class AddEditJustificationDialogComponent {
public dialogRef: MatDialogRef<AddEditJustificationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public justification: Justification,
) {
this.justificationForm = this._formBuilder.group({
super();
this.form = this._formBuilder.group({
name: [{ value: this.justification?.name, disabled: !!this.justification }, Validators.required],
reason: [this.justification?.reason, Validators.required],
description: [this.justification?.description, Validators.required],
@ -33,10 +34,7 @@ export class AddEditJustificationDialogComponent {
get changed(): boolean {
return (
!this.justification ||
Object.keys(this.justificationForm.getRawValue()).reduce(
(prev, key) => prev || this.justification[key] !== this.justificationForm.get(key).value,
false,
)
Object.keys(this.form.getRawValue()).reduce((prev, key) => prev || this.justification[key] !== this.form.get(key).value, false)
);
}
@ -44,7 +42,7 @@ export class AddEditJustificationDialogComponent {
const dossierTemplateId = this._dossierTemplatesService.activeDossierTemplateId;
this._loadingService.start();
await this._justificationService.createOrUpdate(this.justificationForm.getRawValue(), dossierTemplateId).toPromise();
await this._justificationService.createOrUpdate(this.form.getRawValue(), dossierTemplateId).toPromise();
await this._justificationService.loadAll(dossierTemplateId).toPromise();
this._loadingService.stop();
this.dialogRef.close(true);

View File

@ -295,7 +295,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
}
private _setSelectionMode(): void {
const textTool = (<unknown>this.instance.Core.Tools.TextTool) as TextTool;
const textTool = (<unknown> this.instance.Core.Tools.TextTool) as TextTool;
textTool.SELECTION_MODE = this._configService.values.SELECTION_MODE;
}

View File

@ -38,8 +38,7 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
})
export class DossiersListingScreenComponent
extends ListingComponent<Dossier>
implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
{
implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach {
readonly currentUser = this._userService.currentUser;
readonly tableColumnConfigs = this._configService.tableConfig;
readonly tableHeaderLabel = _('dossier-listing.table-header.title');

View File

@ -45,7 +45,7 @@ export class NeedsWorkBadgeComponent {
}
get hasAnnotationComments(): boolean {
return this.needsWorkInput instanceof File && (<any>this.needsWorkInput).hasAnnotationComments;
return this.needsWorkInput instanceof File && (<any> this.needsWorkInput).hasAnnotationComments;
}
reanalysisRequired() {

@ -1 +1 @@
Subproject commit cb1b89952070299fda81ebcfe923a972bd6316c0
Subproject commit 8cff591c16a76f71acf65a8c33a7d6734d84ee4a