From 962542a4ec853e370ce7d43ca2ef3cdec582ba84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 31 Aug 2021 16:35:12 +0300
Subject: [PATCH] Active fields listing

---
 .../active-fields-listing.component.html      | 131 +++++++++---------
 .../active-fields-listing.component.scss      |  72 ++++------
 .../active-fields-listing.component.ts        |  82 ++++++++---
 .../dossier-listing-screen.component.scss     |   1 -
 .../dossier-overview-screen.component.html    |  12 +-
 .../dossier-overview-screen.component.scss    |   4 -
 libs/common-ui                                |   2 +-
 7 files changed, 157 insertions(+), 147 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index 4af65e5b0..434db87bc 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -1,74 +1,15 @@
-<iqser-table-header
+<iqser-table
+    [actionsTemplate]="actionsTemplate"
     [bulkActions]="bulkActions"
-    [hasEmptyColumn]="true"
+    [itemMouseEnterFn]="itemMouseEnterFn"
+    [itemMouseLeaveFn]="itemMouseLeaveFn"
+    [itemSize]="50"
+    [noDataText]="'file-attributes-csv-import.no-data.title' | translate"
     [selectionEnabled]="true"
-    [tableColumnConfigs]="tableColumnConfigs"
-    [tableHeaderLabel]="tableHeaderLabel"
-></iqser-table-header>
-
-<iqser-empty-state
-    *ngIf="entitiesService.noData$ | async"
-    [text]="'file-attributes-csv-import.no-data.title' | translate"
-    icon="red:attribute"
-></iqser-empty-state>
-
-<cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
-    <div
-        (mouseenter)="setHoveredColumn.emit(field.csvColumn)"
-        (mouseleave)="setHoveredColumn.emit()"
-        *cdkVirtualFor="let field of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
-        class="table-item"
-    >
-        <div (click)="toggleEntitySelected($event, field)" class="selection-column">
-            <iqser-round-checkbox [active]="isSelected(field)"></iqser-round-checkbox>
-        </div>
-
-        <div>
-            <iqser-editable-input
-                (save)="field.name = $event"
-                [buttonsType]="circleButtonTypes.dark"
-                [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
-                [class]="'w-200'"
-                [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
-                [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
-                [value]="field.name"
-            ></iqser-editable-input>
-        </div>
-
-        <div>
-            <div class="iqser-input-group">
-                <mat-form-field class="no-label">
-                    <mat-select [(ngModel)]="field.type">
-                        <mat-option *ngFor="let type of typeOptions" [value]="type">
-                            {{ translations[type] | translate }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-
-        <div class="center">
-            <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
-        </div>
-
-        <div class="center">
-            <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
-        </div>
-
-        <div class="actions-container">
-            <div class="action-buttons">
-                <iqser-circle-button
-                    (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
-                    [removeTooltip]="true"
-                    [tooltip]="'file-attributes-csv-import.action.remove' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="red:trash"
-                ></iqser-circle-button>
-            </div>
-        </div>
-        <div class="scrollbar-placeholder"></div>
-    </div>
-</cdk-virtual-scroll-viewport>
+    emptyColumnWidth="auto"
+    noDataIcon="red:attribute"
+>
+</iqser-table>
 
 <ng-template #bulkActions>
     <ng-container *ngIf="entitiesService.areSomeSelected$ | async">
@@ -113,3 +54,55 @@
         </mat-menu>
     </ng-container>
 </ng-template>
+
+<ng-template #actionsTemplate let-field="entity">
+    <div class="action-buttons">
+        <iqser-circle-button
+            (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
+            [removeTooltip]="true"
+            [tooltip]="'file-attributes-csv-import.action.remove' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="red:trash"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
+
+<ng-template #labelTemplate let-field="entity">
+    <div class="cell">
+        <iqser-editable-input
+            (save)="field.name = $event"
+            [buttonsType]="circleButtonTypes.dark"
+            [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
+            [class]="'w-200'"
+            [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
+            [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
+            [value]="field.name"
+        ></iqser-editable-input>
+    </div>
+</ng-template>
+
+<ng-template #typeTemplate let-field="entity">
+    <div class="cell">
+        <div class="iqser-input-group">
+            <mat-form-field class="no-label">
+                <mat-select [(ngModel)]="field.type">
+                    <mat-option *ngFor="let type of typeOptions" [value]="type">
+                        {{ translations[type] | translate }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #readonlyTemplate let-field="entity">
+    <div class="cell center">
+        <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
+    </div>
+</ng-template>
+
+<ng-template #primaryTemplate let-field="entity">
+    <div class="cell center">
+        <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index dbff36713..be28d9506 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -1,47 +1,37 @@
 @import '../../../../../../assets/styles/variables';
 
-iqser-table-header::ng-deep iqser-table-column-name .name {
-    padding-left: 22px;
-}
+:host ::ng-deep iqser-table {
+    iqser-table-header {
+        iqser-table-column-name .name {
+            padding-left: 22px;
+        }
 
-iqser-table-header::ng-deep .header-item {
-    box-shadow: none;
-    border-top: 1px solid $separator;
+        .header-item {
+            box-shadow: none;
+            border-top: 1px solid $separator;
 
-    .all-caps-label {
-        margin-right: 10px;
-    }
-
-    iqser-circle-button {
-        margin-right: 2px;
-    }
-
-    .separator {
-        margin-left: 14px;
-        background-color: $separator;
-        width: 1px;
-        height: 30px;
-        margin-right: 16px;
-    }
-}
-
-cdk-virtual-scroll-viewport {
-    height: calc(100% - 80px);
-
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: 30px minmax(0, 350px) 150px auto auto auto 11px;
-
-        .table-item > div {
-            height: 50px;
-
-            &:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-
-                &.center {
-                    align-items: center;
-                }
+            .all-caps-label {
+                margin-right: 10px;
             }
 
+            iqser-circle-button {
+                margin-right: 2px;
+            }
+
+            .separator {
+                margin-left: 14px;
+                background-color: $separator;
+                width: 1px;
+                height: 30px;
+                margin-right: 16px;
+            }
+        }
+    }
+
+    cdk-virtual-scroll-viewport {
+        height: calc(100% - 80px) !important;
+
+        .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
             iqser-editable-input:not(.editing) {
                 padding-left: 12px;
             }
@@ -55,10 +45,4 @@ cdk-virtual-scroll-viewport {
             }
         }
     }
-
-    &.has-scrollbar:hover {
-        ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: 30px minmax(0, 350px) 150px auto auto auto;
-        }
-    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index f2bfbeb36..6645dbfa8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -1,4 +1,16 @@
-import { Component, EventEmitter, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    forwardRef,
+    Injector,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import { Field } from '../file-attributes-csv-import-dialog.component';
 import { FileAttributeConfig } from '@redaction/red-ui-http';
 import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
@@ -9,46 +21,36 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     selector: 'redaction-active-fields-listing',
     templateUrl: './active-fields-listing.component.html',
     styleUrls: ['./active-fields-listing.component.scss'],
-    providers: [...DefaultListingServices]
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => ActiveFieldsListingComponent) }]
 })
-export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges {
-    protected readonly _primaryKey = 'csvColumn';
+export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges, OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<Field>[] = [
-        {
-            label: _('file-attributes-csv-import.table-col-names.name'),
-            class: 'name'
-        },
-        { label: _('file-attributes-csv-import.table-col-names.type') },
-        {
-            label: _('file-attributes-csv-import.table-col-names.read-only'),
-            class: 'flex-center',
-            leftIcon: 'red:read-only'
-        },
-        {
-            label: _('file-attributes-csv-import.table-col-names.primary'),
-            class: 'flex-center',
-            rightIcon: 'red:status-info',
-            rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip')
-        }
-    ];
+    tableColumnConfigs: TableColumnConfig<Field>[];
     readonly typeOptions = [
         FileAttributeConfig.TypeEnum.TEXT,
         FileAttributeConfig.TypeEnum.NUMBER,
         FileAttributeConfig.TypeEnum.DATE
     ] as const;
-
+    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
+    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
+    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<never>;
+    @ViewChild('primaryTemplate', { static: true }) primaryTemplate: TemplateRef<never>;
     @Input() entities: Field[];
     @Output() entitiesChange = new EventEmitter<Field[]>();
     @Output() setHoveredColumn = new EventEmitter<string>();
     @Output() toggleFieldActive = new EventEmitter<Field>();
+    protected readonly _primaryKey = 'csvColumn';
 
     constructor(protected readonly _injector: Injector) {
         super(_injector);
     }
 
+    ngOnInit(): void {
+        this._configureTableColumns();
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.entities) {
             this.entitiesService.setEntities(this.entities);
@@ -80,4 +82,38 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         }
         field.primaryAttribute = true;
     }
+
+    itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn);
+    itemMouseLeaveFn = (field: Field) => this.setHoveredColumn.emit();
+
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('file-attributes-csv-import.table-col-names.name'),
+                class: 'name',
+                template: this.labelTemplate,
+                width: 'minmax(0, 350px)'
+            },
+            {
+                label: _('file-attributes-csv-import.table-col-names.type'),
+                template: this.typeTemplate,
+                width: '150px'
+            },
+            {
+                label: _('file-attributes-csv-import.table-col-names.read-only'),
+                class: 'flex-center',
+                leftIcon: 'red:read-only',
+                template: this.readonlyTemplate,
+                width: 'auto'
+            },
+            {
+                label: _('file-attributes-csv-import.table-col-names.primary'),
+                class: 'flex-center',
+                rightIcon: 'red:status-info',
+                rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
+                template: this.primaryTemplate,
+                width: 'auto'
+            }
+        ];
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
index a3cbb4dec..cb00faaf2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
@@ -2,7 +2,6 @@
     ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
         &.status-container {
             width: 160px;
-            padding-right: 13px;
         }
     }
 
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 329642dd5..9d4ab2d4d 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
@@ -76,7 +76,7 @@
 <ng-template #filenameTemplate let-fileStatus="entity">
     <div class="cell">
         <div class="filename-wrapper">
-            <div [class.disabled]="fileStatus.isPending" [class.error]="fileStatus.isError" class="table-item-title text-overflow">
+            <div [class.error]="fileStatus.isError" class="table-item-title text-overflow">
                 <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
                     {{ fileStatus.filename }}
                 </span>
@@ -138,10 +138,12 @@
 </ng-template>
 
 <ng-template #pagesTemplate let-fileStatus="entity">
-    <div *ngIf="!fileStatus.isError" class="cell small-label stats-subtitle">
-        <div>
-            <mat-icon svgIcon="red:pages"></mat-icon>
-            {{ fileStatus.numberOfPages }}
+    <div *ngIf="!fileStatus.isError" class="cell">
+        <div class="small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ fileStatus.numberOfPages }}
+            </div>
         </div>
     </div>
 </ng-template>
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 f52d41a2e..4b6a10bf8 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
@@ -28,10 +28,6 @@
     }
 
     > div.cell {
-        .disabled {
-            color: $grey-7;
-        }
-
         .error {
             color: $primary;
         }
diff --git a/libs/common-ui b/libs/common-ui
index 70f3c560d..af46a45b9 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 70f3c560d3b312d9707f367c2b8d3289ccbf908d
+Subproject commit af46a45b97a42380a316396635fecc58372b78eb