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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
View File

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

37
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
View File

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

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
View File

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

14
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
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 { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain'; import { DossierAttributeConfigTypes, FileAttributeConfigTypes, IDossierAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; 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 { HttpErrorResponse } from '@angular/common/http';
import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations'; import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
@ -56,7 +56,7 @@ export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe impl
return false; return false;
} }
saveFileAttribute() { saveDossierAttribute() {
this._loadingService.start(); this._loadingService.start();
const attribute: IDossierAttributeConfig = { 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();
}
}
} }

6
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
View File

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

42
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts
View File

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

4
apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
View File

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

20
apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
View File

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

12
apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
View File

@ -1,7 +1,7 @@
<section class="dialog"> <section class="dialog">
<div [translate]="translations[colorKey]" class="dialog-header heading-l"></div> <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="dialog-content">
<div class="iqser-input-group required"> <div class="iqser-input-group required">
<label translate="edit-color-dialog.form.color"></label> <label translate="edit-color-dialog.form.color"></label>
@ -13,14 +13,14 @@
type="text" type="text"
/> />
<div <div
(colorPickerChange)="colorForm.get('color').setValue($event)" (colorPickerChange)="form.get('color').setValue($event)"
[colorPicker]="colorForm.get('color').value" [colorPicker]="form.get('color').value"
[cpOutputFormat]="'hex'" [cpOutputFormat]="'hex'"
[style.background]="colorForm.get('color').value" [style.background]="form.get('color').value"
class="input-icon" class="input-icon"
> >
<mat-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" svgIcon="red:color-picker"
></mat-icon> ></mat-icon>
</div> </div>
@ -28,7 +28,7 @@
</div> </div>
<div class="dialog-actions"> <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 }} {{ 'edit-color-dialog.save' | translate }}
</button> </button>
</div> </div>

15
apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
View File

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

4
apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.html
View File

@ -8,7 +8,7 @@
class="dialog-header heading-l" class="dialog-header heading-l"
></div> ></div>
<form (submit)="save()" [formGroup]="justificationForm"> <form (submit)="save()" [formGroup]="form">
<div class="dialog-content"> <div class="dialog-content">
<div class="iqser-input-group required w-400"> <div class="iqser-input-group required w-400">
<label translate="add-edit-justification.form.name"></label> <label translate="add-edit-justification.form.name"></label>
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div class="dialog-actions"> <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 }} {{ 'add-edit-justification.actions.save' | translate }}
</button> </button>

16
apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts
View File

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

2
apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -295,7 +295,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
} }
private _setSelectionMode(): void { 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; textTool.SELECTION_MODE = this._configService.values.SELECTION_MODE;
} }

3
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
View File

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

2
apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
View File

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

2
libs/common-ui

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