From 947fe2b5d8e03b8552c1d7ed8a2815b096772c6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 14 Jun 2022 23:04:00 +0300
Subject: [PATCH] RED-4244: Improve delete dossier state confirmation dialog

---
 ...delete-dossier-state-dialog.component.html | 38 +++++++++----------
 ...delete-dossier-state-dialog.component.scss | 11 +-----
 ...m-delete-dossier-state-dialog.component.ts | 11 +++---
 apps/red-ui/src/assets/i18n/de.json           |  2 +-
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 5 files changed, 29 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.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 5e26d6211..8764a7986 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,26 +6,26 @@
     <div class="dialog-content">
         <div class="heading">{{ 'confirm-delete-dossier-state.warning' | translate: translateArgs }}</div>
 
-        <ng-container *ngIf="data.dossierCount !== 0">
-            <div class="replacement-suggestion">{{ 'confirm-delete-dossier-state.suggestion' | translate }}</div>
+        <form *ngIf="data.dossierCount !== 0 && data.otherStates.length > 0" [formGroup]="form" class="mt-16">
+            <div class="iqser-input-group">
+                <mat-checkbox color="primary" formControlName="replace">
+                    {{ 'confirm-delete-dossier-state.question' | translate: { count: data.dossierCount } }}
+                </mat-checkbox>
+            </div>
 
-            <form [formGroup]="form">
-                <div class="flex">
-                    <div class="iqser-input-group w-300">
-                        <label translate="confirm-delete-dossier-state.form.state"></label>
-                        <mat-select
-                            [placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
-                            formControlName="replaceDossierStatusId"
-                        >
-                            <mat-option>{{ 'confirm-delete-dossier-state.form.state-placeholder' | translate }}</mat-option>
-                            <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
-                                {{ state.name }}
-                            </mat-option>
-                        </mat-select>
-                    </div>
-                </div>
-            </form>
-        </ng-container>
+            <div *ngIf="form.get('replace').value" class="iqser-input-group w-300 min-h-55">
+                <label translate="confirm-delete-dossier-state.form.state"></label>
+                <mat-select
+                    [placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
+                    formControlName="replaceDossierStatusId"
+                >
+                    <mat-option>{{ 'confirm-delete-dossier-state.form.state-placeholder' | translate }}</mat-option>
+                    <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
+                        {{ state.name }}
+                    </mat-option>
+                </mat-select>
+            </div>
+        </form>
     </div>
 
     <div class="dialog-actions">
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
index 4128c859f..baff1afcf 100644
--- 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
@@ -1,14 +1,7 @@
-.replacement-suggestion {
-    font-size: 13px;
-    line-height: 18px;
-    color: var(--iqser-grey-1);
-    margin-bottom: 24px;
-}
-
 .dialog-header {
     color: var(--iqser-primary);
 }
 
-.heading {
-    margin-bottom: 8px;
+.min-h-55 {
+    min-height: 55px;
 }
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 901ee98ef..a81f88f33 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
@@ -45,17 +45,17 @@ export class ConfirmDeleteDossierStateDialogComponent {
         };
     }
 
-    get replaceDossierStatusId(): string {
-        return this.form.get('replaceDossierStatusId').value;
+    get label(): string {
+        return this.#replaceDossierStatusId ? _('confirm-delete-dossier-state.delete-replace') : _('confirm-delete-dossier-state.delete');
     }
 
-    get label(): string {
-        return this.replaceDossierStatusId ? _('confirm-delete-dossier-state.delete-replace') : _('confirm-delete-dossier-state.delete');
+    get #replaceDossierStatusId(): string {
+        return this.form.get('replace').value ? this.form.get('replaceDossierStatusId').value : undefined;
     }
 
     async save(): Promise<void> {
         this._loadingService.start();
-        await firstValueFrom(this._dossierStatesService.deleteState(this.data.toBeDeletedState, this.replaceDossierStatusId));
+        await firstValueFrom(this._dossierStatesService.deleteState(this.data.toBeDeletedState, this.#replaceDossierStatusId));
         await firstValueFrom(
             forkJoin([this._activeDossiersService.loadAll().pipe(take(1)), this._archivedDossiersService.loadAll().pipe(take(1))]),
         );
@@ -66,6 +66,7 @@ export class ConfirmDeleteDossierStateDialogComponent {
 
     #getForm(): UntypedFormGroup {
         return this._formBuilder.group({
+            replace: [false],
             replaceDossierStatusId: [null],
         });
     }
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index c0d5d3988..c8cad635e 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -502,8 +502,8 @@
       "state": "",
       "state-placeholder": ""
     },
+    "question": "",
     "success": "",
-    "suggestion": "",
     "title": "",
     "warning": ""
   },
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 1eb0b5d9d..d97384278 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -502,8 +502,8 @@
       "state": "Replace State",
       "state-placeholder": "Choose another state"
     },
+    "question": "Replace the {count, plural, one{dossier's} other{dossiers'}} state with another state",
     "success": "Successfully deleted state!",
-    "suggestion": "Would you like to replace the dossiers' states with another state?",
     "title": "Delete Dossier State",
     "warning": "The {name} state is assigned to {count} {count, plural, one{dossier} other{dossiers}}."
   },