LP1809183: Allow passing template to eg-confirm-dialog

Adds an input called dialogBodyTemplate to <eg-confirm-dialog>. This can
be useful when you want to pass ICU messages to <eg-confirm-dialog>
(e.g. "Are you sure you want to cancel these 3 holds?" vs. "Are you sure
you want to cancel this hold?").

If both dialogBody and dialogBodyTemplate are defined, it will show the
dialogBodyTemplate message.

Also adds a sandbox example.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

diff --git a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
index 21766ca..60cf3ef 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
+++ b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
@@ -7,7 +7,14 @@
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <div class="modal-body"><p>{{dialogBody}}</p></div>
+  <div class="modal-body">
+    <ng-container *ngIf="!dialogBodyTemplate">
+      <p>{{dialogBody}}</p>
+    </ng-container>
+    <ng-container *ngIf="dialogBodyTemplate">
+      <ng-container *ngTemplateOutlet="dialogBodyTemplate"></ng-container>
+    </ng-container>
+  </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-success" 
       (click)="close('confirmed')" i18n>Confirm</button>

diff --git a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
index efcbdeb..f195f32 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
@@ -12,6 +12,7 @@ import {DialogComponent} from '@eg/share/dialog/dialog.component';
 export class ConfirmDialogComponent extends DialogComponent {
     // What question are we asking?
     @Input() public dialogBody: string;
+    @Input() public dialogBodyTemplate: TemplateRef<any>;
 }
 
 

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 54cd87d..bcfe70a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -154,3 +154,15 @@
 <h4>PCRUD auto flesh and FormatService detection</h4>
 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 
+<button (click)="confirmNumber(1)">Confirm 1</button>
+<button (click)="confirmNumber(0)">Confirm 0</button>
+<button (click)="confirmNumber(20)">Confirm 20</button>
+
+<eg-confirm-dialog #numConfirmDialog
+  i18n-dialogTitle
+  dialogTitle="Confirm Number"
+  [dialogBodyTemplate]="confirmMsg">
+</eg-confirm-dialog>
+<ng-template #confirmMsg>
+  <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
+</ng-template>

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 543e3cb..d850c1f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -15,6 +15,7 @@ import {PrintService} from '@eg/share/print/print.service';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 import {FormatService} from '@eg/core/format.service';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
+import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
 
 @Component({
   templateUrl: 'sandbox.component.html'
@@ -33,6 +34,11 @@ export class SandboxComponent implements OnInit {
     @ViewChild('fmRecordEditor')
     private fmRecordEditor: FmRecordEditorComponent;
 
+    @ViewChild('numConfirmDialog')
+    private numConfirmDialog: ConfirmDialogComponent;
+
+    public numThings = 0;
+
     // @ViewChild('helloStr') private helloStr: StringComponent;
 
     gridDataSource: GridDataSource = new GridDataSource();
@@ -231,6 +237,13 @@ export class SandboxComponent implements OnInit {
                 .then(txt => this.toast.success(txt));
         }, 4000);
     }
+
+    confirmNumber(num: number): void {
+      this.numThings = num;
+      console.log(this.numThings);
+      this.numConfirmDialog.open();
+    }
+
 }