Trash screen

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html

@@ -8,8 +8,7 @@
     [selectionEnabled]="true"
     emptyColumnWidth="auto"
     noDataIcon="red:attribute"
->
+></iqser-table>
-</iqser-table>
 
 <ng-template #bulkActions>
     <ng-container *ngIf="entitiesService.areSomeSelected$ | async">

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -32,8 +32,7 @@
                 [showNoDataButton]="currentUser.isAdmin"
                 emptyColumnWidth="1fr"
                 noDataIcon="red:attribute"
-            >
+            ></iqser-table>
-            </iqser-table>
         </div>
     </div>
 </section>

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -29,8 +29,7 @@
                 [selectionEnabled]="true"
                 emptyColumnWidth="1fr"
                 noDataIcon="red:attribute"
-            >
+            ></iqser-table>
-            </iqser-table>
         </div>
 
         <div class="right-container"></div>

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html

@@ -9,80 +9,14 @@
 
     <div class="red-content-inner">
         <div class="content-container">
-            <iqser-table-header
+            <iqser-table
                 [bulkActions]="bulkActions"
+                [itemSize]="80"
+                [noDataText]="'trash.no-data.title' | translate"
+                [noMatchText]="'trash.no-match.title' | translate"
                 [selectionEnabled]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
+                noDataIcon="red:template"
-                [tableHeaderLabel]="tableHeaderLabel"
+            ></iqser-table>
-            ></iqser-table-header>
-
-            <iqser-empty-state
-                *ngIf="entitiesService.noData$ | async"
-                [text]="'trash.no-data.title' | translate"
-                icon="red:template"
-            ></iqser-empty-state>
-
-            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'trash.no-match.title' | translate"></iqser-empty-state>
-
-            <cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
-                <div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
-                    <div (click)="toggleEntitySelected($event, entity)" class="selection-column">
-                        <iqser-round-checkbox [active]="isSelected(entity)"></iqser-round-checkbox>
-                    </div>
-
-                    <div class="filename">
-                        <div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
-                            {{ entity.dossierName }}
-                        </div>
-                        <div class="small-label stats-subtitle">
-                            <div>
-                                <mat-icon svgIcon="red:user"></mat-icon>
-                                {{ entity.memberIds.length }}
-                            </div>
-                            <div>
-                                <mat-icon svgIcon="red:calendar"></mat-icon>
-                                {{ entity.date | date: 'mediumDate' }}
-                            </div>
-                            <div *ngIf="entity.dueDate">
-                                <mat-icon svgIcon="red:lightning"></mat-icon>
-                                {{ entity.dueDate | date: 'mediumDate' }}
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="user-column">
-                        <redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
-                    </div>
-
-                    <div class="small-label">
-                        {{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
-                    </div>
-
-                    <div>
-                        <div class="small-label">
-                            {{ entity.restoreDate | date: 'timeFromNow' }}
-                        </div>
-                        <div class="action-buttons">
-                            <iqser-circle-button
-                                (action)="restore([entity])"
-                                *ngIf="entity.canRestore"
-                                [tooltip]="'trash.action.restore' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="red:put-back"
-                            ></iqser-circle-button>
-
-                            <iqser-circle-button
-                                (action)="hardDelete([entity])"
-                                [tooltip]="'trash.action.delete' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="red:trash"
-                            ></iqser-circle-button>
-                        </div>
-                    </div>
-
-                    <div class="scrollbar-placeholder"></div>
-                </div>
-            </cdk-virtual-scroll-viewport>
         </div>
     </div>
 </section>
@@ -106,3 +40,61 @@
         ></iqser-circle-button>
     </div>
 </ng-template>
+
+<ng-template #filenameTemplate let-entity="entity">
+    <div class="cell filename">
+        <div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
+            {{ entity.dossierName }}
+        </div>
+        <div class="small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:user"></mat-icon>
+                {{ entity.memberIds.length }}
+            </div>
+            <div>
+                <mat-icon svgIcon="red:calendar"></mat-icon>
+                {{ entity.date | date: 'mediumDate' }}
+            </div>
+            <div *ngIf="entity.dueDate">
+                <mat-icon svgIcon="red:lightning"></mat-icon>
+                {{ entity.dueDate | date: 'mediumDate' }}
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #ownerTemplate let-entity="entity">
+    <div class="cell user-column">
+        <redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
+    </div>
+</ng-template>
+
+<ng-template #deletedTimeTemplate let-entity="entity">
+    <div class="cell small-label">
+        {{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
+    </div>
+</ng-template>
+
+<ng-template #restoreDateTemplate let-entity="entity">
+    <div class="cell">
+        <div class="small-label">
+            {{ entity.restoreDate | date: 'timeFromNow' }}
+        </div>
+        <div class="action-buttons">
+            <iqser-circle-button
+                (action)="restore([entity])"
+                *ngIf="entity.canRestore"
+                [tooltip]="'trash.action.restore' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="red:put-back"
+            ></iqser-circle-button>
+
+            <iqser-circle-button
+                (action)="hardDelete([entity])"
+                [tooltip]="'trash.action.delete' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="red:trash"
+            ></iqser-circle-button>
+        </div>
+    </div>
+</ng-template>

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss

@@ -8,32 +8,3 @@
         margin-right: 2px;
     }
 }
-
-.content-container {
-    cdk-virtual-scroll-viewport {
-        ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 1fr 1fr 1fr 1fr 11px;
-
-            .table-item {
-                > div:not(.scrollbar-placeholder) {
-                    padding-left: 10px;
-
-                    .table-item-title {
-                        max-width: 100%;
-                    }
-                }
-
-                > div {
-                    height: 80px;
-                    padding: 0 24px;
-                }
-            }
-        }
-
-        &.has-scrollbar:hover {
-            ::ng-deep.cdk-virtual-scroll-content-wrapper {
-                grid-template-columns: auto 1fr 1fr 1fr 1fr;
-            }
-        }
-    }
-}

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Dossier } from '@redaction/red-ui-http';
-import { CircleButtonTypes, DefaultListingServices, ListingComponent, LoadingService, Listable, TableColumnConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, LoadingService, TableColumnConfig } from '@iqser/common-ui';
 import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import * as moment from 'moment';
 import { DossiersService } from '../../../dossier/services/dossiers.service';
@@ -21,31 +21,21 @@ interface DossierListItem extends Dossier, Listable {
     templateUrl: './trash-screen.component.html',
     styleUrls: ['./trash-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [...DefaultListingServices, DossiersService]
+    providers: [
+        ...DefaultListingServices,
+        DossiersService,
+        { provide: ListingComponent, useExisting: forwardRef(() => TrashScreenComponent) }
+    ]
 })
 export class TrashScreenComponent extends ListingComponent<DossierListItem> implements OnInit {
-    readonly itemSize = 80;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('trash.table-header.title');
     readonly canRestoreSelected$ = this._canRestoreSelected$;
-    readonly tableColumnConfigs: readonly TableColumnConfig<DossierListItem>[] = [
+    tableColumnConfigs: TableColumnConfig<DossierListItem>[];
-        {
+    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
-            label: _('trash.table-col-names.name'),
+    @ViewChild('ownerTemplate', { static: true }) ownerTemplate: TemplateRef<never>;
-            sortByKey: 'dossierName'
+    @ViewChild('deletedTimeTemplate', { static: true }) deletedTimeTemplate: TemplateRef<never>;
-        },
+    @ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
-        {
-            label: _('trash.table-col-names.owner'),
-            class: 'user-column'
-        },
-        {
-            label: _('trash.table-col-names.deleted-on'),
-            sortByKey: 'softDeletedTime'
-        },
-        {
-            label: _('trash.table-col-names.time-to-restore'),
-            sortByKey: 'softDeletedTime'
-        }
-    ];
     protected readonly _primaryKey = 'dossierName';
     private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
 
@@ -68,6 +58,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     }
 
     async ngOnInit(): Promise<void> {
+        this._configureTableColumns();
         this._loadingService.start();
         await this._loadDossiersData();
         this._loadingService.stop();
@@ -96,6 +87,31 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
         this._loadingService.loadWhile(this._restore(dossiers));
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('trash.table-col-names.name'),
+                sortByKey: 'dossierName',
+                template: this.filenameTemplate
+            },
+            {
+                label: _('trash.table-col-names.owner'),
+                class: 'user-column',
+                template: this.ownerTemplate
+            },
+            {
+                label: _('trash.table-col-names.deleted-on'),
+                sortByKey: 'softDeletedTime',
+                template: this.deletedTimeTemplate
+            },
+            {
+                label: _('trash.table-col-names.time-to-restore'),
+                sortByKey: 'softDeletedTime',
+                template: this.restoreDateTemplate
+            }
+        ];
+    }
+
     private _getRestoreDate(softDeletedTime: string): string {
         return moment(softDeletedTime).add(this._deleteRetentionHours, 'hours').toISOString();
     }