From fed8d963d759c27bdfa3e4c335faf83afda614cb Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 11:47:22 +0300
Subject: [PATCH] updated grid layout for dynamic columns

---
 .../src/app/models/file/file-status.wrapper.ts       |  5 ++++-
 .../dossier-overview-screen.component.html           |  8 +-------
 .../dossier-overview-screen.component.scss           |  8 ++++++--
 .../dossier-overview-screen.component.ts             | 12 +-----------
 apps/red-ui/src/assets/config/config.json            |  4 ++--
 libs/common-ui                                       |  2 +-
 6 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/apps/red-ui/src/app/models/file/file-status.wrapper.ts b/apps/red-ui/src/app/models/file/file-status.wrapper.ts
index 2d589be23..7fa0c93e6 100644
--- a/apps/red-ui/src/app/models/file/file-status.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/file-status.wrapper.ts
@@ -57,6 +57,9 @@ export class FileStatusWrapper implements FileStatus {
                 this.primaryAttribute = '-';
             }
         }
+        if (!this.fileAttributes || !this.fileAttributes.attributeIdToValue) {
+            this.fileAttributes = { attributeIdToValue: {} };
+        }
     }
 
     readonly excludedPagesCount = this.excludedPages?.length ?? 0;
@@ -67,7 +70,7 @@ export class FileStatusWrapper implements FileStatus {
     readonly hintsOnly = this.hasHints && !this.hasRedactions;
     readonly hasNone = !this.hasRedactions && !this.hasHints && !this.hasSuggestions;
 
-    readonly isUnassigned = !this.currentReviewer
+    readonly isUnassigned = !this.currentReviewer;
     readonly isError = this.status === FileStatus.StatusEnum.ERROR;
     readonly isProcessing = processingStatuses.includes(this.status);
     readonly isApproved = this.status === FileStatus.StatusEnum.APPROVED;
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 7e3293621..593c73192 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,13 +53,7 @@
 
             <redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
 
-            <cdk-virtual-scroll-viewport
-                #scrollViewport
-                [itemSize]="itemSize"
-                redactionHasScrollbar
-                (mouseenter)="updateGridColumns($event)"
-                (mouseleave)="updateGridColumns($event)"
-            >
+            <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" redactionHasScrollbar>
                 <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 b28ed76bb..446abc67b 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
@@ -1,6 +1,10 @@
 @import '../../../../../assets/styles/variables';
 @import '../../../../../assets/styles/red-mixins';
 
+:root {
+    --dynamic-columns: '';
+}
+
 .file-upload-input {
     display: none;
 }
@@ -17,7 +21,7 @@ iqser-table-column-name::ng-deep {
 
 cdk-virtual-scroll-viewport {
     ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px;
+        grid-template-columns: auto 3fr repeat(var(--dynamic-columns), 1fr) 2fr 1fr 2fr 1fr auto 11px;
 
         .table-item {
             > div {
@@ -67,7 +71,7 @@ cdk-virtual-scroll-viewport {
 
     &.has-scrollbar:hover {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto;
+            grid-template-columns: auto 3fr repeat(var(--dynamic-columns), 1fr) 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 fadcde307..91011e5ce 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
@@ -254,16 +254,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.collapsedDetails = !this.collapsedDetails;
     }
 
-    updateGridColumns($event = null) {
-        if (this.dynamicColumnsCount) {
-            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() {
         return this.fileAttributeConfigs.filter(config => config.displayedInFileList);
     }
@@ -280,7 +270,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         }
         this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
         this.dynamicColumnsCount = dynamicColumns.length;
-        this.updateGridColumns();
+        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--dynamic-columns', `${this.dynamicColumnsCount}`);
     }
 
     private _loadEntitiesFromState() {
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 4b001a0b1..7131c849a 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,6 +1,6 @@
 {
-  "OAUTH_URL": "https://red-staging.iqser.cloud/auth/realms/redaction",
-  "API_URL": "https://red-staging.iqser.cloud/redaction-gateway-v1",
+  "OAUTH_URL": "https://dom1.iqser.cloud/auth/realms/redaction",
+  "API_URL": "https://dom1.iqser.cloud/redaction-gateway-v1",
   "OAUTH_CLIENT_ID": "redaction",
   "BACKEND_APP_VERSION": "4.4.40",
   "FRONTEND_APP_VERSION": "1.1",
diff --git a/libs/common-ui b/libs/common-ui
index 4527494d7..bb51a9073 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 4527494d728d622bdd5d85aea72a7770fa1a8f14
+Subproject commit bb51a90738eaec334172a757c97744885ea474b5