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

WIP on master

Browse Source 
RED-9201 - UI for Component Mapping Tables
This commit is contained in:
Valentin Mihai 2024-08-13 21:04:47 +03:00
parent bc430a796f
commit 538f36aebc
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.html
View File

@ -30,7 +30,7 @@
<div <div
class="row" class="row"
[matTooltip]="'add-edit-component-mapping.disabled-file-options' | translate" [matTooltip]="'add-edit-component-mapping.disabled-file-options' | translate"
[matTooltipDisabled]="!disabledFileOptions" [matTooltipDisabled]="!form.get('encoding')?.disabled"
[matTooltipPosition]="'above'" [matTooltipPosition]="'above'"
> >
<div class="iqser-input-group required w-150"> <div class="iqser-input-group required w-150">
@ -40,13 +40,12 @@
formControlName="delimiter" formControlName="delimiter"
name="delimiter" name="delimiter"
type="text" type="text"
[class.disabled-file-options]="disabledFileOptions"
/> />
</div> </div>
<div class="iqser-input-group required w-150"> <div class="iqser-input-group required w-150">
<label translate="add-edit-component-mapping.form.encoding-type"></label> <label translate="add-edit-component-mapping.form.encoding-type"></label>
<mat-form-field [class.disabled-file-options]="disabledFileOptions"> <mat-form-field>
<mat-select formControlName="encoding"> <mat-select formControlName="encoding">
<mat-option *ngFor="let type of encodingTypeOptions" [value]="type"> <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
{{ translations[type] | translate }} {{ translations[type] | translate }}

5
apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.scss
View File

@ -18,11 +18,6 @@
font-size: 15px; font-size: 15px;
} }
} }
.disabled-file-options {
opacity: 0.5;
pointer-events: none;
}
} }
.row:last-child { .row:last-child {

14
apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
View File

@ -52,7 +52,6 @@ export class AddEditComponentMappingDialogComponent
{ {
protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes); protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
protected readonly translations = fileAttributeEncodingTypesTranslations; protected readonly translations = fileAttributeEncodingTypesTranslations;
#fileChanged = false;
activeFile: File; activeFile: File;
form!: UntypedFormGroup; form!: UntypedFormGroup;
@ -73,13 +72,14 @@ export class AddEditComponentMappingDialogComponent
const file = new Blob([fileContent.body as Blob], { type: 'text/csv' }); const file = new Blob([fileContent.body as Blob], { type: 'text/csv' });
this.form.get('file').setValue(file); this.form.get('file').setValue(file);
this.initialFormValue = this.form.getRawValue(); this.initialFormValue = this.form.getRawValue();
this.#disableEncodingAndDelimiter();
} }
} }
changeFile(file: File) { changeFile(file: File) {
this.#fileChanged = true;
this.form.get('file').setValue(file); this.form.get('file').setValue(file);
this.form.get('fileName').setValue(file?.name); this.form.get('fileName').setValue(file?.name);
this.#enableEncodingAndDelimiter();
} }
save() { save() {
@ -96,7 +96,13 @@ export class AddEditComponentMappingDialogComponent
}); });
} }
get disabledFileOptions() { #disableEncodingAndDelimiter() {
return this.initialFormValue?.file && !this.#fileChanged; this.form.get('encoding').disable();
this.form.get('delimiter').disable();
}
#enableEncodingAndDelimiter() {
this.form.get('encoding').enable();
this.form.get('delimiter').enable();
} }
} }