From 8c1fc0624fe0bcebac69433c53f76d59bce1c1c9 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Mon, 23 Aug 2021 10:38:27 +0300
Subject: [PATCH] updated grid columns based on dynamic columns

---
 .../dossier-overview-screen.component.html    |  8 +++-
 .../dossier-overview-screen.component.scss    |  4 +-
 .../dossier-overview-screen.component.ts      | 37 ++++++++++++++-----
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index 593c73192..7e3293621 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -53,7 +53,13 @@
 
             <redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
 
-            <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" redactionHasScrollbar>
+            <cdk-virtual-scroll-viewport
+                #scrollViewport
+                [itemSize]="itemSize"
+                redactionHasScrollbar
+                (mouseenter)="updateGridColumns($event)"
+                (mouseleave)="updateGridColumns($event)"
+            >
                 <div
                     *cdkVirtualFor="let fileStatus of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
                     [class.disabled]="fileStatus.excluded"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
index 857affaff..b28ed76bb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
@@ -17,7 +17,7 @@ iqser-table-column-name::ng-deep {
 
 cdk-virtual-scroll-viewport {
     ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px;
+        grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px;
 
         .table-item {
             > div {
@@ -67,7 +67,7 @@ cdk-virtual-scroll-viewport {
 
     &.has-scrollbar:hover {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 3fr 1fr 2fr 1fr 2fr 1fr auto;
+            grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto;
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 04fced365..0444437c2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -1,4 +1,15 @@
-import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import {
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    HostListener,
+    Injector,
+    OnDestroy,
+    OnInit,
+    Renderer2,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import { Toaster } from '@services/toaster.service';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
@@ -82,6 +93,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     dossierAttributes: DossierAttributeWithValue[] = [];
     fileAttributeConfigs: FileAttributeConfig[];
     protected readonly _primaryKey = 'filename';
+    dynamicColumnsCount = 0;
 
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
@@ -107,10 +119,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         private readonly _statusOverlayService: StatusOverlayService,
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _fileDropOverlayService: FileDropOverlayService,
-        private readonly _dossierAttributesService: DossierAttributesService
-    ) // private readonly _renderer: Renderer2,
-    // private readonly _elementRef: ElementRef,
-    {
+        private readonly _dossierAttributesService: DossierAttributesService,
+        private readonly _renderer: Renderer2,
+        private readonly _elementRef: ElementRef
+    ) {
         super(_injector);
         this._loadEntitiesFromState();
 
@@ -246,15 +258,20 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
         for (const config of this.displayedInFileListAttributes) {
             if (config.displayedInFileList) {
-                dynamicColumns.push({ label: config.label });
+                dynamicColumns.push({ label: config.label, notTranslatable: true });
             }
         }
         this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
+        this.dynamicColumnsCount = dynamicColumns.length;
+        this.updateGridColumns();
+    }
 
-        // const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
-        // this._renderer.setStyle(element, 'grid-template-columns', 'auto 3fr 1fr 2fr 1fr 2fr 1fr auto 11px');
-        // this._renderer.addClass(element, 'has-scrollbar:hover')
-        // console.log('element: ', element);
+    updateGridColumns($event = null) {
+        const element = this._elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper');
+        const gridTemplateColumns = `auto 3fr repeat(${this.dynamicColumnsCount}, 1fr) 2fr 1fr 2fr 1fr auto ${
+            $event?.type === 'mouseenter' ? '' : '11px'
+        }`;
+        this._renderer.setStyle(element, 'grid-template-columns', gridTemplateColumns);
     }
 
     get displayedInFileListAttributes() {