From 4d20349512fa7896e764a3f361af13fa1eb6380d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 27 Aug 2021 16:58:30 +0300
Subject: [PATCH] Moved empty states, templates listing

---
 .../downloads-list-screen.component.html      |   4 +-
 .../notifications.component.html              |   4 +-
 .../active-fields-listing.component.html      |   4 +-
 .../screens/audit/audit-screen.component.html |   4 +-
 .../dictionary-listing-screen.component.html  |  34 ++---
 .../dictionary-listing-screen.component.scss  |  75 +++++-----
 .../dictionary-listing-screen.component.ts    |   2 -
 .../digital-signature-screen.component.html   |   4 +-
 ...r-attributes-listing-screen.component.html |   8 +-
 ...er-templates-listing-screen.component.html | 141 +++++++++---------
 ...er-templates-listing-screen.component.scss |  32 ++--
 ...sier-templates-listing-screen.component.ts |  51 ++++---
 ...e-attributes-listing-screen.component.html |   9 +-
 .../screens/trash/trash-screen.component.html |   6 +-
 .../user-listing-screen.component.html        |   2 +-
 .../file-workload.component.html              |   4 +-
 .../edit-dossier-attributes.component.html    |   8 +-
 ...t-dossier-deleted-documents.component.html |   4 +-
 .../dossier-listing-screen.component.html     |   6 +-
 .../dossier-overview-screen.component.html    |   6 +-
 .../file-preview-screen.component.html        |   4 +-
 .../search-screen.component.html              |   4 +-
 .../empty-state/empty-state.component.html    |  21 ---
 .../empty-state/empty-state.component.scss    |  27 ----
 .../empty-state/empty-state.component.ts      |  25 ----
 .../src/app/modules/shared/shared.module.ts   |   2 -
 libs/common-ui                                |   2 +-
 27 files changed, 202 insertions(+), 291 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index a3f0a0e32..30cd28881 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -14,11 +14,11 @@
                 [tableHeaderLabel]="tableHeaderLabel"
             ></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="entitiesService.noData$ | async"
                 [text]="'downloads-list.no-data.title' | translate"
                 icon="red:download"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
                 <!--      Table lines -->
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index fb790d059..36fe9dfb8 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,11 +1,11 @@
 <iqser-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnreadNotifications" icon="red:notification"></iqser-circle-button>
 <mat-menu #overlay="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
-    <redaction-empty-state
+    <iqser-empty-state
         *ngIf="!groupedNotifications.length"
         [horizontalPadding]="40"
         [text]="'notifications.no-data' | translate"
         [verticalPadding]="0"
-    ></redaction-empty-state>
+    ></iqser-empty-state>
 
     <div *ngFor="let group of groupedNotifications">
         <div class="all-caps-label">{{ group.dateString }}</div>
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 ef90a9d75..4af65e5b0 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
@@ -6,11 +6,11 @@
     [tableHeaderLabel]="tableHeaderLabel"
 ></iqser-table-header>
 
-<redaction-empty-state
+<iqser-empty-state
     *ngIf="entitiesService.noData$ | async"
     [text]="'file-attributes-csv-import.no-data.title' | translate"
     icon="red:attribute"
-></redaction-empty-state>
+></iqser-empty-state>
 
 <cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
     <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index acb52bf63..ef0a8a160 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -107,11 +107,11 @@
                     <div class="scrollbar-placeholder"></div>
                 </div>
 
-                <redaction-empty-state
+                <iqser-empty-state
                     *ngIf="!logs?.totalHits"
                     [text]="'audit-screen.no-data.title' | translate"
                     icon="red:document"
-                ></redaction-empty-state>
+                ></iqser-empty-state>
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
                     <div *cdkVirtualFor="let log of logs?.data" class="table-item">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 2998054d6..bb8e5cf28 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -21,29 +21,21 @@
 
         <div class="content-container">
             <iqser-table
+                (noDataAction)="openAddEditDictionaryDialog()"
                 [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [itemSize]="80"
+                [noDataButtonLabel]="'dictionary-listing.no-data.action' | translate"
+                [noDataIcon]="'red:dictionary'"
+                [noDataText]="'dictionary-listing.no-data.title' | translate"
+                [noMatchText]="'dictionary-listing.no-match.title' | translate"
                 [routerLinkFn]="routerLinkFn"
                 [selectionEnabled]="true"
+                [showNoDataButton]="currentUser.isAdmin"
                 [tableColumnConfigs]="tableColumnConfigs"
                 [tableHeaderLabel]="tableHeaderLabel"
                 emptyColumnWidth="1fr"
             ></iqser-table>
-
-            <!--            <redaction-empty-state-->
-            <!--                (action)="openAddEditDictionaryDialog()"-->
-            <!--                *ngIf="entitiesService.noData$ | async"-->
-            <!--                [buttonLabel]="'dictionary-listing.no-data.action' | translate"-->
-            <!--                [showButton]="currentUser.isAdmin"-->
-            <!--                [text]="'dictionary-listing.no-data.title' | translate"-->
-            <!--                icon="red:dictionary"-->
-            <!--            ></redaction-empty-state>-->
-
-            <!--            <redaction-empty-state-->
-            <!--                *ngIf="noMatch$ | async"-->
-            <!--                [text]="'dictionary-listing.no-match.title' | translate"-->
-            <!--            ></redaction-empty-state>-->
         </div>
 
         <div class="right-container" iqserHasScrollbar>
@@ -107,29 +99,29 @@
     </div>
 </ng-template>
 
-<ng-template #rankTemplate let-entity="entity">
+<ng-template #rankTemplate let-dict="entity">
     <div class="cell center small-label">
-        {{ entity.rank }}
+        {{ dict.rank }}
     </div>
 </ng-template>
 
-<ng-template #iconTemplate let-entity="entity">
+<ng-template #iconTemplate let-dict="entity">
     <div class="cell center">
-        <redaction-annotation-icon [dictType]="entity" [type]="entity.hint ? 'circle' : 'square'"></redaction-annotation-icon>
+        <redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
     </div>
 </ng-template>
 
-<ng-template #actionsTemplate let-entity="entity">
+<ng-template #actionsTemplate let-dict="entity">
     <div *ngIf="currentUser.isAdmin" class="action-buttons">
         <iqser-circle-button
-            (action)="openDeleteDictionariesDialog($event, [entity])"
+            (action)="openDeleteDictionariesDialog($event, [dict])"
             [tooltip]="'dictionary-listing.action.delete' | translate"
             [type]="circleButtonTypes.dark"
             icon="red:trash"
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="openAddEditDictionaryDialog($event, entity)"
+            (action)="openAddEditDictionaryDialog($event, dict)"
             [tooltip]="'dictionary-listing.action.edit' | translate"
             [type]="circleButtonTypes.dark"
             icon="iqser:edit"
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
index 218ba0992..4f8de30ba 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
@@ -1,43 +1,44 @@
-::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
+:host {
+    ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
 
-    &.center {
+        &.center {
+            justify-content: center;
+        }
+
+        .color-square {
+            width: 16px;
+            height: 16px;
+            min-width: 16px;
+            margin-right: 16px;
+        }
+
+        .dict-name {
+            z-index: 1;
+            max-width: 100%;
+        }
+
+        .stats-subtitle {
+            margin-top: 4px;
+        }
+    }
+
+    .right-container {
+        display: flex;
+        width: 353px;
+        min-width: 353px;
         justify-content: center;
+        padding: 50px 20px 30px 20px;
+
+        &.has-scrollbar:hover {
+            padding-right: 9px;
+        }
     }
 
-    .color-square {
-        width: 16px;
-        height: 16px;
-        min-width: 16px;
-        margin-right: 16px;
-    }
-
-    .dict-name {
-        z-index: 1;
-        max-width: 100%;
-    }
-
-    .stats-subtitle {
-        margin-top: 4px;
+    .page-header .actions {
+        display: flex;
+        justify-content: flex-end;
     }
 }
-
-.right-container {
-    display: flex;
-    width: 353px;
-    min-width: 353px;
-    justify-content: center;
-    padding: 50px 20px 30px 20px;
-
-    &.has-scrollbar:hover {
-        padding-right: 9px;
-    }
-}
-
-.page-header .actions {
-    display: flex;
-    justify-content: flex-end;
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
index 41d72020a..fe876f8c5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
@@ -112,13 +112,11 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
                 label: _('dictionary-listing.table-col-names.order-of-importance'),
                 sortByKey: 'rank',
                 class: 'flex-center',
-                width: '1fr',
                 template: this.rankTemplate
             },
             {
                 label: _('dictionary-listing.table-col-names.hint-redaction'),
                 class: 'flex-center',
-                width: '1fr',
                 template: this.iconTemplate
             }
         ];
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 97eefcf76..1dc0a9cfc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -16,13 +16,13 @@
                     <form *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
                         <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />
 
-                        <redaction-empty-state
+                        <iqser-empty-state
                             (action)="fileInput.click()"
                             *ngIf="!hasDigitalSignatureSet"
                             [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
                             [text]="'digital-signature-screen.no-data.title' | translate"
                             buttonIcon="red:upload"
-                        ></redaction-empty-state>
+                        ></iqser-empty-state>
 
                         <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group required w-300">
                             <label translate="digital-signature-screen.certificate-name.label"></label>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index d2ab0c2da..a3f02e84f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -28,19 +28,19 @@
                 [tableHeaderLabel]="tableHeaderLabel"
             ></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 (action)="openAddEditAttributeDialog($event)"
                 *ngIf="entitiesService.noData$ | async"
                 [buttonLabel]="'dossier-attributes-listing.no-data.action' | translate"
                 [showButton]="currentUser.isAdmin"
                 [text]="'dossier-attributes-listing.no-data.title' | translate"
                 icon="red:attribute"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="noMatch$ | async"
                 [text]="'dossier-attributes-listing.no-match.title' | translate"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
                 <div
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 13b503373..827e22b2c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -12,83 +12,18 @@
 
         <div class="red-content-inner">
             <div class="content-container">
-                <iqser-table-header
+                <iqser-table
                     [bulkActions]="bulkActions"
+                    [headerTemplate]="headerTemplate"
+                    [itemSize]="80"
+                    [noDataIcon]="'red:template'"
+                    [noDataText]="'dossier-templates-listing.no-data.title' | translate"
+                    [noMatchText]="'dossier-templates-listing.no-match.title' | translate"
+                    [routerLinkFn]="routerLinkFn"
                     [selectionEnabled]="true"
                     [tableColumnConfigs]="tableColumnConfigs"
                     [tableHeaderLabel]="tableHeaderLabel"
-                >
-                    <div class="actions flex-1">
-                        <iqser-input-with-action
-                            [(value)]="searchService.searchValue"
-                            [placeholder]="'dossier-templates-listing.search' | translate"
-                        ></iqser-input-with-action>
-
-                        <iqser-icon-button
-                            (action)="openAddDossierTemplateDialog()"
-                            *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
-                            [label]="'dossier-templates-listing.add-new' | translate"
-                            [type]="iconButtonTypes.primary"
-                            icon="red:plus"
-                        ></iqser-icon-button>
-                    </div>
-                </iqser-table-header>
-
-                <redaction-empty-state
-                    *ngIf="entitiesService.noData$ | async"
-                    [text]="'dossier-templates-listing.no-data.title' | translate"
-                    icon="red:template"
-                ></redaction-empty-state>
-
-                <redaction-empty-state
-                    *ngIf="noMatch$ | async"
-                    [text]="'dossier-templates-listing.no-match.title' | translate"
-                ></redaction-empty-state>
-
-                <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
-                    <div
-                        *cdkVirtualFor="let dossierTemplate of sortedDisplayedEntities$ | async"
-                        [routerLink]="[dossierTemplate.dossierTemplateId, 'dictionaries']"
-                        class="table-item pointer"
-                    >
-                        <div (click)="toggleEntitySelected($event, dossierTemplate)" class="selection-column">
-                            <iqser-round-checkbox [active]="isSelected(dossierTemplate)"></iqser-round-checkbox>
-                        </div>
-
-                        <div>
-                            <div class="table-item-title heading">
-                                {{ dossierTemplate.name }}
-                            </div>
-                            <div class="small-label stats-subtitle">
-                                <div>
-                                    <mat-icon svgIcon="red:dictionary"></mat-icon>
-                                    {{
-                                        'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount }
-                                    }}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="user-column">
-                            <redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
-                        </div>
-                        <div class="small-label">
-                            {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
-                        </div>
-                        <div>
-                            <div class="small-label">
-                                {{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
-                            </div>
-
-                            <redaction-dossier-template-actions
-                                (loadDossierTemplatesData)="loadDossierTemplatesData()"
-                                [dossierTemplateId]="dossierTemplate.dossierTemplateId"
-                                class="actions-container"
-                            ></redaction-dossier-template-actions>
-                        </div>
-                        <div class="scrollbar-placeholder"></div>
-                    </div>
-                </cdk-virtual-scroll-viewport>
+                ></iqser-table>
             </div>
         </div>
     </div>
@@ -103,3 +38,63 @@
         icon="red:trash"
     ></iqser-circle-button>
 </ng-template>
+
+<ng-template #actionsTemplate let-dossierTemplate="entity">
+    <redaction-dossier-template-actions
+        (loadDossierTemplatesData)="loadDossierTemplatesData()"
+        [dossierTemplateId]="dossierTemplate.dossierTemplateId"
+        class="actions-container"
+    ></redaction-dossier-template-actions>
+</ng-template>
+
+<ng-template #headerTemplate>
+    <div class="actions flex-1">
+        <iqser-input-with-action
+            [(value)]="searchService.searchValue"
+            [placeholder]="'dossier-templates-listing.search' | translate"
+        ></iqser-input-with-action>
+
+        <iqser-icon-button
+            (action)="openAddDossierTemplateDialog()"
+            *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
+            [label]="'dossier-templates-listing.add-new' | translate"
+            [type]="iconButtonTypes.primary"
+            icon="red:plus"
+        ></iqser-icon-button>
+    </div>
+</ng-template>
+
+<ng-template #nameTemplate let-dossierTemplate="entity">
+    <div class="cell">
+        <div class="table-item-title heading">
+            {{ dossierTemplate.name }}
+        </div>
+        <div class="small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:dictionary"></mat-icon>
+                {{ 'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount } }}
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #userTemplate let-dossierTemplate="entity">
+    <div class="cell user-column">
+        <redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
+    </div>
+</ng-template>
+
+<ng-template #dateAddedTemplate let-dossierTemplate="entity">
+    <div class="cell small-label">
+        {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
+    </div>
+</ng-template>
+
+<ng-template #dateModifiedTemplate let-dossierTemplate="entity">
+    <div class="cell">
+        <div class="small-label">
+            {{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
+        </div>
+        <ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: dossierTemplate }"></ng-container>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
index 351bb7095..009e0d63a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
@@ -1,29 +1,15 @@
-cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 1fr 1fr 1fr 1fr 11px;
+:host {
+    ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
+        .stats-subtitle {
+            margin-top: 4px;
+        }
 
-        .table-item {
-            > div:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-
-                .stats-subtitle {
-                    margin-top: 4px;
-                }
-
-                .table-item-title {
-                    max-width: 100%;
-                }
-            }
+        .table-item-title {
+            max-width: 100%;
         }
     }
 
-    &.has-scrollbar:hover {
-        ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 1fr 1fr 1fr 1fr;
-        }
+    .page-header .actions > *:not(:last-child) {
+        margin-right: 16px;
     }
 }
-
-.page-header .actions > *:not(:last-child) {
-    margin-right: 16px;
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
index 86d6ceed6..31a91ff16 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-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 { UserPreferenceService } from '@services/user-preference.service';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -20,28 +20,21 @@ import { RouterHistoryService } from '@services/router-history.service';
     templateUrl: './dossier-templates-listing-screen.component.html',
     styleUrls: ['./dossier-templates-listing-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [...DefaultListingServices]
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => DossierTemplatesListingScreenComponent) }
+    ]
 })
 export class DossierTemplatesListingScreenComponent extends ListingComponent<DossierTemplateModelWrapper> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');
-    readonly tableColumnConfigs: readonly TableColumnConfig<DossierTemplateModelWrapper>[] = [
-        {
-            label: _('dossier-templates-listing.table-col-names.name'),
-            sortByKey: 'name'
-        },
-        { label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column' },
-        {
-            label: _('dossier-templates-listing.table-col-names.created-on'),
-            sortByKey: 'dateAdded'
-        },
-        {
-            label: _('dossier-templates-listing.table-col-names.modified-on'),
-            sortByKey: 'dateModified'
-        }
-    ];
+    tableColumnConfigs: TableColumnConfig<DossierTemplateModelWrapper>[];
+    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
+    @ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<never>;
+    @ViewChild('dateAddedTemplate', { static: true }) dateAddedTemplate: TemplateRef<never>;
+    @ViewChild('dateModifiedTemplate', { static: true }) dateModifiedTemplate: TemplateRef<never>;
     protected readonly _primaryKey = 'name';
 
     constructor(
@@ -57,7 +50,10 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
         super(_injector);
     }
 
+    routerLinkFn = (dossierTemplate: DossierTemplateModelWrapper) => [dossierTemplate.dossierTemplateId, 'dictionaries'];
+
     ngOnInit(): void {
+        this._setColumnConfig();
         this.loadDossierTemplatesData();
     }
 
@@ -79,6 +75,27 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
         });
     }
 
+    private _setColumnConfig() {
+        this.tableColumnConfigs = [
+            {
+                label: _('dossier-templates-listing.table-col-names.name'),
+                sortByKey: 'name',
+                template: this.nameTemplate
+            },
+            { label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column', template: this.userTemplate },
+            {
+                label: _('dossier-templates-listing.table-col-names.created-on'),
+                sortByKey: 'dateAdded',
+                template: this.dateAddedTemplate
+            },
+            {
+                label: _('dossier-templates-listing.table-col-names.modified-on'),
+                sortByKey: 'dateModified',
+                template: this.dateModifiedTemplate
+            }
+        ];
+    }
+
     private async _deleteTemplates(templateIds: string[] = this.entitiesService.selected.map(d => d.dossierTemplateId)) {
         await this._dossierTemplateControllerService.deleteDossierTemplates(templateIds).toPromise();
         this.entitiesService.setSelected([]);
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 116f0be0f..1982e494e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -28,16 +28,13 @@
                 [tableHeaderLabel]="tableHeaderLabel"
             ></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="entitiesService.noData$ | async"
                 [text]="'file-attributes-listing.no-data.title' | translate"
                 icon="red:attribute"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
-            <redaction-empty-state
-                *ngIf="noMatch$ | async"
-                [text]="'file-attributes-listing.no-match.title' | translate"
-            ></redaction-empty-state>
+            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'file-attributes-listing.no-match.title' | translate"></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
                 <div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index a0a6b8c86..f66db631a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -16,13 +16,13 @@
                 [tableHeaderLabel]="tableHeaderLabel"
             ></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="entitiesService.noData$ | async"
                 [text]="'trash.no-data.title' | translate"
                 icon="red:template"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch$ | async" [text]="'trash.no-match.title' | translate"></redaction-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">
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 c7b86e9eb..de2939987 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
@@ -40,7 +40,7 @@
                     [tableHeaderLabel]="tableHeaderLabel"
                 ></iqser-table-header>
 
-                <redaction-empty-state *ngIf="noMatch$ | async" [text]="'user-listing.no-match.title' | translate"></redaction-empty-state>
+                <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 -->
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index bcb0c1f7a..27a895164 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -138,7 +138,7 @@
                     tabindex="1"
                 >
                     <ng-container *ngIf="activeViewerPage && !displayedAnnotations.get(activeViewerPage)?.length">
-                        <redaction-empty-state
+                        <iqser-empty-state
                             [horizontalPadding]="24"
                             [text]="'file-preview.no-data.title' | translate"
                             [verticalPadding]="40"
@@ -154,7 +154,7 @@
                                 </a
                                 >.
                             </ng-container>
-                        </redaction-empty-state>
+                        </iqser-empty-state>
                         <div class="no-annotations-buttons-container mt-32">
                             <iqser-icon-button
                                 (action)="jumpToPreviousWithAnnotations()"
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index f8adc89e5..427774292 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -4,11 +4,11 @@
             {{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
         </div>
 
-        <redaction-empty-state
+        <iqser-empty-state
             *ngIf="!customAttributes.length"
             [text]="'edit-dossier-dialog.attributes.no-custom-attributes' | translate"
             icon="red:attribute"
-        ></redaction-empty-state>
+        ></iqser-empty-state>
 
         <div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isDate(attr)" class="iqser-input-group">
             <label>{{ attr.label }}</label>
@@ -34,11 +34,11 @@
             {{ 'edit-dossier-dialog.attributes.image-attributes' | translate }}
         </div>
 
-        <redaction-empty-state
+        <iqser-empty-state
             *ngIf="!imageAttributes.length"
             [text]="'edit-dossier-dialog.attributes.no-image-attributes' | translate"
             icon="red:attribute"
-        ></redaction-empty-state>
+        ></iqser-empty-state>
 
         <div
             *ngFor="let attr of imageAttributes"
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 33128db1d..fce1277e4 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
@@ -11,11 +11,11 @@
     ></div>
 </iqser-table-header>
 
-<redaction-empty-state
+<iqser-empty-state
     *ngIf="entitiesService.noData$ | async"
     [text]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
     icon="red:document"
-></redaction-empty-state>
+></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">
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
index a3c5f1211..a3639eba2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
@@ -10,16 +10,16 @@
         <div class="content-container">
             <iqser-table-header [tableColumnConfigs]="tableColumnConfigs" [tableHeaderLabel]="tableHeaderLabel"></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 (action)="openAddDossierDialog()"
                 *ngIf="entitiesService.noData$ | async"
                 [buttonLabel]="'dossier-listing.no-data.action' | translate"
                 [showButton]="currentUser.isManager"
                 [text]="'dossier-listing.no-data.title' | translate"
                 icon="red:folder"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-listing.no-match.title' | translate"></redaction-empty-state>
+            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'dossier-listing.no-match.title' | translate"></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
                 <div
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 a025c0f9a..8deea4678 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
@@ -43,16 +43,16 @@
                 [tableHeaderLabel]="tableHeaderLabel"
             ></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 (action)="fileInput.click()"
                 *ngIf="entitiesService.noData$ | async"
                 [buttonLabel]="'dossier-overview.no-data.action' | translate"
                 [text]="'dossier-overview.no-data.title' | translate"
                 buttonIcon="red:upload"
                 icon="red:document"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
+            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
                 <div
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index 942cea531..661e8e458 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -147,12 +147,12 @@
         </div>
 
         <div class="right-container">
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="appStateService.activeFile.excluded && !viewDocumentInfo && !excludePages"
                 [horizontalPadding]="40"
                 [text]="'file-preview.tabs.is-excluded' | translate"
                 icon="red:needs-work"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
             <redaction-document-info
                 (closeDocumentInfoView)="viewDocumentInfo = false"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index 96ab26de7..305fef1bf 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -13,11 +13,11 @@
         <div class="content-container">
             <iqser-table-header [tableColumnConfigs]="tableColumnConfigs" [tableHeaderLabel]="tableHeaderLabel"></iqser-table-header>
 
-            <redaction-empty-state
+            <iqser-empty-state
                 *ngIf="searchResult.length === 0"
                 [icon]="'iqser:search'"
                 [text]="'search-screen.no-data' | translate"
-            ></redaction-empty-state>
+            ></iqser-empty-state>
 
             <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
                 <div
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
deleted file mode 100644
index cc9bca594..000000000
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div
-    [ngStyle]="{
-        'padding-top': verticalPadding + 'px',
-        'padding-left': horizontalPadding + 'px',
-        'padding-right': horizontalPadding + 'px'
-    }"
-    class="empty-state"
->
-    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
-    <div class="ng-content-wrapper heading-l">
-        <ng-content></ng-content>
-    </div>
-    <div class="heading-l">{{ text }}</div>
-    <iqser-icon-button
-        (action)="action.emit()"
-        *ngIf="showButton"
-        [icon]="buttonIcon"
-        [label]="buttonLabel"
-        [type]="iconButtonTypes.primary"
-    ></iqser-icon-button>
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
deleted file mode 100644
index 2676a3071..000000000
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '../../../../../assets/styles/variables';
-
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-
-    > mat-icon {
-        height: 60px;
-        width: 60px;
-        opacity: 0.1;
-    }
-
-    .heading-l {
-        color: $grey-7;
-    }
-
-    > .heading-l,
-    iqser-icon-button {
-        margin-top: 24px;
-    }
-
-    .ng-content-wrapper:not(:empty) + .heading-l {
-        display: none;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
deleted file mode 100644
index 973f75a07..000000000
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IconButtonTypes } from '@iqser/common-ui';
-
-@Component({
-    selector: 'redaction-empty-state',
-    templateUrl: './empty-state.component.html',
-    styleUrls: ['./empty-state.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class EmptyStateComponent implements OnInit {
-    readonly iconButtonTypes = IconButtonTypes;
-
-    @Input() text: string;
-    @Input() icon: string;
-    @Input() showButton = true;
-    @Input() buttonIcon = 'red:plus';
-    @Input() buttonLabel: string;
-    @Input() horizontalPadding = 100;
-    @Input() verticalPadding = 120;
-    @Output() action = new EventEmitter();
-
-    ngOnInit(): void {
-        this.showButton = this.showButton && this.action.observers.length > 0;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index c5528b409..74c3200a4 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -13,7 +13,6 @@ import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart
 import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
 import { HiddenActionComponent } from './components/hidden-action/hidden-action.component';
 import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
-import { EmptyStateComponent } from './components/empty-state/empty-state.component';
 import { CommonUiModule } from '@iqser/common-ui';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
@@ -36,7 +35,6 @@ const components = [
     DictionaryAnnotationIconComponent,
     HiddenActionComponent,
     ConfirmationDialogComponent,
-    EmptyStateComponent,
     SelectComponent,
     SideNavComponent,
     DictionaryManagerComponent,
diff --git a/libs/common-ui b/libs/common-ui
index 1b7104ba1..a659dcecd 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 1b7104ba14b1e3fae3276fd5f82d098e8a3b90c8
+Subproject commit a659dcecd7115eda1320d9d7188788e1e00ccb18