LP#1951307: Contextual confirm dialog button text
authorStephanie Leary <stephanie.leary@equinoxOLI.org>
Mon, 26 Sep 2022 16:54:48 +0000 (11:54 -0500)
committerStephanie Leary <stephanie.leary@equinoxOLI.org>
Mon, 26 Sep 2022 16:54:48 +0000 (11:54 -0500)
This patch changes the confirm dialog buttons to "Yes" and "No" for
event cloning as requested.

More generally, it allows the confirm and prompt dialogs to accept
input strings specifying the text for these buttons, with "Confirm"
and "Cancel" as the defaults. You can now choose the wording that makes
the most sense in the context of the dialog.

See <eg-confirm-dialog> in triggers.component.html for usage.

The logic has been duplicated in ConfirmDialogComponent and
PromptDialogComponent so that both prompt and confirm dialogs
can use custom strings. Galen and I discussed whether this would be
better implemented once in the dialog component, but since not all
subcomponents would use the functionality, we agreed to duplicate and
document the two subcomponents instead. Note that prompt components
throughout the interface have not been updated and will use the default
strings unless dialogConfirmTrue and dialogConfirmFalse are specified
as in triggers.component.html.

To test:
-------
[1] Apply the patch and open the Local Admin Notifications/Action
    Triggers screen:
    eg2/en-US/staff/admin/local/action_trigger/event_definition
[2] Right-click a row and choose "Clone Selected."
[3] Verify that the choices are "Yes" and "No" instead of "Confirm" and
    "Cancel."
[4] Navigate to another screen that includes a confirm dialog, e.g.
    eg2/en-US/staff/reporter/simple, right click a report and select
    "Clone Report," to verify that "Confirm" and "Cancel" have not
    changed in other instances.

Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
Open-ILS/src/eg2/src/app/share/dialog/prompt.component.html
Open-ILS/src/eg2/src/app/share/dialog/prompt.component.ts
Open-ILS/src/eg2/src/app/staff/admin/local/triggers/triggers.component.html

index 05cf562..4a17040 100644 (file)
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-success" 
-      (click)="close(true)" i18n>Confirm</button>
+      (click)="close(true)" i18n>{{_confirmTrue}}</button>
     <button type="button" class="btn btn-warning" 
-      (click)="close(false)" i18n>Cancel</button>
+      (click)="close(false)" i18n>{{_confirmFalse}}</button>
   </div>
 </ng-template>
+
+<eg-string #defaultDialogConfirmTrue i18n-text text="Confirm"></eg-string>
+<eg-string #defaultDialogConfirmFalse i18n-text text="Cancel"></eg-string>
\ No newline at end of file
index f195f32..3c827a0 100644 (file)
@@ -1,5 +1,6 @@
-import {Component, Input, ViewChild, TemplateRef} from '@angular/core';
+import {Component, Input, ViewChild, TemplateRef, AfterViewInit} from '@angular/core';
 import {DialogComponent} from '@eg/share/dialog/dialog.component';
+import {StringComponent} from '@eg/share/string/string.component';
 
 @Component({
   selector: 'eg-confirm-dialog',
@@ -8,11 +9,37 @@ import {DialogComponent} from '@eg/share/dialog/dialog.component';
 
 /**
  * Confirmation dialog that asks a yes/no question.
+ *
+ * True/false string logic is duplicated in PromptDialogComponent and should be
+ * updated in both.
  */
-export class ConfirmDialogComponent extends DialogComponent {
+export class ConfirmDialogComponent extends DialogComponent implements AfterViewInit {
     // What question are we asking?
     @Input() public dialogBody: string;
+    @Input() public dialogConfirmTrue: string;
+    @Input() public dialogConfirmFalse: string;
     @Input() public dialogBodyTemplate: TemplateRef<any>;
-}
 
+    _confirmTrue = '';
+    _confirmFalse = '';
 
+    @ViewChild('defaultDialogConfirmTrue', {static: false}) defaultDialogConfirmTrue: StringComponent;
+    @ViewChild('defaultDialogConfirmFalse', {static: false}) defaultDialogConfirmFalse: StringComponent;
+
+    // Get confirm/cancel strings from the component HTML
+    ngAfterViewInit() {
+      if ( this.dialogConfirmTrue && this.dialogConfirmTrue.length ) {
+        this._confirmTrue = this.dialogConfirmTrue;
+      } else {
+        this.defaultDialogConfirmTrue.current().then(str => this._confirmTrue = str);
+      }
+
+      if ( this.dialogConfirmFalse && this.dialogConfirmFalse.length ) {
+        this._confirmFalse = this.dialogConfirmFalse;
+      } else {
+        this.defaultDialogConfirmFalse.current().then(str => this._confirmFalse = str);
+      }
+
+     
+    }
+  }
\ No newline at end of file
index 17a6b50..66aa8bd 100644 (file)
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-success" 
-      (click)="close(promptValue)" i18n>Confirm</button>
+      (click)="close(promptValue)" i18n>{{_confirmTrue}}</button>
     <button type="button" class="btn btn-warning" 
-      (click)="close()" i18n>Cancel</button>
+      (click)="close()" i18n>{{_confirmFalse}}</button>
   </div>
 </ng-template>
+
+<eg-string #defaultDialogConfirmTrue i18n-text text="Confirm"></eg-string>
+<eg-string #defaultDialogConfirmFalse i18n-text text="Cancel"></eg-string>
\ No newline at end of file
index ab7f77e..30dcb3e 100644 (file)
@@ -1,5 +1,6 @@
-import {Component, Input, ViewChild, TemplateRef} from '@angular/core';
+import {Component, Input, ViewChild, TemplateRef, AfterViewInit} from '@angular/core';
 import {DialogComponent} from '@eg/share/dialog/dialog.component';
+import {StringComponent} from '@eg/share/string/string.component';
 
 @Component({
   selector: 'eg-prompt-dialog',
@@ -7,13 +8,40 @@ import {DialogComponent} from '@eg/share/dialog/dialog.component';
 })
 
 /**
- * Promptation dialog that requests user input.
+ * Promptation dialog that requests user input. 
+ *
+ * True/false string logic is duplicated in ConfirmDialogComponent and should be
+ * updated in both.
  */
 export class PromptDialogComponent extends DialogComponent {
     // What question are we asking?
     @Input() public dialogBody: string;
+    // Get confirm/cancel strings from the component HTML
+    @Input() public dialogConfirmTrue: string;
+    @Input() public dialogConfirmFalse: string;
     // Value to return to the caller
     @Input() public promptValue: string;
-}
 
+    _confirmTrue = '';
+    _confirmFalse = '';
+
+    @ViewChild('defaultDialogConfirmTrue', {static: false}) defaultDialogConfirmTrue: StringComponent;
+    @ViewChild('defaultDialogConfirmFalse', {static: false}) defaultDialogConfirmFalse: StringComponent;
+
+    // Get confirm/cancel strings from the component HTML
+    ngAfterViewInit() {
+      if ( this.dialogConfirmTrue && this.dialogConfirmTrue.length ) {
+        this._confirmTrue = this.dialogConfirmTrue;
+      } else {
+        this.defaultDialogConfirmTrue.current().then(str => this._confirmTrue = str);
+      }
 
+      if ( this.dialogConfirmFalse && this.dialogConfirmFalse.length ) {
+        this._confirmFalse = this.dialogConfirmFalse;
+      } else {
+        this.defaultDialogConfirmFalse.current().then(str => this._confirmFalse = str);
+      }
+
+     
+    }
+}
index 07e7901..35a430d 100644 (file)
 <div [ngbNavOutlet]="triggerNav" class="mt-2"></div>
 
 <eg-confirm-dialog #confirmDialog
-  i18n-dialogTitle i18n-dialogBody
+  i18n-dialogTitle i18n-dialogBody i18n-dialogConfirmTrue i18n-dialogConfirmFalse
   dialogTitle="Alert"
-  dialogBody="Clone event definition environment as well?">
+  dialogBody="Clone event definition environment as well?"
+  dialogConfirmTrue = "Yes"
+  dialogConfirmFalse = "No">
 </eg-confirm-dialog>
 
 <eg-string #createSuccessString i18n-text text="New entry Added"></eg-string>