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

RED-4508: fix supportCsvMapping toggle

Browse Source
This commit is contained in:
Dan Percic 2022-07-06 22:07:29 +03:00
parent d71e05d74c
commit 8b864b3520
3 changed files with 68 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
View File

@ -8,7 +8,7 @@
'file-attributes-configurations.form.support-csv-mapping' | translate
}}</mat-slide-toggle>
</div>
<ng-container *ngIf="form.value.supportCsvMapping">
<ng-container *ngIf="form.get('supportCsvMapping').value">
<div class="iqser-input-group required w-250">
<label translate="file-attributes-configurations.form.key-column"></label>
<input
@ -18,6 +18,7 @@
type="text"
/>
</div>
<div class="iqser-input-group required w-110">
<label translate="file-attributes-configurations.form.delimiter"></label>
<input
@ -27,6 +28,7 @@
type="text"
/>
</div>
<div class="iqser-input-group w-150 required">
<label translate="file-attributes-configurations.form.encoding-type"></label>
<mat-select formControlName="encodingType">
@ -37,14 +39,15 @@
</div>
</ng-container>
</div>
<div class="dialog-actions">
<button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button>
{{ 'file-attributes-configurations.save' | translate }}
</button>
<div class="all-caps-label cancel" translate="file-attributes-configurations.cancel"></div>
<div (click)="close()" class="all-caps-label cancel" translate="file-attributes-configurations.cancel"></div>
</div>
</form>
<iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
<iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>

56
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts
View File

@ -1,12 +1,10 @@
import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, Injector, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { FileAttributeEncodingTypes, IFileAttributesConfig } from '@red/domain';
import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
import { BaseDialogComponent, Toaster } from '@iqser/common-ui';
import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
import { firstValueFrom } from 'rxjs';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@Component({
@ -14,10 +12,10 @@ import { FileAttributesService } from '@services/entity-services/file-attributes
styleUrls: ['./file-attributes-configurations-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileAttributesConfigurationsDialogComponent extends BaseDialogComponent {
export class FileAttributesConfigurationsDialogComponent extends BaseDialogComponent implements OnInit {
readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
readonly translations = fileAttributeEncodingTypesTranslations;
private readonly _configuration: IFileAttributesConfig = this._data.config;
readonly #configuration = this._data.config;
constructor(
private readonly _formBuilder: UntypedFormBuilder,
@ -26,10 +24,10 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
private readonly _toaster: Toaster,
protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<FileAttributesConfigurationsDialogComponent>,
@Inject(MAT_DIALOG_DATA) private _data: { config: IFileAttributesConfig; dossierTemplateId: string },
@Inject(MAT_DIALOG_DATA) private readonly _data: { config: IFileAttributesConfig; dossierTemplateId: string },
) {
super(_injector, _dialogRef, true);
this.form = this._getForm();
this.form = this.#getForm();
this.initialFormValue = this.form.getRawValue();
}
@ -37,33 +35,41 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
if (!this.changed) {
return true;
}
if (!this.form.get('supportCsvMapping').value) {
return false;
}
return !this.valid;
}
async save() {
this._configuration.filenameMappingColumnHeaderName = this.form.get('keyColumn').value;
this._configuration.delimiter = this.form.get('delimiter').value;
this._configuration.encoding = this.form.get('encodingType').value;
try {
await firstValueFrom(this._fileAttributesService.setFileAttributeConfig(this._configuration, this._data.dossierTemplateId));
this._toaster.success(_('file-attributes-configurations.update.success'));
} catch (e) {
this._toaster.error(_('file-attributes-configurations.update.error'));
}
this._dialogRef.close();
save() {
this._dialogRef.close(this.#getConfiguration());
}
private _getForm(): UntypedFormGroup {
#getConfiguration() {
const supportCsvMapping = this.form.get('supportCsvMapping').value;
if (supportCsvMapping) {
return {
...this.#configuration,
filenameMappingColumnHeaderName: this.form.get('keyColumn').value,
delimiter: this.form.get('delimiter').value,
encoding: this.form.get('encodingType').value,
};
}
return {
...this.#configuration,
filenameMappingColumnHeaderName: '',
};
}
#getForm(): UntypedFormGroup {
return this._formBuilder.group({
supportCsvMapping: [!!this._configuration.filenameMappingColumnHeaderName],
keyColumn: [this._configuration.filenameMappingColumnHeaderName || '', [Validators.required]],
delimiter: [this._configuration.delimiter || '', [Validators.required]],
encodingType: [this._configuration.encoding || FileAttributeEncodingTypes['UTF-8'], [Validators.required]],
supportCsvMapping: [!!this.#configuration.filenameMappingColumnHeaderName],
keyColumn: [this.#configuration.filenameMappingColumnHeaderName || '', [Validators.required]],
delimiter: [this.#configuration.delimiter || '', [Validators.required]],
encodingType: [this.#configuration.encoding || FileAttributeEncodingTypes['UTF-8'], [Validators.required]],
});
}
}

44
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
View File

@ -59,7 +59,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
},
];
@ViewChild('impactedTemplates') private readonly _impactedTemplatesRef: TemplateRef<unknown>;
private _existingConfiguration: IFileAttributesConfig;
#existingConfiguration: IFileAttributesConfig;
@ViewChild('fileInput') private _fileInput: ElementRef;
readonly #dossierTemplateId: string;
@ -87,7 +87,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
}
async ngOnInit() {
await this._loadData();
await this.#loadData();
}
openAddEditAttributeDialog($event: MouseEvent, fileAttribute?: IFileAttributeConfig) {
@ -98,7 +98,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
numberOfFilterableAttrs: this._numberOfFilterableAttrs,
};
this._dialogService.openDialog('addEditFileAttribute', $event, data, (newValue: IFileAttributeConfig) => {
this._loadingService.loadWhile(this._createNewFileAttributeAndRefreshView(newValue));
this._loadingService.loadWhile(this.#createNewFileAttributeAndRefreshView(newValue));
});
}
@ -117,7 +117,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
const ids = attributes.map(a => a.id);
await firstValueFrom(this._fileAttributesService.deleteFileAttributes(ids, this.#dossierTemplateId));
await firstValueFrom(this._dossierTemplatesService.refreshDossierTemplate(this.#dossierTemplateId));
await this._loadData();
await this.#loadData();
},
);
}
@ -132,21 +132,39 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
{
csv,
dossierTemplateId: this.#dossierTemplateId,
existingConfiguration: this._existingConfiguration,
existingConfiguration: this.#existingConfiguration,
},
async () => this._loadData(),
async () => this.#loadData(),
);
}
openConfigurationsDialog($event: MouseEvent) {
this._dialogService.openDialog('fileAttributesConfigurations', $event, {
config: this._existingConfiguration,
const ref = this._dialogService.openDialog('fileAttributesConfigurations', $event, {
config: this.#existingConfiguration,
dossierTemplateId: this.#dossierTemplateId,
});
ref.afterClosed().subscribe(async (configuration: IFileAttributesConfig) => {
if (configuration) {
await this.#setConfigAndLoadData(configuration);
}
});
}
private async _createNewFileAttributeAndRefreshView(newValue: IFileAttributeConfig): Promise<void> {
await firstValueFrom(this._fileAttributesService.setFileAttributesConfig(newValue, this.#dossierTemplateId)).catch(error => {
async #setConfigAndLoadData(configuration: IFileAttributesConfig) {
const request = this._fileAttributesService.setFileAttributeConfig(configuration, this.#dossierTemplateId);
try {
await firstValueFrom(request);
this._toaster.success(_('file-attributes-configurations.update.success'));
await this.#loadData();
} catch (e) {
this._toaster.error(_('file-attributes-configurations.update.error'));
}
}
async #createNewFileAttributeAndRefreshView(newValue: IFileAttributeConfig): Promise<void> {
const request = this._fileAttributesService.setFileAttributesConfig(newValue, this.#dossierTemplateId);
await firstValueFrom(request).catch(error => {
if (error.status === HttpStatusCode.Conflict) {
this._toaster.error(_('file-attributes-listing.error.conflict'));
} else {
@ -155,15 +173,15 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
this._loadingService.stop();
});
await firstValueFrom(this._dossierTemplatesService.refreshDossierTemplate(this.#dossierTemplateId));
await this._loadData();
await this.#loadData();
}
private async _loadData() {
async #loadData() {
this._loadingService.start();
try {
const response = await firstValueFrom(this._fileAttributesService.loadFileAttributesConfig(this.#dossierTemplateId));
this._existingConfiguration = response;
this.#existingConfiguration = response;
const fileAttributeConfig = response?.fileAttributeConfigs.map(item => new FileAttributeConfig(item)) || [];
this.entitiesService.setEntities(fileAttributeConfig);
} catch (e) {}