From a58fac3ec6747453ebdcbfcadfb5a6eafbee65e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 28 Jul 2021 22:14:53 +0300
Subject: [PATCH] Dossier overview base listing

---
 .../dossier-overview-screen.component.html    | 66 ++++---------------
 .../dossier-overview-screen.component.ts      | 34 +++++++++-
 2 files changed, 44 insertions(+), 56 deletions(-)

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 ccefdea92..89acade3f 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
@@ -36,61 +36,13 @@
 
     <div class="red-content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
-            <div class="header-item">
-                <iqser-round-checkbox
-                    (click)="toggleSelectAll()"
-                    [active]="screenStateService.areAllEntitiesSelected$ | async"
-                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
-                ></iqser-round-checkbox>
-
-                <span class="all-caps-label">
-                    {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
-                </span>
-
-                <redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
-
-                <redaction-quick-filters></redaction-quick-filters>
-            </div>
-
-            <div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
-                <!--      Table column names-->
-                <div class="select-oval-placeholder"></div>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.name' | translate"
-                    [withSort]="true"
-                    column="filename"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.added-on' | translate"
-                    [withSort]="true"
-                    column="added"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name [label]="'dossier-overview.table-col-names.needs-work' | translate"></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.assigned-to' | translate"
-                    [withSort]="true"
-                    class="user-column"
-                    column="reviewerName"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.pages' | translate"
-                    [withSort]="true"
-                    column="pages"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.status' | translate"
-                    [withSort]="true"
-                    class="flex-end"
-                    column="statusSort"
-                ></redaction-table-col-name>
-                <div class="scrollbar-placeholder"></div>
-            </div>
+            <redaction-table-header
+                [bulkActions]="bulkActions"
+                [selectionEnabled]="true"
+                [tableColConfigs]="tableColConfigs"
+                [tableHeaderLabel]="tableHeaderLabel"
+            >
+            </redaction-table-header>
 
             <redaction-empty-state
                 (action)="fileInput.click()"
@@ -236,3 +188,7 @@
 </ng-template>
 
 <input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
+
+<ng-template #bulkActions>
+    <redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 6a1e7dc12..f96389937 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -36,6 +36,7 @@ import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { CircleButtonTypes } from '@iqser/common-ui';
+import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -54,10 +55,41 @@ export class DossierOverviewScreenComponent
     collapsedDetails = false;
     actionConfigs: ActionConfig[];
     dossierAttributes: DossierAttributeWithValue[] = [];
+    tableColConfigs: TableColConfig[] = [
+        {
+            label: _('dossier-overview.table-col-names.name'),
+            withSort: true,
+            column: 'filename'
+        },
+        {
+            label: _('dossier-overview.table-col-names.added-on'),
+            withSort: true,
+            column: 'added'
+        },
+        {
+            label: _('dossier-overview.table-col-names.needs-work')
+        },
+        {
+            label: _('dossier-overview.table-col-names.assigned-to'),
+            withSort: true,
+            class: 'user-column',
+            column: 'reviewerName'
+        },
+        {
+            label: _('dossier-overview.table-col-names.pages'),
+            withSort: true,
+            column: 'pages'
+        },
+        {
+            label: _('dossier-overview.table-col-names.status'),
+            withSort: true,
+            class: 'flex-end',
+            column: 'statusSort'
+        }
+    ];
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
     private _lastScrollPosition: number;
-
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkTemplate: TemplateRef<any>;
     @ViewChild('fileInput') private _fileInput: ElementRef;