From 2a2e028b4433cf52956926aa9fab3367147d3b12 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.scss    |  4 ++--
 .../dossier-overview-screen.component.ts      | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

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 f49ef8642..5019caa4d 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
@@ -122,9 +122,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         private readonly _dossierAttributesService: DossierAttributesService,
         private readonly _renderer: Renderer2,
         private readonly _elementRef: ElementRef
-    ) // private readonly _renderer: Renderer2,
-    // private readonly _elementRef: ElementRef,
-    {
+    ) {
         super(_injector);
         this._loadEntitiesFromState();
 
@@ -260,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() {