From 1bd8f6ed60a8a5fefa5eb19b027252653715836f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 30 Aug 2021 15:20:02 +0300
Subject: [PATCH] Default colors

---
 .../default-colors-screen.component.html      | 55 +++++++++----------
 .../default-colors-screen.component.scss      | 32 ++++-------
 .../default-colors-screen.component.ts        | 27 ++++++---
 .../user-listing-screen.component.html        | 30 +++++-----
 4 files changed, 68 insertions(+), 76 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index e57155ba4..460f9c2c9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -20,36 +20,31 @@
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
-            <iqser-table-header
-                [hasEmptyColumn]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
-                [tableHeaderLabel]="tableHeaderLabel"
-            ></iqser-table-header>
-
-            <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
-                <div *cdkVirtualFor="let color of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
-                    <div>
-                        <div [translate]="translations[color.key]" class="table-item-title heading"></div>
-                    </div>
-
-                    <div class="color-wrapper">
-                        <div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
-                    </div>
-
-                    <div class="actions-container">
-                        <div class="action-buttons">
-                            <iqser-circle-button
-                                (action)="openEditColorDialog($event, color)"
-                                *ngIf="currentUser.isAdmin"
-                                [tooltip]="'default-colors-screen.action.edit' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="iqser:edit"
-                            ></iqser-circle-button>
-                        </div>
-                    </div>
-                    <div class="scrollbar-placeholder"></div>
-                </div>
-            </cdk-virtual-scroll-viewport>
+            <iqser-table [actionsTemplate]="actionsTemplate" [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
         </div>
     </div>
 </section>
+
+<ng-template #nameTemplate let-color="entity">
+    <div class="cell">
+        <div [translate]="translations[color.key]" class="table-item-title heading"></div>
+    </div>
+</ng-template>
+
+<ng-template #colorTemplate let-color="entity">
+    <div class="cell color-wrapper">
+        <div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
+    </div>
+</ng-template>
+
+<ng-template #actionsTemplate let-color="entity">
+    <div class="action-buttons">
+        <iqser-circle-button
+            (action)="openEditColorDialog($event, color)"
+            *ngIf="currentUser.isAdmin"
+            [tooltip]="'default-colors-screen.action.edit' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:edit"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
index 89fce9593..4473f5e59 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
@@ -1,26 +1,16 @@
-.content-container cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: 2fr 1fr 2fr 11px;
-
-        .table-item {
-            > div:not(.scrollbar-placeholder) {
-                padding-left: 24px;
-            }
-
-            .color-wrapper {
-                align-items: center;
-
-                .color-square {
-                    width: 16px;
-                    height: 16px;
-                    min-width: 16px;
-                }
-            }
-        }
+:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
+    &:not(.scrollbar-placeholder) {
+        padding-left: 24px;
     }
 
-    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: 2fr 1fr 2fr;
+    &.color-wrapper {
+        align-items: center;
+
+        .color-square {
+            width: 16px;
+            height: 16px;
+            min-width: 16px;
+        }
     }
 }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index 3fdb6fe75..4b69deb9b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
 import { ActivatedRoute } from '@angular/router';
@@ -18,20 +18,16 @@ interface ListItem extends Listable {
     templateUrl: './default-colors-screen.component.html',
     styleUrls: ['./default-colors-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [...DefaultListingServices]
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DefaultColorsScreenComponent) }]
 })
 export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
+    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
+    @ViewChild('colorTemplate', { static: true }) colorTemplate: TemplateRef<never>;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly translations = defaultColorsTranslations;
     readonly tableHeaderLabel = _('default-colors-screen.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
-        {
-            label: _('default-colors-screen.table-col-names.key'),
-            sortByKey: 'key'
-        },
-        { label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' }
-    ];
+    tableColumnConfigs: TableColumnConfig<ListItem>[];
     protected readonly _primaryKey = 'key';
     private _colorsObj: Colors;
 
@@ -49,6 +45,7 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
     }
 
     async ngOnInit() {
+        this._configureTableColumns();
         await this._loadColors();
     }
 
@@ -68,6 +65,18 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
         );
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('default-colors-screen.table-col-names.key'),
+                sortByKey: 'key',
+                template: this.nameTemplate,
+                width: '2fr'
+            },
+            { label: _('default-colors-screen.table-col-names.color'), class: 'flex-center', template: this.colorTemplate }
+        ];
+    }
+
     private async _loadColors() {
         this._loadingService.start();
         const data = await this._dictionaryControllerService.getColors(this._appStateService.activeDossierTemplateId).toPromise();
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 3ad73de7e..a050c77b9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -87,21 +87,19 @@
 </ng-template>
 
 <ng-template #actionsTemplate let-user="entity">
-    <div class="actions-container">
-        <div class="action-buttons">
-            <iqser-circle-button
-                (action)="openAddEditUserDialog($event, user)"
-                [tooltip]="'user-listing.action.edit' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="iqser:edit"
-            ></iqser-circle-button>
-            <iqser-circle-button
-                (action)="openDeleteUsersDialog([user], $event)"
-                [disabled]="user.id === userService.currentUser.id"
-                [tooltip]="'user-listing.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:trash"
-            ></iqser-circle-button>
-        </div>
+    <div class="action-buttons">
+        <iqser-circle-button
+            (action)="openAddEditUserDialog($event, user)"
+            [tooltip]="'user-listing.action.edit' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:edit"
+        ></iqser-circle-button>
+        <iqser-circle-button
+            (action)="openDeleteUsersDialog([user], $event)"
+            [disabled]="user.id === userService.currentUser.id"
+            [tooltip]="'user-listing.action.delete' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="red:trash"
+        ></iqser-circle-button>
     </div>
 </ng-template>