fix RED-2671

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts

@@ -1,9 +1,8 @@
 import { Component, EventEmitter, forwardRef, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { Field } from '../file-attributes-csv-import-dialog.component';
 import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { fileAttributeTypesTranslations } from '../../../translations/file-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FileAttributeConfigTypes } from '@red/domain';
+import { FileAttributeConfigTypes, IField } from '@red/domain';
 
 @Component({
     selector: 'redaction-active-fields-listing',
@@ -11,11 +10,11 @@ import { FileAttributeConfigTypes } from '@red/domain';
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => ActiveFieldsListingComponent) }],
 })
-export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges {
+export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<Field>[] = [
+    readonly tableColumnConfigs: TableColumnConfig<IField>[] = [
         {
             label: _('file-attributes-csv-import.table-col-names.name'),
             class: 'name',
@@ -40,10 +39,10 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         },
     ];
     readonly typeOptions = Object.keys(FileAttributeConfigTypes);
-    @Input() entities: Field[];
-    @Output() readonly entitiesChange = new EventEmitter<Field[]>();
+    @Input() entities: IField[];
+    @Output() readonly entitiesChange = new EventEmitter<IField[]>();
     @Output() readonly setHoveredColumn = new EventEmitter<string>();
-    @Output() readonly toggleFieldActive = new EventEmitter<Field>();
+    @Output() readonly toggleFieldActive = new EventEmitter<IField>();
 
     constructor(protected readonly _injector: Injector) {
         super(_injector);
@@ -68,7 +67,7 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         }
     }
 
-    togglePrimary(field: Field) {
+    togglePrimary(field: IField) {
         if (field.primaryAttribute) {
             field.primaryAttribute = false;
             return;
@@ -80,6 +79,6 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         field.primaryAttribute = true;
     }
 
-    itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn);
+    itemMouseEnterFn = (field: IField) => this.setHoveredColumn.emit(field.csvColumn);
     itemMouseLeaveFn = () => this.setHoveredColumn.emit();
 }

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

@@ -1,33 +1,25 @@
-import { Component, Inject, Injector } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as Papa from 'papaparse';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
-import { DefaultListingServices, IListable, ListingComponent, TableColumnConfig, Toaster } from '@iqser/common-ui';
+import { DefaultListingServices, ListingComponent, TableColumnConfig, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FileAttributeConfig, FileAttributeConfigType, FileAttributeConfigTypes, IFileAttributesConfig } from '@red/domain';
+import { FileAttributeConfig, FileAttributeConfigTypes, IField, IFileAttributesConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 
-export interface Field extends IListable {
-    id: string;
-    csvColumn: string;
-    name: string;
-    type: FileAttributeConfigType;
-    readonly: boolean;
-    primaryAttribute: boolean;
-}
-
 @Component({
     templateUrl: './file-attributes-csv-import-dialog.component.html',
     styleUrls: ['./file-attributes-csv-import-dialog.component.scss'],
     providers: [...DefaultListingServices],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FileAttributesCsvImportDialogComponent extends ListingComponent<Field> {
-    readonly tableColumnConfigs: TableColumnConfig<Field>[] = [];
-    parseResult: { data: any[]; errors: any[]; meta: any; fields: Field[] };
+export class FileAttributesCsvImportDialogComponent extends ListingComponent<IField> {
+    readonly tableColumnConfigs: TableColumnConfig<IField>[] = [];
+    parseResult: { data: any[]; errors: any[]; meta: any; fields: IField[] };
     hoveredColumn: string;
-    activeFields: Field[] = [];
+    activeFields: IField[] = [];
     readonly baseConfigForm: FormGroup;
     isSearchOpen = false;
     previewExpanded = true;
@@ -62,6 +54,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
     }
 
     get changedParseConfig(): boolean {
+        console.log(this.baseConfigForm.invalid);
         return (
             this.initialParseConfig.delimiter !== this.baseConfigForm.get('delimiter').value ||
             this.initialParseConfig.encoding !== this.baseConfigForm.get('encoding').value
@@ -87,7 +80,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
             this.activeFields = [];
 
             for (const entity of this.allEntities) {
-                const existing = this.data.existingConfiguration.fileAttributeConfigs.find(a => a.csvColumnHeader === entity.csvColumn);
+                const existing = this.data.existingConfiguration.fileAttributeConfigs?.find(a => a.csvColumnHeader === entity.csvColumn);
                 if (existing) {
                     entity.id = existing.id;
                     entity.name = existing.label;
@@ -142,11 +135,11 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
         return 0;
     }
 
-    isActive(field: Field): boolean {
+    isActive(field: IField): boolean {
         return !!this.activeFields.find(f => f.id === field.id);
     }
 
-    toggleFieldActive(field: Field) {
+    toggleFieldActive(field: IField) {
         if (!this.isActive(field)) {
             this.activeFields = [...this.activeFields, { ...field, searchKey: field.csvColumn }];
         } else {
@@ -219,7 +212,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
         };
     }
 
-    private _buildAttribute(csvColumn: string): Field {
+    private _buildAttribute(csvColumn: string): IField {
         const sample = this.getSample(csvColumn);
         const isNumber = sample && !isNaN(sample);
         return {

libs/red-domain/src/lib/file-attributes/field.ts

@@ -0,0 +1,11 @@
+import { IListable } from '@iqser/common-ui';
+import { FileAttributeConfigType } from '@red/domain';
+
+export interface IField extends IListable {
+    id: string;
+    csvColumn: string;
+    name: string;
+    type: FileAttributeConfigType;
+    readonly: boolean;
+    primaryAttribute: boolean;
+}

libs/red-domain/src/lib/file-attributes/index.ts

@@ -2,3 +2,4 @@ export * from './file-attribute-config';
 export * from './file-attribute-config.model';
 export * from './file-attributes';
 export * from './file-attributes-config';
+export * from './field';