From 89edd903f07720b9b7d9a1be2dc8df19d7eda6ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 30 Aug 2021 16:50:32 +0300
Subject: [PATCH] File attributes listing

---
 .../dictionary-listing-screen.component.html  |   2 +-
 ...er-templates-listing-screen.component.html |   2 +-
 ...e-attributes-listing-screen.component.html | 136 +++++++++---------
 ...e-attributes-listing-screen.component.scss |  45 ++----
 ...ile-attributes-listing-screen.component.ts |  96 ++++++++-----
 .../dossier-listing-screen.component.html     |   2 +-
 .../dossier-overview-screen.component.html    |   3 +-
 libs/common-ui                                |   2 +-
 8 files changed, 156 insertions(+), 132 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 21f6acbd2..bd0d1514b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -26,12 +26,12 @@
                 [bulkActions]="bulkActions"
                 [itemSize]="80"
                 [noDataButtonLabel]="'dictionary-listing.no-data.action' | translate"
-                [noDataIcon]="'red:dictionary'"
                 [noDataText]="'dictionary-listing.no-data.title' | translate"
                 [noMatchText]="'dictionary-listing.no-match.title' | translate"
                 [selectionEnabled]="true"
                 [showNoDataButton]="currentUser.isAdmin"
                 emptyColumnWidth="1fr"
+                noDataIcon="red:dictionary"
             ></iqser-table>
         </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 544d0528d..6903ab0db 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -16,10 +16,10 @@
                     [bulkActions]="bulkActions"
                     [headerTemplate]="headerTemplate"
                     [itemSize]="80"
-                    [noDataIcon]="'red:template'"
                     [noDataText]="'dossier-templates-listing.no-data.title' | translate"
                     [noMatchText]="'dossier-templates-listing.no-match.title' | translate"
                     [selectionEnabled]="true"
+                    noDataIcon="red:template"
                 ></iqser-table>
             </div>
         </div>
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 1982e494e..6fafd4ac6 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
@@ -20,73 +20,17 @@
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
-            <iqser-table-header
+            <iqser-table
+                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
-                [hasEmptyColumn]="true"
+                [itemSize]="80"
+                [noDataText]="'file-attributes-listing.no-data.title' | translate"
+                [noMatchText]="'file-attributes-listing.no-match.title' | translate"
                 [selectionEnabled]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
-                [tableHeaderLabel]="tableHeaderLabel"
-            ></iqser-table-header>
-
-            <iqser-empty-state
-                *ngIf="entitiesService.noData$ | async"
-                [text]="'file-attributes-listing.no-data.title' | translate"
-                icon="red:attribute"
-            ></iqser-empty-state>
-
-            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'file-attributes-listing.no-match.title' | translate"></iqser-empty-state>
-
-            <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
-                <div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
-                    <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
-                    </div>
-
-                    <div class="label">
-                        <span>{{ attribute.label }}</span>
-                    </div>
-
-                    <div [translate]="translations[attribute.type]" class="small-label"></div>
-
-                    <div class="center read-only">
-                        <mat-icon
-                            *ngIf="!attribute.editable"
-                            [matTooltip]="'file-attributes-listing.read-only' | translate"
-                            matTooltipPosition="above"
-                            svgIcon="red:read-only"
-                        ></mat-icon>
-                    </div>
-                    <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>
-                    <div class="actions-container">
-                        <div *ngIf="currentUser.isAdmin" class="action-buttons">
-                            <iqser-circle-button
-                                (action)="openAddEditAttributeDialog($event, attribute)"
-                                [tooltip]="'file-attributes-listing.action.edit' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="iqser:edit"
-                            ></iqser-circle-button>
-                            <iqser-circle-button
-                                (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-                                [tooltip]="'file-attributes-listing.action.delete' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="red:trash"
-                            ></iqser-circle-button>
-                        </div>
-                    </div>
-                    <div class="scrollbar-placeholder"></div>
-                </div>
-            </cdk-virtual-scroll-viewport>
+                emptyColumnWidth="1fr"
+                noDataIcon="red:attribute"
+            >
+            </iqser-table>
         </div>
 
         <div class="right-container"></div>
@@ -128,3 +72,65 @@
         ></iqser-icon-button>
     </div>
 </ng-template>
+
+<ng-template #actionsTemplate let-attribute="entity">
+    <div *ngIf="currentUser.isAdmin" class="action-buttons">
+        <iqser-circle-button
+            (action)="openAddEditAttributeDialog($event, attribute)"
+            [tooltip]="'file-attributes-listing.action.edit' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:edit"
+        ></iqser-circle-button>
+        <iqser-circle-button
+            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+            [tooltip]="'file-attributes-listing.action.delete' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="red:trash"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
+
+<ng-template #labelTemplate let-attribute="entity">
+    <div class="label cell">
+        <span>{{ attribute.label }}</span>
+    </div>
+</ng-template>
+
+<ng-template #typeTemplate let-attribute="entity">
+    <div [translate]="translations[attribute.type]" class="small-label cell"></div>
+</ng-template>
+
+<ng-template #readonlyTemplate let-attribute="entity">
+    <div class="center read-only cell">
+        <mat-icon
+            *ngIf="!attribute.editable"
+            [matTooltip]="'file-attributes-listing.read-only' | translate"
+            matTooltipPosition="above"
+            svgIcon="red:read-only"
+        ></mat-icon>
+    </div>
+</ng-template>
+
+<ng-template #csvColumnHeaderTemplate let-attribute="entity">
+    <div class="small-label cell">
+        {{ attribute.csvColumnHeader }}
+    </div>
+</ng-template>
+
+<ng-template #filterableTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
+
+<ng-template #displayedInFileListTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
+
+<ng-template #primaryAttributeTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
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 dc6d57c73..d75a14b0b 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
@@ -1,38 +1,27 @@
 @import 'libs/common-ui/src/assets/styles/mixins';
 
+// TODO: Can I move this to base styles?
 .page-header .actions {
     display: flex;
     justify-content: flex-end;
 }
 
-.content-container cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 11px;
-
-        .table-item {
-            > div:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-            }
-
-            > div {
-                &.center {
-                    align-items: center;
-                }
-
-                &.label span {
-                    @include line-clamp(1);
-                }
-
-                &.read-only mat-icon {
-                    width: 14px;
-                    height: 34px;
-                }
-            }
-        }
+:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
+    &.center {
+        align-items: center;
     }
 
-    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    &.label span {
+        @include line-clamp(1);
+    }
+
+    &.read-only mat-icon {
+        width: 14px;
+        height: 34px;
+    }
+
+    iqser-round-checkbox {
+        cursor: default;
     }
 }
 
@@ -40,7 +29,3 @@
     display: none;
     visibility: hidden;
 }
-
-.table-item > div:not(.selection-column) iqser-round-checkbox {
-    cursor: default;
-}
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 00547481c..3aa23b284 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
@@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    forwardRef,
+    Injector,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { ActivatedRoute } from '@angular/router';
@@ -19,7 +29,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     templateUrl: './file-attributes-listing-screen.component.html',
     styleUrls: ['./file-attributes-listing-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [...DefaultListingServices]
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => FileAttributesListingScreenComponent) }
+    ]
 })
 export class FileAttributesListingScreenComponent extends ListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
@@ -27,36 +40,14 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     readonly currentUser = this._userService.currentUser;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-listing.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[] = [
-        {
-            label: _('file-attributes-listing.table-col-names.name'),
-            sortByKey: 'label'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.type'),
-            sortByKey: 'type'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.read-only'),
-            sortByKey: 'editable',
-            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',
-            rightIcon: 'red:status-info',
-            rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip')
-        }
-    ];
+    tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[];
+    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
+    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
+    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<never>;
+    @ViewChild('csvColumnHeaderTemplate', { static: true }) csvColumnHeaderTemplate: TemplateRef<never>;
+    @ViewChild('filterableTemplate', { static: true }) filterableTemplate: TemplateRef<never>;
+    @ViewChild('displayedInFileListTemplate', { static: true }) displayedInFileListTemplate: TemplateRef<never>;
+    @ViewChild('primaryAttributeTemplate', { static: true }) primaryAttributeTemplate: TemplateRef<never>;
     protected readonly _primaryKey = 'label';
     private _existingConfiguration: FileAttributesConfig;
     @ViewChild('fileInput') private _fileInput: ElementRef;
@@ -75,6 +66,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     }
 
     async ngOnInit() {
+        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -130,6 +122,46 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         );
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('file-attributes-listing.table-col-names.name'),
+                sortByKey: 'label',
+                width: '2fr',
+                template: this.labelTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.type'),
+                sortByKey: 'type',
+                template: this.typeTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.read-only'),
+                sortByKey: 'editable',
+                class: 'flex-center',
+                template: this.readonlyTemplate
+            },
+            { label: _('file-attributes-listing.table-col-names.csv-column'), template: this.csvColumnHeaderTemplate },
+            {
+                label: _('file-attributes-listing.table-col-names.filterable'),
+                class: 'flex-center',
+                template: this.filterableTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
+                class: 'flex-center',
+                template: this.displayedInFileListTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.primary'),
+                class: 'flex-center',
+                rightIcon: 'red:status-info',
+                rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip'),
+                template: this.primaryAttributeTemplate
+            }
+        ];
+    }
+
     private async _loadData() {
         this._loadingService.start();
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
index 33d882652..6a6818fbc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
@@ -13,10 +13,10 @@
                 [hasScrollButton]="true"
                 [itemSize]="85"
                 [noDataButtonLabel]="'dossier-listing.no-data.action' | translate"
-                [noDataIcon]="'red:folder'"
                 [noDataText]="'dossier-listing.no-data.title' | translate"
                 [noMatchText]="'dossier-listing.no-match.title' | translate"
                 [showNoDataButton]="currentUser.isManager"
+                noDataIcon="red:folder"
             ></iqser-table>
         </div>
 
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 031f05107..329642dd5 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
@@ -42,12 +42,13 @@
                 [hasScrollButton]="true"
                 [itemSize]="80"
                 [noDataButtonLabel]="'dossier-overview.no-data.action' | translate"
-                [noDataIcon]="'red:upload'"
                 [noDataText]="'dossier-overview.no-data.title' | translate"
                 [noMatchText]="'dossier-overview.no-match.title' | translate"
                 [selectionEnabled]="true"
                 [showNoDataButton]="true"
                 [tableItemClasses]="{ disabled: disabledFn, 'last-opened': lastOpenedFn }"
+                noDataButtonIcon="red:upload"
+                noDataIcon="red:document"
             ></iqser-table>
         </div>
 
diff --git a/libs/common-ui b/libs/common-ui
index 7a59cd099..70f3c560d 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 7a59cd09946221a444fad4d2aaf82597819d5679
+Subproject commit 70f3c560d3b312d9707f367c2b8d3289ccbf908d