From 23cef696477d9147900885a2f1492352a8d7f535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 6 Sep 2021 15:05:16 +0300
Subject: [PATCH] Documents trash

---
 ...t-dossier-deleted-documents.component.html | 99 ++++++++++---------
 ...t-dossier-deleted-documents.component.scss | 24 +----
 ...dit-dossier-deleted-documents.component.ts | 46 +++++++--
 libs/common-ui                                |  2 +-
 4 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
index fce1277e4..a34e4ee96 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
@@ -1,59 +1,19 @@
-<iqser-table-header
+<iqser-table
     [bulkActions]="bulkActions"
+    [headerTemplate]="headerTemplate"
+    [itemSize]="50"
+    [noDataText]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
     [selectionEnabled]="true"
-    [tableColumnConfigs]="tableColumnConfigs"
-    [tableHeaderLabel]="tableHeaderLabel"
->
+    noDataIcon="red:document"
+></iqser-table>
+
+<ng-template #headerTemplate>
     <div
         [translateParams]="{ hours: deleteRetentionHours }"
         [translate]="'edit-dossier-dialog.deleted-documents.instructions'"
         class="instructions"
     ></div>
-</iqser-table-header>
-
-<iqser-empty-state
-    *ngIf="entitiesService.noData$ | async"
-    [text]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
-    icon="red:document"
-></iqser-empty-state>
-
-<cdk-virtual-scroll-viewport *ngIf="(entitiesService.noData$ | async) === false" [itemSize]="itemSize" iqserHasScrollbar>
-    <div *cdkVirtualFor="let file of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
-        <div (click)="toggleEntitySelected($event, file)" class="selection-column">
-            <iqser-round-checkbox [active]="isSelected(file)"></iqser-round-checkbox>
-        </div>
-        <div class="filename">
-            <span>{{ file.filename }}</span>
-        </div>
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:pages"></mat-icon>
-                {{ file.numberOfPages }}
-            </div>
-        </div>
-        <div class="small-label">{{ file.softDeleted | date: 'exactDate' }}</div>
-        <div>
-            <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
-            <div class="action-buttons">
-                <iqser-circle-button
-                    (action)="restore([file])"
-                    *ngIf="file.canRestore"
-                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="red:put-back"
-                ></iqser-circle-button>
-
-                <iqser-circle-button
-                    (action)="hardDelete([file])"
-                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="red:trash"
-                ></iqser-circle-button>
-            </div>
-        </div>
-        <div class="scrollbar-placeholder"></div>
-    </div>
-</cdk-virtual-scroll-viewport>
+</ng-template>
 
 <ng-template #bulkActions>
     <div class="bulk-actions">
@@ -74,3 +34,44 @@
         ></iqser-circle-button>
     </div>
 </ng-template>
+
+<ng-template #filenameTemplate let-file="entity">
+    <div class="cell filename">
+        <span>{{ file.filename }}</span>
+    </div>
+</ng-template>
+
+<ng-template #pagesTemplate let-file="entity">
+    <div class="cell small-label stats-subtitle">
+        <div>
+            <mat-icon svgIcon="red:pages"></mat-icon>
+            {{ file.numberOfPages }}
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #deletedDateTemplate let-file="entity">
+    <div class="cell small-label">{{ file.softDeleted | date: 'exactDate' }}</div>
+</ng-template>
+
+<ng-template #restoreDateTemplate let-file="entity">
+    <div class="cell">
+        <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
+        <div class="action-buttons">
+            <iqser-circle-button
+                (action)="restore([file])"
+                *ngIf="file.canRestore"
+                [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="red:put-back"
+            ></iqser-circle-button>
+
+            <iqser-circle-button
+                (action)="hardDelete([file])"
+                [tooltip]="'edit-dossier-dialog.deleted-documents.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/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
index 846a9777e..c27f06787 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
@@ -7,27 +7,11 @@
     text-align: end;
 }
 
-cdk-virtual-scroll-viewport {
-    height: calc(100% - 81px);
+:host ::ng-deep iqser-table cdk-virtual-scroll-viewport {
+    height: calc(100% - 81px) !important;
 
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 3fr 1fr 2fr 2fr 11px;
-
-        .table-item > div {
-            height: 50px;
-
-            &.filename span {
-                @include line-clamp(1);
-            }
-
-            //&.stats-subtitle > div {
-            //    width: fit-content;
-            //}
-        }
-    }
-
-    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 3fr 1fr 2fr 2fr;
+    .cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span {
+        @include line-clamp(1);
     }
 }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
index 85965c19e..9738be0f8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
-import { CircleButtonTypes, DefaultListingServices, ListingComponent, Listable, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, LoadingService, TableColumnConfig } from '@iqser/common-ui';
 import { FileManagementControllerService, FileStatus, StatusControllerService } from '@redaction/red-ui-http';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import * as moment from 'moment';
@@ -22,7 +22,10 @@ interface FileListItem extends FileStatus, Listable {
     selector: 'redaction-edit-dossier-deleted-documents',
     templateUrl: './edit-dossier-deleted-documents.component.html',
     styleUrls: ['./edit-dossier-deleted-documents.component.scss'],
-    providers: [...DefaultListingServices]
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => EditDossierDeletedDocumentsComponent) }
+    ]
 })
 export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileListItem> implements EditDossierSectionInterface, OnInit {
     @Input() dossierWrapper: DossierWrapper;
@@ -30,16 +33,14 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     readonly changed = false;
     readonly canRestoreSelected$ = this._canRestoreSelected$;
     disabled: boolean;
-    readonly tableColumnConfigs: TableColumnConfig<FileListItem>[] = [
-        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.name') },
-        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages') },
-        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on') },
-        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore') }
-    ];
+    tableColumnConfigs: TableColumnConfig<FileListItem>[];
     readonly tableHeaderLabel = _('edit-dossier-dialog.deleted-documents.table-header.label');
-    readonly itemSize = 50;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
+    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
+    @ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<never>;
+    @ViewChild('deletedDateTemplate', { static: true }) deletedDateTemplate: TemplateRef<never>;
+    @ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
     protected readonly _primaryKey = 'fileId';
 
     constructor(
@@ -80,6 +81,7 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     }
 
     async ngOnInit() {
+        this._configureTableColumns();
         this._loadingService.start();
         const files = await this._statusController.getDeletedFileStatus(this.dossierWrapper.dossierId).toPromise();
         this.entitiesService.setEntities(this._toListItems(files));
@@ -94,6 +96,30 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
         this._loadingService.loadWhile(this._restore(files));
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'),
+                template: this.filenameTemplate,
+                width: '3fr'
+            },
+            {
+                label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages'),
+                template: this.pagesTemplate
+            },
+            {
+                label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'),
+                template: this.deletedDateTemplate,
+                width: '2fr'
+            },
+            {
+                label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'),
+                template: this.restoreDateTemplate,
+                width: '2fr'
+            }
+        ];
+    }
+
     private async _restore(files: FileListItem[]): Promise<void> {
         const fileIds = files.map(f => f.fileId);
         await this._fileManagementController.restoreFiles(fileIds, this.dossierWrapper.dossierId).toPromise();
diff --git a/libs/common-ui b/libs/common-ui
index af46a45b9..d8379489b 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit af46a45b97a42380a316396635fecc58372b78eb
+Subproject commit d8379489b9da22ce463db6bcb4b351ec24287e30