LP#1831781: add eg-help-popover Angular component

[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / staff / sandbox / sandbox.component.html

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 f112aed..9087d04 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
@@ -7,7 +7,7 @@
   prefix=":) {{dynamicTitleText}}"
   suffix="Sandbox">
 </eg-title>
-
+<eg-help-popover [placement]="'right'" helpText="This page is for random ng stuff!"></eg-help-popover>
 <div class="row flex pt-2">
   <div i18n> Modify Page Title: </div>
   <div class="col-lg-2">
@@ -37,7 +37,7 @@
       [fieldOptions]="{marc_record_type:{customValues:[{id:'biblio'},{id:'serial'},{id:'authority'}]},description:{customTemplate:{template:descriptionTemplate,context:{'hello':'goodbye'}}}}"
       recordId="1" orgDefaultAllowed="owner">
   </eg-fm-record-editor>
-  <button class="btn btn-dark" (click)="fmRecordEditor.open({size:'lg'})">
+  <button class="btn btn-dark" (click)="openEditor()">
       Fm Record Editor
   </button>
 </div>
@@ -47,6 +47,8 @@
 <div class="row mb-3">
   <div class="col-lg-3">
     <button class="btn btn-outline-danger" (click)="progress.increment()">Increment Inline</button>
+    <eg-help-popover [placement]="'bottom'" helpText="Exercise your clicking finger by clicking the button above.">
+    </eg-help-popover>
   </div>
   <div class="col-lg-3">
     <eg-progress-inline [max]="100" [value]="1" #progress></eg-progress-inline>
@@ -59,11 +61,13 @@
     <button class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
   </div>
   <div class="col-lg-3">
+    <eg-help-popover helpLink="https://www.youtube.com/watch?v=dQw4w9WgXcQ" helpText="This popover is supposed to help or something...!"></eg-help-popover>
     <eg-combobox [allowFreeText]="true" 
       placeholder="Combobox with static data"
       [entries]="cbEntries"></eg-combobox>
   </div>
   <div class="col-lg-3">
+    <eg-help-popover helpText="You have to type to see any options in this dropdown."></eg-help-popover>
     <eg-combobox
       placeholder="Combobox with dynamic data"
       [asyncDataSource]="cbAsyncSource"></eg-combobox>
@@ -71,6 +75,7 @@
 </div>
 <div class="row mb-3">
   <div class="col-lg-4">
+   <eg-help-popover helpText="If you like Toast you must click below!" placement="'auto'"></eg-help-popover>
    <button class="btn btn-info" (click)="testToast()">Test Toast Message</button>
   </div>
   <div class="col-lg-2">
@@ -114,6 +119,8 @@
 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 
+<button class="btn btn-secondary" (click)="printWithDialog()">Print with dialog</button>
+
 <br/><br/>
 <div class="row">
   <div class="col-lg-3">
@@ -124,6 +131,20 @@
 </div>
 <br/><br/>
 
+<div>
+  <h4>Cross-tab communications example</h4>
+  <p>To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page. 
+     You should see the message that you sent to the other browser tab.</p>
+</div>
+<div class="row">
+  <div class="col-lg-3">
+    <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
+  </div>
+  <div class="col-lg-3">
+    message received: {{sbChannelText}}
+  </div>
+</div>
+
 <!-- grid stuff -->
 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
   HELLO {{userContext.hello}}
@@ -137,7 +158,12 @@
   [cellClassCallback]="btGridCellClassCallback"
   [sortable]="true">
   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
-    [action]="complimentEvergreen" [disableOnRows]="notOneSelectedRow">
+    (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
+  </eg-grid-toolbar-action>
+  <eg-grid-toolbar-action [isSeparator]="true">
+  </eg-grid-toolbar-action>
+  <eg-grid-toolbar-action label="Another Action" i18n-label
+    (onClick)="complimentEvergreen2($event)">
   </eg-grid-toolbar-action>
   <eg-grid-column name="test" [cellTemplate]="cellTmpl" 
     [cellContext]="btGridTestContext" [sortable]="false">