Collapse column preview

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

@@ -99,13 +99,17 @@
                     </div>
                 </div>
             </div>
-            <div class="center">
+            <div class="center" [class.collapsed]="!previewExpanded">
                 <div class="csv-part-header">
                     <div class="all-caps-label">
-                        {{ 'file-attributes-csv-import.csv-column' | translate }}
+                        {{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
                     </div>
+                    <redaction-circle-button
+                        [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
+                        (click)="previewExpanded = !previewExpanded"
+                    ></redaction-circle-button>
                 </div>
-                <div class="csv-part-content">
+                <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]">

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

@@ -170,10 +170,34 @@
         min-width: 150px;
         background: $grey-2;
         border-right: 1px solid $separator;
+
+        &:not(.collapsed) redaction-circle-button {
+            margin-right: -8px;
+        }
+
+        &.collapsed {
+            width: 50px;
+            min-width: 50px;
+
+            > .csv-part-header {
+                height: 100%;
+                border-bottom: none;
+                align-items: center;
+                flex-direction: column-reverse;
+                justify-content: flex-end;
+                padding-top: 8px;
+
+                > .all-caps-label {
+                    transform: rotate(90deg) translateX(50%);
+                    white-space: nowrap;
+                    margin-top: 10px;
+                }
+            }
+        }
     }
 
     > .content-container {
-        width: calc(100% - 527px);
+        width: 100%;
 
         redaction-table-col-name::ng-deep {
             > div {
@@ -211,7 +235,7 @@
             height: calc(100% - 80px);
 
             ::ng-deep.cdk-virtual-scroll-content-wrapper {
-                grid-template-columns: auto 2fr 150px auto auto auto 11px;
+                grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto 11px;
 
                 .table-item {
                     > div {
@@ -253,7 +277,7 @@
 
             &.has-scrollbar:hover {
                 ::ng-deep.cdk-virtual-scroll-content-wrapper {
-                    grid-template-columns: auto 2fr 150px auto auto auto;
+                    grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto;
                 }
             }
         }

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

@@ -39,6 +39,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
     public isSearchOpen = false;
     public searchForm: FormGroup;
     public filteredFields: Field[];
+    public previewExpanded = true;
 
     @ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
 

apps/red-ui/src/assets/i18n/en.json

@@ -1159,6 +1159,7 @@
         "available": "{{value}} available",
         "selected": "{{value}} selected",
         "csv-column": "CSV Column",
+        "csv-column-preview": "CSV Column Preview",
         "no-hovered-column": "Preview CSV column by hovering the entry.",
         "search": {
             "placeholder": "Search by column name..."