From f39692477ec6c013ba9903f66202a9cebbf728fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 8 Mar 2022 21:04:16 +0200
Subject: [PATCH] RED-3550: Dossier status rank

---
 ...d-edit-dossier-state-dialog.component.html | 51 +++++++++++--------
 ...add-edit-dossier-state-dialog.component.ts |  3 +-
 ...dd-edit-file-attribute-dialog.component.ts |  2 +-
 ...ssier-states-listing-screen.component.html |  4 ++
 ...dossier-states-listing-screen.component.ts | 29 +++++++----
 .../dossier-documents-status.component.ts     |  2 +-
 .../annotation-actions.component.ts           |  2 +-
 .../file-preview-providers.ts                 |  2 +-
 apps/red-ui/src/assets/config/config.json     |  4 +-
 apps/red-ui/src/assets/i18n/de.json           |  6 ++-
 apps/red-ui/src/assets/i18n/en.json           |  8 +--
 .../lib/dossier-state/dossier-state.model.ts  |  2 +
 .../src/lib/dossier-state/dossier-state.ts    |  1 +
 13 files changed, 72 insertions(+), 44 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 8eabdf913..4bcd21d0b 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
@@ -9,8 +9,8 @@
     ></div>
 
     <form [formGroup]="form">
-        <div class="dialog-content flex">
-            <div class="iqser-input-group required w-300">
+        <div class="dialog-content">
+            <div class="iqser-input-group required w-300 mb-14">
                 <label translate="add-edit-dossier-state.form.name"></label>
                 <input
                     [placeholder]="'add-edit-dossier-state.form.name-placeholder' | translate"
@@ -20,26 +20,33 @@
                 />
             </div>
 
-            <div class="iqser-input-group required">
-                <label translate="add-edit-dossier-state.form.color"></label>
-                <input
-                    [placeholder]="'add-edit-dossier-state.form.color-placeholder' | translate"
-                    class="hex-color-input"
-                    formControlName="color"
-                    name="color"
-                    type="text"
-                />
-                <div
-                    (colorPickerChange)="form.get('color').setValue($event)"
-                    [colorPicker]="form.get('color').value"
-                    [cpOutputFormat]="'hex'"
-                    [style.background]="form.get('color').value"
-                    class="input-icon"
-                >
-                    <mat-icon
-                        *ngIf="!form.get('color').value || form.get('color').value?.length === 0"
-                        svgIcon="red:color-picker"
-                    ></mat-icon>
+            <div class="flex">
+                <div class="iqser-input-group required w-75">
+                    <label translate="add-edit-dossier-state.form.rank"></label>
+                    <input formControlName="rank" name="rank" type="number" />
+                </div>
+
+                <div class="iqser-input-group required">
+                    <label translate="add-edit-dossier-state.form.color"></label>
+                    <input
+                        [placeholder]="'add-edit-dossier-state.form.color-placeholder' | translate"
+                        class="hex-color-input"
+                        formControlName="color"
+                        name="color"
+                        type="text"
+                    />
+                    <div
+                        (colorPickerChange)="form.get('color').setValue($event)"
+                        [colorPicker]="form.get('color').value"
+                        [cpOutputFormat]="'hex'"
+                        [style.background]="form.get('color').value"
+                        class="input-icon"
+                    >
+                        <mat-icon
+                            *ngIf="!form.get('color').value || form.get('color').value?.length === 0"
+                            svgIcon="red:color-picker"
+                        ></mat-icon>
+                    </div>
                 </div>
             </div>
         </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 55a44ba00..9aa00eb7e 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
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core';
-import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
+import { BaseDialogComponent } from '@iqser/common-ui';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { IDossierState } from '@red/domain';
@@ -40,6 +40,7 @@ export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
         return this._formBuilder.group({
             name: [this.data.dossierState?.name, Validators.required],
             color: [this.data.dossierState?.color, Validators.required],
+            rank: [this.data.dossierState?.rank, Validators.required],
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
index dbd272169..ebc79cfcf 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
@@ -4,7 +4,7 @@ import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { BaseDialogComponent } from '../../../../../../../../libs/common-ui/src';
+import { BaseDialogComponent } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-add-edit-file-attribute-dialog',
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 624230e58..b8cbb26bd 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,10 @@
                 </div>
             </div>
 
+            <div class="cell small-label">
+                <span>{{ state.rank }}</span>
+            </div>
+
             <div class="cell small-label">
                 <span>{{ state.dossierCount }}</span>
             </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 dde759d49..cb45c5dc6 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
@@ -5,9 +5,10 @@ import {
     IconButtonTypes,
     ListingComponent,
     LoadingService,
+    SortingOrders,
     TableColumnConfig,
     Toaster,
-} from '../../../../../../../../libs/common-ui/src';
+} from '@iqser/common-ui';
 import { DossierState, IDossierState } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossiersService } from '../../../../services/entity-services/dossiers.service';
@@ -36,8 +37,9 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
     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' },
+        { label: _('dossier-states-listing.table-col-names.name'), sortByKey: 'name' },
+        { label: _('dossier-states-listing.table-col-names.rank'), sortByKey: 'rank' },
+        { label: _('dossier-states-listing.table-col-names.dossiers-count') },
     ];
     chartData: DoughnutChartConfig[];
 
@@ -56,8 +58,12 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         this.#dossierTemplateId = _route.snapshot.paramMap.get('dossierTemplateId');
     }
 
-    ngOnInit(): Promise<void> {
-        return this.#loadData();
+    async ngOnInit(): Promise<void> {
+        this.sortingService.setSortingOption({
+            column: 'rank',
+            order: SortingOrders.asc,
+        });
+        await this.#loadData();
     }
 
     openAddEditStateDialog($event: MouseEvent, dossierState?: IDossierState) {
@@ -86,7 +92,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
                 }
             }
 
-            await this._dossierTemplatesService.refreshDossierTemplate(templateId);
+            await firstValueFrom(this._dossierTemplatesService.refreshDossierTemplate(templateId));
             await this.#loadData();
         });
     }
@@ -100,7 +106,7 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
                 this._toaster.error(_('dossier-states-listing.error.generic'));
             }
         });
-        await this._dossierTemplatesService.refreshDossierTemplate(this.#dossierTemplateId);
+        await firstValueFrom(this._dossierTemplatesService.refreshDossierTemplate(this.#dossierTemplateId));
         await this.#loadData();
     }
 
@@ -111,9 +117,12 @@ export class DossierStatesListingScreenComponent extends ListingComponent<Dossie
         try {
             const dossierStates = this.dossierStateService.all.filter(d => d.dossierTemplateId === this.#dossierTemplateId);
             this.#setStatesCount(dossierStates);
-            this.chartData = dossierStates.map(state => {
-                return { value: state.dossierCount, label: state.name, key: state.name, color: state.color };
-            });
+            this.chartData = dossierStates.map(state => ({
+                value: state.dossierCount,
+                label: state.name,
+                key: state.name,
+                color: state.color,
+            }));
 
             this.entitiesService.setEntities(dossierStates || []);
         } catch (e) {}
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
index 00fc9084f..70d9ae838 100644
--- 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
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { DossierStats, StatusSorter } from '../../../../../../../../../../libs/red-domain/src';
-import { List, StatusBarConfig } from '../../../../../../../../../../libs/common-ui/src';
+import { List, StatusBarConfig } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-documents-status',
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index 6e257a003..1edf49830 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
@@ -8,7 +8,7 @@ import { UserService } from '@services/user.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { HelpModeService, ScrollableParentView, ScrollableParentViews } from '../../../../../../../../../../libs/common-ui/src';
+import { HelpModeService, ScrollableParentView, ScrollableParentViews } from '@iqser/common-ui';
 
 export const AnnotationButtonTypes = {
     dark: 'dark',
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-providers.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-providers.ts
index 765e9f619..1ce08b6a8 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-providers.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-providers.ts
@@ -9,7 +9,7 @@ import { AnnotationActionsService } from './services/annotation-actions.service'
 import { FilePreviewStateService } from './services/file-preview-state.service';
 import { PdfViewerDataService } from '../../services/pdf-viewer-data.service';
 import { AnnotationReferencesService } from './services/annotation-references.service';
-import { FilterService } from '../../../../../../../../libs/common-ui/src';
+import { FilterService } from '@iqser/common-ui';
 import { PageRotationService } from './services/page-rotation.service';
 import { PdfViewer } from './services/pdf-viewer.service';
 
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 78d1498b2..05604dd48 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dev-04.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -17,7 +17,7 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dev-04.iqser.cloud/auth/realms/redaction",
+  "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview"
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index e2ffa3b79..c647382a9 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -76,7 +76,8 @@
       "color": "",
       "color-placeholder": "",
       "name": "",
-      "name-placeholder": ""
+      "name-placeholder": "",
+      "rank": ""
     },
     "save": "",
     "title": ""
@@ -862,7 +863,8 @@
     "search": "",
     "table-col-names": {
       "dossiers-count": "",
-      "name": ""
+      "name": "",
+      "rank": ""
     },
     "table-header": {
       "title": ""
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 9619fb88a..b9efdb33b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -76,7 +76,8 @@
       "color": "Hex Color",
       "color-placeholder": "#",
       "name": "Status Name",
-      "name-placeholder": "Enter Name"
+      "name-placeholder": "Enter Name",
+      "rank": "Rank"
     },
     "save": "Save Status",
     "title": "{type, select, edit{Edit {name}} create{Create} other{}} Dossier Status"
@@ -412,7 +413,7 @@
   "configurations": "Configurations",
   "confirm-delete-dossier-state": {
     "cancel": "Cancel",
-    "delete": "Delete only",
+    "delete": "Delete",
     "delete-replace": "Delete and Replace",
     "form": {
       "status": "Replace Status",
@@ -862,7 +863,8 @@
     "search": "Search...",
     "table-col-names": {
       "dossiers-count": "Dossiers Count",
-      "name": "Name"
+      "name": "Name",
+      "rank": "Rank"
     },
     "table-header": {
       "title": "{length} dossier {length, plural, one{state} other{states}}"
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 242a34ace..394193fd0 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
@@ -7,6 +7,7 @@ export class DossierState implements IDossierState, IListable {
     readonly dossierTemplateId: string;
     readonly name: string;
     readonly color: string;
+    readonly rank?: number;
     dossierCount?: number;
 
     constructor(dossierState: IDossierState) {
@@ -16,6 +17,7 @@ export class DossierState implements IDossierState, IListable {
         this.name = dossierState.name;
         this.color = dossierState.color;
         this.dossierCount = dossierState.dossierCount;
+        this.rank = dossierState.rank;
     }
 
     get id(): string {
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 f7491e23b..0bf2eb870 100644
--- a/libs/red-domain/src/lib/dossier-state/dossier-state.ts
+++ b/libs/red-domain/src/lib/dossier-state/dossier-state.ts
@@ -5,4 +5,5 @@ export interface IDossierState {
     name: string;
     color: string;
     dossierCount?: number;
+    rank?: number;
 }