Dossier overview base listing

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">
+            <redaction-table-header
-                <iqser-round-checkbox
+                [bulkActions]="bulkActions"
-                    (click)="toggleSelectAll()"
+                [selectionEnabled]="true"
-                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                [tableColConfigs]="tableColConfigs"
-                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                [tableHeaderLabel]="tableHeaderLabel"
-                ></iqser-round-checkbox>
+            >
-
+            </redaction-table-header>
-                <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-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>

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;