LP1830432: Make the org-family-select reusable

[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 720fa0f..fa58e90 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">
@@ -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">
@@ -153,12 +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
-    (actionClick)="complimentEvergreen2($event)">
+    (onClick)="complimentEvergreen2($event)">
   </eg-grid-toolbar-action>
   <eg-grid-column name="test" [cellTemplate]="cellTmpl" 
     [cellContext]="btGridTestContext" [sortable]="false">
@@ -173,3 +178,35 @@
 <h4>PCRUD auto flesh and FormatService detection</h4>
 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 
+<div class="row">
+  <div class="card col-md-6">
+    <div class="card-body">
+      <h3 class="card-title">Do you like template-driven forms?</h3>
+      <div class="card-text">
+        <eg-org-family-select
+          [ancestorSelectorChecked]="true"
+          [hideDescendantSelector]="true"
+          selectedOrgId="7"
+          labelText="Choose the best libraries"
+          ngModel #bestOnes="ngModel">
+        </eg-org-family-select>
+        The best libraries are: {{bestOnes.value | json}}
+      </div>
+    </div>
+  </div>
+  <form class="card col-md-6" [formGroup]="badOrgForm">
+    <div class="card-body">
+      <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
+      <div class="card-text">
+        <eg-org-family-select
+          formControlName="badOrgSelector"
+          labelText="Choose the worst libraries">
+        </eg-org-family-select>
+       <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
+          <span class="material-icons">error</span>
+          <span i18n>Too many bad libraries!</span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>