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

Column preview improvements

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-18 01:28:03 +03:00
parent e27578ebe6
commit 35f2e2d526
4 changed files with 68 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -89,24 +89,25 @@
</div>
<div class="csv-header-pill-content" [class.search-open]="isSearchOpen">
<div
class="csv-header-pill"
class="csv-header-pill-wrapper"
*ngFor="let field of filteredFields"
(mouseenter)="hoveredColumn = field.csvColumn"
(mouseleave)="hoveredColumn = undefined"
(mouseenter)="setHoveredColumn(field.csvColumn)"
(mouseleave)="setHoveredColumn()"
(click)="toggleFieldActive(field)"
[class.selected]="isActive(field)"
>
<div class="name">
{{ field.csvColumn }}
</div>
<div class="secondary">
<div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
<div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
<div class="csv-header-pill" [class.selected]="isActive(field)">
<div class="name">
{{ field.csvColumn }}
</div>
<div class="secondary">
<div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
<div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="center" [class.collapsed]="!previewExpanded">
<div class="center" [class.collapsed]="!previewExpanded" (mouseenter)="keepPreview = true" (mouseleave)="keepPreview = false; setHoveredColumn()">
<div class="csv-part-header">
<div class="all-caps-label">
{{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
@ -117,12 +118,13 @@
></redaction-circle-button>
</div>
<div class="csv-part-content" [class.hidden]="!previewExpanded">
<div class="no-hovered-column" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
<ng-container *ngFor="let row of parseResult?.data || []">
<div *ngIf="row[hoveredColumn]">
{{ row[hoveredColumn] }}
</div>
</ng-container>
<div class="no-column-data" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
<div class="no-column-data" *ngIf="hoveredColumn && !columnSample.length">
{{ 'file-attributes-csv-import.no-sample-data-for' | translate: { column: hoveredColumn } }}
</div>
<div *ngFor="let row of columnSample">
{{ row }}
</div>
</div>
</div>
<div class="content-container">
@ -245,8 +247,8 @@
<div
class="table-item"
*cdkVirtualFor="let field of activeFields"
(mouseenter)="hoveredColumn = field.csvColumn"
(mouseleave)="hoveredColumn = undefined"
(mouseenter)="setHoveredColumn(field.csvColumn)"
(mouseleave)="setHoveredColumn()"
>
<div class="pr-0" (click)="toggleFieldSelected(field.csvColumn)">
<div *ngIf="!isFieldSelected(field.csvColumn)" class="select-oval"></div>

55
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -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;
}
}
}

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

@ -43,6 +43,8 @@ export class FileAttributesCsvImportDialogComponent {
public filteredFields: Field[];
public previewExpanded = true;
public filteredKeyOptions: Observable<string[]>;
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);
}
}

1
apps/red-ui/src/assets/i18n/en.json
View File

@ -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..."
},