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 6aae70c94..443b5c7c3 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 @@ -89,24 +89,25 @@
-
- {{ field.csvColumn }} -
-
-
{{ getEntries(field.csvColumn) }} entries
-
Sample: {{ getSample(field.csvColumn) }}
+
+
+ {{ field.csvColumn }} +
+
+
{{ getEntries(field.csvColumn) }} entries
+
Sample: {{ getSample(field.csvColumn) }}
+
-
+
{{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }} @@ -117,12 +118,13 @@ >
-
- -
- {{ row[hoveredColumn] }} -
-
+
+
+ {{ 'file-attributes-csv-import.no-sample-data-for' | translate: { column: hoveredColumn } }} +
+
+ {{ row }} +
@@ -245,8 +247,8 @@
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..." },