From c11c9414f0bec3fed04943816f2c6d6cf2c96ba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 30 Aug 2021 14:57:59 +0300
Subject: [PATCH] User listing

---
 .../user-listing-screen.component.html        | 93 +++++++++----------
 .../user-listing-screen.component.scss        | 22 +----
 .../user-listing-screen.component.ts          | 25 +++--
 libs/common-ui                                |  2 +-
 4 files changed, 66 insertions(+), 76 deletions(-)

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 de2939987..3ad73de7e 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
@@ -32,55 +32,14 @@
 
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
-                <iqser-table-header
+                <iqser-table
+                    [actionsTemplate]="actionsTemplate"
                     [bulkActions]="bulkActions"
-                    [hasEmptyColumn]="true"
+                    [itemSize]="80"
+                    [noMatchText]="'user-listing.no-match.title' | translate"
                     [selectionEnabled]="true"
-                    [tableColumnConfigs]="tableColumnConfigs"
-                    [tableHeaderLabel]="tableHeaderLabel"
-                ></iqser-table-header>
-
-                <iqser-empty-state *ngIf="noMatch$ | async" [text]="'user-listing.no-match.title' | translate"></iqser-empty-state>
-
-                <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
-                    <!--      Table lines -->
-                    <div *cdkVirtualFor="let user of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
-                        <div (click)="toggleEntitySelected($event, user)" class="selection-column">
-                            <iqser-round-checkbox [active]="isSelected(user)"></iqser-round-checkbox>
-                        </div>
-
-                        <div>
-                            <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
-                        </div>
-                        <div class="small-label">{{ user.email || '-' }}</div>
-                        <div class="center">
-                            <mat-slide-toggle
-                                (toggleChange)="toggleActive(user)"
-                                [checked]="user.isActive"
-                                color="primary"
-                            ></mat-slide-toggle>
-                        </div>
-                        <div class="small-label">{{ getDisplayRoles(user) }}</div>
-                        <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>
-                        <div class="scrollbar-placeholder"></div>
-                    </div>
-                </cdk-virtual-scroll-viewport>
+                    emptyColumnWidth="1fr"
+                ></iqser-table>
             </div>
 
             <div [class.collapsed]="collapsedDetails" class="right-container" iqserHasScrollbar>
@@ -106,3 +65,43 @@
         tooltipPosition="after"
     ></iqser-circle-button>
 </ng-template>
+
+<ng-template #nameTemplate let-user="entity">
+    <div class="cell">
+        <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
+    </div>
+</ng-template>
+
+<ng-template #emailTemplate let-user="entity">
+    <div class="small-label cell">{{ user.email || '-' }}</div>
+</ng-template>
+
+<ng-template #activeTemplate let-user="entity">
+    <div class="center cell">
+        <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
+    </div>
+</ng-template>
+
+<ng-template #rolesTemplate let-user="entity">
+    <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
+</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>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 73674cbd8..438ff8dce 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -1,23 +1,5 @@
-cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr auto 11px;
-
-        .table-item {
-            > div:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-
-                &.center {
-                    align-items: center;
-                }
-            }
-        }
-    }
-
-    &.has-scrollbar:hover {
-        ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 2fr 1fr 1fr 1fr auto;
-        }
-    }
+:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell.center {
+    align-items: center;
 }
 
 .right-container {
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index 7f5c31cfd..0bb3f1e65 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
 import { UserService, UserWrapper } from '@services/user.service';
 import { UserControllerService } from '@redaction/red-ui-http';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -22,7 +22,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 @Component({
     templateUrl: './user-listing-screen.component.html',
     styleUrls: ['./user-listing-screen.component.scss'],
-    providers: [...DefaultListingServices]
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => UserListingScreenComponent) }]
 })
 export class UserListingScreenComponent extends ListingComponent<UserWrapper> implements OnInit {
     readonly translations = rolesTranslations;
@@ -31,14 +31,13 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
     readonly currentUser = this.userService.currentUser;
     readonly canDeleteSelected$ = this._canDeleteSelected$;
     readonly tableHeaderLabel = _('user-listing.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<UserWrapper>[] = [
-        { label: _('user-listing.table-col-names.name') },
-        { label: _('user-listing.table-col-names.email') },
-        { label: _('user-listing.table-col-names.active'), class: 'flex-center' },
-        { label: _('user-listing.table-col-names.roles') }
-    ];
+    tableColumnConfigs: TableColumnConfig<UserWrapper>[];
     collapsedDetails = false;
     chartData: DoughnutChartConfig[] = [];
+    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
+    @ViewChild('emailTemplate', { static: true }) emailTemplate: TemplateRef<never>;
+    @ViewChild('activeTemplate', { static: true }) activeTemplate: TemplateRef<never>;
+    @ViewChild('rolesTemplate', { static: true }) rolesTemplate: TemplateRef<never>;
     protected readonly _primaryKey = 'id';
     @ViewChildren(InitialsAvatarComponent)
     private readonly _avatars: QueryList<InitialsAvatarComponent>;
@@ -61,6 +60,7 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
     }
 
     async ngOnInit() {
+        this._configureTableColumns();
         await this._loadData();
         this.searchService.setSearchKey('searchKey');
     }
@@ -97,6 +97,15 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
         this.openDeleteUsersDialog(this.entitiesService.all.filter(u => this.isSelected(u)));
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            { label: _('user-listing.table-col-names.name'), template: this.nameTemplate, width: '2fr' },
+            { label: _('user-listing.table-col-names.email'), template: this.emailTemplate },
+            { label: _('user-listing.table-col-names.active'), class: 'flex-center', template: this.activeTemplate },
+            { label: _('user-listing.table-col-names.roles'), template: this.rolesTemplate }
+        ];
+    }
+
     private async _loadData() {
         this.entitiesService.setEntities(await this.userService.loadAllUsers());
         await this.userService.loadAllUsers();
diff --git a/libs/common-ui b/libs/common-ui
index 3c693625e..7a59cd099 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 3c693625e774ff61f89a49bf8a915e012320acc8
+Subproject commit 7a59cd09946221a444fad4d2aaf82597819d5679