From 9e94ecb3b62debe4af9632455239c224467bc479 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 1 Feb 2022 16:30:25 +0200
Subject: [PATCH 01/17] added dossier status model and service

---
 .../entity-services/dossier-status.service.ts | 12 ++++++++++
 libs/common-ui                                |  2 +-
 .../dossier-status/dossier-status.model.ts    | 24 +++++++++++++++++++
 .../src/lib/dossier-status/dossier-status.ts  |  6 +++++
 .../src/lib/dossier-status/index.ts           |  2 ++
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
 create mode 100644 libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
 create mode 100644 libs/red-domain/src/lib/dossier-status/dossier-status.ts
 create mode 100644 libs/red-domain/src/lib/dossier-status/index.ts

diff --git a/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
new file mode 100644
index 000000000..7a97df2f7
--- /dev/null
+++ b/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
@@ -0,0 +1,12 @@
+import { Injectable, Injector } from '@angular/core';
+import { EntitiesService } from '../../../../../../libs/common-ui/src';
+import { DossierStatus, IDossierStatus } from '../../../../../../libs/red-domain/src/lib/dossier-status';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DossierStatusService extends EntitiesService<DossierStatus, IDossierStatus> {
+    constructor(protected readonly _injector: Injector) {
+        super(_injector, DossierStatus, 'dossier-status');
+    }
+}
diff --git a/libs/common-ui b/libs/common-ui
index 77e227582..5a0e5accb 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 77e22758239cf564965e82579e662416a6349010
+Subproject commit 5a0e5accb76b8e4d2d2f5de64822a716c6572f37
diff --git a/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts b/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
new file mode 100644
index 000000000..1a5ed6609
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
@@ -0,0 +1,24 @@
+import { IDossierStatus } from './dossier-status';
+import { IListable } from '@iqser/common-ui';
+
+export class DossierStatus implements IDossierStatus, IListable {
+    readonly description: string;
+    readonly dossierStatusId: string;
+    readonly dossierTemplateId: string;
+    readonly name: string;
+
+    constructor(dossierStatus: IDossierStatus) {
+        this.description = dossierStatus.description;
+        this.dossierStatusId = dossierStatus.dossierStatusId;
+        this.dossierTemplateId = dossierStatus.dossierTemplateId;
+        this.name = dossierStatus.name;
+    }
+
+    get id(): string {
+        return this.dossierStatusId;
+    }
+
+    get searchKey(): string {
+        return this.name;
+    }
+}
diff --git a/libs/red-domain/src/lib/dossier-status/dossier-status.ts b/libs/red-domain/src/lib/dossier-status/dossier-status.ts
new file mode 100644
index 000000000..ed8338a6a
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-status/dossier-status.ts
@@ -0,0 +1,6 @@
+export interface IDossierStatus {
+    description: string;
+    dossierStatusId: string;
+    dossierTemplateId: string;
+    name: string;
+}
diff --git a/libs/red-domain/src/lib/dossier-status/index.ts b/libs/red-domain/src/lib/dossier-status/index.ts
new file mode 100644
index 000000000..1ec59b1ae
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-status/index.ts
@@ -0,0 +1,2 @@
+export * from './dossier-status';
+export * from './dossier-status.model';

From 4c67355bb4e9061eaa101a75cdf6eae8cf351ad3 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 2 Feb 2022 14:13:27 +0200
Subject: [PATCH 02/17] wip states screen

---
 .../app/modules/admin/admin-routing.module.ts |  9 ++
 .../admin-side-nav.component.ts               |  1 +
 .../src/app/modules/admin/admin.module.ts     | 16 +++-
 ...d-edit-dossier-state-dialog.component.html | 55 ++++++++++++
 ...d-edit-dossier-state-dialog.component.scss |  5 ++
 ...add-edit-dossier-state-dialog.component.ts | 45 ++++++++++
 ...ssier-states-listing-screen.component.html | 78 +++++++++++++++++
 ...ssier-states-listing-screen.component.scss | 14 ++++
 ...dossier-states-listing-screen.component.ts | 84 +++++++++++++++++++
 .../admin/services/admin-dialog.service.ts    |  8 +-
 .../entity-services/dossier-state.service.ts  | 17 ++++
 .../entity-services/dossier-status.service.ts | 12 ---
 apps/red-ui/src/assets/i18n/de.json           |  1 +
 apps/red-ui/src/assets/i18n/en.json           | 33 ++++++++
 .../lib/dossier-state/dossier-state.model.ts  | 26 ++++++
 .../dossier-state.ts}                         |  3 +-
 .../red-domain/src/lib/dossier-state/index.ts |  2 +
 .../dossier-status/dossier-status.model.ts    | 24 ------
 .../src/lib/dossier-status/index.ts           |  2 -
 .../src/lib/dossiers/dossier.model.ts         |  2 +
 libs/red-domain/src/lib/dossiers/dossier.ts   |  1 +
 21 files changed, 396 insertions(+), 42 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
 create mode 100644 apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
 delete mode 100644 apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
 create mode 100644 libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
 rename libs/red-domain/src/lib/{dossier-status/dossier-status.ts => dossier-state/dossier-state.ts} (63%)
 create mode 100644 libs/red-domain/src/lib/dossier-state/index.ts
 delete mode 100644 libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
 delete mode 100644 libs/red-domain/src/lib/dossier-status/index.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index f4351eaed..6ce27d21f 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -21,6 +21,7 @@ import { DossierTemplatesGuard } from '../../guards/dossier-templates.guard';
 import { DICTIONARY_TYPE, DOSSIER_TEMPLATE_ID } from '@utils/constants';
 import { DossierTemplateExistsGuard } from '../../guards/dossier-template-exists.guard';
 import { DictionaryExistsGuard } from '../../guards/dictionary-exists.guard';
+import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
 
 const routes: Routes = [
     { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
@@ -114,6 +115,14 @@ const routes: Routes = [
                             routeGuards: [AuthGuard, RedRoleGuard],
                         },
                     },
+                    {
+                        path: 'dossier-states',
+                        component: DossierStatesListingScreenComponent,
+                        canActivate: [CompositeRouteGuard],
+                        data: {
+                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+                        },
+                    },
                     {
                         path: 'default-colors',
                         component: DefaultColorsScreenComponent,
diff --git a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
index 7578ddd03..0be9e0c68 100644
--- a/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-side-nav/admin-side-nav.component.ts
@@ -62,6 +62,7 @@ export class AdminSideNavComponent implements OnInit {
             { screen: 'watermark', label: _('watermark') },
             { screen: 'file-attributes', label: _('file-attributes') },
             { screen: 'dossier-attributes', label: _('dossier-attributes') },
+            { screen: 'dossier-states', label: _('dossier-states') },
             { screen: 'reports', label: _('reports') },
             { screen: 'justifications', label: _('justifications') },
         ],
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index c36811d81..10c37878c 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -46,6 +46,9 @@ import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.
 import { FileAttributesConfigurationsDialogComponent } from './dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 import { SharedAdminModule } from './shared/shared-admin.module';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
+import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
+import { AddEditDossierStateDialogComponent } from './dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
+import { A11yModule } from '@angular/cdk/a11y';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -95,8 +98,17 @@ const components = [
 ];
 
 @NgModule({
-    declarations: [...components],
+    declarations: [...components, DossierStatesListingScreenComponent, AddEditDossierStateDialogComponent],
     providers: [AdminDialogService, AuditService, DigitalSignatureService, LicenseReportService, RulesService, SmtpConfigService],
-    imports: [CommonModule, SharedModule, AdminRoutingModule, SharedAdminModule, NgxChartsModule, ColorPickerModule, MonacoEditorModule],
+    imports: [
+        CommonModule,
+        SharedModule,
+        AdminRoutingModule,
+        SharedAdminModule,
+        NgxChartsModule,
+        ColorPickerModule,
+        MonacoEditorModule,
+        A11yModule,
+    ],
 })
 export class AdminModule {}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
new file mode 100644
index 000000000..7c0c7d695
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
@@ -0,0 +1,55 @@
+<section class="dialog">
+    <div
+        [translateParams]="{
+            type: data.dossierState ? 'edit' : 'create',
+            name: data.dossierState?.name
+        }"
+        [translate]="'add-edit-dossier-state.title'"
+        class="dialog-header heading-l"
+    ></div>
+
+    <form [formGroup]="form">
+        <div class="dialog-content flex">
+            <div class="iqser-input-group required w-300">
+                <label translate="add-edit-dossier-state.form.name"></label>
+                <input
+                    [placeholder]="'add-edit-dossier-state.form.name-placeholder' | translate"
+                    formControlName="name"
+                    name="name"
+                    type="text"
+                />
+            </div>
+
+            <div class="iqser-input-group required">
+                <label translate="add-edit-dossier-state.form.description"></label>
+                <input
+                    [placeholder]="'add-edit-dossier-state.form.description-placeholder' | translate"
+                    class="hex-color-input"
+                    formControlName="description"
+                    name="description"
+                    type="text"
+                />
+                <div
+                    (colorPickerChange)="form.get('description').setValue($event)"
+                    [colorPicker]="form.get('description').value"
+                    [cpOutputFormat]="'hex'"
+                    [style.background]="form.get('description').value"
+                    class="input-icon"
+                >
+                    <mat-icon
+                        *ngIf="!form.get('description').value || form.get('description').value?.length === 0"
+                        svgIcon="red:color-picker"
+                    ></mat-icon>
+                </div>
+            </div>
+        </div>
+
+        <div class="dialog-actions">
+            <button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button type="button">
+                {{ 'add-edit-dossier-state.save' | translate }}
+            </button>
+        </div>
+    </form>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss
new file mode 100644
index 000000000..8bd9b16aa
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.scss
@@ -0,0 +1,5 @@
+.iqser-input-group:nth-child(2) {
+    width: fit-content;
+    margin-top: 0;
+    margin-left: 16px;
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
new file mode 100644
index 000000000..6e3193355
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
+import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+
+interface DialogData {
+    dossierState: IDossierState;
+    dossierTemplateId: string;
+}
+
+@Component({
+    selector: 'redaction-add-edit-dossier-state-dialog',
+    templateUrl: './add-edit-dossier-state-dialog.component.html',
+    styleUrls: ['./add-edit-dossier-state-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
+    constructor(
+        private readonly _formBuilder: FormBuilder,
+        protected readonly _injector: Injector,
+        protected readonly _dialogRef: MatDialogRef<AddEditDossierStateDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    ) {
+        super(_injector, _dialogRef);
+        this.form = this._getForm(data.dossierState);
+        this.initialFormValue = this.form.getRawValue();
+    }
+
+    save(): void {
+        const dossierState: IDossierState = {
+            dossierStatusId: this.data.dossierState?.dossierStatusId,
+            dossierTemplateId: this.data.dossierTemplateId,
+            ...this.form.getRawValue(),
+        };
+        this._dialogRef.close(dossierState);
+    }
+
+    private _getForm(dossierState: IDossierState): FormGroup {
+        return this._formBuilder.group({
+            name: [dossierState?.name, Validators.required],
+            description: [dossierState?.description, Validators.required],
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
new file mode 100644
index 000000000..74fd22735
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -0,0 +1,78 @@
+<section>
+    <div class="page-header">
+        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
+
+        <div class="actions flex-1">
+            <redaction-dossier-template-actions></redaction-dossier-template-actions>
+
+            <iqser-circle-button
+                [routerLink]="['../..']"
+                [tooltip]="'common.close' | translate"
+                icon="iqser:close"
+                tooltipPosition="below"
+            ></iqser-circle-button>
+        </div>
+    </div>
+
+    <div class="content-inner">
+        <div class="overlay-shadow"></div>
+
+        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
+
+        <div class="content-container">
+            <iqser-table
+                [headerTemplate]="headerTemplate"
+                [itemSize]="80"
+                [noDataText]="'dossier-states-listing.no-data.title' | translate"
+                [noMatchText]="'dossier-states-listing.no-match.title' | translate"
+                [selectionEnabled]="true"
+                [tableColumnConfigs]="tableColumnConfigs"
+                emptyColumnWidth="1fr"
+                noDataIcon="red:attribute"
+            ></iqser-table>
+        </div>
+    </div>
+</section>
+
+<ng-template #headerTemplate>
+    <div class="table-header-actions">
+        <iqser-input-with-action
+            [(value)]="searchService.searchValue"
+            [placeholder]="'dossier-states-listing.search' | translate"
+        ></iqser-input-with-action>
+
+        <iqser-icon-button
+            (action)="openAddEditStateDialog($event)"
+            *ngIf="currentUser.isAdmin"
+            [label]="'dossier-states-listing.add-new' | translate"
+            [type]="iconButtonTypes.primary"
+            icon="iqser:plus"
+        ></iqser-icon-button>
+    </div>
+</ng-template>
+
+<ng-template #tableItemTemplate let-entity="entity">
+    <div *ngIf="cast(entity) as state">
+        <div class="cell">
+            <div class="flex-align-items-center">
+                <div class="dossier-state-square" [style.background-color]="state.description"></div>
+                <div class="state-name">{{ state.name }}</div>
+            </div>
+        </div>
+
+        <div class="cell small-label">
+            <span>{{ state.dossierCount }}</span>
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditStateDialog($event, state)"
+                    [tooltip]="'dossier-states-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+            </div>
+        </div>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
new file mode 100644
index 000000000..1df526cd4
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
@@ -0,0 +1,14 @@
+@use 'variables';
+
+.dossier-state-square {
+    height: 16px;
+    width: 16px;
+    margin-right: 16px;
+}
+
+.state-name {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    color: variables.$grey-1;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
new file mode 100644
index 000000000..6aaa067f9
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnDestroy, OnInit } from '@angular/core';
+import {
+    CircleButtonTypes,
+    DefaultListingServices,
+    IconButtonTypes,
+    ListingComponent,
+    LoadingService,
+    TableColumnConfig,
+} from '../../../../../../../../libs/common-ui/src';
+import { DossierState, IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { DossiersService } from '../../../../services/entity-services/dossiers.service';
+import { DossierStateService } from '../../../../services/entity-services/dossier-state.service';
+import { firstValueFrom } from 'rxjs';
+import { DossierTemplatesService } from '../../../../services/entity-services/dossier-templates.service';
+import { AdminDialogService } from '../../services/admin-dialog.service';
+import { UserService } from '../../../../services/user.service';
+import { AppStateService } from '../../../../state/app-state.service';
+
+@Component({
+    templateUrl: './dossier-states-listing-screen.component.html',
+    styleUrls: ['./dossier-states-listing-screen.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => DossierStatesListingScreenComponent) },
+    ],
+})
+export class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly currentUser = this._userService.currentUser;
+    readonly tableHeaderLabel = _('dossier-states-listing.table-header.title');
+    readonly tableColumnConfigs: TableColumnConfig<DossierState>[] = [
+        { label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'searchKey' },
+        { label: _('dossier-states-listing.table-col-names.dossiers-count'), sortByKey: 'dossierCount' },
+    ];
+
+    constructor(
+        protected readonly _injector: Injector,
+        private readonly _loadingService: LoadingService,
+        private readonly _dossiersService: DossiersService,
+        private readonly _dossierStateService: DossierStateService,
+        private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _dialogService: AdminDialogService,
+        private readonly _userService: UserService,
+        private readonly _appStateService: AppStateService,
+    ) {
+        super(_injector);
+    }
+
+    async ngOnInit(): Promise<void> {
+        await this._loadData();
+    }
+
+    openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
+        const data = {
+            dossierState,
+            dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
+        };
+        this._dialogService.openDialog('addEditDossierState', $event, data, async (newValue: IDossierState) => {
+            await firstValueFrom(this._dossierStateService.setDossierState(newValue));
+            await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
+            await this._loadData();
+        });
+    }
+
+    private async _loadData() {
+        this._loadingService.start();
+
+        try {
+            const templateId = this._dossierTemplatesService.activeDossierTemplateId;
+            const dossierStates = await firstValueFrom(this._dossierStateService.loadAll(`dossier-status/dossier-template/${templateId}`));
+            const dossiers = this._dossiersService.all;
+            dossierStates.forEach(state => {
+                state.dossierCount = dossiers.filter(
+                    dossier => dossier.dossierStatusId === state.dossierStatusId && dossier.dossierTemplateId === templateId,
+                ).length;
+            });
+            this.entitiesService.setEntities(dossierStates || []);
+        } catch (e) {}
+        this._loadingService.stop();
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 1ee12ff67..ff3c3fb67 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -13,6 +13,7 @@ import { AddEditDossierAttributeDialogComponent } from '../dialogs/add-edit-doss
 import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
 import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
 import { FileAttributesConfigurationsDialogComponent } from '../dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
+import { AddEditDossierStateDialogComponent } from '../dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -27,7 +28,9 @@ type DialogType =
     | 'smtpAuthConfig'
     | 'addEditDossierTemplate'
     | 'addEditDossierAttribute'
-    | 'uploadDictionary';
+    | 'addEditJustification'
+    | 'uploadDictionary'
+    | 'addEditDossierState';
 
 @Injectable()
 export class AdminDialogService extends DialogService<DialogType> {
@@ -82,6 +85,9 @@ export class AdminDialogService extends DialogService<DialogType> {
         uploadDictionary: {
             component: UploadDictionaryDialogComponent,
         },
+        addEditDossierState: {
+            component: AddEditDossierStateDialogComponent,
+        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
new file mode 100644
index 000000000..d3be59e74
--- /dev/null
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -0,0 +1,17 @@
+import { Injectable, Injector } from '@angular/core';
+import { EntitiesService, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
+import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DossierStateService extends EntitiesService<DossierState, IDossierState> {
+    constructor(protected readonly _injector: Injector) {
+        super(_injector, DossierState, 'dossier-status');
+    }
+
+    @Validate()
+    setDossierState(@RequiredParam() body: IDossierState) {
+        return this._post<unknown>(body, this._defaultModelPath);
+    }
+}
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
deleted file mode 100644
index 7a97df2f7..000000000
--- a/apps/red-ui/src/app/services/entity-services/dossier-status.service.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Injectable, Injector } from '@angular/core';
-import { EntitiesService } from '../../../../../../libs/common-ui/src';
-import { DossierStatus, IDossierStatus } from '../../../../../../libs/red-domain/src/lib/dossier-status';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class DossierStatusService extends EntitiesService<DossierStatus, IDossierStatus> {
-    constructor(protected readonly _injector: Injector) {
-        super(_injector, DossierStatus, 'dossier-status');
-    }
-}
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 21819e941..b228549e1 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -605,6 +605,7 @@
     "title": "Datei-Attribute anlegen"
   },
   "dossier": "Dossier",
+  "dossier-states": "",
   "dossier-attribute-types": {
     "date": "Datum",
     "image": "Bild",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 9a64201c7..993a08598 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -88,6 +88,16 @@
     "save": "Save Dossier Template",
     "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Template"
   },
+  "add-edit-dossier-state": {
+    "form": {
+      "name": "Status Name",
+      "name-placeholder": "Enter Name",
+      "description": "Hex Color",
+      "description-placeholder": "#"
+    },
+    "save": "Save Status",
+    "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Status"
+  },
   "add-edit-file-attribute": {
     "form": {
       "column-header": "CSV Column Header",
@@ -612,6 +622,29 @@
     "title": "Introduce File Attributes"
   },
   "dossier": "Dossier",
+  "dossier-states": "Dossier States",
+  "dossier-states-listing": {
+    "action": {
+      "delete": "Delete Status",
+      "edit": "Edit Status"
+    },
+    "search": "Search...",
+    "table-col-names": {
+      "name": "Name",
+      "dossiers-count": "Dossiers Count"
+    },
+    "add-new": "New Status",
+    "table-header": {
+      "title": "{length} dossier {length, plural, one{state} other{states}}"
+    },
+    "no-data": {
+      "action": "New State",
+      "title": "There are no dossier states."
+    },
+    "no-match": {
+      "title": "No dossier states match your current filters."
+    }
+  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
diff --git a/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts b/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
new file mode 100644
index 000000000..070171643
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
@@ -0,0 +1,26 @@
+import { IListable } from '@iqser/common-ui';
+import { IDossierState } from './dossier-state';
+
+export class DossierState implements IDossierState, IListable {
+    readonly description: string;
+    readonly dossierStatusId: string;
+    readonly dossierTemplateId: string;
+    readonly name: string;
+    dossierCount?: number;
+
+    constructor(dossierState: IDossierState) {
+        this.description = dossierState.description;
+        this.dossierStatusId = dossierState.dossierStatusId;
+        this.dossierTemplateId = dossierState.dossierTemplateId;
+        this.name = dossierState.name;
+        this.dossierCount = dossierState.dossierCount;
+    }
+
+    get id(): string {
+        return this.dossierStatusId;
+    }
+
+    get searchKey(): string {
+        return this.name;
+    }
+}
diff --git a/libs/red-domain/src/lib/dossier-status/dossier-status.ts b/libs/red-domain/src/lib/dossier-state/dossier-state.ts
similarity index 63%
rename from libs/red-domain/src/lib/dossier-status/dossier-status.ts
rename to libs/red-domain/src/lib/dossier-state/dossier-state.ts
index ed8338a6a..7ebd532e8 100644
--- a/libs/red-domain/src/lib/dossier-status/dossier-status.ts
+++ b/libs/red-domain/src/lib/dossier-state/dossier-state.ts
@@ -1,6 +1,7 @@
-export interface IDossierStatus {
+export interface IDossierState {
     description: string;
     dossierStatusId: string;
     dossierTemplateId: string;
     name: string;
+    dossierCount?: number;
 }
diff --git a/libs/red-domain/src/lib/dossier-state/index.ts b/libs/red-domain/src/lib/dossier-state/index.ts
new file mode 100644
index 000000000..166b90570
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-state/index.ts
@@ -0,0 +1,2 @@
+export * from './dossier-state';
+export * from './dossier-state.model';
diff --git a/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts b/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
deleted file mode 100644
index 1a5ed6609..000000000
--- a/libs/red-domain/src/lib/dossier-status/dossier-status.model.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IDossierStatus } from './dossier-status';
-import { IListable } from '@iqser/common-ui';
-
-export class DossierStatus implements IDossierStatus, IListable {
-    readonly description: string;
-    readonly dossierStatusId: string;
-    readonly dossierTemplateId: string;
-    readonly name: string;
-
-    constructor(dossierStatus: IDossierStatus) {
-        this.description = dossierStatus.description;
-        this.dossierStatusId = dossierStatus.dossierStatusId;
-        this.dossierTemplateId = dossierStatus.dossierTemplateId;
-        this.name = dossierStatus.name;
-    }
-
-    get id(): string {
-        return this.dossierStatusId;
-    }
-
-    get searchKey(): string {
-        return this.name;
-    }
-}
diff --git a/libs/red-domain/src/lib/dossier-status/index.ts b/libs/red-domain/src/lib/dossier-status/index.ts
deleted file mode 100644
index 1ec59b1ae..000000000
--- a/libs/red-domain/src/lib/dossier-status/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './dossier-status';
-export * from './dossier-status.model';
diff --git a/libs/red-domain/src/lib/dossiers/dossier.model.ts b/libs/red-domain/src/lib/dossiers/dossier.model.ts
index 8c8ab6e5b..e2a79d550 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.model.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.model.ts
@@ -11,6 +11,7 @@ export class Dossier implements IDossier, IListable {
     readonly approverIds: List;
     readonly reportTemplateIds: List;
     readonly dossierName: string;
+    readonly dossierStatusId: string;
     readonly date: string;
     readonly dueDate?: string;
     readonly description?: string;
@@ -29,6 +30,7 @@ export class Dossier implements IDossier, IListable {
         this.date = dossier.date;
         this.description = dossier.description;
         this.dossierName = dossier.dossierName;
+        this.dossierStatusId = dossier.dossierStatusId;
         this.dossierTemplateId = dossier.dossierTemplateId;
         this.downloadFileTypes = dossier.downloadFileTypes;
         this.dueDate = dossier.dueDate;
diff --git a/libs/red-domain/src/lib/dossiers/dossier.ts b/libs/red-domain/src/lib/dossiers/dossier.ts
index 9b4883801..1ff219033 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.ts
@@ -7,6 +7,7 @@ export interface IDossier {
     readonly date: string;
     readonly description?: string;
     readonly dossierId: string;
+    readonly dossierStatusId: string;
     readonly dossierName: string;
     readonly dossierTemplateId: string;
     readonly downloadFileTypes?: List<DownloadFileType>;

From 30883a5349ce2e6c0fefd347c4cf7d22c4162fe7 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 3 Feb 2022 21:02:11 +0200
Subject: [PATCH 03/17] finished states screen, update dossier table

---
 .../src/app/modules/admin/admin.module.ts     |  8 ++-
 ...delete-dossier-state-dialog.component.html | 39 +++++++++++++++
 ...delete-dossier-state-dialog.component.scss | 16 ++++++
 ...m-delete-dossier-state-dialog.component.ts | 46 +++++++++++++++++
 ...ssier-states-listing-screen.component.html |  6 +++
 ...dossier-states-listing-screen.component.ts | 50 ++++++++++++++++---
 .../admin/services/admin-dialog.service.ts    |  7 ++-
 .../dossiers-listing-status.component.html    |  4 ++
 .../dossiers-listing-status.component.scss    | 19 +++++++
 .../dossiers-listing-status.component.ts      | 12 +++++
 .../table-item/table-item.component.html      |  4 ++
 .../table-item/table-item.component.ts        | 16 ++++--
 .../dossiers-listing/config.service.ts        |  3 +-
 .../dossiers-listing.module.ts                |  2 +
 .../entity-services/dossier-state.service.ts  | 17 +++++++
 apps/red-ui/src/assets/i18n/en.json           | 19 ++++++-
 16 files changed, 253 insertions(+), 15 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 10c37878c..f4087d8b1 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -49,6 +49,7 @@ import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-scr
 import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
 import { AddEditDossierStateDialogComponent } from './dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
 import { A11yModule } from '@angular/cdk/a11y';
+import { ConfirmDeleteDossierStateDialogComponent } from './dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
 
 const dialogs = [
     AddEditDossierTemplateDialogComponent,
@@ -98,7 +99,12 @@ const components = [
 ];
 
 @NgModule({
-    declarations: [...components, DossierStatesListingScreenComponent, AddEditDossierStateDialogComponent],
+    declarations: [
+        ...components,
+        DossierStatesListingScreenComponent,
+        AddEditDossierStateDialogComponent,
+        ConfirmDeleteDossierStateDialogComponent,
+    ],
     providers: [AdminDialogService, AuditService, DigitalSignatureService, LicenseReportService, RulesService, SmtpConfigService],
     imports: [
         CommonModule,
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
new file mode 100644
index 000000000..ff36577ae
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -0,0 +1,39 @@
+<section class="dialog">
+    <div class="dialog-header heading-l">
+        {{ 'confirm-delete-dossier-state.title' | translate }}
+    </div>
+
+    <div class="dialog-content">
+        <div class="heading">{{ 'confirm-delete-dossier-state.warning' | translate: translateArgs }}</div>
+
+        <div class="replacement-suggestion">{{ 'confirm-delete-dossier-state.suggestion' | translate }}</div>
+
+        <form [formGroup]="form">
+            <div class="flex">
+                <div class="iqser-input-group required w-300">
+                    <label translate="confirm-delete-dossier-state.form.status"></label>
+                    <mat-select
+                        formControlName="replaceDossierStatusId"
+                        [placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
+                    >
+                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
+                            {{ state.name }}
+                        </mat-option>
+                    </mat-select>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    <div class="dialog-actions">
+        <button (click)="dialogRef.close(true)" color="primary" mat-flat-button>
+            {{ 'confirm-delete-dossier-state.delete-only' | translate }}
+        </button>
+        <button (click)="dialogRef.close(replaceDossierStatusId)" mat-flat-button [disabled]="!replaceDossierStatusId">
+            {{ 'confirm-delete-dossier-state.delete-replace' | translate }}
+        </button>
+        <div (click)="dialogRef.close()" [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel"></div>
+    </div>
+
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
+</section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
new file mode 100644
index 000000000..616e7b39c
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
@@ -0,0 +1,16 @@
+@use 'variables';
+
+.replacement-suggestion {
+    font-size: 13px;
+    line-height: 18px;
+    color: variables.$grey-1;
+    margin-bottom: 24px;
+}
+
+.dialog-header {
+    color: variables.$primary;
+}
+
+.heading {
+    margin-bottom: 8px;
+}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
new file mode 100644
index 000000000..d80ece9ad
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+interface DialogData {
+    toBeDeletedState: IDossierState;
+    otherStates: IDossierState[];
+    dossierCount: number;
+}
+
+@Component({
+    selector: 'redaction-confirm-delete-dossier-state-dialog',
+    templateUrl: './confirm-delete-dossier-state-dialog.component.html',
+    styleUrls: ['./confirm-delete-dossier-state-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmDeleteDossierStateDialogComponent {
+    readonly form: FormGroup;
+
+    constructor(
+        private readonly _formBuilder: FormBuilder,
+        readonly dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    ) {
+        this.form = this._getForm();
+        console.log(data);
+    }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            replaceDossierStatusId: [null],
+        });
+    }
+
+    get translateArgs() {
+        return {
+            name: this.data.toBeDeletedState.name,
+            count: this.data.dossierCount,
+        };
+    }
+
+    get replaceDossierStatusId(): string {
+        return this.form.get('replaceDossierStatusId').value;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 74fd22735..045a9d075 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -72,6 +72,12 @@
                     [type]="circleButtonTypes.dark"
                     icon="iqser:edit"
                 ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="openConfirmDeleteStateDialog($event, state)"
+                    [tooltip]="'dossier-states-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:trash"
+                ></iqser-circle-button>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index 6aaa067f9..d3230e1e0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -6,6 +6,7 @@ import {
     ListingComponent,
     LoadingService,
     TableColumnConfig,
+    Toaster,
 } from '../../../../../../../../libs/common-ui/src';
 import { DossierState, IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -16,6 +17,7 @@ import { DossierTemplatesService } from '../../../../services/entity-services/do
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { UserService } from '../../../../services/user.service';
 import { AppStateService } from '../../../../state/app-state.service';
+import { HttpStatusCode } from '@angular/common/http';
 
 @Component({
     templateUrl: './dossier-states-listing-screen.component.html',
@@ -45,6 +47,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         private readonly _dialogService: AdminDialogService,
         private readonly _userService: UserService,
         private readonly _appStateService: AppStateService,
+        private readonly _toaster: Toaster,
     ) {
         super(_injector);
     }
@@ -59,26 +62,59 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
         };
         this._dialogService.openDialog('addEditDossierState', $event, data, async (newValue: IDossierState) => {
-            await firstValueFrom(this._dossierStateService.setDossierState(newValue));
-            await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
+            await this._createNewDossierStateAndRefreshView(newValue);
+        });
+    }
+
+    openConfirmDeleteStateDialog($event: MouseEvent, dossierState: IDossierState) {
+        const templateId = this._dossierTemplatesService.activeDossierTemplateId;
+        const data = {
+            toBeDeletedState: dossierState,
+            otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
+            dossierCount: this._getDossiersWithStateAndTemplateCount(dossierState.dossierStatusId, templateId),
+        };
+        this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string | true) => {
+            if (value) {
+                if (value === true) {
+                    console.log('asteptam');
+                } else {
+                    await firstValueFrom(this._dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
+                }
+            }
+
+            await this._appStateService.refreshDossierTemplate(templateId);
             await this._loadData();
         });
     }
 
+    private async _createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
+        await firstValueFrom(this._dossierStateService.setDossierState(newValue)).catch(error => {
+            if (error.status === HttpStatusCode.Conflict) {
+                this._toaster.error(_('dossier-states-listing.error.conflict'));
+            } else {
+                this._toaster.error(_('dossier-states-listing.error.generic'));
+            }
+        });
+        await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
+        await this._loadData();
+    }
+
     private async _loadData() {
         this._loadingService.start();
 
         try {
             const templateId = this._dossierTemplatesService.activeDossierTemplateId;
-            const dossierStates = await firstValueFrom(this._dossierStateService.loadAll(`dossier-status/dossier-template/${templateId}`));
-            const dossiers = this._dossiersService.all;
+            const dossierStates = await firstValueFrom(this._dossierStateService.loadAllForTemplate(templateId));
             dossierStates.forEach(state => {
-                state.dossierCount = dossiers.filter(
-                    dossier => dossier.dossierStatusId === state.dossierStatusId && dossier.dossierTemplateId === templateId,
-                ).length;
+                state.dossierCount = this._getDossiersWithStateAndTemplateCount(state.dossierStatusId, templateId);
             });
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
+
+    private _getDossiersWithStateAndTemplateCount(dossierStatusId: string, templateId: string) {
+        const dossiers = this._dossiersService.all;
+        return dossiers.filter(dossier => dossier.dossierStatusId === dossierStatusId && dossier.dossierTemplateId === templateId).length;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index ff3c3fb67..31d5dab3c 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -14,6 +14,7 @@ import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogCo
 import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
 import { FileAttributesConfigurationsDialogComponent } from '../dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 import { AddEditDossierStateDialogComponent } from '../dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
+import { ConfirmDeleteDossierStateDialogComponent } from '../dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -30,7 +31,8 @@ type DialogType =
     | 'addEditDossierAttribute'
     | 'addEditJustification'
     | 'uploadDictionary'
-    | 'addEditDossierState';
+    | 'addEditDossierState'
+    | 'deleteDossierState';
 
 @Injectable()
 export class AdminDialogService extends DialogService<DialogType> {
@@ -88,6 +90,9 @@ export class AdminDialogService extends DialogService<DialogType> {
         addEditDossierState: {
             component: AddEditDossierStateDialogComponent,
         },
+        deleteDossierState: {
+            component: ConfirmDeleteDossierStateDialogComponent,
+        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
new file mode 100644
index 000000000..8bc358801
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -0,0 +1,4 @@
+<div class="flex-align-items-center dossier-status-container">
+    <div class="dossier-status-text">{{ dossierState.name }}</div>
+    <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
new file mode 100644
index 000000000..0c4471d56
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
@@ -0,0 +1,19 @@
+@use 'variables';
+
+.dossier-status-container {
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.dossier-status-chip {
+    width: 12px;
+    height: 6px;
+    border-radius: 6px;
+    margin-left: 8px;
+}
+
+.dossier-status-text {
+    font-size: 13px;
+    line-height: 16px;
+    color: variables.$grey-1;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
new file mode 100644
index 000000000..4ec6e70d2
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
+
+@Component({
+    selector: 'redaction-dossiers-listing-status',
+    templateUrl: './dossiers-listing-status.component.html',
+    styleUrls: ['./dossiers-listing-status.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DossiersListingStatusComponent {
+    @Input() dossierState: DossierState;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
index fcff19968..9a8bc9a43 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -14,4 +14,8 @@
     <div class="cell status-container">
         <redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
     </div>
+
+    <div class="cell">
+        <redaction-dossiers-listing-status [dossierState]="states[0]"></redaction-dossiers-listing-status>
+    </div>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
index d1e991d3c..b6c66da48 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -1,8 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Dossier, DossierStats } from '@red/domain';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
+import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
@@ -10,13 +12,14 @@ import { switchMap } from 'rxjs/operators';
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableItemComponent implements OnChanges {
+export class TableItemComponent implements OnChanges, OnInit {
     @Input() dossier!: Dossier;
+    states: DossierState[];
 
     readonly stats$: Observable<DossierStats>;
     private readonly _ngOnChanges$ = new BehaviorSubject<string>(undefined);
 
-    constructor(readonly dossierStatsService: DossierStatsService) {
+    constructor(readonly dossierStatsService: DossierStatsService, readonly dossierStateService: DossierStateService) {
         this.stats$ = this._ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
     }
 
@@ -25,4 +28,9 @@ export class TableItemComponent implements OnChanges {
             this._ngOnChanges$.next(this.dossier.dossierId);
         }
     }
+
+    async ngOnInit(): Promise<void> {
+        this.states = await firstValueFrom(this.dossierStateService.loadAllForTemplate('b3413395-8511-4a45-b0eb-b103012b4d8a'));
+        console.log(this.states);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
index ce0711162..66fdedebd 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
@@ -26,7 +26,8 @@ export class ConfigService {
             { label: _('dossier-listing.table-col-names.name'), sortByKey: 'searchKey', width: '2fr' },
             { label: _('dossier-listing.table-col-names.needs-work') },
             { label: _('dossier-listing.table-col-names.owner'), class: 'user-column' },
-            { label: _('dossier-listing.table-col-names.status'), class: 'flex-end', width: 'auto' },
+            { label: _('dossier-listing.table-col-names.documents-status'), class: 'flex-end', width: 'auto' },
+            { label: _('dossier-listing.table-col-names.dossier-status'), class: 'flex-end' },
         ];
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
index f04907531..01490f1bd 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
@@ -12,6 +12,7 @@ import { ConfigService } from './config.service';
 import { TableItemComponent } from './components/table-item/table-item.component';
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
 import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
+import { DossiersListingStatusComponent } from './components/dossiers-listing-status/dossiers-listing-status.component';
 
 const routes: Routes = [
     {
@@ -30,6 +31,7 @@ const routes: Routes = [
         DossiersListingDossierNameComponent,
         DossierWorkloadColumnComponent,
         TableItemComponent,
+        DossiersListingStatusComponent,
     ],
     providers: [ConfigService],
     imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
index d3be59e74..b5d3f8608 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, Injector } from '@angular/core';
 import { EntitiesService, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
 import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
+import { Observable } from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
@@ -14,4 +15,20 @@ export class DossierStateService extends EntitiesService<DossierState, IDossierS
     setDossierState(@RequiredParam() body: IDossierState) {
         return this._post<unknown>(body, this._defaultModelPath);
     }
+
+    @Validate()
+    loadAllForTemplate(@RequiredParam() templateId: string) {
+        return this.loadAll(`${this._defaultModelPath}/dossier-template/${templateId}`);
+    }
+
+    @Validate()
+    deleteAndReplace(@RequiredParam() dossierStatusId: string, @RequiredParam() replaceDossierStatusId: string) {
+        const url = `${this._defaultModelPath}/${dossierStatusId}?replaceDossierStatusId=${replaceDossierStatusId}`;
+        return this.delete({}, url);
+    }
+
+    @Validate()
+    getById(@RequiredParam() id: string): Observable<DossierState> {
+        return this._getOne([id]);
+    }
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 993a08598..42a3ce3ff 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -421,6 +421,18 @@
     "toast-error": "Please confirm that you understand the ramifications of your action!",
     "warning": "Warning: this cannot be undone!"
   },
+  "confirm-delete-dossier-state": {
+    "title": "Delete Dossier Status",
+    "warning": "The {name} status is assigned to {count} Dossiers.",
+    "suggestion": "Would you like to replace the states of the Dossiers with another status?",
+    "form": {
+      "status": "Replace Status",
+      "status-placeholder": "Choose another status"
+    },
+    "delete-only": "Delete Only",
+    "delete-replace": "Delete and Replace",
+    "cancel": "Cancel"
+  },
   "confirm-delete-users": {
     "cancel": "Keep {usersCount, plural, one{User} other{Users}}",
     "delete": "Delete {usersCount, plural, one{User} other{Users}}",
@@ -628,6 +640,10 @@
       "delete": "Delete Status",
       "edit": "Edit Status"
     },
+    "error": {
+      "conflict": "Dossier State with this name already exists!",
+      "generic": "Failed to add Dossier State"
+    },
     "search": "Search...",
     "table-col-names": {
       "name": "Name",
@@ -732,7 +748,8 @@
       "name": "Name",
       "needs-work": "Workload",
       "owner": "Owner",
-      "status": "Status"
+      "documents-status": "Documents Status",
+      "dossier-status": "Dossier Status"
     },
     "table-header": {
       "title": "{length} active {length, plural, one{Dossier} other{Dossiers}}"

From 8dc2eae52529c82b54d12a39dbfd9f81c150288f Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 7 Feb 2022 07:02:09 +0200
Subject: [PATCH 04/17] wip edit dossier status

---
 .../edit-dossier-general-info.component.html  | 146 ++++++++++--------
 .../edit-dossier-general-info.component.scss  |   4 +
 .../edit-dossier-general-info.component.ts    |   9 +-
 .../dossier-documents-status.component.html   |   1 +
 .../dossier-documents-status.component.scss   |   0
 .../dossier-documents-status.component.ts     |  24 +++
 .../dossiers-listing-actions.component.html   |  10 +-
 .../dossiers-listing-actions.component.ts     |   9 +-
 .../dossiers-listing-status.component.html    |  17 +-
 .../dossiers-listing-status.component.ts      |  19 ++-
 .../table-item/table-item.component.html      |   4 +-
 .../table-item/table-item.component.ts        |  16 +-
 .../dossiers-listing.module.ts                |   2 +
 apps/red-ui/src/assets/i18n/en.json           |   1 +
 14 files changed, 166 insertions(+), 96 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 0af613641..a470c6ca0 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -1,71 +1,91 @@
 <form [formGroup]="form">
-    <div class="iqser-input-group required w-300">
-        <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
-        <input
-            [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
-            formControlName="dossierName"
-            name="dossierName"
-            type="text"
-        />
-    </div>
+    <div class="flex">
+        <div class="flex fields-container">
+            <div class="iqser-input-group required w-300">
+                <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
+                <input
+                    [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
+                    formControlName="dossierName"
+                    name="dossierName"
+                    type="text"
+                />
+            </div>
 
-    <div class="iqser-input-group required w-400">
-        <mat-form-field floatLabel="always">
-            <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
-            <mat-select formControlName="dossierTemplateId" style="width: 100%">
-                <mat-option
-                    *ngFor="let dossierTemplate of dossierTemplates"
-                    [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
-                    [value]="dossierTemplate.dossierTemplateId"
-                    matTooltipPosition="after"
+            <div class="iqser-input-group required w-400">
+                <mat-form-field floatLabel="always">
+                    <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
+                    <mat-select formControlName="dossierTemplateId" style="width: 100%">
+                        <mat-option
+                            *ngFor="let dossierTemplate of dossierTemplates"
+                            [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
+                            [value]="dossierTemplate.dossierTemplateId"
+                            matTooltipPosition="after"
+                        >
+                            {{ dossierTemplate.name }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+
+            <div class="iqser-input-group w-400">
+                <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
+                <textarea
+                    [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
+                    formControlName="description"
+                    iqserHasScrollbar
+                    name="description"
+                    rows="5"
+                    type="text"
+                ></textarea>
+            </div>
+
+            <div>
+                <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
+                    {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
+                </mat-checkbox>
+            </div>
+
+            <div>
+                <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
+                    {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
+                </mat-checkbox>
+            </div>
+        </div>
+
+        <div class="flex fields-container">
+            <div class="due-date">
+                <mat-checkbox
+                    (change)="hasDueDate = !hasDueDate"
+                    [checked]="hasDueDate"
+                    [disabled]="!permissionsService.canEditDossier()"
+                    class="filter-menu-checkbox"
+                    color="primary"
                 >
-                    {{ dossierTemplate.name }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
+                    {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
+                </mat-checkbox>
 
-    <div class="iqser-input-group w-400">
-        <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
-        <textarea
-            [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
-            formControlName="description"
-            iqserHasScrollbar
-            name="description"
-            rows="5"
-            type="text"
-        ></textarea>
-    </div>
+                <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
+                    <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
+                    <mat-datepicker-toggle [for]="picker" matSuffix>
+                        <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
+                    </mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </div>
+            </div>
 
-    <div>
-        <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
-            {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <div>
-        <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
-            {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <div class="due-date">
-        <mat-checkbox
-            (change)="hasDueDate = !hasDueDate"
-            [checked]="hasDueDate"
-            [disabled]="!permissionsService.canEditDossier(dossier)"
-            class="filter-menu-checkbox"
-            color="primary"
-        >
-            {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
-        </mat-checkbox>
-
-        <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
-            <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
-            <mat-datepicker-toggle [for]="picker" matSuffix>
-                <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #picker></mat-datepicker>
+            <div class="iqser-input-group required w-300">
+                <label translate="edit-dossier-dialog.general-info.form.dossier-status"></label>
+                <mat-select
+                    formControlName="dossierStatusId"
+                    [placeholder]="
+                        dossier.dossierStatusId ? (stateService.getById(dossier.dossierStatusId) | async).name : 'No status assigned'
+                    "
+                >
+                    <mat-option *ngFor="let state of states" [value]="dossier.dossierStatusId">
+                        {{ state.name }}
+                    </mat-option>
+                </mat-select>
+            </div>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index 695782375..ad0894822 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -23,3 +23,7 @@
     border-top: none;
     padding: 0;
 }
+
+.fields-container {
+    flex-direction: column;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 8b9d48bf1..54ef6987e 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -14,6 +14,8 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 import { firstValueFrom } from 'rxjs';
+import { DossierStateService } from '@services/entity-services/dossier-state.service';
+import { DossierState } from '../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
 
 @Component({
@@ -29,9 +31,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     form: FormGroup;
     hasDueDate: boolean;
     dossierTemplates: IDossierTemplate[];
+    states: DossierState[];
 
     constructor(
         readonly permissionsService: PermissionsService,
+        readonly stateService: DossierStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dossiersService: DossiersService,
         private readonly _dossierStatsService: DossierStatsService,
@@ -67,12 +71,13 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         return this.hasDueDate && this.form.get('dueDate').value === null;
     }
 
-    ngOnInit() {
+    async ngOnInit() {
         this._filterInvalidDossierTemplates();
         this.form = this._getForm();
         if (!this.permissionsService.canEditDossier(this.dossier)) {
             this.form.disable();
         }
+        this.states = await firstValueFrom(this.stateService.loadAllForTemplate(this.dossier.dossierTemplateId));
         this.hasDueDate = !!this.dossier.dueDate;
     }
 
@@ -96,6 +101,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
             watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
             dueDate: this.hasDueDate ? this.form.get('dueDate').value : undefined,
             dossierTemplateId: this.form.get(DOSSIER_TEMPLATE_ID).value,
+            dossierStatusId: this.form.get('dossierStatusId').value,
         } as IDossierRequest;
         try {
             await firstValueFrom(this._dossiersService.createOrUpdate(dossier));
@@ -136,6 +142,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
                 },
                 Validators.required,
             ],
+            dossierStatusId: [this.dossier.dossierStatusId],
             description: [this.dossier.description],
             dueDate: [this.dossier.dueDate],
             watermarkEnabled: [this.dossier.watermarkEnabled],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
new file mode 100644
index 000000000..3025a99af
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
@@ -0,0 +1 @@
+<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
new file mode 100644
index 000000000..00fc9084f
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { DossierStats, StatusSorter } from '../../../../../../../../../../libs/red-domain/src';
+import { List, StatusBarConfig } from '../../../../../../../../../../libs/common-ui/src';
+
+@Component({
+    selector: 'redaction-dossier-documents-status',
+    templateUrl: './dossier-documents-status.component.html',
+    styleUrls: ['./dossier-documents-status.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DossierDocumentsStatusComponent implements OnChanges {
+    @Input() stats: DossierStats;
+    statusBarConfig: List<StatusBarConfig<string>>;
+
+    private get _statusConfig(): List<StatusBarConfig<string>> {
+        const { fileCountPerWorkflowStatus } = this.stats;
+        const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
+        return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
+    }
+
+    ngOnChanges(): void {
+        this.statusBarConfig = this._statusConfig;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
index 2b521e11f..63bcdbe86 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
@@ -1,6 +1,10 @@
-<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>
-
-<div (longPress)="forceReanalysisAction($event)" class="action-buttons" redactionLongPress>
+<div
+    (longPress)="forceReanalysisAction($event)"
+    class="action-buttons"
+    redactionLongPress
+    iqserHelpMode="dossier-features"
+    [updateElementPosition]="false"
+>
     <iqser-circle-button
         (action)="openEditDossierDialog($event, dossier.dossierId)"
         *ngIf="currentUser.isUser"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 9c93cf143..c76b3e68c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { PermissionsService } from '@services/permissions.service';
 import { CircleButtonTypes, List, StatusBarConfig } from '@iqser/common-ui';
 import { UserService } from '@services/user.service';
-import { Dossier, DossierStats, File, StatusSorter } from '@red/domain';
+import { Dossier, DossierStats, File } from '@red/domain';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@services/user-preference.service';
@@ -39,14 +39,7 @@ export class DossiersListingActionsComponent implements OnChanges {
         private readonly _userPreferenceService: UserPreferenceService,
     ) {}
 
-    private get _statusConfig(): List<StatusBarConfig<string>> {
-        const { fileCountPerWorkflowStatus } = this.stats;
-        const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
-        return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
-    }
-
     ngOnChanges() {
-        this.statusBarConfig = this._statusConfig;
         this.files = this.filesMapService.get(this.dossier.dossierId);
         this.displayReanalyseBtn = this.permissionsService.displayReanalyseBtn(this.dossier) && this.analysisForced;
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
index 8bc358801..c984f6d6e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -1,4 +1,13 @@
-<div class="flex-align-items-center dossier-status-container">
-    <div class="dossier-status-text">{{ dossierState.name }}</div>
-    <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
-</div>
+<ng-container *ngIf="dossierState$ | async as dossierState">
+    <div class="flex-align-items-center dossier-status-container">
+        <div class="dossier-status-text">{{ dossierState.name }}</div>
+        <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
+    </div>
+</ng-container>
+<ng-container *ngIf="(dossierState$ | async) === null">
+    <div class="flex-align-items-center dossier-status-container">
+        <div class="dossier-status-text">No status assigned</div>
+    </div>
+</ng-container>
+
+<redaction-dossiers-listing-actions [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-actions>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 4ec6e70d2..925854463 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,5 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
+import { Observable } from 'rxjs';
+import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
 
 @Component({
     selector: 'redaction-dossiers-listing-status',
@@ -7,6 +10,16 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
     styleUrls: ['./dossiers-listing-status.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingStatusComponent {
-    @Input() dossierState: DossierState;
+export class DossiersListingStatusComponent implements OnInit {
+    dossierState$: Observable<DossierState>;
+    @Input() stats: DossierStats;
+    @Input() dossier: Dossier;
+
+    constructor(private readonly _dossierStateService: DossierStateService) {}
+
+    ngOnInit(): void {
+        if (this.dossier.dossierStatusId) {
+            this.dossierState$ = this._dossierStateService.getById(this.dossier.dossierStatusId);
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
index 9a8bc9a43..90e29ab9a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -12,10 +12,10 @@
     </div>
 
     <div class="cell status-container">
-        <redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
+        <redaction-dossier-documents-status [stats]="stats"></redaction-dossier-documents-status>
     </div>
 
     <div class="cell">
-        <redaction-dossiers-listing-status [dossierState]="states[0]"></redaction-dossiers-listing-status>
+        <redaction-dossiers-listing-status [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-status>
     </div>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
index b6c66da48..d1e991d3c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -1,10 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Dossier, DossierStats } from '@red/domain';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
-import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
-import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
@@ -12,14 +10,13 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableItemComponent implements OnChanges, OnInit {
+export class TableItemComponent implements OnChanges {
     @Input() dossier!: Dossier;
-    states: DossierState[];
 
     readonly stats$: Observable<DossierStats>;
     private readonly _ngOnChanges$ = new BehaviorSubject<string>(undefined);
 
-    constructor(readonly dossierStatsService: DossierStatsService, readonly dossierStateService: DossierStateService) {
+    constructor(readonly dossierStatsService: DossierStatsService) {
         this.stats$ = this._ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
     }
 
@@ -28,9 +25,4 @@ export class TableItemComponent implements OnChanges, OnInit {
             this._ngOnChanges$.next(this.dossier.dossierId);
         }
     }
-
-    async ngOnInit(): Promise<void> {
-        this.states = await firstValueFrom(this.dossierStateService.loadAllForTemplate('b3413395-8511-4a45-b0eb-b103012b4d8a'));
-        console.log(this.states);
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
index 01490f1bd..29af016b3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
@@ -13,6 +13,7 @@ import { TableItemComponent } from './components/table-item/table-item.component
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
 import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
 import { DossiersListingStatusComponent } from './components/dossiers-listing-status/dossiers-listing-status.component';
+import { DossierDocumentsStatusComponent } from './components/dossier-documents-status/dossier-documents-status.component';
 
 const routes: Routes = [
     {
@@ -32,6 +33,7 @@ const routes: Routes = [
         DossierWorkloadColumnComponent,
         TableItemComponent,
         DossiersListingStatusComponent,
+        DossierDocumentsStatusComponent,
     ],
     providers: [ConfigService],
     imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 42a3ce3ff..4898fb78f 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1008,6 +1008,7 @@
           "placeholder": "Enter Description"
         },
         "due-date": "Due Date",
+        "dossier-status": "Dossier Status",
         "name": {
           "label": "Dossier Name",
           "placeholder": "Enter Name"

From 0180bf0119f1669039c3307a35ea6e7d8ab39e24 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 7 Feb 2022 15:16:35 +0200
Subject: [PATCH 05/17] load all states when loading dossiers and templates

---
 apps/red-ui/src/app/guards/dossiers.guard.ts  |  1 +
 ...delete-dossier-state-dialog.component.html |  7 ++---
 ...m-delete-dossier-state-dialog.component.ts | 13 ++++----
 ...dossier-states-listing-screen.component.ts | 10 ++----
 .../edit-dossier-general-info.component.html  | 31 ++++++++++---------
 .../edit-dossier-general-info.component.scss  |  8 +++++
 .../edit-dossier-general-info.component.ts    |  8 +++--
 .../dossiers-listing-status.component.html    | 10 +++---
 .../dossiers-listing-status.component.scss    |  5 +--
 .../dossiers-listing-status.component.ts      |  7 ++---
 .../entity-services/dossier-state.service.ts  | 17 ++++++++--
 .../entity-services/dossiers.service.ts       |  3 ++
 apps/red-ui/src/assets/i18n/en.json           |  6 ++--
 13 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/apps/red-ui/src/app/guards/dossiers.guard.ts b/apps/red-ui/src/app/guards/dossiers.guard.ts
index 7f056bf71..59d87d968 100644
--- a/apps/red-ui/src/app/guards/dossiers.guard.ts
+++ b/apps/red-ui/src/app/guards/dossiers.guard.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { CanActivate } from '@angular/router';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { firstValueFrom } from 'rxjs';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 @Injectable({ providedIn: 'root' })
 export class DossiersGuard implements CanActivate {
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index ff36577ae..0d2dc5004 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -13,8 +13,8 @@
                 <div class="iqser-input-group required w-300">
                     <label translate="confirm-delete-dossier-state.form.status"></label>
                     <mat-select
-                        formControlName="replaceDossierStatusId"
                         [placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
+                        formControlName="replaceDossierStatusId"
                     >
                         <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
                             {{ state.name }}
@@ -26,10 +26,7 @@
     </div>
 
     <div class="dialog-actions">
-        <button (click)="dialogRef.close(true)" color="primary" mat-flat-button>
-            {{ 'confirm-delete-dossier-state.delete-only' | translate }}
-        </button>
-        <button (click)="dialogRef.close(replaceDossierStatusId)" mat-flat-button [disabled]="!replaceDossierStatusId">
+        <button (click)="dialogRef.close(replaceDossierStatusId)" [disabled]="!replaceDossierStatusId" mat-flat-button>
             {{ 'confirm-delete-dossier-state.delete-replace' | translate }}
         </button>
         <div (click)="dialogRef.close()" [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel"></div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index d80ece9ad..547990732 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -24,13 +24,6 @@ export class ConfirmDeleteDossierStateDialogComponent {
         @Inject(MAT_DIALOG_DATA) public data: DialogData,
     ) {
         this.form = this._getForm();
-        console.log(data);
-    }
-
-    private _getForm(): FormGroup {
-        return this._formBuilder.group({
-            replaceDossierStatusId: [null],
-        });
     }
 
     get translateArgs() {
@@ -43,4 +36,10 @@ export class ConfirmDeleteDossierStateDialogComponent {
     get replaceDossierStatusId(): string {
         return this.form.get('replaceDossierStatusId').value;
     }
+
+    private _getForm(): FormGroup {
+        return this._formBuilder.group({
+            replaceDossierStatusId: [null],
+        });
+    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index d3230e1e0..6c0f26378 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -73,13 +73,9 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
             dossierCount: this._getDossiersWithStateAndTemplateCount(dossierState.dossierStatusId, templateId),
         };
-        this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string | true) => {
+        this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string) => {
             if (value) {
-                if (value === true) {
-                    console.log('asteptam');
-                } else {
-                    await firstValueFrom(this._dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
-                }
+                await firstValueFrom(this._dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
             }
 
             await this._appStateService.refreshDossierTemplate(templateId);
@@ -104,7 +100,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
 
         try {
             const templateId = this._dossierTemplatesService.activeDossierTemplateId;
-            const dossierStates = await firstValueFrom(this._dossierStateService.loadAllForTemplate(templateId));
+            const dossierStates = this._dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
             dossierStates.forEach(state => {
                 state.dossierCount = this._getDossiersWithStateAndTemplateCount(state.dossierStatusId, templateId);
             });
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index a470c6ca0..f04c6730a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -53,6 +53,23 @@
         </div>
 
         <div class="flex fields-container">
+            <div class="iqser-input-group w-300">
+                <label translate="edit-dossier-dialog.general-info.form.dossier-status.label"></label>
+                <mat-select
+                    [placeholder]="
+                        currentStatus ? currentStatus.name : ('edit-dossier-dialog.general-info.form.dossier-status.label' | translate)
+                    "
+                    formControlName="dossierStatusId"
+                >
+                    <mat-option *ngFor="let state of states" [value]="state.dossierStatusId">
+                        <div class="flex-align-items-center">
+                            <redaction-small-chip [color]="state.description"></redaction-small-chip>
+                            <div>{{ state.name }}</div>
+                        </div>
+                    </mat-option>
+                </mat-select>
+            </div>
+
             <div class="due-date">
                 <mat-checkbox
                     (change)="hasDueDate = !hasDueDate"
@@ -72,20 +89,6 @@
                     <mat-datepicker #picker></mat-datepicker>
                 </div>
             </div>
-
-            <div class="iqser-input-group required w-300">
-                <label translate="edit-dossier-dialog.general-info.form.dossier-status"></label>
-                <mat-select
-                    formControlName="dossierStatusId"
-                    [placeholder]="
-                        dossier.dossierStatusId ? (stateService.getById(dossier.dossierStatusId) | async).name : 'No status assigned'
-                    "
-                >
-                    <mat-option *ngFor="let state of states" [value]="dossier.dossierStatusId">
-                        {{ state.name }}
-                    </mat-option>
-                </mat-select>
-            </div>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index ad0894822..cadbd6f7a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -26,4 +26,12 @@
 
 .fields-container {
     flex-direction: column;
+
+    &:first-child {
+        margin-right: 40px;
+    }
+}
+
+redaction-small-chip {
+    margin-right: 8px;
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 54ef6987e..bf200a3bf 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -32,10 +32,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     hasDueDate: boolean;
     dossierTemplates: IDossierTemplate[];
     states: DossierState[];
+    currentStatus: DossierState;
 
     constructor(
         readonly permissionsService: PermissionsService,
-        readonly stateService: DossierStateService,
+        private readonly _dossierStateService: DossierStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dossiersService: DossiersService,
         private readonly _dossierStatsService: DossierStatsService,
@@ -77,7 +78,10 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         if (!this.permissionsService.canEditDossier(this.dossier)) {
             this.form.disable();
         }
-        this.states = await firstValueFrom(this.stateService.loadAllForTemplate(this.dossier.dossierTemplateId));
+        this.states = this._dossierStateService.all.filter(s => s.dossierTemplateId === this.dossier.dossierTemplateId);
+        if (this.dossier.dossierStatusId) {
+            this.currentStatus = this._dossierStateService.all.find(s => s.dossierStatusId === this.dossier.dossierStatusId);
+        }
         this.hasDueDate = !!this.dossier.dueDate;
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
index c984f6d6e..3624dd196 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -1,13 +1,13 @@
-<ng-container *ngIf="dossierState$ | async as dossierState">
+<ng-container *ngIf="dossier.dossierStatusId">
     <div class="flex-align-items-center dossier-status-container">
-        <div class="dossier-status-text">{{ dossierState.name }}</div>
-        <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
+        <div class="dossier-status-text">{{ currentState.name }}</div>
+        <redaction-small-chip [color]="currentState.description"></redaction-small-chip>
     </div>
 </ng-container>
-<ng-container *ngIf="(dossierState$ | async) === null">
+<ng-container *ngIf="!dossier.dossierStatusId">
     <div class="flex-align-items-center dossier-status-container">
         <div class="dossier-status-text">No status assigned</div>
     </div>
 </ng-container>
 
-<redaction-dossiers-listing-actions [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-actions>
+<redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
index 0c4471d56..7d5a74298 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.scss
@@ -5,10 +5,7 @@
     width: 100%;
 }
 
-.dossier-status-chip {
-    width: 12px;
-    height: 6px;
-    border-radius: 6px;
+redaction-small-chip {
     margin-left: 8px;
 }
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 925854463..385a727bb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
-import { Observable } from 'rxjs';
 import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
+import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 
 @Component({
     selector: 'redaction-dossiers-listing-status',
@@ -11,15 +10,15 @@ import { DossierStateService } from '../../../../../../services/entity-services/
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DossiersListingStatusComponent implements OnInit {
-    dossierState$: Observable<DossierState>;
     @Input() stats: DossierStats;
     @Input() dossier: Dossier;
+    currentState: DossierState;
 
     constructor(private readonly _dossierStateService: DossierStateService) {}
 
     ngOnInit(): void {
         if (this.dossier.dossierStatusId) {
-            this.dossierState$ = this._dossierStateService.getById(this.dossier.dossierStatusId);
+            this.currentState = this._dossierStateService.all.find(s => s.dossierStatusId === this.dossier.dossierStatusId);
         }
     }
 }
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
index b5d3f8608..5a8218cfa 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -1,13 +1,15 @@
 import { Injectable, Injector } from '@angular/core';
-import { EntitiesService, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
+import { EntitiesService, mapEach, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
 import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
-import { Observable } from 'rxjs';
+import { forkJoin, Observable, switchMap } from 'rxjs';
+import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { map } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root',
 })
 export class DossierStateService extends EntitiesService<DossierState, IDossierState> {
-    constructor(protected readonly _injector: Injector) {
+    constructor(protected readonly _injector: Injector, private readonly _dossierTemplatesService: DossierTemplatesService) {
         super(_injector, DossierState, 'dossier-status');
     }
 
@@ -21,6 +23,15 @@ export class DossierStateService extends EntitiesService<DossierState, IDossierS
         return this.loadAll(`${this._defaultModelPath}/dossier-template/${templateId}`);
     }
 
+    loadAllForAllTemplates(): Observable<DossierState[]> {
+        return this._dossierTemplatesService.all$.pipe(
+            mapEach(template => template.dossierTemplateId),
+            mapEach(id => this.loadAllForTemplate(id)),
+            switchMap(all => forkJoin(all)),
+            map(value => value.flatMap(item => item)),
+        );
+    }
+
     @Validate()
     deleteAndReplace(@RequiredParam() dossierStatusId: string, @RequiredParam() replaceDossierStatusId: string) {
         const url = `${this._defaultModelPath}/${dossierStatusId}?replaceDossierStatusId=${replaceDossierStatusId}`;
diff --git a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
index 0babadb88..7760c7a7d 100644
--- a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
@@ -7,6 +7,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 import { CHANGED_CHECK_INTERVAL } from '@utils/constants';
+import { DossierStateService } from '@services/entity-services/dossier-state.service';
 
 export interface IDossiersStats {
     totalPeople: number;
@@ -37,6 +38,7 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
         private readonly _toaster: Toaster,
         protected readonly _injector: Injector,
         private readonly _dossierStatsService: DossierStatsService,
+        private readonly _dossierStateService: DossierStateService,
     ) {
         super(_injector, Dossier, 'dossier');
 
@@ -54,6 +56,7 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
             mapEach(entity => new Dossier(entity)),
             /* Load stats before updating entities */
             switchMap(dossiers => this._dossierStatsService.getFor(dossierIds(dossiers)).pipe(mapTo(dossiers))),
+            switchMap(dossiers => this._dossierStateService.loadAllForAllTemplates().pipe(mapTo(dossiers))),
             tap(dossiers => this.setEntities(dossiers)),
         );
     }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 4898fb78f..d7c7a9173 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -429,7 +429,6 @@
       "status": "Replace Status",
       "status-placeholder": "Choose another status"
     },
-    "delete-only": "Delete Only",
     "delete-replace": "Delete and Replace",
     "cancel": "Cancel"
   },
@@ -1008,7 +1007,10 @@
           "placeholder": "Enter Description"
         },
         "due-date": "Due Date",
-        "dossier-status": "Dossier Status",
+        "dossier-status": {
+          "label": "Dossier Status",
+          "placeholder": "No status assigned"
+        },
         "name": {
           "label": "Dossier Name",
           "placeholder": "Enter Name"

From 6721c751202293eda47d53e5623428a12b3a78ea Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 9 Feb 2022 13:17:42 +0200
Subject: [PATCH 06/17] fixed loadstates when loading dossiers bugs

---
 apps/red-ui/src/app/guards/dossiers.guard.ts     |  1 -
 .../app/modules/admin/admin-routing.module.ts    |  3 ++-
 .../dossier-states-listing-screen.component.ts   | 16 +++++++---------
 .../edit-dossier-general-info.component.html     |  2 +-
 .../edit-dossier-general-info.component.ts       |  1 +
 .../dossiers-listing-status.component.ts         |  6 +++---
 .../entity-services/dossier-state.service.ts     |  3 ++-
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/red-ui/src/app/guards/dossiers.guard.ts b/apps/red-ui/src/app/guards/dossiers.guard.ts
index 59d87d968..7f056bf71 100644
--- a/apps/red-ui/src/app/guards/dossiers.guard.ts
+++ b/apps/red-ui/src/app/guards/dossiers.guard.ts
@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { CanActivate } from '@angular/router';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { firstValueFrom } from 'rxjs';
-import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 @Injectable({ providedIn: 'root' })
 export class DossiersGuard implements CanActivate {
diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 6ce27d21f..71dc59af3 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -22,6 +22,7 @@ import { DICTIONARY_TYPE, DOSSIER_TEMPLATE_ID } from '@utils/constants';
 import { DossierTemplateExistsGuard } from '../../guards/dossier-template-exists.guard';
 import { DictionaryExistsGuard } from '../../guards/dictionary-exists.guard';
 import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
+import { DossiersGuard } from '../../guards/dossiers.guard';
 
 const routes: Routes = [
     { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
@@ -120,7 +121,7 @@ const routes: Routes = [
                         component: DossierStatesListingScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         data: {
-                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard, DossiersGuard],
                         },
                     },
                     {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index 6c0f26378..f6ee28661 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -71,13 +71,14 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         const data = {
             toBeDeletedState: dossierState,
             otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
-            dossierCount: this._getDossiersWithStateAndTemplateCount(dossierState.dossierStatusId, templateId),
+            dossierCount: dossierState.dossierCount,
         };
         this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string) => {
             if (value) {
                 await firstValueFrom(this._dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
             }
 
+            await firstValueFrom(this._dossierStateService.loadAllForAllTemplates());
             await this._appStateService.refreshDossierTemplate(templateId);
             await this._loadData();
         });
@@ -91,6 +92,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
                 this._toaster.error(_('dossier-states-listing.error.generic'));
             }
         });
+        await firstValueFrom(this._dossierStateService.loadAllForAllTemplates());
         await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
         await this._loadData();
     }
@@ -101,16 +103,12 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         try {
             const templateId = this._dossierTemplatesService.activeDossierTemplateId;
             const dossierStates = this._dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
-            dossierStates.forEach(state => {
-                state.dossierCount = this._getDossiersWithStateAndTemplateCount(state.dossierStatusId, templateId);
-            });
+            const dossiers = this._dossiersService.all;
+            this._dossierStateService.all.forEach(
+                state => (state.dossierCount = dossiers.filter(dossier => dossier.dossierStatusId === state.dossierStatusId).length),
+            );
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
-
-    private _getDossiersWithStateAndTemplateCount(dossierStatusId: string, templateId: string) {
-        const dossiers = this._dossiersService.all;
-        return dossiers.filter(dossier => dossier.dossierStatusId === dossierStatusId && dossier.dossierTemplateId === templateId).length;
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index f04c6730a..7f632e2a0 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -74,7 +74,7 @@
                 <mat-checkbox
                     (change)="hasDueDate = !hasDueDate"
                     [checked]="hasDueDate"
-                    [disabled]="!permissionsService.canEditDossier()"
+                    [disabled]="!permissionsService.canEditDossier(dossier)"
                     class="filter-menu-checkbox"
                     color="primary"
                 >
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index bf200a3bf..16b5cc998 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -89,6 +89,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         this.form.reset({
             dossierName: this.dossier.dossierName,
             dossierTemplateId: this.dossier.dossierTemplateId,
+            dossierStatusId: this.dossier.dossierStatusId,
             description: this.dossier.description,
             watermarkEnabled: this.dossier.watermarkEnabled,
             watermarkPreviewEnabled: this.dossier.watermarkPreviewEnabled,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 385a727bb..96710947d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
 import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
 import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
@@ -9,14 +9,14 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
     styleUrls: ['./dossiers-listing-status.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingStatusComponent implements OnInit {
+export class DossiersListingStatusComponent implements OnChanges {
     @Input() stats: DossierStats;
     @Input() dossier: Dossier;
     currentState: DossierState;
 
     constructor(private readonly _dossierStateService: DossierStateService) {}
 
-    ngOnInit(): void {
+    ngOnChanges(): void {
         if (this.dossier.dossierStatusId) {
             this.currentState = this._dossierStateService.all.find(s => s.dossierStatusId === this.dossier.dossierStatusId);
         }
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
index 5a8218cfa..34adf0566 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -3,7 +3,7 @@ import { EntitiesService, mapEach, RequiredParam, Validate } from '../../../../.
 import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
 import { forkJoin, Observable, switchMap } from 'rxjs';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root',
@@ -29,6 +29,7 @@ export class DossierStateService extends EntitiesService<DossierState, IDossierS
             mapEach(id => this.loadAllForTemplate(id)),
             switchMap(all => forkJoin(all)),
             map(value => value.flatMap(item => item)),
+            tap(value => this.setEntities(value)),
         );
     }
 

From d53b3b99523bc6d17388071d69bea798f79258cb Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 9 Feb 2022 14:55:25 +0200
Subject: [PATCH 07/17] added states chart

---
 .../dossier-states-listing-screen.component.html     | 12 +++++++++++-
 .../dossier-states-listing-screen.component.scss     |  4 ++++
 .../dossier-states-listing-screen.component.ts       | 12 ++++++++++++
 .../entity-services/dossier-state.service.ts         |  5 -----
 apps/red-ui/src/assets/i18n/en.json                  |  3 +++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 045a9d075..84a706e27 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -31,6 +31,16 @@
                 noDataIcon="red:attribute"
             ></iqser-table>
         </div>
+
+        <div class="right-container">
+            <redaction-simple-doughnut-chart
+                [config]="chartData"
+                [radius]="80"
+                [strokeWidth]="15"
+                [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
+                [totalType]="'count'"
+            ></redaction-simple-doughnut-chart>
+        </div>
     </div>
 </section>
 
@@ -55,7 +65,7 @@
     <div *ngIf="cast(entity) as state">
         <div class="cell">
             <div class="flex-align-items-center">
-                <div class="dossier-state-square" [style.background-color]="state.description"></div>
+                <div [style.background-color]="state.description" class="dossier-state-square"></div>
                 <div class="state-name">{{ state.name }}</div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
index 1df526cd4..ef7a2530e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
@@ -12,3 +12,7 @@
     line-height: 20px;
     color: variables.$grey-1;
 }
+
+.right-container {
+    padding: 50px 26px 0;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index f6ee28661..1fe749dfe 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -18,6 +18,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
 import { UserService } from '../../../../services/user.service';
 import { AppStateService } from '../../../../state/app-state.service';
 import { HttpStatusCode } from '@angular/common/http';
+import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
 
 @Component({
     templateUrl: './dossier-states-listing-screen.component.html',
@@ -37,6 +38,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         { label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'searchKey' },
         { label: _('dossier-states-listing.table-col-names.dossiers-count'), sortByKey: 'dossierCount' },
     ];
+    chartData: DoughnutChartConfig[];
 
     constructor(
         protected readonly _injector: Injector,
@@ -107,8 +109,18 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             this._dossierStateService.all.forEach(
                 state => (state.dossierCount = dossiers.filter(dossier => dossier.dossierStatusId === state.dossierStatusId).length),
             );
+            this.chartData = this._loadChartData();
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
+
+    private _loadChartData(): DoughnutChartConfig[] {
+        const config: DoughnutChartConfig[] = [];
+        this._dossierStateService.all.forEach(state => {
+            config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.description });
+        });
+
+        return config;
+    }
 }
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
index 34adf0566..44a82f9ee 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -38,9 +38,4 @@ export class DossierStateService extends EntitiesService<DossierState, IDossierS
         const url = `${this._defaultModelPath}/${dossierStatusId}?replaceDossierStatusId=${replaceDossierStatusId}`;
         return this.delete({}, url);
     }
-
-    @Validate()
-    getById(@RequiredParam() id: string): Observable<DossierState> {
-        return this._getOne([id]);
-    }
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index d7c7a9173..f2bb02254 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -639,6 +639,9 @@
       "delete": "Delete Status",
       "edit": "Edit Status"
     },
+    "chart": {
+      "dossier-states": "Dossier States"
+    },
     "error": {
       "conflict": "Dossier State with this name already exists!",
       "generic": "Failed to add Dossier State"

From 2b3638a97d3468ee3358fa08e6ddda57a4c15895 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 10 Feb 2022 13:49:53 +0200
Subject: [PATCH 08/17] fixed chart legend labels

---
 .../dossier-states-listing-screen.component.html       |  2 +-
 .../simple-doughnut-chart.component.ts                 | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 84a706e27..21f948e7f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -38,7 +38,7 @@
                 [radius]="80"
                 [strokeWidth]="15"
                 [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
-                [totalType]="'count'"
+                [totalType]="'simpleLabel'"
             ></redaction-simple-doughnut-chart>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index ec11bf6e7..bbe3ff3d9 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
@@ -23,7 +23,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
     @Input() radius = 85;
     @Input() strokeWidth = 20;
     @Input() direction: 'row' | 'column' = 'column';
-    @Input() totalType: 'sum' | 'count' = 'sum';
+    @Input() totalType: 'sum' | 'count' | 'simpleLabel' = 'sum';
     @Input() counterText: string;
     @Input() filterKey = 'statusFilters';
     filtersEnabled: boolean;
@@ -51,7 +51,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
     }
 
     get displayedDataTotal() {
-        return this.totalType === 'sum' ? this.dataTotal : this.config.length;
+        return this.totalType === 'count' ? this.config.length : this.dataTotal;
     }
 
     ngOnInit() {
@@ -96,7 +96,11 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
     }
 
     getLabel({ label, value }: DoughnutChartConfig): string {
-        return this.totalType === 'sum' ? `${value} ${label}` : `${label} (${value} ${this.counterText})`;
+        return this.totalType === 'simpleLabel'
+            ? `${label}`
+            : this.totalType === 'sum'
+            ? `${value} ${label}`
+            : `${label} (${value} ${this.counterText})`;
     }
 
     selectValue(key: string): void {

From 860cc91abc1e9ae96b338f8406eae365cd1c94e2 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 11 Feb 2022 14:59:49 +0200
Subject: [PATCH 09/17] fixed doughnut charts

---
 .../app/modules/admin/admin-routing.module.ts |   3 +-
 ...delete-dossier-state-dialog.component.html |   2 +-
 ...ssier-states-listing-screen.component.html | 180 +++++++++---------
 ...dossier-states-listing-screen.component.ts |  26 +--
 .../edit-dossier-general-info.component.html  |   4 +-
 .../dossiers-listing-details.component.ts     |  22 ++-
 .../simple-doughnut-chart.component.ts        |   2 +-
 .../entity-services/dossiers.service.ts       |  16 +-
 8 files changed, 143 insertions(+), 112 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 71dc59af3..6ce27d21f 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -22,7 +22,6 @@ import { DICTIONARY_TYPE, DOSSIER_TEMPLATE_ID } from '@utils/constants';
 import { DossierTemplateExistsGuard } from '../../guards/dossier-template-exists.guard';
 import { DictionaryExistsGuard } from '../../guards/dictionary-exists.guard';
 import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
-import { DossiersGuard } from '../../guards/dossiers.guard';
 
 const routes: Routes = [
     { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
@@ -121,7 +120,7 @@ const routes: Routes = [
                         component: DossierStatesListingScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         data: {
-                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard, DossiersGuard],
+                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
                         },
                     },
                     {
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 0d2dc5004..174896a32 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -26,7 +26,7 @@
     </div>
 
     <div class="dialog-actions">
-        <button (click)="dialogRef.close(replaceDossierStatusId)" [disabled]="!replaceDossierStatusId" mat-flat-button>
+        <button (click)="dialogRef.close(replaceDossierStatusId)" color="primary" [disabled]="!replaceDossierStatusId" mat-flat-button>
             {{ 'confirm-delete-dossier-state.delete-replace' | translate }}
         </button>
         <div (click)="dialogRef.close()" [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 21f948e7f..eff14a34f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -1,94 +1,98 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
+<ng-container *ngIf="dossierStateService.all">
+    <section>
+        <div class="page-header">
+            <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
 
-        <div class="actions flex-1">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
+            <div class="actions flex-1">
+                <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <iqser-table
-                [headerTemplate]="headerTemplate"
-                [itemSize]="80"
-                [noDataText]="'dossier-states-listing.no-data.title' | translate"
-                [noMatchText]="'dossier-states-listing.no-match.title' | translate"
-                [selectionEnabled]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
-                emptyColumnWidth="1fr"
-                noDataIcon="red:attribute"
-            ></iqser-table>
-        </div>
-
-        <div class="right-container">
-            <redaction-simple-doughnut-chart
-                [config]="chartData"
-                [radius]="80"
-                [strokeWidth]="15"
-                [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
-                [totalType]="'simpleLabel'"
-            ></redaction-simple-doughnut-chart>
-        </div>
-    </div>
-</section>
-
-<ng-template #headerTemplate>
-    <div class="table-header-actions">
-        <iqser-input-with-action
-            [(value)]="searchService.searchValue"
-            [placeholder]="'dossier-states-listing.search' | translate"
-        ></iqser-input-with-action>
-
-        <iqser-icon-button
-            (action)="openAddEditStateDialog($event)"
-            *ngIf="currentUser.isAdmin"
-            [label]="'dossier-states-listing.add-new' | translate"
-            [type]="iconButtonTypes.primary"
-            icon="iqser:plus"
-        ></iqser-icon-button>
-    </div>
-</ng-template>
-
-<ng-template #tableItemTemplate let-entity="entity">
-    <div *ngIf="cast(entity) as state">
-        <div class="cell">
-            <div class="flex-align-items-center">
-                <div [style.background-color]="state.description" class="dossier-state-square"></div>
-                <div class="state-name">{{ state.name }}</div>
-            </div>
-        </div>
-
-        <div class="cell small-label">
-            <span>{{ state.dossierCount }}</span>
-        </div>
-
-        <div class="cell">
-            <div *ngIf="currentUser.isAdmin" class="action-buttons">
                 <iqser-circle-button
-                    (action)="openAddEditStateDialog($event, state)"
-                    [tooltip]="'dossier-states-listing.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:edit"
-                ></iqser-circle-button>
-                <iqser-circle-button
-                    (action)="openConfirmDeleteStateDialog($event, state)"
-                    [tooltip]="'dossier-states-listing.action.delete' | translate"
-                    [type]="circleButtonTypes.dark"
-                    icon="iqser:trash"
+                    [routerLink]="['../..']"
+                    [tooltip]="'common.close' | translate"
+                    icon="iqser:close"
+                    tooltipPosition="below"
                 ></iqser-circle-button>
             </div>
         </div>
-    </div>
-</ng-template>
+
+        <div class="content-inner">
+            <div class="overlay-shadow"></div>
+
+            <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
+
+            <div class="content-container">
+                <iqser-table
+                    [headerTemplate]="headerTemplate"
+                    [itemSize]="80"
+                    [noDataText]="'dossier-states-listing.no-data.title' | translate"
+                    [noMatchText]="'dossier-states-listing.no-match.title' | translate"
+                    [selectionEnabled]="true"
+                    [tableColumnConfigs]="tableColumnConfigs"
+                    emptyColumnWidth="1fr"
+                    noDataIcon="red:attribute"
+                ></iqser-table>
+            </div>
+
+            <div class="right-container">
+                <ng-container *ngIf="chartData">
+                    <redaction-simple-doughnut-chart
+                        [config]="chartData"
+                        [radius]="80"
+                        [strokeWidth]="15"
+                        [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
+                        [totalType]="'simpleLabel'"
+                    ></redaction-simple-doughnut-chart>
+                </ng-container>
+            </div>
+        </div>
+    </section>
+
+    <ng-template #headerTemplate>
+        <div class="table-header-actions">
+            <iqser-input-with-action
+                [(value)]="searchService.searchValue"
+                [placeholder]="'dossier-states-listing.search' | translate"
+            ></iqser-input-with-action>
+
+            <iqser-icon-button
+                (action)="openAddEditStateDialog($event)"
+                *ngIf="currentUser.isAdmin"
+                [label]="'dossier-states-listing.add-new' | translate"
+                [type]="iconButtonTypes.primary"
+                icon="iqser:plus"
+            ></iqser-icon-button>
+        </div>
+    </ng-template>
+
+    <ng-template #tableItemTemplate let-entity="entity">
+        <div *ngIf="cast(entity) as state">
+            <div class="cell">
+                <div class="flex-align-items-center">
+                    <div [style.background-color]="state.description" class="dossier-state-square"></div>
+                    <div class="state-name">{{ state.name }}</div>
+                </div>
+            </div>
+
+            <div class="cell small-label">
+                <span>{{ state.dossierCount }}</span>
+            </div>
+
+            <div class="cell">
+                <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                    <iqser-circle-button
+                        (action)="openAddEditStateDialog($event, state)"
+                        [tooltip]="'dossier-states-listing.action.edit' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
+                    <iqser-circle-button
+                        (action)="openConfirmDeleteStateDialog($event, state)"
+                        [tooltip]="'dossier-states-listing.action.delete' | translate"
+                        [type]="circleButtonTypes.dark"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index 1fe749dfe..3b532f3e0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -44,7 +44,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         protected readonly _injector: Injector,
         private readonly _loadingService: LoadingService,
         private readonly _dossiersService: DossiersService,
-        private readonly _dossierStateService: DossierStateService,
+        readonly dossierStateService: DossierStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: AdminDialogService,
         private readonly _userService: UserService,
@@ -77,38 +77,34 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         };
         this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string) => {
             if (value) {
-                await firstValueFrom(this._dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
+                await firstValueFrom(this.dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
             }
 
-            await firstValueFrom(this._dossierStateService.loadAllForAllTemplates());
             await this._appStateService.refreshDossierTemplate(templateId);
             await this._loadData();
         });
     }
 
     private async _createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
-        await firstValueFrom(this._dossierStateService.setDossierState(newValue)).catch(error => {
+        await firstValueFrom(this.dossierStateService.setDossierState(newValue)).catch(error => {
             if (error.status === HttpStatusCode.Conflict) {
                 this._toaster.error(_('dossier-states-listing.error.conflict'));
             } else {
                 this._toaster.error(_('dossier-states-listing.error.generic'));
             }
         });
-        await firstValueFrom(this._dossierStateService.loadAllForAllTemplates());
         await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
         await this._loadData();
     }
 
-    private async _loadData() {
+    private async _loadData(): Promise<void> {
         this._loadingService.start();
+        await firstValueFrom(this._dossiersService.loadAll());
 
         try {
             const templateId = this._dossierTemplatesService.activeDossierTemplateId;
-            const dossierStates = this._dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
-            const dossiers = this._dossiersService.all;
-            this._dossierStateService.all.forEach(
-                state => (state.dossierCount = dossiers.filter(dossier => dossier.dossierStatusId === state.dossierStatusId).length),
-            );
+            const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
+            this._setStatesCount();
             this.chartData = this._loadChartData();
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
@@ -117,10 +113,16 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
 
     private _loadChartData(): DoughnutChartConfig[] {
         const config: DoughnutChartConfig[] = [];
-        this._dossierStateService.all.forEach(state => {
+        this.dossierStateService.all.forEach(state => {
             config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.description });
         });
 
         return config;
     }
+
+    private _setStatesCount(): void {
+        this.dossierStateService.all.forEach(
+            state => (state.dossierCount = this._dossiersService.getCountWithState(state.dossierStatusId)),
+        );
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 7f632e2a0..7faada51b 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -57,7 +57,9 @@
                 <label translate="edit-dossier-dialog.general-info.form.dossier-status.label"></label>
                 <mat-select
                     [placeholder]="
-                        currentStatus ? currentStatus.name : ('edit-dossier-dialog.general-info.form.dossier-status.label' | translate)
+                        currentStatus
+                            ? currentStatus.name
+                            : ('edit-dossier-dialog.general-info.form.dossier-status.placeholder' | translate)
                     "
                     formControlName="dossierStatusId"
                 >
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index 68f053b36..d27fd37e3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -7,8 +7,9 @@ import { Dossier, DossierStats, FileCountPerWorkflowStatus, StatusSorter } from
 import { workflowFileStatusTranslations } from '../../../../translations/file-status-translations';
 import { TranslateChartService } from '@services/translate-chart.service';
 import { filter, map, switchMap } from 'rxjs/operators';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
+import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossiers-listing-details',
@@ -25,6 +26,8 @@ export class DossiersListingDetailsComponent {
         readonly dossiersService: DossiersService,
         private readonly _dossierStatsMap: DossierStatsService,
         private readonly _translateChartService: TranslateChartService,
+        private readonly _dossierStateService: DossierStateService,
+        private readonly _translateService: TranslateService,
     ) {
         this.documentsChartData$ = this.dossiersService.all$.pipe(
             mapEach(dossier => _dossierStatsMap.watch$(dossier.dossierId)),
@@ -37,12 +40,19 @@ export class DossiersListingDetailsComponent {
     }
 
     private async _toDossierChartData(dossiers: Dossier[]): Promise<DoughnutChartConfig[]> {
+        const config: DoughnutChartConfig[] = [];
+        this._dossierStateService.all.forEach(state => {
+            state.dossierCount = this.dossiersService.getCountWithState(state.dossierStatusId);
+            config.push({ value: state.dossierCount, label: state.name, color: state.description });
+        });
+        const notAssignedLength = this.dossiersService.all.length - config.map(v => v.value).reduce((acc, val) => acc + val, 0);
+        config.push({
+            value: notAssignedLength,
+            label: this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.placeholder'),
+            color: '#D8DAE0',
+        });
         // TODO: deleted dossiers count should come with stats
-        // const deletedDossiers = await this.dossiersService.getDeleted();
-        return [
-            { value: dossiers.length, color: 'ACTIVE', label: _('active') },
-            // { value: deletedDossiers.length, color: 'DELETED', label: _('archived') },
-        ];
+        return config;
     }
 
     private _toChartData(stats: DossierStats[]) {
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index bbe3ff3d9..ccea0ce17 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
@@ -51,7 +51,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
     }
 
     get displayedDataTotal() {
-        return this.totalType === 'count' ? this.config.length : this.dataTotal;
+        return this.totalType === 'sum' ? this.dataTotal : this.config.length;
     }
 
     ngOnInit() {
diff --git a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
index 7760c7a7d..234707713 100644
--- a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
@@ -62,7 +62,17 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
     }
 
     loadAllIfChanged(): Observable<ChangesDetails> {
-        return this.hasChangesDetails$().pipe(switchMap(changes => this.loadAll().pipe(mapTo(changes))));
+        return this.hasChangesDetails$().pipe(
+            catchError(err => {
+                console.log('aaa', err);
+                return of(err);
+            }),
+            switchMap(changes => this.loadAll().pipe(mapTo(changes))),
+            catchError(err => {
+                console.log('bbb', err);
+                return of(err);
+            }),
+        );
     }
 
     hasChangesDetails$(): Observable<ChangesDetails> {
@@ -111,6 +121,10 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
         return firstValueFrom(super.delete(body, 'deleted-dossiers/hard-delete', body));
     }
 
+    getCountWithState(dossierStatusId: string): number {
+        return this.all.filter(dossier => dossier.dossierStatusId === dossierStatusId).length;
+    }
+
     private _emitFileChanges(changes: ChangesDetails): void {
         changes.dossierChanges.filter(change => change.fileChanges).forEach(change => this.dossierFileChanges$.next(change.dossierId));
     }

From 408af932073f8b01fdd5c73b7063487831115955 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Sun, 13 Feb 2022 11:44:13 +0200
Subject: [PATCH 10/17] added separator between doughnut charts

---
 .../dossiers-listing-actions.component.html   |   8 +-
 .../dossiers-listing-details.component.html   |   2 +-
 .../dossiers-listing-details.component.scss   |   4 +
 apps/red-ui/src/assets/i18n/en.json           | 114 +++++++++---------
 4 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
index 63bcdbe86..d0a5803d2 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
@@ -1,10 +1,4 @@
-<div
-    (longPress)="forceReanalysisAction($event)"
-    class="action-buttons"
-    redactionLongPress
-    iqserHelpMode="dossier-features"
-    [updateElementPosition]="false"
->
+<div (longPress)="forceReanalysisAction($event)" class="action-buttons" redactionLongPress>
     <iqser-circle-button
         (action)="openEditDossierDialog($event, dossier.dossierId)"
         *ngIf="currentUser.isUser"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
index 1371e0061..75ad9ceb1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
@@ -26,7 +26,7 @@
     </div>
 </div>
 
-<div>
+<div class="right-chart">
     <redaction-simple-doughnut-chart
         *ngIf="documentsChartData$ | async as config"
         [config]="config"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
index f0e54ada6..b5a1b4580 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
@@ -29,3 +29,7 @@
         }
     }
 }
+
+.right-chart {
+    border-left: 1px solid rgba(226, 228, 233, 0.9);
+}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index f2bb02254..bcc13bfb7 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -8,7 +8,6 @@
     "all": "All",
     "none": "None"
   },
-  "active": "Active",
   "add-dossier-dialog": {
     "actions": {
       "save": "Save",
@@ -72,6 +71,16 @@
     "save": "Save Attribute",
     "title": "{type, select, edit{Edit {name}} create{Add New} other{}} Dossier Attribute"
   },
+  "add-edit-dossier-state": {
+    "form": {
+      "description": "Hex Color",
+      "description-placeholder": "#",
+      "name": "Status Name",
+      "name-placeholder": "Enter Name"
+    },
+    "save": "Save Status",
+    "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Status"
+  },
   "add-edit-dossier-template": {
     "error": {
       "conflict": "Failed to create dossier template: a dossier template with the same name already exists.",
@@ -88,16 +97,6 @@
     "save": "Save Dossier Template",
     "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Template"
   },
-  "add-edit-dossier-state": {
-    "form": {
-      "name": "Status Name",
-      "name-placeholder": "Enter Name",
-      "description": "Hex Color",
-      "description-placeholder": "#"
-    },
-    "save": "Save Status",
-    "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Status"
-  },
   "add-edit-file-attribute": {
     "form": {
       "column-header": "CSV Column Header",
@@ -409,6 +408,17 @@
     }
   },
   "configurations": "Configurations",
+  "confirm-delete-dossier-state": {
+    "cancel": "Cancel",
+    "delete-replace": "Delete and Replace",
+    "form": {
+      "status": "Replace Status",
+      "status-placeholder": "Choose another status"
+    },
+    "suggestion": "Would you like to replace the states of the Dossiers with another status?",
+    "title": "Delete Dossier Status",
+    "warning": "The {name} status is assigned to {count} Dossiers."
+  },
   "confirm-delete-file-attribute": {
     "cancel": "Keep {type, select, single{Attribute} bulk{Attributes} other{}}",
     "delete": "Delete {type, select, single{Attribute} bulk{Attributes} other{}}",
@@ -421,17 +431,6 @@
     "toast-error": "Please confirm that you understand the ramifications of your action!",
     "warning": "Warning: this cannot be undone!"
   },
-  "confirm-delete-dossier-state": {
-    "title": "Delete Dossier Status",
-    "warning": "The {name} status is assigned to {count} Dossiers.",
-    "suggestion": "Would you like to replace the states of the Dossiers with another status?",
-    "form": {
-      "status": "Replace Status",
-      "status-placeholder": "Choose another status"
-    },
-    "delete-replace": "Delete and Replace",
-    "cancel": "Cancel"
-  },
   "confirm-delete-users": {
     "cancel": "Keep {usersCount, plural, one{User} other{Users}}",
     "delete": "Delete {usersCount, plural, one{User} other{Users}}",
@@ -633,36 +632,6 @@
     "title": "Introduce File Attributes"
   },
   "dossier": "Dossier",
-  "dossier-states": "Dossier States",
-  "dossier-states-listing": {
-    "action": {
-      "delete": "Delete Status",
-      "edit": "Edit Status"
-    },
-    "chart": {
-      "dossier-states": "Dossier States"
-    },
-    "error": {
-      "conflict": "Dossier State with this name already exists!",
-      "generic": "Failed to add Dossier State"
-    },
-    "search": "Search...",
-    "table-col-names": {
-      "name": "Name",
-      "dossiers-count": "Dossiers Count"
-    },
-    "add-new": "New Status",
-    "table-header": {
-      "title": "{length} dossier {length, plural, one{state} other{states}}"
-    },
-    "no-data": {
-      "action": "New State",
-      "title": "There are no dossier states."
-    },
-    "no-match": {
-      "title": "No dossier states match your current filters."
-    }
-  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -747,11 +716,11 @@
       "total-people": "Total users"
     },
     "table-col-names": {
+      "documents-status": "Documents Status",
+      "dossier-status": "Dossier Status",
       "name": "Name",
       "needs-work": "Workload",
-      "owner": "Owner",
-      "documents-status": "Documents Status",
-      "dossier-status": "Dossier Status"
+      "owner": "Owner"
     },
     "table-header": {
       "title": "{length} active {length, plural, one{Dossier} other{Dossiers}}"
@@ -855,6 +824,35 @@
     "under-review": "Under Review",
     "upload-files": "Drag & drop files anywhere..."
   },
+  "dossier-states": "Dossier States",
+  "dossier-states-listing": {
+    "action": {
+      "delete": "Delete Status",
+      "edit": "Edit Status"
+    },
+    "add-new": "New Status",
+    "chart": {
+      "dossier-states": "Dossier States"
+    },
+    "error": {
+      "conflict": "Dossier State with this name already exists!",
+      "generic": "Failed to add Dossier State"
+    },
+    "no-data": {
+      "title": "There are no dossier states."
+    },
+    "no-match": {
+      "title": "No dossier states match your current filters."
+    },
+    "search": "Search...",
+    "table-col-names": {
+      "dossiers-count": "Dossiers Count",
+      "name": "Name"
+    },
+    "table-header": {
+      "title": "{length} dossier {length, plural, one{state} other{states}}"
+    }
+  },
   "dossier-template-info": "Info",
   "dossier-template-info-screen": {
     "created-by": "Created by",
@@ -1009,11 +1007,11 @@
           "label": "Description",
           "placeholder": "Enter Description"
         },
-        "due-date": "Due Date",
         "dossier-status": {
           "label": "Dossier Status",
           "placeholder": "No status assigned"
         },
+        "due-date": "Due Date",
         "name": {
           "label": "Dossier Name",
           "placeholder": "Enter Name"
@@ -1689,8 +1687,8 @@
     "no-time-left": "Time to restore already passed"
   },
   "toggle-auto-analysis-message": {
-    "success": "{toggleOperation} automatic processing.",
-    "error": "Something went wrong."
+    "error": "Something went wrong.",
+    "success": "{toggleOperation} automatic processing."
   },
   "top-bar": {
     "navigation-items": {

From 5c6330fb4f9b942340b446c319eb5da9a73ebee7 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 14 Feb 2022 13:16:19 +0200
Subject: [PATCH 11/17] added delete only functionality

---
 ...d-edit-dossier-state-dialog.component.html | 20 +++++------
 ...add-edit-dossier-state-dialog.component.ts | 25 ++++++++------
 ...delete-dossier-state-dialog.component.html |  7 ++--
 ...m-delete-dossier-state-dialog.component.ts | 32 ++++++++++++++----
 ...ssier-states-listing-screen.component.html | 19 +++++------
 ...dossier-states-listing-screen.component.ts | 33 +++++++++++--------
 .../edit-dossier-general-info.component.html  |  2 +-
 .../edit-dossier-general-info.component.ts    |  2 +-
 .../dossiers-listing-details.component.ts     |  2 +-
 .../dossiers-listing-status.component.html    |  3 +-
 .../dossiers-listing-status.component.ts      |  2 +-
 .../entity-services/dossier-state.service.ts  |  4 +--
 .../entity-services/dossiers.service.ts       | 12 +------
 apps/red-ui/src/assets/i18n/en.json           |  5 +--
 libs/red-domain/src/index.ts                  |  1 +
 .../lib/dossier-state/dossier-state.model.ts  |  2 ++
 .../src/lib/dossier-state/dossier-state.ts    |  1 +
 17 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
index 7c0c7d695..4bb4a6f4d 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
@@ -1,8 +1,8 @@
 <section class="dialog">
     <div
         [translateParams]="{
-            type: data.dossierState ? 'edit' : 'create',
-            name: data.dossierState?.name
+            type: dossierState ? 'edit' : 'create',
+            name: dossierState?.name
         }"
         [translate]="'add-edit-dossier-state.title'"
         class="dialog-header heading-l"
@@ -21,23 +21,23 @@
             </div>
 
             <div class="iqser-input-group required">
-                <label translate="add-edit-dossier-state.form.description"></label>
+                <label translate="add-edit-dossier-state.form.color"></label>
                 <input
-                    [placeholder]="'add-edit-dossier-state.form.description-placeholder' | translate"
+                    [placeholder]="'add-edit-dossier-state.form.color-placeholder' | translate"
                     class="hex-color-input"
-                    formControlName="description"
-                    name="description"
+                    formControlName="color"
+                    name="color"
                     type="text"
                 />
                 <div
-                    (colorPickerChange)="form.get('description').setValue($event)"
-                    [colorPicker]="form.get('description').value"
+                    (colorPickerChange)="form.get('color').setValue($event)"
+                    [colorPicker]="form.get('color').value"
                     [cpOutputFormat]="'hex'"
-                    [style.background]="form.get('description').value"
+                    [style.background]="form.get('color').value"
                     class="input-icon"
                 >
                     <mat-icon
-                        *ngIf="!form.get('description').value || form.get('description').value?.length === 0"
+                        *ngIf="!form.get('color').value || form.get('color').value?.length === 0"
                         svgIcon="red:color-picker"
                     ></mat-icon>
                 </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
index 6e3193355..cbe065049 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/c
 import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { IDossierState } from '@red/domain';
 
 interface DialogData {
-    dossierState: IDossierState;
-    dossierTemplateId: string;
+    readonly dossierState: IDossierState;
+    readonly dossierTemplateId: string;
 }
 
 @Component({
@@ -16,30 +16,35 @@ interface DialogData {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
+    readonly dossierState: IDossierState;
+    readonly dossierTemplateId: string;
+
     constructor(
         private readonly _formBuilder: FormBuilder,
         protected readonly _injector: Injector,
         protected readonly _dialogRef: MatDialogRef<AddEditDossierStateDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: DialogData,
+        @Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
     ) {
         super(_injector, _dialogRef);
-        this.form = this._getForm(data.dossierState);
+        this.dossierState = data.dossierState;
+        this.dossierTemplateId = data.dossierTemplateId;
+        this.form = this.#getForm();
         this.initialFormValue = this.form.getRawValue();
     }
 
     save(): void {
         const dossierState: IDossierState = {
-            dossierStatusId: this.data.dossierState?.dossierStatusId,
-            dossierTemplateId: this.data.dossierTemplateId,
+            dossierStatusId: this.dossierState?.dossierStatusId,
+            dossierTemplateId: this.dossierTemplateId,
             ...this.form.getRawValue(),
         };
         this._dialogRef.close(dossierState);
     }
 
-    private _getForm(dossierState: IDossierState): FormGroup {
+    #getForm(): FormGroup {
         return this._formBuilder.group({
-            name: [dossierState?.name, Validators.required],
-            description: [dossierState?.description, Validators.required],
+            name: [this.dossierState?.name, Validators.required],
+            color: [this.dossierState?.color, Validators.required],
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 174896a32..6aa8cacc5 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -16,7 +16,8 @@
                         [placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
                         formControlName="replaceDossierStatusId"
                     >
-                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
+                        <mat-option>{{ 'confirm-delete-dossier-state.form.status-placeholder' | translate }}</mat-option>
+                        <mat-option *ngFor="let state of otherStates" [value]="state.dossierStatusId">
                             {{ state.name }}
                         </mat-option>
                     </mat-select>
@@ -26,8 +27,8 @@
     </div>
 
     <div class="dialog-actions">
-        <button (click)="dialogRef.close(replaceDossierStatusId)" color="primary" [disabled]="!replaceDossierStatusId" mat-flat-button>
-            {{ 'confirm-delete-dossier-state.delete-replace' | translate }}
+        <button (click)="dialogRef.close(afterCloseValue)" color="primary" mat-flat-button>
+            {{ label | translate }}
         </button>
         <div (click)="dialogRef.close()" [translate]="'confirm-delete-dossier-state.cancel'" class="all-caps-label cancel"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index 547990732..9c8117150 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { IDossierState } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 interface DialogData {
-    toBeDeletedState: IDossierState;
-    otherStates: IDossierState[];
-    dossierCount: number;
+    readonly toBeDeletedState: IDossierState;
+    readonly otherStates: IDossierState[];
+    readonly dossierCount: number;
 }
 
 @Component({
@@ -17,19 +17,25 @@ interface DialogData {
 })
 export class ConfirmDeleteDossierStateDialogComponent {
     readonly form: FormGroup;
+    readonly toBeDeletedState: IDossierState;
+    readonly otherStates: IDossierState[];
+    readonly dossierCount: number;
 
     constructor(
         private readonly _formBuilder: FormBuilder,
         readonly dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: DialogData,
+        @Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
     ) {
         this.form = this._getForm();
+        this.toBeDeletedState = data.toBeDeletedState;
+        this.otherStates = data.otherStates;
+        this.dossierCount = data.dossierCount;
     }
 
     get translateArgs() {
         return {
-            name: this.data.toBeDeletedState.name,
-            count: this.data.dossierCount,
+            name: this.toBeDeletedState.name,
+            count: this.dossierCount,
         };
     }
 
@@ -37,6 +43,18 @@ export class ConfirmDeleteDossierStateDialogComponent {
         return this.form.get('replaceDossierStatusId').value;
     }
 
+    get label(): string {
+        return this.replaceDossierStatusId ? 'confirm-delete-dossier-state.delete-replace' : 'confirm-delete-dossier-state.delete';
+    }
+
+    get afterCloseValue(): string | true {
+        if (this.replaceDossierStatusId) {
+            return this.replaceDossierStatusId;
+        }
+
+        return true;
+    }
+
     private _getForm(): FormGroup {
         return this._formBuilder.group({
             replaceDossierStatusId: [null],
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index eff14a34f..9ce7e905f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -34,15 +34,14 @@
             </div>
 
             <div class="right-container">
-                <ng-container *ngIf="chartData">
-                    <redaction-simple-doughnut-chart
-                        [config]="chartData"
-                        [radius]="80"
-                        [strokeWidth]="15"
-                        [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
-                        [totalType]="'simpleLabel'"
-                    ></redaction-simple-doughnut-chart>
-                </ng-container>
+                <redaction-simple-doughnut-chart
+                    *ngIf="chartData"
+                    [config]="chartData"
+                    [radius]="80"
+                    [strokeWidth]="15"
+                    [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
+                    [totalType]="'simpleLabel'"
+                ></redaction-simple-doughnut-chart>
             </div>
         </div>
     </section>
@@ -68,7 +67,7 @@
         <div *ngIf="cast(entity) as state">
             <div class="cell">
                 <div class="flex-align-items-center">
-                    <div [style.background-color]="state.description" class="dossier-state-square"></div>
+                    <div [style.background-color]="state.color" class="dossier-state-square"></div>
                     <div class="state-name">{{ state.name }}</div>
                 </div>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index 3b532f3e0..fffd64809 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -8,7 +8,7 @@ import {
     TableColumnConfig,
     Toaster,
 } from '../../../../../../../../libs/common-ui/src';
-import { DossierState, IDossierState } from '../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { DossierState, IDossierState } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossiersService } from '../../../../services/entity-services/dossiers.service';
 import { DossierStateService } from '../../../../services/entity-services/dossier-state.service';
@@ -55,7 +55,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
     }
 
     async ngOnInit(): Promise<void> {
-        await this._loadData();
+        await this.#loadData();
     }
 
     openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
@@ -64,7 +64,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
         };
         this._dialogService.openDialog('addEditDossierState', $event, data, async (newValue: IDossierState) => {
-            await this._createNewDossierStateAndRefreshView(newValue);
+            await this.#createNewDossierStateAndRefreshView(newValue);
         });
     }
 
@@ -75,17 +75,22 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
             dossierCount: dossierState.dossierCount,
         };
-        this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string) => {
+        this._dialogService.openDialog('deleteDossierState', $event, data, async (value: string | true) => {
             if (value) {
-                await firstValueFrom(this.dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
+                if (typeof value === 'string') {
+                    await firstValueFrom(this.dossierStateService.deleteAndReplace(dossierState.dossierStatusId, value));
+                } else {
+                    await firstValueFrom(this.dossierStateService.delete(dossierState.dossierStatusId));
+                }
             }
 
             await this._appStateService.refreshDossierTemplate(templateId);
-            await this._loadData();
+            await this.#loadData();
         });
     }
 
-    private async _createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
+    async #createNewDossierStateAndRefreshView(newValue: IDossierState): Promise<void> {
+        this._loadingService.start();
         await firstValueFrom(this.dossierStateService.setDossierState(newValue)).catch(error => {
             if (error.status === HttpStatusCode.Conflict) {
                 this._toaster.error(_('dossier-states-listing.error.conflict'));
@@ -94,33 +99,33 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
             }
         });
         await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
-        await this._loadData();
+        await this.#loadData();
     }
 
-    private async _loadData(): Promise<void> {
+    async #loadData(): Promise<void> {
         this._loadingService.start();
         await firstValueFrom(this._dossiersService.loadAll());
 
         try {
             const templateId = this._dossierTemplatesService.activeDossierTemplateId;
             const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
-            this._setStatesCount();
-            this.chartData = this._loadChartData();
+            this.#setStatesCount();
+            this.chartData = this.#loadChartData();
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
 
-    private _loadChartData(): DoughnutChartConfig[] {
+    #loadChartData(): DoughnutChartConfig[] {
         const config: DoughnutChartConfig[] = [];
         this.dossierStateService.all.forEach(state => {
-            config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.description });
+            config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.color });
         });
 
         return config;
     }
 
-    private _setStatesCount(): void {
+    #setStatesCount(): void {
         this.dossierStateService.all.forEach(
             state => (state.dossierCount = this._dossiersService.getCountWithState(state.dossierStatusId)),
         );
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 7faada51b..31f08d1aa 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -65,7 +65,7 @@
                 >
                     <mat-option *ngFor="let state of states" [value]="state.dossierStatusId">
                         <div class="flex-align-items-center">
-                            <redaction-small-chip [color]="state.description"></redaction-small-chip>
+                            <redaction-small-chip [color]="state.color"></redaction-small-chip>
                             <div>{{ state.name }}</div>
                         </div>
                     </mat-option>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 16b5cc998..71531baa3 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import * as moment from 'moment';
-import { Dossier, IDossierRequest, IDossierTemplate } from '@red/domain';
+import { Dossier, DossierState, IDossierRequest, IDossierTemplate } from '@red/domain';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import { PermissionsService } from '@services/permissions.service';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index d27fd37e3..d574ff242 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -43,7 +43,7 @@ export class DossiersListingDetailsComponent {
         const config: DoughnutChartConfig[] = [];
         this._dossierStateService.all.forEach(state => {
             state.dossierCount = this.dossiersService.getCountWithState(state.dossierStatusId);
-            config.push({ value: state.dossierCount, label: state.name, color: state.description });
+            config.push({ value: state.dossierCount, label: state.name, color: state.color });
         });
         const notAssignedLength = this.dossiersService.all.length - config.map(v => v.value).reduce((acc, val) => acc + val, 0);
         config.push({
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
index 3624dd196..626b6ecbd 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -1,9 +1,10 @@
 <ng-container *ngIf="dossier.dossierStatusId">
     <div class="flex-align-items-center dossier-status-container">
         <div class="dossier-status-text">{{ currentState.name }}</div>
-        <redaction-small-chip [color]="currentState.description"></redaction-small-chip>
+        <redaction-small-chip [color]="currentState.color"></redaction-small-chip>
     </div>
 </ng-container>
+
 <ng-container *ngIf="!dossier.dossierStatusId">
     <div class="flex-align-items-center dossier-status-container">
         <div class="dossier-status-text">No status assigned</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 96710947d..61f1e16da 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
 import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
-import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { DossierState } from '@red/domain';
 
 @Component({
     selector: 'redaction-dossiers-listing-status',
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
index 44a82f9ee..a3c2edc54 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-state.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, Injector } from '@angular/core';
-import { EntitiesService, mapEach, RequiredParam, Validate } from '../../../../../../libs/common-ui/src';
-import { DossierState, IDossierState } from '../../../../../../libs/red-domain/src/lib/dossier-state';
+import { EntitiesService, mapEach, RequiredParam, Validate } from '@iqser/common-ui';
+import { DossierState, IDossierState } from '@red/domain';
 import { forkJoin, Observable, switchMap } from 'rxjs';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { map, tap } from 'rxjs/operators';
diff --git a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
index 234707713..4787fdb30 100644
--- a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
@@ -62,17 +62,7 @@ export class DossiersService extends EntitiesService<Dossier, IDossier> {
     }
 
     loadAllIfChanged(): Observable<ChangesDetails> {
-        return this.hasChangesDetails$().pipe(
-            catchError(err => {
-                console.log('aaa', err);
-                return of(err);
-            }),
-            switchMap(changes => this.loadAll().pipe(mapTo(changes))),
-            catchError(err => {
-                console.log('bbb', err);
-                return of(err);
-            }),
-        );
+        return this.hasChangesDetails$().pipe(switchMap(changes => this.loadAll().pipe(mapTo(changes))));
     }
 
     hasChangesDetails$(): Observable<ChangesDetails> {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index bcc13bfb7..8b5820cf6 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -73,8 +73,8 @@
   },
   "add-edit-dossier-state": {
     "form": {
-      "description": "Hex Color",
-      "description-placeholder": "#",
+      "color": "Hex Color",
+      "color-placeholder": "#",
       "name": "Status Name",
       "name-placeholder": "Enter Name"
     },
@@ -411,6 +411,7 @@
   "confirm-delete-dossier-state": {
     "cancel": "Cancel",
     "delete-replace": "Delete and Replace",
+    "delete": "Delete only",
     "form": {
       "status": "Replace Status",
       "status-placeholder": "Choose another status"
diff --git a/libs/red-domain/src/index.ts b/libs/red-domain/src/index.ts
index aee8ff159..e2d4bf0e4 100644
--- a/libs/red-domain/src/index.ts
+++ b/libs/red-domain/src/index.ts
@@ -19,3 +19,4 @@ export * from './lib/configuration';
 export * from './lib/signature';
 export * from './lib/legal-basis';
 export * from './lib/dossier-stats';
+export * from './lib/dossier-state';
diff --git a/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts b/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
index 070171643..242a34ace 100644
--- a/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
+++ b/libs/red-domain/src/lib/dossier-state/dossier-state.model.ts
@@ -6,6 +6,7 @@ export class DossierState implements IDossierState, IListable {
     readonly dossierStatusId: string;
     readonly dossierTemplateId: string;
     readonly name: string;
+    readonly color: string;
     dossierCount?: number;
 
     constructor(dossierState: IDossierState) {
@@ -13,6 +14,7 @@ export class DossierState implements IDossierState, IListable {
         this.dossierStatusId = dossierState.dossierStatusId;
         this.dossierTemplateId = dossierState.dossierTemplateId;
         this.name = dossierState.name;
+        this.color = dossierState.color;
         this.dossierCount = dossierState.dossierCount;
     }
 
diff --git a/libs/red-domain/src/lib/dossier-state/dossier-state.ts b/libs/red-domain/src/lib/dossier-state/dossier-state.ts
index 7ebd532e8..f7491e23b 100644
--- a/libs/red-domain/src/lib/dossier-state/dossier-state.ts
+++ b/libs/red-domain/src/lib/dossier-state/dossier-state.ts
@@ -3,5 +3,6 @@ export interface IDossierState {
     dossierStatusId: string;
     dossierTemplateId: string;
     name: string;
+    color: string;
     dossierCount?: number;
 }

From b1e42ca45b0111486b29a43f42080bdf6d8c0646 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 14 Feb 2022 13:55:39 +0200
Subject: [PATCH 12/17] fixed rebase stuff and chart pluralization

---
 .../app/modules/admin/admin-routing.module.ts |  2 +-
 ...ssier-states-listing-screen.component.html |  2 +-
 ...dossier-states-listing-screen.component.ts | 20 ++++++++++---------
 .../admin/services/admin-dialog.service.ts    |  1 -
 .../edit-dossier-general-info.component.ts    |  1 -
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 6ce27d21f..bb0a2a0e8 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -120,7 +120,7 @@ const routes: Routes = [
                         component: DossierStatesListingScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         data: {
-                            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+                            routeGuards: [AuthGuard, RedRoleGuard],
                         },
                     },
                     {
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
index 9ce7e905f..624230e58 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
@@ -39,7 +39,7 @@
                     [config]="chartData"
                     [radius]="80"
                     [strokeWidth]="15"
-                    [subtitle]="'dossier-states-listing.chart.dossier-states' | translate"
+                    [subtitle]="'dossier-states-listing.chart.dossier-states' | translate: { count: chartData.length }"
                     [totalType]="'simpleLabel'"
                 ></redaction-simple-doughnut-chart>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index fffd64809..d4d8e2d43 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -13,12 +13,12 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossiersService } from '../../../../services/entity-services/dossiers.service';
 import { DossierStateService } from '../../../../services/entity-services/dossier-state.service';
 import { firstValueFrom } from 'rxjs';
-import { DossierTemplatesService } from '../../../../services/entity-services/dossier-templates.service';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { UserService } from '../../../../services/user.service';
-import { AppStateService } from '../../../../state/app-state.service';
 import { HttpStatusCode } from '@angular/common/http';
 import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { ActivatedRoute } from '@angular/router';
+import { DossierTemplatesService } from '../../../../services/entity-services/dossier-templates.service';
 
 @Component({
     templateUrl: './dossier-states-listing-screen.component.html',
@@ -32,6 +32,7 @@ import { DoughnutChartConfig } from '../../../shared/components/simple-doughnut-
 export class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
+    readonly #dossierTemplateId: string;
     readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dossier-states-listing.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<DossierState>[] = [
@@ -45,13 +46,14 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         private readonly _loadingService: LoadingService,
         private readonly _dossiersService: DossiersService,
         readonly dossierStateService: DossierStateService,
-        private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: AdminDialogService,
         private readonly _userService: UserService,
-        private readonly _appStateService: AppStateService,
         private readonly _toaster: Toaster,
+        private readonly _route: ActivatedRoute,
+        private readonly _dossierTemplatesService: DossierTemplatesService,
     ) {
         super(_injector);
+        this.#dossierTemplateId = _route.snapshot.paramMap.get('dossierTemplateId');
     }
 
     async ngOnInit(): Promise<void> {
@@ -61,7 +63,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
     openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
         const data = {
             dossierState,
-            dossierTemplateId: this._dossierTemplatesService.activeDossierTemplateId,
+            dossierTemplateId: this.#dossierTemplateId,
         };
         this._dialogService.openDialog('addEditDossierState', $event, data, async (newValue: IDossierState) => {
             await this.#createNewDossierStateAndRefreshView(newValue);
@@ -69,7 +71,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
     }
 
     openConfirmDeleteStateDialog($event: MouseEvent, dossierState: IDossierState) {
-        const templateId = this._dossierTemplatesService.activeDossierTemplateId;
+        const templateId = this.#dossierTemplateId;
         const data = {
             toBeDeletedState: dossierState,
             otherStates: this.entitiesService.all.filter(state => state.dossierStatusId !== dossierState.dossierStatusId),
@@ -84,7 +86,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
                 }
             }
 
-            await this._appStateService.refreshDossierTemplate(templateId);
+            await this._dossierTemplatesService.refreshDossierTemplate(templateId);
             await this.#loadData();
         });
     }
@@ -98,7 +100,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
                 this._toaster.error(_('dossier-states-listing.error.generic'));
             }
         });
-        await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId);
+        await this._dossierTemplatesService.refreshDossierTemplate(this.#dossierTemplateId);
         await this.#loadData();
     }
 
@@ -107,7 +109,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         await firstValueFrom(this._dossiersService.loadAll());
 
         try {
-            const templateId = this._dossierTemplatesService.activeDossierTemplateId;
+            const templateId = this.#dossierTemplateId;
             const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
             this.#setStatesCount();
             this.chartData = this.#loadChartData();
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 31d5dab3c..38fd85808 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -29,7 +29,6 @@ type DialogType =
     | 'smtpAuthConfig'
     | 'addEditDossierTemplate'
     | 'addEditDossierAttribute'
-    | 'addEditJustification'
     | 'uploadDictionary'
     | 'addEditDossierState'
     | 'deleteDossierState';
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 71531baa3..bf935c777 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -15,7 +15,6 @@ import { DossierTemplatesService } from '@services/entity-services/dossier-templ
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 import { firstValueFrom } from 'rxjs';
 import { DossierStateService } from '@services/entity-services/dossier-state.service';
-import { DossierState } from '../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
 
 @Component({
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 8b5820cf6..4faf40b67 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -833,7 +833,7 @@
     },
     "add-new": "New Status",
     "chart": {
-      "dossier-states": "Dossier States"
+      "dossier-states": "{count, plural, one{Dossier State} other{Dossier States}}"
     },
     "error": {
       "conflict": "Dossier State with this name already exists!",

From b7d290778e0baad94e768f904aec9f913d0b612f Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 14 Feb 2022 14:08:18 +0200
Subject: [PATCH 13/17] back to data

---
 .../add-edit-dossier-state-dialog.component.html  |  4 ++--
 .../add-edit-dossier-state-dialog.component.ts    | 15 +++++----------
 ...irm-delete-dossier-state-dialog.component.html |  2 +-
 ...nfirm-delete-dossier-state-dialog.component.ts | 12 +++---------
 libs/common-ui                                    |  2 +-
 5 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
index 4bb4a6f4d..8eabdf913 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html
@@ -1,8 +1,8 @@
 <section class="dialog">
     <div
         [translateParams]="{
-            type: dossierState ? 'edit' : 'create',
-            name: dossierState?.name
+            type: data.dossierState ? 'edit' : 'create',
+            name: data.dossierState?.name
         }"
         [translate]="'add-edit-dossier-state.title'"
         class="dialog-header heading-l"
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
index cbe065049..0a3ec2ad4 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
@@ -16,26 +16,21 @@ interface DialogData {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
-    readonly dossierState: IDossierState;
-    readonly dossierTemplateId: string;
-
     constructor(
         private readonly _formBuilder: FormBuilder,
         protected readonly _injector: Injector,
         protected readonly _dialogRef: MatDialogRef<AddEditDossierStateDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
+        @Inject(MAT_DIALOG_DATA) readonly data: DialogData,
     ) {
         super(_injector, _dialogRef);
-        this.dossierState = data.dossierState;
-        this.dossierTemplateId = data.dossierTemplateId;
         this.form = this.#getForm();
         this.initialFormValue = this.form.getRawValue();
     }
 
     save(): void {
         const dossierState: IDossierState = {
-            dossierStatusId: this.dossierState?.dossierStatusId,
-            dossierTemplateId: this.dossierTemplateId,
+            dossierStatusId: this.data.dossierState?.dossierStatusId,
+            dossierTemplateId: this.data.dossierTemplateId,
             ...this.form.getRawValue(),
         };
         this._dialogRef.close(dossierState);
@@ -43,8 +38,8 @@ export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
 
     #getForm(): FormGroup {
         return this._formBuilder.group({
-            name: [this.dossierState?.name, Validators.required],
-            color: [this.dossierState?.color, Validators.required],
+            name: [this.data.dossierState?.name, Validators.required],
+            color: [this.data.dossierState?.color, Validators.required],
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 6aa8cacc5..8618972b1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -17,7 +17,7 @@
                         formControlName="replaceDossierStatusId"
                     >
                         <mat-option>{{ 'confirm-delete-dossier-state.form.status-placeholder' | translate }}</mat-option>
-                        <mat-option *ngFor="let state of otherStates" [value]="state.dossierStatusId">
+                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
                             {{ state.name }}
                         </mat-option>
                     </mat-select>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index 9c8117150..ec4cb8916 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -17,25 +17,19 @@ interface DialogData {
 })
 export class ConfirmDeleteDossierStateDialogComponent {
     readonly form: FormGroup;
-    readonly toBeDeletedState: IDossierState;
-    readonly otherStates: IDossierState[];
-    readonly dossierCount: number;
 
     constructor(
         private readonly _formBuilder: FormBuilder,
         readonly dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public readonly data: DialogData,
+        @Inject(MAT_DIALOG_DATA) readonly data: DialogData,
     ) {
         this.form = this._getForm();
-        this.toBeDeletedState = data.toBeDeletedState;
-        this.otherStates = data.otherStates;
-        this.dossierCount = data.dossierCount;
     }
 
     get translateArgs() {
         return {
-            name: this.toBeDeletedState.name,
-            count: this.dossierCount,
+            name: this.data.toBeDeletedState.name,
+            count: this.data.dossierCount,
         };
     }
 
diff --git a/libs/common-ui b/libs/common-ui
index 5a0e5accb..d4b1bb5c0 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 5a0e5accb76b8e4d2d2f5de64822a716c6572f37
+Subproject commit d4b1bb5c07594dbce9d78cf56d26f75334116aaf

From 1094495e2681ee26842499af25786c72ab1406b0 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 14 Feb 2022 14:48:48 +0200
Subject: [PATCH 14/17] improvements in dossier-states-listing

---
 ...m-delete-dossier-state-dialog.component.ts | 10 ++-----
 ...dossier-states-listing-screen.component.ts | 29 +++++++------------
 .../edit-dossier-general-info.component.ts    | 12 ++++----
 .../table-item/table-item.component.ts        |  6 ++--
 4 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index ec4cb8916..6088cb114 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -23,7 +23,7 @@ export class ConfirmDeleteDossierStateDialogComponent {
         readonly dialogRef: MatDialogRef<ConfirmDeleteDossierStateDialogComponent>,
         @Inject(MAT_DIALOG_DATA) readonly data: DialogData,
     ) {
-        this.form = this._getForm();
+        this.form = this.#getForm();
     }
 
     get translateArgs() {
@@ -42,14 +42,10 @@ export class ConfirmDeleteDossierStateDialogComponent {
     }
 
     get afterCloseValue(): string | true {
-        if (this.replaceDossierStatusId) {
-            return this.replaceDossierStatusId;
-        }
-
-        return true;
+        return this.replaceDossierStatusId ?? true;
     }
 
-    private _getForm(): FormGroup {
+    #getForm(): FormGroup {
         return this._formBuilder.group({
             replaceDossierStatusId: [null],
         });
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
index d4d8e2d43..646b0f020 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.ts
@@ -56,8 +56,8 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         this.#dossierTemplateId = _route.snapshot.paramMap.get('dossierTemplateId');
     }
 
-    async ngOnInit(): Promise<void> {
-        await this.#loadData();
+    ngOnInit(): Promise<void> {
+        return this.#loadData();
     }
 
     openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
@@ -109,27 +109,18 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         await firstValueFrom(this._dossiersService.loadAll());
 
         try {
-            const templateId = this.#dossierTemplateId;
-            const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === templateId);
-            this.#setStatesCount();
-            this.chartData = this.#loadChartData();
+            const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === this.#dossierTemplateId);
+            this.#setStatesCount(dossierStates);
+            this.chartData = this.dossierStateService.all.map(state => {
+                return { value: state.dossierCount, label: state.name, key: state.name, color: state.color };
+            });
+
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
         this._loadingService.stop();
     }
 
-    #loadChartData(): DoughnutChartConfig[] {
-        const config: DoughnutChartConfig[] = [];
-        this.dossierStateService.all.forEach(state => {
-            config.push({ value: state.dossierCount, label: state.name, key: state.name, color: state.color });
-        });
-
-        return config;
-    }
-
-    #setStatesCount(): void {
-        this.dossierStateService.all.forEach(
-            state => (state.dossierCount = this._dossiersService.getCountWithState(state.dossierStatusId)),
-        );
+    #setStatesCount(dossierStates: DossierState[]): void {
+        dossierStates.forEach(state => (state.dossierCount = this._dossiersService.getCountWithState(state.dossierStatusId)));
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index bf935c777..efc7a6238 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -72,8 +72,8 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     }
 
     async ngOnInit() {
-        this._filterInvalidDossierTemplates();
-        this.form = this._getForm();
+        this.#filterInvalidDossierTemplates();
+        this.form = this.#getForm();
         if (!this.permissionsService.canEditDossier(this.dossier)) {
             this.form.disable();
         }
@@ -132,11 +132,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         this._dialogService.openDialog('confirm', null, data, async () => {
             await firstValueFrom(this._dossiersService.delete(this.dossier));
             this._editDossierDialogRef.close();
-            this._router.navigate(['main', 'dossiers']).then(() => this._notifyDossierDeleted());
+            this._router.navigate(['main', 'dossiers']).then(() => this.#notifyDossierDeleted());
         });
     }
 
-    private _getForm(): FormGroup {
+    #getForm(): FormGroup {
         return this._formBuilder.group({
             dossierName: [this.dossier.dossierName, Validators.required],
             dossierTemplateId: [
@@ -154,11 +154,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         });
     }
 
-    private _notifyDossierDeleted() {
+    #notifyDossierDeleted() {
         this._toaster.success(_('edit-dossier-dialog.delete-successful'), { params: { dossierName: this.dossier.dossierName } });
     }
 
-    private _filterInvalidDossierTemplates() {
+    #filterInvalidDossierTemplates() {
         this.dossierTemplates = this._dossierTemplatesService.all.filter(r => {
             if (this.dossier?.dossierTemplateId === r.dossierTemplateId) {
                 return true;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
index d1e991d3c..0151c3320 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -14,15 +14,15 @@ export class TableItemComponent implements OnChanges {
     @Input() dossier!: Dossier;
 
     readonly stats$: Observable<DossierStats>;
-    private readonly _ngOnChanges$ = new BehaviorSubject<string>(undefined);
+    readonly #ngOnChanges$ = new BehaviorSubject<string>(undefined);
 
     constructor(readonly dossierStatsService: DossierStatsService) {
-        this.stats$ = this._ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
+        this.stats$ = this.#ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
     }
 
     ngOnChanges() {
         if (this.dossier) {
-            this._ngOnChanges$.next(this.dossier.dossierId);
+            this.#ngOnChanges$.next(this.dossier.dossierId);
         }
     }
 }

From 36b1ec25572c588f45229b95a18e2b0c26c74719 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 15 Feb 2022 12:30:42 +0200
Subject: [PATCH 15/17] small improvements

---
 ...delete-dossier-state-dialog.component.html | 34 ++++++++++---------
 .../dossiers-listing-details.component.ts     |  2 +-
 .../dossiers-listing-status.component.html    |  5 ++-
 .../dossiers-listing-status.component.ts      | 15 +++++---
 .../table-item/table-item.component.html      |  4 ++-
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 6 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 8618972b1..332c07a5e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -6,24 +6,26 @@
     <div class="dialog-content">
         <div class="heading">{{ 'confirm-delete-dossier-state.warning' | translate: translateArgs }}</div>
 
-        <div class="replacement-suggestion">{{ 'confirm-delete-dossier-state.suggestion' | translate }}</div>
+        <ng-container *ngIf="data.dossierCount !== 0">
+            <div class="replacement-suggestion">{{ 'confirm-delete-dossier-state.suggestion' | translate }}</div>
 
-        <form [formGroup]="form">
-            <div class="flex">
-                <div class="iqser-input-group required w-300">
-                    <label translate="confirm-delete-dossier-state.form.status"></label>
-                    <mat-select
-                        [placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
-                        formControlName="replaceDossierStatusId"
-                    >
-                        <mat-option>{{ 'confirm-delete-dossier-state.form.status-placeholder' | translate }}</mat-option>
-                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
-                            {{ state.name }}
-                        </mat-option>
-                    </mat-select>
+            <form [formGroup]="form">
+                <div class="flex">
+                    <div class="iqser-input-group w-300">
+                        <label translate="confirm-delete-dossier-state.form.status"></label>
+                        <mat-select
+                            [placeholder]="'confirm-delete-dossier-state.form.status-placeholder' | translate"
+                            formControlName="replaceDossierStatusId"
+                        >
+                            <mat-option>{{ 'confirm-delete-dossier-state.form.status-placeholder' | translate }}</mat-option>
+                            <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
+                                {{ state.name }}
+                            </mat-option>
+                        </mat-select>
+                    </div>
                 </div>
-            </div>
-        </form>
+            </form>
+        </ng-container>
     </div>
 
     <div class="dialog-actions">
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index d574ff242..d2626983a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -49,7 +49,7 @@ export class DossiersListingDetailsComponent {
         config.push({
             value: notAssignedLength,
             label: this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.placeholder'),
-            color: '#D8DAE0',
+            color: '#E2E4E9',
         });
         // TODO: deleted dossiers count should come with stats
         return config;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
index 626b6ecbd..1ec18fba9 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -7,8 +7,7 @@
 
 <ng-container *ngIf="!dossier.dossierStatusId">
     <div class="flex-align-items-center dossier-status-container">
-        <div class="dossier-status-text">No status assigned</div>
+        <div class="dossier-status-text">{{ 'edit-dossier-dialog.general-info.form.dossier-status.placeholder' | translate }}</div>
+        <redaction-small-chip [color]="'#E2E4E9'"></redaction-small-chip>
     </div>
 </ng-container>
-
-<redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 61f1e16da..e3994df3d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
-import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Dossier } from '../../../../../../../../../../libs/red-domain/src';
 import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
 import { DossierState } from '@red/domain';
 
@@ -9,14 +9,21 @@ import { DossierState } from '@red/domain';
     styleUrls: ['./dossiers-listing-status.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingStatusComponent implements OnChanges {
-    @Input() stats: DossierStats;
+export class DossiersListingStatusComponent implements OnInit, OnChanges {
     @Input() dossier: Dossier;
     currentState: DossierState;
 
     constructor(private readonly _dossierStateService: DossierStateService) {}
 
+    ngOnInit(): void {
+        this.#setState();
+    }
+
     ngOnChanges(): void {
+        this.#setState();
+    }
+
+    #setState(): void {
         if (this.dossier.dossierStatusId) {
             this.currentState = this._dossierStateService.all.find(s => s.dossierStatusId === this.dossier.dossierStatusId);
         }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
index 90e29ab9a..7ad67122e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -16,6 +16,8 @@
     </div>
 
     <div class="cell">
-        <redaction-dossiers-listing-status [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-status>
+        <redaction-dossiers-listing-status [dossier]="dossier"></redaction-dossiers-listing-status>
+
+        <redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
     </div>
 </ng-container>
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 4faf40b67..129817d95 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1010,7 +1010,7 @@
         },
         "dossier-status": {
           "label": "Dossier Status",
-          "placeholder": "No status assigned"
+          "placeholder": "Undefined"
         },
         "due-date": "Due Date",
         "name": {

From d410e9ed49b6f27bddbf3bb74863953494fbc398 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 15 Feb 2022 12:51:24 +0200
Subject: [PATCH 16/17] disabled states select if template has no states

---
 .../edit-dossier-general-info.component.html       |  9 +--------
 .../edit-dossier-general-info.component.ts         | 14 +++++++++++++-
 apps/red-ui/src/assets/i18n/en.json                |  3 ++-
 libs/common-ui                                     |  2 +-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 31f08d1aa..4d60d4b0f 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -55,14 +55,7 @@
         <div class="flex fields-container">
             <div class="iqser-input-group w-300">
                 <label translate="edit-dossier-dialog.general-info.form.dossier-status.label"></label>
-                <mat-select
-                    [placeholder]="
-                        currentStatus
-                            ? currentStatus.name
-                            : ('edit-dossier-dialog.general-info.form.dossier-status.placeholder' | translate)
-                    "
-                    formControlName="dossierStatusId"
-                >
+                <mat-select [placeholder]="statusPlaceholder" [disabled]="states.length === 0" formControlName="dossierStatusId">
                     <mat-option *ngFor="let state of states" [value]="state.dossierStatusId">
                         <div class="flex-align-items-center">
                             <redaction-small-chip [color]="state.color"></redaction-small-chip>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index efc7a6238..b37bfa6ba 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -16,6 +16,7 @@ import { DossierStatsService } from '@services/entity-services/dossier-stats.ser
 import { firstValueFrom } from 'rxjs';
 import { DossierStateService } from '@services/entity-services/dossier-state.service';
 import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
@@ -44,6 +45,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         private readonly _router: Router,
         private readonly _editDossierDialogRef: MatDialogRef<EditDossierDialogComponent>,
         private readonly _toaster: Toaster,
+        private readonly _translateService: TranslateService,
     ) {}
 
     get changed(): boolean {
@@ -71,7 +73,17 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         return this.hasDueDate && this.form.get('dueDate').value === null;
     }
 
-    async ngOnInit() {
+    get statusPlaceholder(): string {
+        if (this.states.length === 0) {
+            return this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.no-status-placeholder');
+        } else if (this.currentStatus) {
+            return this.currentStatus.name;
+        } else {
+            return this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.placeholder');
+        }
+    }
+
+    ngOnInit() {
         this.#filterInvalidDossierTemplates();
         this.form = this.#getForm();
         if (!this.permissionsService.canEditDossier(this.dossier)) {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 129817d95..0864eb2d2 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -418,7 +418,7 @@
     },
     "suggestion": "Would you like to replace the states of the Dossiers with another status?",
     "title": "Delete Dossier Status",
-    "warning": "The {name} status is assigned to {count} Dossiers."
+    "warning": "The {name} status is assigned to {count} {count, plural, one{Dossier} other{Dossiers}}."
   },
   "confirm-delete-file-attribute": {
     "cancel": "Keep {type, select, single{Attribute} bulk{Attributes} other{}}",
@@ -1010,6 +1010,7 @@
         },
         "dossier-status": {
           "label": "Dossier Status",
+          "no-status-placeholder": "This dossier template has no states",
           "placeholder": "Undefined"
         },
         "due-date": "Due Date",
diff --git a/libs/common-ui b/libs/common-ui
index d4b1bb5c0..f54374859 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit d4b1bb5c07594dbce9d78cf56d26f75334116aaf
+Subproject commit f54374859ec75ea73921b9e6a934bd3747f9721d

From b7fce7525d0c1e924f1a92ab867c4f70f1a2ebd8 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Tue, 15 Feb 2022 13:06:12 +0200
Subject: [PATCH 17/17] refactoired statusPlaceholder getter

---
 .../general-info/edit-dossier-general-info.component.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index b37bfa6ba..622aca251 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -76,11 +76,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     get statusPlaceholder(): string {
         if (this.states.length === 0) {
             return this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.no-status-placeholder');
-        } else if (this.currentStatus) {
-            return this.currentStatus.name;
-        } else {
-            return this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.placeholder');
         }
+
+        return (
+            this.currentStatus?.name ?? this._translateService.instant('edit-dossier-dialog.general-info.form.dossier-status.placeholder')
+        );
     }
 
     ngOnInit() {