From 3288419fe487c4a227a4ac18cfaa4ad20e7c46f5 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 11 Nov 2021 13:07:40 +0200
Subject: [PATCH] fix attribute selection

---
 .../file-attributes-csv-import-dialog.component.html     | 2 +-
 .../file-attributes-csv-import-dialog.component.ts       | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index ed7b2cde6..05fe95637 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -102,7 +102,7 @@
                         (click)="toggleFieldActive(field)"
                         (mouseenter)="setHoveredColumn(field.csvColumn)"
                         (mouseleave)="setHoveredColumn()"
-                        *ngFor="let field of fields"
+                        *ngFor="let field of fields; trackBy: trackBy"
                         class="csv-header-pill-wrapper"
                     >
                         <div [class.selected]="isActive(field)" class="csv-header-pill">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 349cd8c55..f47e7323e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -4,7 +4,7 @@ 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, ListingComponent, TableColumnConfig, Toaster } from '@iqser/common-ui';
+import { DefaultListingServices, ListingComponent, TableColumnConfig, Toaster, trackBy } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileAttributeConfig, FileAttributeConfigTypes, IField, IFileAttributesConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@@ -28,6 +28,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
     columnSample = [];
     initialParseConfig: { delimiter?: string; encoding?: string } = {};
     readonly tableHeaderLabel = '';
+    readonly trackBy = trackBy();
 
     constructor(
         private readonly _toaster: Toaster,
@@ -54,7 +55,6 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
     }
 
     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
@@ -143,13 +143,12 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
         if (!this.isActive(field)) {
             this.activeFields = [...this.activeFields, { ...field, searchKey: field.csvColumn }];
         } else {
-            this.activeFields.splice(this.activeFields.indexOf(field), 1);
-            this.activeFields = [...this.activeFields];
+            this.activeFields = this.activeFields.filter(f => f.id !== field.id);
         }
     }
 
     activateAll() {
-        this.activeFields = [...this.allEntities.map(item => ({ ...item, searchKey: item.csvColumn }))];
+        this.activeFields = this.allEntities.map(item => ({ ...item, searchKey: item.csvColumn }));
     }
 
     deactivateAll() {