diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 447df33f7..b875c93a7 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -92,7 +92,7 @@
height: calc(100% - 51px);
font-size: 12px;
- .no-hovered-column {
+ .no-column-data {
height: 100%;
margin: 0 10px;
display: flex;
@@ -104,7 +104,7 @@
font-weight: 500;
}
- > *:not(.no-hovered-column) {
+ > *:not(.no-column-data) {
height: 30px;
border-bottom: 1px solid $separator;
display: flex;
@@ -121,44 +121,47 @@
.csv-header-pill-content {
overflow: auto;
- padding: 4px 10px;
+ padding: 7px 0;
background: $grey-2;
- height: calc(100% - 58px);
+ height: calc(100% - 64px);
@include no-scroll-bar;
&.search-open {
height: calc(100% - 58px - 51px);
}
- .csv-header-pill {
- min-height: 32px;
- margin: 6px auto;
- border-radius: 8px;
- padding: 10px;
- background: $white;
- cursor: pointer;
- display: flex;
- flex-direction: column;
+ .csv-header-pill-wrapper {
+ padding: 3px 10px;
- .secondary {
+ .csv-header-pill {
+ min-height: 32px;
+ border-radius: 8px;
+ padding: 10px;
+ background: $white;
+ cursor: pointer;
display: flex;
- justify-content: space-between;
- margin-top: 2px;
+ flex-direction: column;
- .entry-count {
- white-space: nowrap;
- margin-right: 10px;
+ .secondary {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2px;
+
+ .entry-count {
+ white-space: nowrap;
+ margin-right: 10px;
+ }
+
+ .sample {
+ @include line-clamp(1);
+ }
}
- .sample {
- @include line-clamp(1);
+ &.selected {
+ background-color: $primary;
+ color: $white;
}
}
-
- &.selected {
- background-color: $primary;
- color: $white;
- }
}
}
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 60f282035..45a7afd1c 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
@@ -43,6 +43,8 @@ export class FileAttributesCsvImportDialogComponent {
public filteredFields: Field[];
public previewExpanded = true;
public filteredKeyOptions: Observable
;
+ public keepPreview = false;
+ public columnSample = [];
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
@@ -223,4 +225,19 @@ export class FileAttributesCsvImportDialogComponent {
this.dialogRef.close(true);
}
+
+ public setHoveredColumn(column?: string) {
+ setTimeout(() => {
+ if (this.keepPreview && !column) {
+ return;
+ }
+ this.hoveredColumn = column;
+
+ if (!column) {
+ this.columnSample = [];
+ } else {
+ this.columnSample = this.parseResult.data.filter((row) => !!row[column]).map((row) => row[column]);
+ }
+ }, 0);
+ }
}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index fb7999a45..ce12aacd8 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1179,6 +1179,7 @@
"csv-column": "CSV Column",
"csv-column-preview": "CSV Column Preview",
"no-hovered-column": "Preview CSV column by hovering the entry.",
+ "no-sample-data-for": "No sample data for {{column}}.",
"search": {
"placeholder": "Search by column name..."
},