From 232f2df003181c98267b4d22ffd7312c27756f6a Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Sun, 22 Aug 2021 23:30:06 +0300
Subject: [PATCH 01/12] File Attributes

- added 'filterable' and 'displayedInFileList' to file attributes
- added dynamic filters and columns for new added file attributes
---
 ...-edit-file-attribute-dialog.component.html | 12 ++++
 ...dd-edit-file-attribute-dialog.component.ts |  4 +-
 ...e-attributes-listing-screen.component.html |  6 ++
 ...e-attributes-listing-screen.component.scss |  4 +-
 ...ile-attributes-listing-screen.component.ts |  8 +++
 .../dossier-overview-screen.component.html    |  5 ++
 .../dossier-overview-screen.component.scss    |  4 +-
 .../dossier-overview-screen.component.ts      | 57 ++++++++++++++++++-
 .../page-header/page-header.component.ts      |  2 +
 apps/red-ui/src/assets/i18n/en.json           |  4 ++
 10 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
index 58077d3e8..38076491c 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
@@ -51,6 +51,18 @@
                         {{ 'add-edit-file-attribute.form.primary' | translate }}
                     </mat-checkbox>
                 </div>
+
+                <div class="red-input-group mt-0">
+                    <mat-checkbox color="primary" formControlName="filterable" name="filterable">
+                        {{ 'add-edit-file-attribute.form.filterable' | translate }}
+                    </mat-checkbox>
+                </div>
+
+                <div class="red-input-group mt-0">
+                    <mat-checkbox color="primary" formControlName="displayedInFileList" name="displayedInFileList">
+                        {{ 'add-edit-file-attribute.form.displayedInFileList' | translate }}
+                    </mat-checkbox>
+                </div>
             </div>
         </div>
         <div class="dialog-actions">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
index 692d3961e..f6b36782f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
@@ -32,7 +32,9 @@ export class AddEditFileAttributeDialogComponent {
             csvColumnHeader: [this.fileAttribute?.csvColumnHeader, Validators.required],
             type: [this.fileAttribute?.type || FileAttributeConfig.TypeEnum.TEXT, Validators.required],
             readonly: [this.fileAttribute ? !this.fileAttribute.editable : false],
-            primaryAttribute: [this.fileAttribute?.primaryAttribute]
+            primaryAttribute: [this.fileAttribute?.primaryAttribute],
+            filterable: [this.fileAttribute?.filterable],
+            displayedInFileList: [this.fileAttribute?.displayedInFileList]
         });
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index c8d698324..7f708f4a9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -62,6 +62,12 @@
                     <div class="small-label">
                         {{ attribute.csvColumnHeader }}
                     </div>
+                    <div class="center">
+                        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
+                    </div>
+                    <div class="center">
+                        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
+                    </div>
                     <div class="center">
                         <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
                     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index bcf8a931d..404839f0e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -11,7 +11,7 @@ iqser-table-header::ng-deep .header-item {
 
 .content-container cdk-virtual-scroll-viewport {
     ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 11px;
+        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 11px;
 
         .table-item {
             > div:not(.scrollbar-placeholder) {
@@ -36,7 +36,7 @@ iqser-table-header::ng-deep .header-item {
     }
 
     &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr;
+        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     }
 }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index 358e4737b..7fc0cb789 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -37,6 +37,14 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
             class: 'flex-center'
         },
         { label: _('file-attributes-listing.table-col-names.csv-column') },
+        {
+            label: _('file-attributes-listing.table-col-names.filterable'),
+            class: 'flex-center'
+        },
+        {
+            label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
+            class: 'flex-center'
+        },
         {
             label: _('file-attributes-listing.table-col-names.primary'),
             class: 'flex-center',
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 87b67b71c..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
@@ -1,6 +1,7 @@
 <section *ngIf="!!currentDossier">
     <redaction-page-header
         [actionConfigs]="actionConfigs"
+        [fileAttributeConfigs]="fileAttributeConfigs"
         [searchPlaceholder]="'dossier-overview.search' | translate"
         [showCloseButton]="true"
     >
@@ -104,6 +105,10 @@
                         </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' }}
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..857affaff 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 2fr 1fr 2fr 1fr auto 11px;
+        grid-template-columns: auto 3fr 1fr 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 2fr 1fr 2fr 1fr auto;
+            grid-template-columns: auto 3fr 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 f5b52aa64..04fced365 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
@@ -30,6 +30,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { annotationFilterChecker } from '@shared/components/filters/popup-filter/utils/filter-utils';
 import { PermissionsService } from '@services/permissions.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { FileAttributeConfig } from '@redaction/red-ui-http';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -50,7 +51,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             hide: !this.currentUser.isManager
         }
     ];
-    readonly tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
+    tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
         {
             label: _('dossier-overview.table-col-names.name'),
             sortByKey: 'filename'
@@ -79,6 +80,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     ];
     collapsedDetails = false;
     dossierAttributes: DossierAttributeWithValue[] = [];
+    fileAttributeConfigs: FileAttributeConfig[];
     protected readonly _primaryKey = 'filename';
 
     @ViewChild(DossierDetailsComponent, { static: false })
@@ -106,9 +108,13 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _fileDropOverlayService: FileDropOverlayService,
         private readonly _dossierAttributesService: DossierAttributesService
-    ) {
+    ) // private readonly _renderer: Renderer2,
+    // private readonly _elementRef: ElementRef,
+    {
         super(_injector);
         this._loadEntitiesFromState();
+
+        this.fileAttributeConfigs = this._appStateService.activeFileAttributesConfig.fileAttributeConfigs;
     }
 
     get checkedRequiredFilters() {
@@ -141,6 +147,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
             this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
             this.searchService.setSearchKey('filename');
+            this.addDynamicColumns();
         } catch (e) {
         } finally {
             this._loadingService.stop();
@@ -235,6 +242,25 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.collapsedDetails = !this.collapsedDetails;
     }
 
+    addDynamicColumns() {
+        const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
+        for (const config of this.displayedInFileListAttributes) {
+            if (config.displayedInFileList) {
+                dynamicColumns.push({ label: config.label });
+            }
+        }
+        this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
+
+        // 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);
+    }
+
+    get displayedInFileListAttributes() {
+        return this.fileAttributeConfigs.filter(config => config.displayedInFileList);
+    }
+
     recentlyModifiedChecker = (file: FileStatusWrapper) =>
         moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
 
@@ -256,6 +282,8 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         const allDistinctAddedDates = new Set<string>();
         const allDistinctNeedsWork = new Set<string>();
 
+        const dynamicFilters = new Map<string, Set<string>>();
+
         this.entitiesService.all.forEach(file => {
             allDistinctPeople.add(file.currentReviewer);
             allDistinctFileStatusWrapper.add(file.status);
@@ -269,6 +297,31 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             if (file.hasImages) allDistinctNeedsWork.add('image');
             if (file.hasNone) allDistinctNeedsWork.add('none');
             if (file.hasAnnotationComments) allDistinctNeedsWork.add('comment');
+
+            // extract values for dynamic filters
+            this.fileAttributeConfigs.forEach(config => {
+                if (config.filterable) {
+                    const filterKey = `${config.id}:${config.label}`;
+                    let filters = dynamicFilters.get(filterKey);
+                    if (!filters) {
+                        dynamicFilters.set(filterKey, new Set<string>());
+                        filters = dynamicFilters.get(filterKey);
+                    }
+                    filters.add(file.fileAttributes?.attributeIdToValue[config.id]);
+                }
+            });
+        });
+
+        dynamicFilters.forEach((filterValue: Set<string>, filterKey: string) => {
+            const id = filterKey.split(':')[0];
+            const key = filterKey.split(':')[1];
+            this.filterService.addFilterGroup({
+                slug: key,
+                label: key,
+                icon: 'red:template',
+                filters: [...filterValue].map<NestedFilter>((value: string) => ({ key: value, label: value })),
+                checker: (input: FileStatusWrapper, filter: NestedFilter) => filter.label === input.fileAttributes.attributeIdToValue[id]
+            });
         });
 
         const statusFilters = [...allDistinctFileStatusWrapper].map<NestedFilter>(item => ({
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
index c6fb9a83d..866c188df 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
@@ -5,6 +5,7 @@ import { FilterService, SearchService } from '@iqser/common-ui';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { combineLatest, Observable, of } from 'rxjs';
 import { SearchPosition, SearchPositions } from '@shared/components/page-header/models/search-positions.type';
+import { FileAttributeConfig } from '@redaction/red-ui-http';
 
 @Component({
     selector: 'redaction-page-header',
@@ -18,6 +19,7 @@ export class PageHeaderComponent<T> {
     @Input() showCloseButton: boolean;
     @Input() actionConfigs: readonly ActionConfig[];
     @Input() buttonConfigs: readonly ButtonConfig[];
+    @Input() fileAttributeConfigs: readonly FileAttributeConfig[];
     @Input() searchPlaceholder: string;
     @Input() searchWidth: number | 'full';
     @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 137125493..8c1710754 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -82,6 +82,8 @@
     "form": {
       "column-header": "CSV Column Header",
       "column-header-placeholder": "Enter CSV Column Header",
+      "displayedInFileList": "Displayed In File List",
+      "filterable": "Filterable",
       "name": "Attribute Name",
       "name-placeholder": "Enter Name",
       "primary": "Set as Primary",
@@ -928,6 +930,8 @@
     "search": "Search by attribute name...",
     "table-col-names": {
       "csv-column": "CSV Column",
+      "displayed-in-file-list": "Dis. In File List",
+      "filterable": "Filterable",
       "name": "Name",
       "primary": "Primary",
       "primary-info-tooltip": "The value of the attribute set as primary shows up under the file name in the documents list.",

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 02/12] 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() {

From 8837a7e919e473355bb13332b08972f517bd72ff Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Mon, 23 Aug 2021 10:48:54 +0300
Subject: [PATCH 03/12] updated 'addDynamicColumns' method to be private

---
 .../dossier-overview-screen.component.ts      | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

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 0444437c2..fadcde307 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
@@ -159,7 +159,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
             this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
             this.searchService.setSearchKey('filename');
-            this.addDynamicColumns();
+            this._addDynamicColumns();
         } catch (e) {
         } finally {
             this._loadingService.stop();
@@ -254,7 +254,24 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.collapsedDetails = !this.collapsedDetails;
     }
 
-    addDynamicColumns() {
+    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);
+    }
+
+    recentlyModifiedChecker = (file: FileStatusWrapper) =>
+        moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
+
+    private _addDynamicColumns() {
         const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
         for (const config of this.displayedInFileListAttributes) {
             if (config.displayedInFileList) {
@@ -266,21 +283,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.updateGridColumns();
     }
 
-    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() {
-        return this.fileAttributeConfigs.filter(config => config.displayedInFileList);
-    }
-
-    recentlyModifiedChecker = (file: FileStatusWrapper) =>
-        moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
-
     private _loadEntitiesFromState() {
         this.currentDossier = this._appStateService.activeDossier;
         if (this.currentDossier) this.entitiesService.setEntities(this.currentDossier.files);

From 173e47a3d21b14db7e0af13065f029563b58415d Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Sun, 22 Aug 2021 23:30:06 +0300
Subject: [PATCH 04/12] File Attributes

- added 'filterable' and 'displayedInFileList' to file attributes
- added dynamic filters and columns for new added file attributes
---
 .../dossier-overview-screen.component.scss    |  4 ++--
 .../dossier-overview-screen.component.ts      | 23 ++++++++++++-------
 2 files changed, 17 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 b28ed76bb..857affaff 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 2fr 1fr 2fr 1fr auto 11px;
+        grid-template-columns: auto 3fr 1fr 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 2fr 1fr 2fr 1fr auto;
+            grid-template-columns: auto 3fr 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..f49ef8642 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,7 +122,9 @@ 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();
 
@@ -254,14 +256,19 @@ 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);
+    addDynamicColumns() {
+        const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
+        for (const config of this.displayedInFileListAttributes) {
+            if (config.displayedInFileList) {
+                dynamicColumns.push({ label: config.label });
+            }
         }
+        this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
+
+        // 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);
     }
 
     get displayedInFileListAttributes() {

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 05/12] 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() {

From a4ae61fcacfb5e6e620fe6498496f3de382ac764 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Mon, 23 Aug 2021 10:48:54 +0300
Subject: [PATCH 06/12] updated 'addDynamicColumns' method to be private

---
 .../dossier-overview-screen.component.ts      | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

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 5019caa4d..fadcde307 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,24 +254,14 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.collapsedDetails = !this.collapsedDetails;
     }
 
-    addDynamicColumns() {
-        const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
-        for (const config of this.displayedInFileListAttributes) {
-            if (config.displayedInFileList) {
-                dynamicColumns.push({ label: config.label, notTranslatable: true });
-            }
-        }
-        this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
-        this.dynamicColumnsCount = dynamicColumns.length;
-        this.updateGridColumns();
-    }
-
     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);
+        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() {

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 07/12] 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

From 79da25c7475c62c7db0c0d2e638e40aaaac51e94 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Mon, 23 Aug 2021 13:07:23 +0300
Subject: [PATCH 08/12] - updated dynamic filters to be the last in the list -
 added 'Unset' instead of empty string or null

---
 .../dossier-overview-screen.component.ts      | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

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 91011e5ce..e87571067 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
@@ -316,23 +316,16 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                         dynamicFilters.set(filterKey, new Set<string>());
                         filters = dynamicFilters.get(filterKey);
                     }
-                    filters.add(file.fileAttributes?.attributeIdToValue[config.id]);
+                    let filterValue = file.fileAttributes?.attributeIdToValue[config.id];
+                    if (!filterValue) {
+                        filterValue = 'Empty';
+                        file.fileAttributes.attributeIdToValue[config.id] = filterValue;
+                    }
+                    filters.add(filterValue);
                 }
             });
         });
 
-        dynamicFilters.forEach((filterValue: Set<string>, filterKey: string) => {
-            const id = filterKey.split(':')[0];
-            const key = filterKey.split(':')[1];
-            this.filterService.addFilterGroup({
-                slug: key,
-                label: key,
-                icon: 'red:template',
-                filters: [...filterValue].map<NestedFilter>((value: string) => ({ key: value, label: value })),
-                checker: (input: FileStatusWrapper, filter: NestedFilter) => filter.label === input.fileAttributes.attributeIdToValue[id]
-            });
-        });
-
         const statusFilters = [...allDistinctFileStatusWrapper].map<NestedFilter>(item => ({
             key: item,
             label: this._translateService.instant(fileStatusTranslations[item])
@@ -384,6 +377,18 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             matchAll: true
         });
 
+        dynamicFilters.forEach((filterValue: Set<string>, filterKey: string) => {
+            const id = filterKey.split(':')[0];
+            const key = filterKey.split(':')[1];
+            this.filterService.addFilterGroup({
+                slug: key,
+                label: key,
+                icon: 'red:template',
+                filters: [...filterValue].map<NestedFilter>((value: string) => ({ key: value, label: value })),
+                checker: (input: FileStatusWrapper, filter: NestedFilter) => filter.label === input.fileAttributes.attributeIdToValue[id]
+            });
+        });
+
         this.filterService.addFilterGroup({
             slug: 'quickFilters',
             filters: this._createQuickFilters(),

From 3b1c194fba596f6f4c5c255fbe769b2958fa5f1f Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 13:20:44 +0300
Subject: [PATCH 09/12] Dynamic Table Columns Cleanup for view-cache

---
 .../dossier-overview-screen.component.scss         |  2 +-
 .../dossier-overview-screen.component.ts           | 14 ++++++++------
 apps/red-ui/src/assets/i18n/en.json                |  3 ++-
 3 files changed, 11 insertions(+), 8 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 446abc67b..a9f7fa903 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: '';
+    --dynamic-columns: '0';
 }
 
 .file-upload-input {
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 e87571067..18d49231c 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
@@ -62,7 +62,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             hide: !this.currentUser.isManager
         }
     ];
-    tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
+    private readonly _defaultTableConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [
         {
             label: _('dossier-overview.table-col-names.name'),
             sortByKey: 'filename'
@@ -89,6 +89,8 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             sortByKey: 'statusSort'
         }
     ];
+
+    tableColumnConfigs: readonly TableColumnConfig<FileStatusWrapper>[] = [];
     collapsedDetails = false;
     dossierAttributes: DossierAttributeWithValue[] = [];
     fileAttributeConfigs: FileAttributeConfig[];
@@ -159,7 +161,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
             this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
             this.searchService.setSearchKey('filename');
-            this._addDynamicColumns();
+            this._configureTableColumns();
         } catch (e) {
         } finally {
             this._loadingService.stop();
@@ -261,14 +263,14 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     recentlyModifiedChecker = (file: FileStatusWrapper) =>
         moment(file.lastUpdated).add(this._appConfigService.getConfig(AppConfigKey.RECENT_PERIOD_IN_HOURS), 'hours').isAfter(moment());
 
-    private _addDynamicColumns() {
+    private _configureTableColumns() {
         const dynamicColumns: TableColumnConfig<FileStatusWrapper>[] = [];
         for (const config of this.displayedInFileListAttributes) {
             if (config.displayedInFileList) {
                 dynamicColumns.push({ label: config.label, notTranslatable: true });
             }
         }
-        this.tableColumnConfigs = [this.tableColumnConfigs[0], ...dynamicColumns, ...this.tableColumnConfigs.slice(1)];
+        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}`);
     }
@@ -318,8 +320,8 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                     }
                     let filterValue = file.fileAttributes?.attributeIdToValue[config.id];
                     if (!filterValue) {
-                        filterValue = 'Empty';
-                        file.fileAttributes.attributeIdToValue[config.id] = filterValue;
+                        filterValue = this._translateService.instant('filters.empty');
+                        file.fileAttributes.attributeIdToValue[config.id] = '-';
                     }
                     filters.add(filterValue);
                 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 8c1710754..6be48809b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1044,7 +1044,8 @@
     "filter-by": "Filter:",
     "needs-work": "Workload",
     "people": "Dossier Member(s)",
-    "status": "Status"
+    "status": "Status",
+    "empty": "Empty"
   },
   "general-config-screen": {
     "actions": {

From a8a4d9930f582181d347625328084fa3c48d2240 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 13:27:23 +0300
Subject: [PATCH 10/12] submodule version

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index bb51a9073..d31b702c2 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit bb51a90738eaec334172a757c97744885ea474b5
+Subproject commit d31b702c22ac1a9e925db673ef83f56c7137071b

From 0a515e5fd8785b7d601ae6620511ca295c29e566 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 13:53:50 +0300
Subject: [PATCH 11/12] build attempt fix

---
 bamboo-specs/src/main/java/buildjob/PlanSpec.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bamboo-specs/src/main/java/buildjob/PlanSpec.java b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
index b825c5b0b..74402d969 100644
--- a/bamboo-specs/src/main/java/buildjob/PlanSpec.java
+++ b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
@@ -100,7 +100,7 @@ public class PlanSpec {
                     .volume("/var/lib/docker", "/var/lib/docker")
                     .volume("/var/run/docker.sock", "/var/run/docker.sock"))
             .artifacts(new Artifact("version").location(".").copyPattern("**/version.properties").shared(true),
-                new Artifact("paligo-theme.tar.gz").location(".").copyPattern("**/paligo-theme.tar.gz").shared(true));
+            new Artifact("paligo-theme.tar.gz").location(".").copyPattern("**/paligo-theme.tar.gz").shared(true));
     }
 
 

From 1fd6ccd9908b5ca7cef06826aeda849769d9a55f Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Mon, 23 Aug 2021 14:08:02 +0300
Subject: [PATCH 12/12] build attempt fix

---
 bamboo-specs/src/main/java/buildjob/PlanSpec.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bamboo-specs/src/main/java/buildjob/PlanSpec.java b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
index 74402d969..b825c5b0b 100644
--- a/bamboo-specs/src/main/java/buildjob/PlanSpec.java
+++ b/bamboo-specs/src/main/java/buildjob/PlanSpec.java
@@ -100,7 +100,7 @@ public class PlanSpec {
                     .volume("/var/lib/docker", "/var/lib/docker")
                     .volume("/var/run/docker.sock", "/var/run/docker.sock"))
             .artifacts(new Artifact("version").location(".").copyPattern("**/version.properties").shared(true),
-            new Artifact("paligo-theme.tar.gz").location(".").copyPattern("**/paligo-theme.tar.gz").shared(true));
+                new Artifact("paligo-theme.tar.gz").location(".").copyPattern("**/paligo-theme.tar.gz").shared(true));
     }