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

formBuilder in separate method

Browse Source
This commit is contained in:
Edi Cziszter 2021-11-15 13:10:21 +02:00
parent a38f2c7393
commit 35385db948
7 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.ts
View File

@ -25,15 +25,18 @@ export class ConfirmDeleteUsersDialogComponent {
@Inject(MAT_DIALOG_DATA) readonly userIds: List<string>,
readonly dialogRef: MatDialogRef<ConfirmDeleteUsersDialogComponent>,
) {
this.dossiersCount = this._dossiersService.all.filter(dw =>
this.userIds.reduce((prev, userId) => prev || dw.memberIds.includes(userId), false),
).length;
this.dossiersCount = this._dossierCount;
}
get valid() {
return this.checkboxes[0].value && this.checkboxes[1].value;
}
private get _dossierCount(): number {
return this._dossiersService.all.filter(dw => this.userIds.reduce((prev, userId) => prev || dw.memberIds.includes(userId), false))
.length;
}
async deleteUser() {
if (this.valid) {
this._loadingService.start();

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

@ -1,5 +1,5 @@
<section class="dialog">
<div [translate]="translations[colorKey]" class="dialog-header heading-l"></div>
<div [translate]="translations[data.colorKey]" class="dialog-header heading-l"></div>
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">

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

@ -9,13 +9,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { DictionaryService } from '@shared/services/dictionary.service';
@Component({
selector: 'redaction-edit-color-dialog',
templateUrl: './edit-color-dialog.component.html',
styleUrls: ['./edit-color-dialog.component.scss'],
})
export class EditColorDialogComponent extends BaseDialogComponent {
readonly colors: IColors;
readonly colorKey: DefaultColorType;
form: FormGroup;
translations = defaultColorsTranslations;
private readonly _initialColor: string;
@ -28,33 +25,35 @@ export class EditColorDialogComponent extends BaseDialogComponent {
private readonly _translateService: TranslateService,
private readonly _dialogRef: MatDialogRef<EditColorDialogComponent>,
@Inject(MAT_DIALOG_DATA)
private readonly _data: { colors: IColors; colorKey: DefaultColorType; dossierTemplateId: string },
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._dossierTemplateId = data.dossierTemplateId;
this._initialColor = data.colors[data.colorKey];
this.form = this._formBuilder.group({
color: [this.colors[this.colorKey], [Validators.required, Validators.minLength(7)]],
});
this.form = this._getForm();
}
get changed(): boolean {
return this.form.get('color').value !== this._initialColor;
}
private _getForm(): FormGroup {
return this._formBuilder.group({
color: [this.data.colors[this.data.colorKey], [Validators.required, Validators.minLength(7)]],
});
}
async save() {
const colors = {
...this.colors,
[this.colorKey]: this.form.get('color').value,
...this.data.colors,
[this.data.colorKey]: this.form.get('color').value,
};
try {
await this._dictionaryService.setColors(colors, this._dossierTemplateId).toPromise();
this._dialogRef.close(true);
const color = this._translateService.instant(defaultColorsTranslations[this.colorKey]);
const color = this._translateService.instant(defaultColorsTranslations[this.data.colorKey]);
this._toaster.info(_('edit-color-dialog.success'), { params: { color: color } });
} catch (e) {
this._toaster.error(_('edit-color-dialog.error'));

4
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -10,7 +10,7 @@
</div>
</div>
<div class="right">
<form (submit)="changedParseConfig && readFile()" [formGroup]="baseConfigForm">
<form (submit)="changedParseConfig && readFile()" [formGroup]="form">
<div class="iqser-input-group required w-250">
<mat-form-field floatLabel="always">
<mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
@ -154,7 +154,7 @@
</div>
<div class="dialog-actions">
<button (click)="save()" [disabled]="changedParseConfig || baseConfigForm.invalid" color="primary" mat-flat-button>
<button (click)="save()" [disabled]="changedParseConfig || form.invalid" color="primary" mat-flat-button>
{{ 'file-attributes-csv-import.save.label' | translate }}
</button>

40
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
View File

@ -20,7 +20,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
parseResult: { data: any[]; errors: any[]; meta: any; fields: IField[] };
hoveredColumn: string;
activeFields: IField[] = [];
readonly baseConfigForm: FormGroup;
readonly form: FormGroup;
isSearchOpen = false;
previewExpanded = true;
filteredKeyOptions: Observable<string[]>;
@ -44,32 +44,34 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
},
) {
super(_injector);
this.baseConfigForm = this._formBuilder.group({
filenameMappingColumnHeaderName: ['', [Validators.required, this._autocompleteStringValidator()]],
delimiter: [undefined, Validators.required],
encoding: ['UTF-8', Validators.required],
});
this.form = this._getForm();
this.readFile();
}
get changedParseConfig(): boolean {
return (
this.initialParseConfig.delimiter !== this.baseConfigForm.get('delimiter').value ||
this.initialParseConfig.encoding !== this.baseConfigForm.get('encoding').value
this.initialParseConfig.delimiter !== this.form.get('delimiter').value ||
this.initialParseConfig.encoding !== this.form.get('encoding').value
);
}
private _getForm(): FormGroup {
return this._formBuilder.group({
filenameMappingColumnHeaderName: ['', [Validators.required, this._autocompleteStringValidator()]],
delimiter: [undefined, Validators.required],
encoding: ['UTF-8', Validators.required],
});
}
readFile() {
const reader = new FileReader();
reader.addEventListener('load', event => {
const parsedCsv = <any>event.target.result;
this.parseResult = Papa.parse(parsedCsv, {
header: true,
delimiter: this.baseConfigForm.get('delimiter').value,
delimiter: this.form.get('delimiter').value,
});
this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
this.form.patchValue({ delimiter: this.parseResult.meta.delimiter });
// Filter duplicate columns
if (this.parseResult?.data?.length) {
@ -91,8 +93,8 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
}
}
this.filteredKeyOptions = this.baseConfigForm.get('filenameMappingColumnHeaderName').valueChanges.pipe(
startWith(this.baseConfigForm.get('filenameMappingColumnHeaderName').value as string),
this.filteredKeyOptions = this.form.get('filenameMappingColumnHeaderName').valueChanges.pipe(
startWith(this.form.get('filenameMappingColumnHeaderName').value as string),
map((value: string) =>
this.allEntities
.filter(field => field.csvColumn.toLowerCase().indexOf(value.toLowerCase()) !== -1)
@ -104,17 +106,17 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
this.data.existingConfiguration &&
this.allEntities.find(entity => entity.csvColumn === this.data.existingConfiguration.filenameMappingColumnHeaderName)
) {
this.baseConfigForm.patchValue({
this.form.patchValue({
filenameMappingColumnHeaderName: this.data.existingConfiguration.filenameMappingColumnHeaderName,
});
}
this.initialParseConfig = {
delimiter: this.baseConfigForm.get('delimiter').value,
encoding: this.baseConfigForm.get('encoding').value,
delimiter: this.form.get('delimiter').value,
encoding: this.form.get('encoding').value,
};
});
reader.readAsText(this.data.csv, this.baseConfigForm.get('encoding').value);
reader.readAsText(this.data.csv, this.form.get('encoding').value);
}
getSample(csvColumn: string) {
@ -163,7 +165,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
}
const fileAttributes: IFileAttributesConfig = {
...this.baseConfigForm.getRawValue(),
...this.form.getRawValue(),
fileAttributeConfigs: [
...fileAttributeConfigs.filter(a => !this.allEntities.find(entity => entity.csvColumn === a.csvColumnHeader)),
...this.activeFields.map(field => ({

4
apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
View File

@ -1,7 +1,7 @@
<section class="dialog">
<div class="dialog-header heading-l" translate="smtp-auth-config.title"></div>
<form (submit)="save()" [formGroup]="authForm">
<form (submit)="save()" [formGroup]="form">
<div class="dialog-content">
<div class="iqser-input-group required w-300">
<label translate="smtp-auth-config.form.username"></label>
@ -20,7 +20,7 @@
</div>
<div class="dialog-actions">
<button [disabled]="authForm.invalid" color="primary" mat-flat-button type="submit">
<button [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
{{ 'smtp-auth-config.actions.save' | translate }}
</button>
<div class="all-caps-label cancel" mat-dialog-close translate="smtp-auth-config.actions.cancel"></div>

14
apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts
View File

@ -10,7 +10,7 @@ import { ISmtpConfiguration } from '@red/domain';
styleUrls: ['./smtp-auth-dialog.component.scss'],
})
export class SmtpAuthDialogComponent {
authForm: FormGroup;
form: FormGroup;
constructor(
private readonly _formBuilder: FormBuilder,
@ -18,13 +18,17 @@ export class SmtpAuthDialogComponent {
public dialogRef: MatDialogRef<SmtpAuthDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ISmtpConfiguration,
) {
this.authForm = this._formBuilder.group({
user: [data?.user || this._userService.currentUser.email, [Validators.required]],
password: [data?.password, Validators.required],
this.form = this._getForm();
}
private _getForm(): FormGroup {
return this._formBuilder.group({
user: [this.data?.user || this._userService.currentUser.email, [Validators.required]],
password: [this.data?.password, Validators.required],
});
}
save() {
this.dialogRef.close(this.authForm.getRawValue());
this.dialogRef.close(this.form.getRawValue());
}
}