From b9ecec3e523724be032979fc7f79f15a450ba753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 21 Sep 2021 15:44:49 +0300
Subject: [PATCH 1/6] Workflow initial

---
 .../dossier-details-stats.component.scss      |  4 +-
 .../file-actions/file-actions.component.html  | 47 ++++++----
 .../file-actions/file-actions.component.scss  |  4 +
 .../file-actions/file-actions.component.ts    | 81 +++++++++++-----
 .../dossier-listing-screen.component.html     |  4 +-
 .../dossier-overview-screen.component.html    | 92 ++++++++++++++----
 .../dossier-overview-screen.component.scss    | 54 +++++++++++
 .../dossier-overview-screen.component.ts      | 94 +++++++++++++++++--
 .../file-preview-screen.component.html        |  3 +-
 .../dossier/services/file-action.service.ts   |  9 +-
 .../page-header/page-header.component.html    |  8 +-
 .../page-header/page-header.component.scss    |  2 +
 .../page-header/page-header.component.ts      |  8 +-
 apps/red-ui/src/assets/i18n/en.json           |  6 ++
 .../src/assets/styles/red-components.scss     |  2 +
 .../src/assets/styles/red-page-layout.scss    |  8 ++
 libs/common-ui                                |  2 +-
 17 files changed, 340 insertions(+), 88 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
index 3d9becd36..395261bc7 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
@@ -14,12 +14,12 @@
         border-radius: 4px;
         width: 100%;
         justify-content: flex-start;
-        padding: 0 8px;
+        padding: 4px 8px;
         margin-left: -8px;
 
         &.link-property {
             cursor: pointer;
-            transition: background-color 0.2;
+            transition: background-color 0.2s;
 
             &:hover {
                 background-color: $grey-6;
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
index 135850473..51f0f9531 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
@@ -1,17 +1,26 @@
-<div *ngIf="screen === 'dossier-overview'" class="action-buttons">
+<div *ngIf="isDossierOverviewList" class="action-buttons">
     <ng-container *ngTemplateOutlet="actions"></ng-container>
-    <iqser-status-bar *ngIf="isWorkable" [configs]="statusBarConfig"></iqser-status-bar>
+    <iqser-status-bar *ngIf="showStatusBar" [configs]="statusBarConfig"></iqser-status-bar>
 </div>
 
-<ng-container *ngIf="screen === 'file-preview'">
+<ng-container *ngIf="isFilePreview || isDossierOverviewWorkflow">
     <ng-container *ngTemplateOutlet="actions"></ng-container>
 </ng-container>
 
 <ng-template #actions>
-    <div class="file-actions" *ngIf="fileStatus">
+    <div *ngIf="fileStatus" class="file-actions">
+        <iqser-circle-button
+            (action)="openDocument()"
+            *ngIf="showOpenDocument"
+            [tooltipPosition]="tooltipPosition"
+            [tooltip]="'dossier-overview.open-document' | translate"
+            [type]="buttonType"
+            icon="red:collapse"
+        ></iqser-circle-button>
+
         <iqser-circle-button
             (action)="openDeleteFileDialog($event)"
-            *ngIf="canDelete"
+            *ngIf="showDelete"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.delete.action' | translate"
             [type]="buttonType"
@@ -20,7 +29,7 @@
 
         <iqser-circle-button
             (action)="assign($event)"
-            *ngIf="canAssign && screen === 'dossier-overview'"
+            *ngIf="showAssign"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="assignTooltip | translate"
             [type]="buttonType"
@@ -29,7 +38,7 @@
 
         <iqser-circle-button
             (action)="assignToMe($event)"
-            *ngIf="canAssignToSelf && screen === 'dossier-overview'"
+            *ngIf="showAssignToSelf"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.assign-me' | translate"
             [type]="buttonType"
@@ -47,7 +56,7 @@
 
         <iqser-circle-button
             (action)="toggleViewDocumentInfo()"
-            *ngIf="screen === 'file-preview'"
+            *ngIf="showDocumentInfo"
             [attr.aria-expanded]="activeDocumentInfo"
             [tooltip]="'file-preview.document-info' | translate"
             icon="red:status-info"
@@ -56,7 +65,7 @@
 
         <iqser-circle-button
             (action)="toggleExcludePages()"
-            *ngIf="screen === 'file-preview'"
+            *ngIf="showExcludePages"
             [attr.aria-expanded]="activeExcludePages"
             [showDot]="!!fileStatus.excludedPages?.length"
             [tooltip]="'file-preview.exclude-pages' | translate"
@@ -67,7 +76,7 @@
         <!-- Ready for approval-->
         <iqser-circle-button
             (action)="setFileUnderApproval($event)"
-            *ngIf="canSetToUnderApproval"
+            *ngIf="showUnderApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
@@ -77,7 +86,7 @@
         <!-- Back to review -->
         <iqser-circle-button
             (action)="setFileUnderReview($event, true)"
-            *ngIf="canSetToUnderReview"
+            *ngIf="showUnderReview"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-review' | translate"
             [type]="buttonType"
@@ -87,7 +96,7 @@
         <!-- Approved-->
         <iqser-circle-button
             (action)="setFileApproved($event)"
-            *ngIf="readyForApproval"
+            *ngIf="showApprove"
             [disabled]="!fileStatus.canBeApproved"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="
@@ -100,7 +109,7 @@
         <!-- Back to approval -->
         <iqser-circle-button
             (action)="setFileUnderApproval($event)"
-            *ngIf="canUndoApproval"
+            *ngIf="showUndoApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
@@ -109,7 +118,7 @@
 
         <iqser-circle-button
             (action)="ocrFile($event)"
-            *ngIf="fileStatus.canBeOCRed"
+            *ngIf="showOCR"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.ocr-file' | translate"
             [type]="buttonType"
@@ -119,22 +128,22 @@
         <!-- reanalyse file preview -->
         <iqser-circle-button
             (action)="reanalyseFile($event)"
-            *ngIf="canReanalyse && screen === 'file-preview'"
+            *ngIf="canReanalyse && isFilePreview"
             [tooltip]="'file-preview.reanalyse-notification' | translate"
+            [type]="circleButtonTypes.warn"
             icon="iqser:refresh"
             tooltipClass="warn small"
             tooltipPosition="below"
-            [type]="circleButtonTypes.warn"
         ></iqser-circle-button>
 
         <!-- reanalyse file listing -->
         <iqser-circle-button
             (action)="reanalyseFile($event)"
-            *ngIf="canReanalyse && screen === 'dossier-overview'"
+            *ngIf="canReanalyse && isDossierOverview"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.reanalyse.action' | translate"
-            icon="iqser:refresh"
             [type]="circleButtonTypes.dark"
+            icon="iqser:refresh"
         ></iqser-circle-button>
 
         <!-- exclude from redaction -->
@@ -143,7 +152,7 @@
                 (change)="toggleAnalysis()"
                 (click)="$event.stopPropagation()"
                 [checked]="!fileStatus?.excluded"
-                [class.mr-24]="screen === 'dossier-overview'"
+                [class.mr-24]="isDossierOverviewList"
                 [disabled]="!canToggleAnalysis"
                 [matTooltipPosition]="tooltipPosition"
                 [matTooltip]="toggleTooltip | translate"
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
index 600b5345d..a3debb75c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
@@ -1,5 +1,9 @@
+@import 'libs/common-ui/src/assets/styles/mixins';
+
 .file-actions {
     display: flex;
+    overflow-y: auto;
+    @include no-scroll-bar;
 
     > *:not(:last-child) {
         margin-right: 2px;
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
index 331f285f0..492049b3a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
@@ -5,7 +5,7 @@ import { AppStateService } from '@state/app-state.service';
 import { FileActionService } from '../../services/file-action.service';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
-import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes, LoadingService, StatusBarConfig, Toaster } from '@iqser/common-ui';
+import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes, LoadingService, Required, StatusBarConfig, Toaster } from '@iqser/common-ui';
 import { FileManagementControllerService, FileStatus } from '@redaction/red-ui-http';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
@@ -23,25 +23,29 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
     @Input() fileStatus: FileStatusWrapper;
     @Input() activeDocumentInfo: boolean;
     @Input() activeExcludePages: boolean;
+    @Input() @Required() type: 'file-preview' | 'dossier-overview-list' | 'dossier-overview-workflow';
     @Output() actionPerformed = new EventEmitter<string>();
 
-    screen: 'file-preview' | 'dossier-overview';
     statusBarConfig?: readonly StatusBarConfig<FileStatus.StatusEnum>[];
     tooltipPosition?: 'below' | 'above';
     toggleTooltip?: string;
     assignTooltip?: string;
     buttonType?: CircleButtonType;
-    isWorkable: boolean;
 
-    canUndoApproval: boolean;
-    canAssignToSelf: boolean;
-    canAssign: boolean;
-    canDelete: boolean;
+    showUndoApproval: boolean;
+    showAssignToSelf: boolean;
+    showAssign: boolean;
+    showDelete: boolean;
+    showOCR: boolean;
     canReanalyse: boolean;
-    canSetToUnderReview: boolean;
-    canSetToUnderApproval: boolean;
-    readyForApproval: boolean;
+    showUnderReview: boolean;
+    showUnderApproval: boolean;
+    showApprove: boolean;
     canToggleAnalysis: boolean;
+    showExcludePages: boolean;
+    showDocumentInfo: boolean;
+    showStatusBar: boolean;
+    showOpenDocument: boolean;
 
     constructor(
         readonly permissionsService: PermissionsService,
@@ -56,6 +60,22 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         super();
     }
 
+    get isDossierOverviewList(): boolean {
+        return this.type === 'dossier-overview-list';
+    }
+
+    get isDossierOverviewWorkflow(): boolean {
+        return this.type === 'dossier-overview-workflow';
+    }
+
+    get isFilePreview(): boolean {
+        return this.type === 'file-preview';
+    }
+
+    get isDossierOverview(): boolean {
+        return this.type.startsWith('dossier-overview-list');
+    }
+
     private get _toggleTooltip(): string {
         if (!this.currentUser.isManager) {
             return _('file-preview.toggle-analysis.only-managers');
@@ -65,13 +85,9 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
     }
 
     ngOnInit(): void {
-        if (this.fileStatus) {
-            this.screen = 'dossier-overview';
-        } else {
+        if (!this.fileStatus) {
             this.fileStatus = this.appStateService.activeFile;
-            this.screen = 'file-preview';
         }
-
         this._setup();
         this.addSubscription = this.appStateService.fileChanged$
             .pipe(filter(file => file.fileId === this.fileStatus?.fileId))
@@ -93,6 +109,10 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         this.actionPerformed.emit('view-exclude-pages');
     }
 
+    openDocument() {
+        this.actionPerformed.emit('navigate');
+    }
+
     openDeleteFileDialog($event: MouseEvent) {
         this._dialogService.openDialog(
             'confirm',
@@ -194,22 +214,31 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
 
     private _setup() {
         this.statusBarConfig = [{ color: this.fileStatus.status, length: 1 }];
-        this.tooltipPosition = this.screen === 'file-preview' ? 'below' : 'above';
+        this.tooltipPosition = this.isFilePreview ? 'below' : 'above';
         this.assignTooltip = this.fileStatus.isUnderApproval
             ? _('dossier-overview.assign-approver')
             : _('dossier-overview.assign-reviewer');
-        this.buttonType = this.screen === 'file-preview' ? CircleButtonTypes.default : CircleButtonTypes.dark;
-        this.isWorkable = this.fileStatus.isWorkable;
+        this.buttonType = this.isFilePreview ? CircleButtonTypes.default : CircleButtonTypes.dark;
         this.toggleTooltip = this._toggleTooltip;
 
-        this.canUndoApproval = this.permissionsService.canUndoApproval(this.fileStatus);
-        this.canAssignToSelf = this.permissionsService.canAssignToSelf(this.fileStatus);
-        this.canAssign = this.permissionsService.canAssignUser(this.fileStatus);
-        this.canDelete = this.permissionsService.canDeleteFile(this.fileStatus);
-        this.canReanalyse = this.permissionsService.canReanalyseFile(this.fileStatus);
-        this.canSetToUnderReview = this.permissionsService.canSetUnderReview(this.fileStatus);
-        this.canSetToUnderApproval = this.permissionsService.canSetUnderApproval(this.fileStatus);
-        this.readyForApproval = this.permissionsService.isReadyForApproval(this.fileStatus);
+        this.showUndoApproval = this.permissionsService.canUndoApproval(this.fileStatus) && !this.isDossierOverviewWorkflow;
+        this.showUnderReview = this.permissionsService.canSetUnderReview(this.fileStatus) && !this.isDossierOverviewWorkflow;
+        this.showUnderApproval = this.permissionsService.canSetUnderApproval(this.fileStatus) && !this.isDossierOverviewWorkflow;
+        this.showApprove = this.permissionsService.isReadyForApproval(this.fileStatus) && !this.isDossierOverviewWorkflow;
+
         this.canToggleAnalysis = this.permissionsService.canToggleAnalysis(this.fileStatus);
+        this.showDelete = this.permissionsService.canDeleteFile(this.fileStatus);
+        this.showOCR = this.fileStatus.canBeOCRed;
+        this.canReanalyse = this.permissionsService.canReanalyseFile(this.fileStatus);
+
+        this.showStatusBar = this.fileStatus.isWorkable && this.isDossierOverviewList;
+
+        this.showAssignToSelf = this.permissionsService.canAssignToSelf(this.fileStatus) && this.isDossierOverview;
+        this.showAssign = this.permissionsService.canAssignUser(this.fileStatus) && this.isDossierOverview;
+
+        this.showOpenDocument = this.fileStatus.canBeOpened && this.isDossierOverviewWorkflow;
+
+        this.showExcludePages = this.isFilePreview;
+        this.showDocumentInfo = this.isFilePreview;
     }
 }
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 7dcf65568..f97d5c5b7 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
@@ -33,10 +33,10 @@
 
 <ng-template #nameTemplate let-dossier="entity">
     <div class="cell">
-        <div [matTooltip]="dossier.dossierName" class="table-item-title heading" matTooltipPosition="above">
+        <div [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above">
             {{ dossier.dossierName }}
         </div>
-        <div class="small-label stats-subtitle">
+        <div class="small-label stats-subtitle mb-6">
             <div>
                 <mat-icon svgIcon="red:template"></mat-icon>
                 {{ dossier.dossierTemplateName }}
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 92ff81d9e..bd8d752e5 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
@@ -4,6 +4,7 @@
         [actionConfigs]="actionConfigs"
         [fileAttributeConfigs]="fileAttributeConfigs"
         [showCloseButton]="true"
+        [viewModeSelection]="viewModeSelection"
     >
         <redaction-file-download-btn
             [dossier]="currentDossier"
@@ -37,6 +38,7 @@
         <div [class.extended]="collapsedDetails" class="content-container">
             <iqser-table
                 (noDataAction)="fileInput.click()"
+                *ngIf="(listingMode$ | async) === listingModes.table"
                 [bulkActions]="bulkActions"
                 [hasScrollButton]="true"
                 [itemSize]="80"
@@ -49,6 +51,12 @@
                 noDataButtonIcon="red:upload"
                 noDataIcon="red:document"
             ></iqser-table>
+
+            <iqser-workflow
+                *ngIf="(listingMode$ | async) === listingModes.workflow"
+                [config]="workflowConfig"
+                [itemTemplate]="workflowItemTemplate"
+            ></iqser-workflow>
         </div>
 
         <div [class.collapsed]="collapsedDetails" class="right-container" iqserHasScrollbar>
@@ -74,34 +82,21 @@
 
 <ng-template #filenameTemplate let-fileStatus="entity">
     <div class="cell">
-        <div class="filename-wrapper">
-            <div [class.error]="fileStatus.isError" class="table-item-title text-overflow">
+        <div>
+            <div [class.error]="fileStatus.isError" class="table-item-title">
                 <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
                     {{ fileStatus.filename }}
                 </span>
             </div>
         </div>
         <div *ngIf="fileStatus.primaryAttribute" class="small-label">
-            <div class="primary-attribute text-overflow">
+            <div class="primary-attribute">
                 <span [matTooltip]="fileStatus.primaryAttribute" matTooltipPosition="above">
                     {{ fileStatus.primaryAttribute }}
                 </span>
             </div>
         </div>
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:pages"></mat-icon>
-                {{ fileStatus.numberOfPages }}
-            </div>
-            <div>
-                <mat-icon svgIcon="red:exclude-pages"></mat-icon>
-                {{ fileStatus.excludedPagesCount }}
-            </div>
-            <div *ngIf="fileStatus.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
-                <mat-icon svgIcon="red:ocr"></mat-icon>
-                {{ fileStatus.lastOCRTime | date: 'mediumDate' }}
-            </div>
-        </div>
+        <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: fileStatus }"></ng-container>
     </div>
 </ng-template>
 
@@ -167,10 +162,71 @@
         ></iqser-status-bar>
 
         <redaction-file-actions
-            (actionPerformed)="calculateData()"
+            (actionPerformed)="actionPerformed()"
             *ngIf="!fileStatus.isProcessing"
             [fileStatus]="fileStatus"
             class="mr-4"
+            type="dossier-overview-list"
         ></redaction-file-actions>
     </div>
 </ng-template>
+
+<ng-template #viewModeSelection>
+    <div class="view-mode-selection">
+        <div class="all-caps-label" translate="view-mode.view-as"></div>
+        <iqser-circle-button
+            (action)="listingMode = listingModes.workflow"
+            [attr.aria-expanded]="(listingMode$ | async) === listingModes.workflow"
+            [tooltip]="'view-mode.workflow' | translate"
+            icon="iqser:lanes"
+        ></iqser-circle-button>
+
+        <iqser-circle-button
+            (action)="listingMode = listingModes.table"
+            [attr.aria-expanded]="(listingMode$ | async) === listingModes.table"
+            [tooltip]="'view-mode.list' | translate"
+            icon="iqser:list"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
+
+<ng-template #workflowItemTemplate let-fileStatus="entity">
+    <div class="workflow-item">
+        <div>
+            <div class="details">
+                <div class="filename">
+                    <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
+                        {{ fileStatus.filename }}
+                    </span>
+                </div>
+                <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: fileStatus }"></ng-container>
+            </div>
+            <div class="user">
+                <redaction-initials-avatar [userId]="fileStatus.currentReviewer"></redaction-initials-avatar>
+            </div>
+        </div>
+        <redaction-file-actions
+            (actionPerformed)="actionPerformed($event, fileStatus)"
+            *ngIf="!fileStatus.isProcessing"
+            [fileStatus]="fileStatus"
+            type="dossier-overview-workflow"
+        ></redaction-file-actions>
+    </div>
+</ng-template>
+
+<ng-template #statsTemplate let-fileStatus="entity">
+    <div class="small-label stats-subtitle">
+        <div>
+            <mat-icon svgIcon="red:pages"></mat-icon>
+            {{ fileStatus.numberOfPages }}
+        </div>
+        <div>
+            <mat-icon svgIcon="red:exclude-pages"></mat-icon>
+            {{ fileStatus.excludedPagesCount }}
+        </div>
+        <div *ngIf="fileStatus.lastOCRTime" [matTooltipPosition]="'above'" [matTooltip]="'dossier-overview.ocr-performed' | translate">
+            <mat-icon svgIcon="red:ocr"></mat-icon>
+            {{ fileStatus.lastOCRTime | date: 'mediumDate' }}
+        </div>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
index 5a0559734..6d9657552 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
@@ -1,4 +1,5 @@
 @import '../../../../../assets/styles/variables';
+@import 'libs/common-ui/src/assets/styles/mixins';
 
 .file-upload-input {
     display: none;
@@ -27,6 +28,7 @@
 
         .primary-attribute {
             padding-top: 6px;
+            @include line-clamp(1);
         }
 
         &.extend-cols {
@@ -63,3 +65,55 @@
         background-color: inherit;
     }
 }
+
+.view-mode-selection {
+    border-right: 1px solid $separator;
+    padding-right: 16px;
+    margin-right: 16px !important;
+    display: flex;
+    align-items: center;
+
+    > iqser-circle-button:not(:last-child) {
+        margin-right: 2px;
+    }
+
+    > div {
+        margin-right: 8px;
+    }
+}
+
+.workflow-item {
+    padding: 10px;
+
+    > div {
+        display: flex;
+        justify-content: space-between;
+
+        .details {
+            max-width: calc(100% - 28px);
+
+            .filename {
+                font-weight: 600;
+                @include line-clamp(1);
+            }
+        }
+
+        .user {
+            display: flex;
+            align-items: flex-end;
+        }
+    }
+
+    redaction-file-actions {
+        margin-top: 10px;
+        display: none;
+    }
+
+    &:hover redaction-file-actions {
+        display: block;
+    }
+}
+
+.stats-subtitle {
+    margin-top: 4px;
+}
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 b42a66abc..e1e7b22e9 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
@@ -10,6 +10,7 @@ import {
     TemplateRef,
     ViewChild
 } from '@angular/core';
+import { FileAttributeConfig, FileStatus } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
@@ -34,11 +35,13 @@ import {
     DefaultListingServices,
     keyChecker,
     ListingComponent,
+    ListingModes,
     LoadingService,
     NestedFilter,
     TableColumnConfig,
     TableComponent,
-    Toaster
+    Toaster,
+    WorkflowConfig
 } from '@iqser/common-ui';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
@@ -49,8 +52,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { annotationFilterChecker } from '@utils/filter-utils';
 import { PermissionsService } from '@services/permissions.service';
 import { RouterHistoryService } from '@services/router-history.service';
-import { FileAttributeConfig } from '@redaction/red-ui-http';
 import { DossierWrapper } from '../../../../state/model/dossier.wrapper';
+import { Router } from '@angular/router';
+import { FileActionService } from '../../services/file-action.service';
+import StatusEnum = FileStatus.StatusEnum;
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -58,6 +63,7 @@ import { DossierWrapper } from '../../../../state/model/dossier.wrapper';
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossierOverviewScreenComponent) }]
 })
 export class DossierOverviewScreenComponent extends ListingComponent<FileStatusWrapper> implements OnInit, OnDestroy, OnDetach, OnAttach {
+    readonly listingModes = ListingModes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     currentDossier = this._appStateService.activeDossier;
@@ -81,6 +87,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     @ViewChild('reviewerTemplate', { static: true }) reviewerTemplate: TemplateRef<never>;
     @ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<never>;
     @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<never>;
+    readonly workflowConfig: WorkflowConfig<FileStatusWrapper, StatusEnum>;
     protected readonly _primaryKey = 'filename';
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
@@ -93,6 +100,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     constructor(
         private readonly _toaster: Toaster,
         protected readonly _injector: Injector,
+        private readonly _router: Router,
         private readonly _userService: UserService,
         readonly permissionsService: PermissionsService,
         private readonly _loadingService: LoadingService,
@@ -106,13 +114,49 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         private readonly _statusOverlayService: StatusOverlayService,
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _fileDropOverlayService: FileDropOverlayService,
-        private readonly _dossierAttributesService: DossierAttributesService
+        private readonly _dossierAttributesService: DossierAttributesService,
+        private readonly _fileActionService: FileActionService
     ) {
         super(_injector);
         this._loadEntitiesFromState();
         this.fileAttributeConfigs = this._appStateService.getFileAttributeConfig(
             this.currentDossier.dossierTemplateId
         ).fileAttributeConfigs;
+        this.listingMode = this.listingModes.workflow;
+        this.workflowConfig = {
+            key: 'status',
+            columns: [
+                {
+                    label: fileStatusTranslations[StatusEnum.UNASSIGNED],
+                    key: StatusEnum.UNASSIGNED,
+                    enterFn: this.unassignFn,
+                    enterPredicate: (entity: FileStatusWrapper) => !!entity,
+                    color: '#D3D5DA'
+                },
+                {
+                    label: fileStatusTranslations[StatusEnum.UNDERREVIEW],
+                    enterFn: this.underReviewFn,
+                    enterPredicate: (file: FileStatusWrapper) => this.permissionsService.canAssignUser(file),
+                    key: StatusEnum.UNDERREVIEW,
+                    color: '#FDBD00'
+                },
+                {
+                    label: fileStatusTranslations[StatusEnum.UNDERAPPROVAL],
+                    enterFn: this.underApprovalFn,
+                    enterPredicate: (file: FileStatusWrapper) =>
+                        this.permissionsService.canSetUnderApproval(file) || this.permissionsService.canUndoApproval(file),
+                    key: StatusEnum.UNDERAPPROVAL,
+                    color: '#374C81'
+                },
+                {
+                    label: fileStatusTranslations[StatusEnum.APPROVED],
+                    enterFn: this.approveFn,
+                    enterPredicate: (file: FileStatusWrapper) => this.permissionsService.isReadyForApproval(file),
+                    key: StatusEnum.APPROVED,
+                    color: '#48C9F7'
+                }
+            ]
+        };
     }
 
     get checkedRequiredFilters() {
@@ -127,10 +171,46 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         return this.fileAttributeConfigs.filter(config => config.displayedInFileList);
     }
 
+    unassignFn = async (file: FileStatusWrapper) => {
+        // TODO
+        console.log('unassign', file);
+    };
+
+    underReviewFn = (file: FileStatusWrapper) => {
+        this._fileActionService.assignFile('reviewer', null, file, () => this._loadingService.loadWhile(this.reloadDossiers()), true);
+    };
+
+    underApprovalFn = async (file: FileStatusWrapper) => {
+        if (this._appStateService.activeDossier.approverIds.length > 1) {
+            this._fileActionService.assignFile('approver', null, file, () => this._loadingService.loadWhile(this.reloadDossiers()), true);
+        } else {
+            this._loadingService.start();
+            await this._fileActionService.setFileUnderApproval(file).toPromise();
+            await this.reloadDossiers();
+            this._loadingService.stop();
+        }
+    };
+
+    approveFn = async (file: FileStatusWrapper) => {
+        this._loadingService.start();
+        await this._fileActionService.setFileApproved(file).toPromise();
+        await this.reloadDossiers();
+        this._loadingService.stop();
+    };
+
+    actionPerformed(action?: string, fileStatus?: FileStatusWrapper) {
+        this._calculateData();
+
+        if (action === 'navigate') {
+            this._router.navigate(this.routerLinkFn(fileStatus));
+        }
+    }
+
     routerLinkFn = (fileStatus: FileStatusWrapper) =>
         fileStatus.canBeOpened ? [`/main/dossiers/${this.currentDossier.dossierId}/file/${fileStatus.fileId}`] : [];
 
     disabledFn = (fileStatus: FileStatusWrapper) => fileStatus.excluded;
+
     lastOpenedFn = (fileStatus: FileStatusWrapper) => fileStatus.lastOpened;
 
     async ngOnInit(): Promise<void> {
@@ -139,7 +219,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         try {
             this._fileDropOverlayService.initFileDropHandling();
 
-            this.calculateData();
+            this._calculateData();
 
             this.addSubscription = timer(0, 7500).subscribe(async () => {
                 await this._appStateService.reloadActiveDossierFilesIfNecessary();
@@ -147,7 +227,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             });
 
             this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
-                this.calculateData();
+                this._calculateData();
             });
 
             this.addSubscription = this._appStateService.dossierTemplateChanged$.subscribe(() => {
@@ -197,10 +277,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
 
     async reloadDossiers() {
         await this._appStateService.getFiles(this.currentDossier, false);
-        this.calculateData();
+        this._calculateData();
     }
 
-    calculateData(): void {
+    _calculateData(): void {
         if (!this._appStateService.activeDossierId) {
             return;
         }
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 661e8e458..3de1dd1ea 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
@@ -91,6 +91,7 @@
                 (actionPerformed)="fileActionPerformed($event)"
                 [activeDocumentInfo]="viewDocumentInfo"
                 [activeExcludePages]="excludePages"
+                type="file-preview"
             ></redaction-file-actions>
 
             <iqser-circle-button
@@ -106,10 +107,10 @@
                 (action)="downloadOriginalFile()"
                 *ngIf="userPreferenceService.areDevFeaturesEnabled"
                 [tooltip]="'file-preview.download-original-file' | translate"
+                [type]="circleButtonTypes.primary"
                 class="ml-8"
                 icon="red:download"
                 tooltipPosition="below"
-                [type]="circleButtonTypes.primary"
             ></iqser-circle-button>
             <!-- End Dev Mode Features-->
 
diff --git a/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts b/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts
index 0189094e3..4069a04c7 100644
--- a/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts
@@ -8,6 +8,7 @@ import { isArray } from 'rxjs/internal-compatibility';
 import { DossiersDialogService } from './dossiers-dialog.service';
 import { ConfirmationDialogInput } from '../../shared/dialogs/confirmation-dialog/confirmation-dialog.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class FileActionService {
@@ -83,7 +84,7 @@ export class FileActionService {
         );
     }
 
-    setFileApproved(fileStatus: FileStatusWrapper | FileStatusWrapper[]) {
+    setFileApproved(fileStatus: FileStatusWrapper | FileStatusWrapper[]): Observable<any> {
         if (!isArray(fileStatus)) {
             fileStatus = [fileStatus];
         }
@@ -116,11 +117,7 @@ export class FileActionService {
     assignFile(mode: 'reviewer' | 'approver', $event: MouseEvent, file?: FileStatusWrapper, callback?: Function, ignoreChanged = false) {
         const files = file ? [file] : [this._appStateService.activeFile];
         const data = { mode, files, ignoreChanged };
-        this._dialogService.openDialog('assignFile', $event, data, async () => {
-            if (callback) {
-                callback();
-            }
-        });
+        this._dialogService.openDialog('assignFile', $event, data, callback);
     }
 
     private async _assignReviewerToCurrentUser(fileStatus: FileStatusWrapper | FileStatusWrapper[], callback?: Function) {
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index cb2a0faa6..829a4b248 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -15,7 +15,9 @@
         <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters"></div>
     </div>
 
-    <div *ngIf="showCloseButton || actionConfigs || buttonConfigs" class="actions">
+    <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
+        <ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
+
         <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
             <iqser-icon-button
                 (action)="config.action($event)"
@@ -53,10 +55,10 @@
 
 <ng-template #searchBar>
     <iqser-input-with-action
-        [(value)]="searchService.searchValue"
         *ngIf="searchPlaceholder && searchService"
+        [(value)]="searchService.searchValue"
+        [class.mr-8]="searchPosition === searchPositions.beforeFilters"
         [placeholder]="searchPlaceholder"
         [width]="searchWidth"
-        [class.mr-8]="searchPosition === searchPositions.beforeFilters"
     ></iqser-input-with-action>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss
index acbdfdf11..ffe60a1b5 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../assets/styles/variables';
+
 .ml-6 {
     margin-left: 6px;
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
index fb1bc8eda..e572822c4 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
 import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
 import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
-import { FilterService, SearchService } from '@iqser/common-ui';
+import { FilterService, IconButtonTypes, Listable, SearchService } from '@iqser/common-ui';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { combineLatest, Observable, of } from 'rxjs';
 import { SearchPosition, SearchPositions } from '@shared/components/page-header/models/search-positions.type';
@@ -12,13 +12,15 @@ import { FileAttributeConfig } from '@redaction/red-ui-http';
     templateUrl: './page-header.component.html',
     styleUrls: ['./page-header.component.scss']
 })
-export class PageHeaderComponent<T> {
+export class PageHeaderComponent<T extends Listable> {
     readonly searchPositions = SearchPositions;
+    readonly iconButtonTypes = IconButtonTypes;
 
     @Input() pageLabel: string;
     @Input() showCloseButton: boolean;
     @Input() actionConfigs: readonly ActionConfig[];
     @Input() buttonConfigs: readonly ButtonConfig[];
+    @Input() viewModeSelection: TemplateRef<unknown>;
     @Input() fileAttributeConfigs: readonly FileAttributeConfig[];
     @Input() searchPlaceholder: string;
     @Input() searchWidth: number | 'full';
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index bd220b610..a82cbef34 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -680,6 +680,7 @@
     },
     "ocr-file": "OCR Document",
     "ocr-performed": "OCR was performed for this file.",
+    "open-document": "Open Document",
     "quick-filters": {
       "assigned-to-me": "Assigned to me",
       "assigned-to-others": "Assigned to others",
@@ -1491,6 +1492,11 @@
     "expand": "Show Details",
     "title": "Users"
   },
+  "view-mode": {
+    "list": "List",
+    "view-as": "View as:",
+    "workflow": "Workflow"
+  },
   "watermark": "Watermark",
   "watermark-screen": {
     "action": {
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index 9a29adaa0..e35976702 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -81,6 +81,8 @@
 
         mat-icon {
             width: 10px;
+            height: 10px;
+            line-height: 13px;
             margin-right: 6px;
         }
 
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 7e0a58eb2..8028ab0a3 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -241,10 +241,18 @@ section.settings {
     margin-top: 32px;
 }
 
+.mb-6 {
+    margin-bottom: 6px;
+}
+
 .mb-8 {
     margin-bottom: 8px !important;
 }
 
+.mb-12 {
+    margin-bottom: 12px !important;
+}
+
 .ml-8 {
     margin-left: 8px;
 }
diff --git a/libs/common-ui b/libs/common-ui
index 6c0f123bd..cb8393c49 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 6c0f123bd97148f8696038f63c9951c241b71990
+Subproject commit cb8393c492ec1e2795d644009266cc71eeca11a7

From 5fa7d91ad37530bc88908d94a8e52750b40c1338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 24 Sep 2021 23:26:08 +0300
Subject: [PATCH 2/6] Permissions, updated common-ui

---
 .../dossier-overview-screen.component.ts                     | 5 ++++-
 libs/common-ui                                               | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

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 e1e7b22e9..f405d3a36 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
@@ -136,7 +136,10 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
                 {
                     label: fileStatusTranslations[StatusEnum.UNDERREVIEW],
                     enterFn: this.underReviewFn,
-                    enterPredicate: (file: FileStatusWrapper) => this.permissionsService.canAssignUser(file),
+                    enterPredicate: (file: FileStatusWrapper) =>
+                        this.permissionsService.canSetUnderReview(file) ||
+                        this.permissionsService.canAssignToSelf(file) ||
+                        this.permissionsService.canAssignUser(file),
                     key: StatusEnum.UNDERREVIEW,
                     color: '#FDBD00'
                 },
diff --git a/libs/common-ui b/libs/common-ui
index cb8393c49..afba284dc 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit cb8393c492ec1e2795d644009266cc71eeca11a7
+Subproject commit afba284dc5dd74d2d9f8ca497c25394a296d9cca

From c9ca054f39a487f283393dde2f97a69f98ea1ba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 27 Sep 2021 23:18:13 +0300
Subject: [PATCH 3/6] Disabled items

---
 .../dossier/components/file-actions/file-actions.component.scss | 2 ++
 .../dossier-overview-screen.component.html                      | 1 +
 libs/common-ui                                                  | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
index d6d6a1c82..33de08c15 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
@@ -1,8 +1,10 @@
 @use 'common-mixins';
+@use 'variables';
 
 .file-actions {
     display: flex;
     overflow-y: auto;
+    color: variables.$grey-1;
     @include common-mixins.no-scroll-bar;
 
     > *:not(:last-child) {
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 bd8d752e5..09efa903a 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
@@ -55,6 +55,7 @@
             <iqser-workflow
                 *ngIf="(listingMode$ | async) === listingModes.workflow"
                 [config]="workflowConfig"
+                [itemClasses]="{ disabled: disabledFn }"
                 [itemTemplate]="workflowItemTemplate"
             ></iqser-workflow>
         </div>
diff --git a/libs/common-ui b/libs/common-ui
index ba4fbdabe..5973631a1 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit ba4fbdabe60953281cbdded67e532e1929c88727
+Subproject commit 5973631a1d554b914a8a036cd7116c9d9f7f4210

From 91d23707fb7230d6be18f904269769542fd2aab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 28 Sep 2021 00:40:52 +0300
Subject: [PATCH 4/6] Updates

---
 .../dossier-overview-screen.component.html                    | 4 ++++
 .../dossier-overview-screen.component.scss                    | 1 +
 .../dossier-overview-screen.component.ts                      | 4 ++--
 libs/common-ui                                                | 2 +-
 4 files changed, 8 insertions(+), 3 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 09efa903a..2d5670423 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
@@ -53,10 +53,14 @@
             ></iqser-table>
 
             <iqser-workflow
+                (addElement)="fileInput.click()"
                 *ngIf="(listingMode$ | async) === listingModes.workflow"
                 [config]="workflowConfig"
                 [itemClasses]="{ disabled: disabledFn }"
                 [itemTemplate]="workflowItemTemplate"
+                addElementColumn="UNASSIGNED"
+                addElementIcon="red:upload"
+                itemHeight="56px"
             ></iqser-workflow>
         </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
index 75174c590..5359d5727 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
@@ -94,6 +94,7 @@
 
             .filename {
                 font-weight: 600;
+                line-height: 18px;
                 @include common-mixins.line-clamp(1);
             }
         }
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 9b2e8de05..5f32c7781 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
@@ -122,15 +122,15 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         this.fileAttributeConfigs = this._appStateService.getFileAttributeConfig(
             this.currentDossier.dossierTemplateId
         ).fileAttributeConfigs;
-        this.listingMode = this.listingModes.workflow;
         this.workflowConfig = {
             key: 'status',
+            itemVersionFn: (entity: FileStatusWrapper) => `${entity.lastUpdated}-${entity.numberOfAnalyses}`,
             columns: [
                 {
                     label: fileStatusTranslations[StatusEnum.UNASSIGNED],
                     key: StatusEnum.UNASSIGNED,
                     enterFn: this.unassignFn,
-                    enterPredicate: (entity: FileStatusWrapper) => !!entity,
+                    enterPredicate: (entity: FileStatusWrapper) => false,
                     color: '#D3D5DA'
                 },
                 {
diff --git a/libs/common-ui b/libs/common-ui
index 5973631a1..5d0bb11c6 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 5973631a1d554b914a8a036cd7116c9d9f7f4210
+Subproject commit 5d0bb11c65a5eb17216f6b30c944a14ebd4ece7a

From e3aa2784bab3680f332ecce8a63aec467117605f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 28 Sep 2021 00:46:59 +0300
Subject: [PATCH 5/6] Tooltip position fix

---
 .../dossier-overview-screen.component.html           | 12 ++++--------
 1 file changed, 4 insertions(+), 8 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 2d5670423..a34a17adb 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
@@ -88,10 +88,8 @@
 <ng-template #filenameTemplate let-fileStatus="entity">
     <div class="cell">
         <div>
-            <div [class.error]="fileStatus.isError" class="table-item-title">
-                <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
-                    {{ fileStatus.filename }}
-                </span>
+            <div [class.error]="fileStatus.isError" [matTooltip]="fileStatus.filename" class="table-item-title" matTooltipPosition="above">
+                {{ fileStatus.filename }}
             </div>
         </div>
         <div *ngIf="fileStatus.primaryAttribute" class="small-label">
@@ -199,10 +197,8 @@
     <div class="workflow-item">
         <div>
             <div class="details">
-                <div class="filename">
-                    <span [matTooltip]="fileStatus.filename" matTooltipPosition="above">
-                        {{ fileStatus.filename }}
-                    </span>
+                <div [matTooltip]="fileStatus.filename" class="filename" matTooltipPosition="above">
+                    {{ fileStatus.filename }}
                 </div>
                 <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: fileStatus }"></ng-container>
             </div>

From 1e9071a643f9ed3439540378c5f19e419d8c2f96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 28 Sep 2021 15:49:08 +0300
Subject: [PATCH 6/6] Empty state, reload fixes

---
 .../dossier-overview-screen.component.html                  | 6 ++++++
 .../dossier-overview-screen.component.ts                    | 2 +-
 libs/common-ui                                              | 2 +-
 3 files changed, 8 insertions(+), 2 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 a34a17adb..264ba5947 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
@@ -54,13 +54,19 @@
 
             <iqser-workflow
                 (addElement)="fileInput.click()"
+                (noDataAction)="fileInput.click()"
                 *ngIf="(listingMode$ | async) === listingModes.workflow"
                 [config]="workflowConfig"
                 [itemClasses]="{ disabled: disabledFn }"
                 [itemTemplate]="workflowItemTemplate"
+                [noDataButtonLabel]="'dossier-overview.no-data.action' | translate"
+                [noDataText]="'dossier-overview.no-data.title' | translate"
+                [showNoDataButton]="true"
                 addElementColumn="UNASSIGNED"
                 addElementIcon="red:upload"
                 itemHeight="56px"
+                noDataButtonIcon="red:upload"
+                noDataIcon="red:document"
             ></iqser-workflow>
         </div>
 
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 5f32c7781..32d1580ab 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
@@ -123,7 +123,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
             this.currentDossier.dossierTemplateId
         ).fileAttributeConfigs;
         this.workflowConfig = {
-            key: 'status',
+            columnIdentifierFn: entity => entity.status,
             itemVersionFn: (entity: FileStatusWrapper) => `${entity.lastUpdated}-${entity.numberOfAnalyses}`,
             columns: [
                 {
diff --git a/libs/common-ui b/libs/common-ui
index 5d0bb11c6..0dc6d05ce 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 5d0bb11c65a5eb17216f6b30c944a14ebd4ece7a
+Subproject commit 0dc6d05cef931e2682bb9584ad0d0cb31144e5c6