From 7094ece351b699f2d2ef635b6c813831d6ee1ff2 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 16:20:54 +0300
Subject: [PATCH] fixed grid

---
 .../dossier-overview-screen.component.html       |  8 ++++----
 .../dossier-overview-screen.component.scss       |  6 +++---
 .../dossier-overview-screen.component.ts         | 16 ++++++++++++----
 apps/red-ui/src/assets/config/config.json        |  4 ++--
 4 files changed, 21 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..b0103f5c6 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
@@ -105,16 +105,16 @@
                         </div>
                     </div>
 
-                    <div *ngFor="let config of displayedInFileListAttributes">
-                        {{ fileStatus.fileAttributes.attributeIdToValue[config.id] }}
-                    </div>
-
                     <div>
                         <div [class.error]="fileStatus.isError" class="small-label">
                             {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
                         </div>
                     </div>
 
+                    <div *ngFor="let config of displayedInFileListAttributes">
+                        {{ fileStatus.fileAttributes.attributeIdToValue[config.id] }}
+                    </div>
+
                     <!-- always show A for error-->
                     <div *ngIf="fileStatus.isError">
                         <redaction-annotation-icon color="#dd4d50" label="A" type="square"></redaction-annotation-icon>
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 a9f7fa903..959f49696 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
@@ -2,7 +2,7 @@
 @import '../../../../../assets/styles/red-mixins';
 
 :root {
-    --dynamic-columns: '0';
+    --dynamic-columns: '1fr';
 }
 
 .file-upload-input {
@@ -21,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 repeat(var(--dynamic-columns), 1fr) 2fr 1fr 2fr 1fr auto 11px;
+        grid-template-columns: auto 3fr 2fr repeat(var(--dynamic-columns, 1), 1fr) 2fr 1fr auto 11px;
 
         .table-item {
             > div {
@@ -71,7 +71,7 @@ cdk-virtual-scroll-viewport {
 
     &.has-scrollbar:hover {
         ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 3fr repeat(var(--dynamic-columns), 1fr) 2fr 1fr 2fr 1fr auto;
+            grid-template-columns: auto 3fr 2fr repeat(var(--dynamic-columns, 1), 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 18d49231c..e3f2f123d 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
@@ -270,9 +270,14 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                 dynamicColumns.push({ label: config.label, notTranslatable: true });
             }
         }
-        this.tableColumnConfigs = [this._defaultTableConfigs[0], ...dynamicColumns, ...this._defaultTableConfigs.slice(1)];
-        this.dynamicColumnsCount = dynamicColumns.length;
-        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--dynamic-columns', `${this.dynamicColumnsCount}`);
+        this.tableColumnConfigs = [
+            this._defaultTableConfigs[0],
+            this._defaultTableConfigs[1],
+            ...dynamicColumns,
+            ...this._defaultTableConfigs.slice(2)
+        ];
+        this.dynamicColumnsCount = dynamicColumns.length + 1; // zero is not allowed in repeat, by default we repeat 1 column
+        document.documentElement.style.setProperty('--dynamic-columns', `${this.dynamicColumnsCount}`);
     }
 
     private _loadEntitiesFromState() {
@@ -386,7 +391,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                 slug: key,
                 label: key,
                 icon: 'red:template',
-                filters: [...filterValue].map<NestedFilter>((value: string) => ({ key: value, label: value })),
+                filters: [...filterValue].map<NestedFilter>((value: string) => ({
+                    key: value,
+                    label: value
+                })),
                 checker: (input: FileStatusWrapper, filter: NestedFilter) => filter.label === input.fileAttributes.attributeIdToValue[id]
             });
         });
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 4b001a0b1..5499bdcca 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://qa4.iqser.cloud/auth/realms/redaction",
+  "API_URL": "https://qa4.iqser.cloud/redaction-gateway-v1",
   "OAUTH_CLIENT_ID": "redaction",
   "BACKEND_APP_VERSION": "4.4.40",
   "FRONTEND_APP_VERSION": "1.1",