RED-4244: Improve delete dossier state confirmation dialog

This commit is contained in:
Adina Țeudan 2022-06-14 23:04:00 +03:00
parent f96ff08fef
commit 947fe2b5d8
5 changed files with 29 additions and 35 deletions

View File

@ -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">

View File

@ -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;
}

View File

@ -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],
});
}

View File

@ -502,8 +502,8 @@
"state": "",
"state-placeholder": ""
},
"question": "",
"success": "",
"suggestion": "",
"title": "",
"warning": ""
},

View File

@ -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}}."
},