Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html

   1
   2 <eg-staff-banner bannerText="Sandbox" i18n-bannerText>
   3 </eg-staff-banner>
   4
   5 <eg-title
   6   i18n-prefix i18n-suffix
   7   prefix=":) {{dynamicTitleText}}"
   8   suffix="Sandbox">
   9 </eg-title>
  10 <eg-help-popover [placement]="'right'" helpText="This page is for random ng stuff!"></eg-help-popover>
  11 <div class="row flex pt-2">
  12   <div i18n> Modify Page Title: </div>
  13   <div class="col-lg-2">
  14     <input type="text" [(ngModel)]="dynamicTitleText" class="form-control"/>
  15   </div>
  16 </div>
  17
  18 <hr>
  19
  20 <!-- Button & Material Icon Accessibility -->
  21 <div class="row mt-2 mb-3">
  22   <h2 i18n>Accessible Buttons and Icons</h2>
  23   <div class="row row-auto-cols m-2">
  24     <div class="col">
  25       <p i18n>Icon only:</p>
  26       <!-- aria-label and title should match -->
  27       <button type="button" class="btn btn-success" (click)="null"
  28         aria-label="New Items" i18n-aria-label
  29         title="New Items" i18n-title>
  30         <span class="material-icons mat-icon-in-button" aria-hidden="true">new_releases</span>
  31       </button>
  32     </div>
  33
  34     <div class="col">
  35       <p>Icon with text:</p>
  36       <!-- aria-label is not needed because there is equivalent visible text -->
  37       <button type="button" class="btn btn-secondary label-with-material-icon" (click)="null"
  38         title="Folders" i18n-title>
  39         <span class="material-icons mat-icon-in-button" aria-hidden="true">folder_open</span>
  40         <span class="ms-1" i18n>Folders</span>
  41       </button>
  42     </div>
  43
  44     <div class="col">
  45       <p>Icon inline with link text:</p>
  46       <!-- Use <a> only with href or routerLink. Otherwise use <button> -->
  47       <a class="label-with-material-icon" routerLink="/staff/admin/server/splash">
  48         <span class="material-icons" aria-hidden="true">edit</span>
  49         <span i18n>Edit Settings</span>
  50       </a>
  51     </div>
  52
  53     <div class="col">
  54       <p>Icon by itself:</p>
  55       <!-- aria-label is not valid on <span>, <div>, or <p>. Use visually-hidden text instead. -->
  56       <span class="material-icons" aria-hidden="true"
  57         title="Error" i18n-title>report</span>
  58       <span i18n class="visually-hidden">Error</span>
  59     </div>
  60
  61     <div class="col">
  62       <p>Button styled as a link:</p>
  63       <button type="button" class="btn btn-link" (click)="null" i18n>
  64         Download CSV
  65       </button>
  66     </div>
  67   </div>
  68   </div>
  69   <div class="row mt-2 mb-3 bg-light border">
  70   <h2 class="mt-3" i18n>Inaccessible examples: what not to do</h2>
  71   <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/accessibility-interactive-supports-focus -->
  72   <div class="row row-auto-cols m-2">
  73     <div class="col">
  74       <p i18n>These buttons cannot be accessed using the keyboard and are announced with the wrong roles:</p>
  75       <!-- do not copy this example -->
  76       <a class="btn btn-primary" (click)="null" i18n>Mouse users only!</a>
  77       <!-- especially do not copy this example -->
  78       <!-- screen readers do not even announce this as a clickable element -->
  79       <div class="btn btn-danger ms-2" (click)="null" i18n>No role!</div>
  80     </div>
  81
  82     <div class="col">
  83       <p i18n>This button is announced as "new underscore releases" (no ARIA label):</p>
  84       <!-- do not copy this example -->
  85       <button type="button" class="btn btn-danger" (click)="null"
  86         title="This tooltip is not read by screen readers" i18n-title>
  87         <span class="material-icons mat-icon-in-button">new_releases</span>
  88       </button>
  89     </div>
  90
  91     <div class="col">
  92       <p i18n>This button will submit form input on <kbd>Spacebar</kbd> or <kbd>Enter</kbd> (no type attribute):</p>
  93       <!-- do not copy this example -->
  94       <!-- eslint-disable-next-line @angular-eslint/template/button-has-type -->
  95       <button class="btn btn-info" (click)="null" i18n>Whoops!</button>
  96     </div>
  97   </div>
  98   <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/accessibility-interactive-supports-focus -->
  99 </div>
 100
 101 <!-- FM Editor Experiments ----------------------------- -->
 102 <div class="row my-2">
 103   <ng-template #descriptionTemplate
 104       let-field="field" let-record="record" let-hello="hello">
 105   <!-- example custom template for editing the 'description' field -->
 106     <textarea
 107       placeholder="{{hello}}"
 108       class="form-control"
 109       name="{{field.name}}"
 110       [readonly]="field.readOnly"
 111       [required]="field.isRequired()"
 112       [ngModel]="record[field.name]()"
 113       (ngModelChange)="record[field.name]($event)">
 114     </textarea>
 115   </ng-template>
 116   <!-- note: fieldOptions would be best defined in the .ts file, but
 117       want to demostrate it can be set in the template as well -->
 118   <eg-fm-record-editor #fmRecordEditor
 119     idlClass="cmrcfld" mode="create" hiddenFields="id"
 120     fieldOrder="owner,name,description,marc_format,marc_record_type,tag"
 121     [fieldOptions]="{marc_record_type:{customValues:[{id:'biblio'},{id:'serial'},{id:'authority'}]},description:{customTemplate:{template:descriptionTemplate,context:{'hello':'goodbye'}}}}"
 122     recordId="1" orgDefaultAllowed="owner">
 123   </eg-fm-record-editor>
 124   <button type="button" class="btn btn-dark" (click)="openEditor()">
 125       Fm Record Editor
 126   </button>
 127 </div>
 128 <!-- / FM Editor Experiments ----------------------------- -->
 129
 130 <!-- Progress Dialog Experiments ----------------------------- -->
 131 <div class="row mb-3">
 132   <div class="col-lg-3">
 133     <button type="button" class="btn btn-outline-danger" (click)="progress.increment()">Increment Inline</button>
 134     <eg-help-popover [placement]="'bottom'" helpText="Exercise your clicking finger by clicking the button above.">
 135     </eg-help-popover>
 136   </div>
 137   <div class="col-lg-3">
 138     <eg-progress-inline [max]="100" [value]="1" #progress></eg-progress-inline>
 139   </div>
 140 </div>
 141 <div class="row mb-3">
 142   <div class="col-lg-4">
 143     <eg-progress-dialog #progressDialog>
 144     </eg-progress-dialog>
 145     <button type="button" class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
 146   </div>
 147   <div class="col-lg-3">
 148     <eg-help-popover helpLink="https://www.youtube.com/watch?v=dQw4w9WgXcQ" helpText="This popover is supposed to help or something...!"></eg-help-popover>
 149     <eg-combobox [allowFreeText]="true"
 150       placeholder="Combobox with static data"
 151       [entries]="cbEntries"></eg-combobox>
 152   </div>
 153   <div class="col-lg-3">
 154     <eg-help-popover helpText="You have to type to see any options in this dropdown."></eg-help-popover>
 155     <eg-combobox
 156       placeholder="Combobox with dynamic data that does not enable click if no search term is supplied"
 157       [asyncDataSource]="cbAsyncSource"></eg-combobox>
 158   </div>
 159 </div>
 160 <div class="row mb-3">
 161   <div class="col-lg-4">
 162    <eg-help-popover helpText="If you like Toast you must click below!" placement="'auto'"></eg-help-popover>
 163    <button type="button" class="btn btn-info" (click)="testToast()">Test Toast Message</button>
 164   </div>
 165   <div class="col-lg-2">
 166     <label for="limitPermsSelect" class="form-label org-unit-select-label" i18n>Org select with limit perms</label>
 167   </div>
 168   <div class="col-lg-2">
 169     <eg-org-select
 170       domId="limitPermsSelect"
 171       [limitPerms]="['REGISTER_WORKSTATION']">
 172     </eg-org-select>
 173   </div>
 174 </div>
 175 <div class="row mb-3">
 176   <div class="col-lg-4">
 177   </div>
 178   <div class="col-lg-3">
 179     <eg-combobox placeholder="Combobox with @idlClass = 'aou' @idlField='shortname'" idlClass="aou" idlField="shortname" [asyncSupportsEmptyTermClick]="true">
 180     </eg-combobox>
 181   </div>
 182   <div class="col-lg-3">
 183     <eg-combobox placeholder="Combobox with @idlClass = 'cvrfm'" idlClass="cvrfm" [asyncSupportsEmptyTermClick]="true">
 184     </eg-combobox>
 185   </div>
 186   <div class="col-lg-3">
 187     <eg-combobox placeholder="Combobox with @idlClass = 'csp'" idlClass="csp" [asyncSupportsEmptyTermClick]="true">
 188     </eg-combobox>
 189   </div>
 190 </div>
 191 <div class="row mb-3">
 192   <div class="col-lg-4">
 193   </div>
 194   <div class="col-lg-3">
 195     <eg-combobox placeholder="Combobox with @idlClass = 'aou'" idlClass="aou" [asyncSupportsEmptyTermClick]="true">
 196     </eg-combobox>
 197   </div>
 198   <div class="col-lg-3">
 199     <eg-multi-select idlClass="acpl" linkedLibraryLabel="owning_lib" [startValue]="'{129,130,131}'">
 200     </eg-multi-select>
 201   </div>
 202 </div>
 203 <!-- /Progress Dialog Experiments ----------------------------- -->
 204
 205 <!-- eg strings -->
 206 <!--
 207 <div class="row mb-3">
 208     <eg-string #helloString text="Hello, {{name}}" i18n-text></eg-string>
 209     <button type="button" class="btn btn-success" (click)="testStrings()">Test Strings</button>
 210 </div>
 211 -->
 212
 213 <div class="row mb-3">
 214     <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
 215     <!--
 216     <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
 217     -->
 218     <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
 219     <button type="button" class="btn btn-success" (click)="testStrings()">Test Strings</button>
 220 </div>
 221
 222 <div class="row">
 223   <div class="form-group">
 224     <eg-date-select (onChangeAsDate)="changeDate($event)"
 225         initialYmd="2017-03-04">
 226     </eg-date-select>
 227   </div>
 228   <div>HERE: {{testDate}}</div>
 229 </div>
 230
 231 <!-- printing -->
 232
 233 <h4>PRINTING</h4>
 234
 235 <div class="d-flex">
 236   <div class="me-2">
 237     <button type="button" class="btn btn-info" (click)="doPrint()">Test Local Print</button>
 238     <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 239   </div>
 240   <div class="me-2">
 241     <button type="button" class="btn btn-info" (click)="printWithDialog()">
 242       Print with dialog (Hatch Only)
 243     </button>
 244   </div>
 245   <div class="me-2">
 246     <button type="button" class="btn btn-info"
 247       (click)="testServerPrint()">Test Server-Generated Print</button>
 248   </div>
 249 </div>
 250
 251 <br/><br/>
 252 <div class="row">
 253   <div class="col-lg-3">
 254     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
 255     <button type="button" class="btn btn-info"
 256       (click)="translate.open({size:'lg'})">Translate</button>
 257   </div>
 258 </div>
 259 <br/><br/>
 260
 261
 262 <div>
 263   <h4>File reader component</h4>
 264   <eg-file-reader [(ngModel)]="fileContents"></eg-file-reader>
 265   <h5>Contents are:</h5>
 266   <ol *ngIf="fileContents && fileContents.length > 0">
 267     <li *ngFor="let val of fileContents">{{val}}</li>
 268   </ol>
 269 </div>
 270
 271 <div>
 272   <h4>Cross-tab communications example</h4>
 273   <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.
 274      You should see the message that you sent to the other browser tab.</p>
 275 </div>
 276 <div class="row">
 277   <div class="col-lg-3">
 278     <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
 279   </div>
 280   <div class="col-lg-3">
 281     message received: {{sbChannelText}}
 282   </div>
 283 </div>
 284 <br/><br/>
 285
 286 <ngb-accordion>
 287   <ngb-panel title="Open me for comboboxes">
 288     <ng-template ngbPanelContent>
 289       <eg-org-select ariaLabel="Org Unit" i18n-ariaLabel></eg-org-select>
 290       <eg-combobox>
 291         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
 292           i18n-entryLabel></eg-combobox-entry>
 293         <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
 294           i18n-entryLabel></eg-combobox-entry>
 295         <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
 296           i18n-entryLabel></eg-combobox-entry>
 297       </eg-combobox>
 298     </ng-template>
 299   </ngb-panel>
 300 </ngb-accordion>
 301
 302 <!-- grid stuff -->
 303 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
 304   HELLO {{userContext.hello}}
 305   <button type="button">{{row.id()}}</button>
 306 </ng-template>
 307 <eg-grid #cbtGrid idlClass="cbt"
 308   [dataSource]="btSource"
 309   [rowClassCallback]="btGridRowClassCallback"
 310   [rowFlairIsEnabled]="true"
 311   [rowFlairCallback]="btGridRowFlairCallback"
 312   [cellClassCallback]="btGridCellClassCallback"
 313   [stickyHeader]="true"
 314   [cellTextGenerator]="btGridCellTextGenerator"
 315   [sortable]="true">
 316   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
 317     (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
 318   </eg-grid-toolbar-action>
 319   <eg-grid-toolbar-action [isSeparator]="true">
 320   </eg-grid-toolbar-action>
 321   <eg-grid-toolbar-action label="Another Action" i18n-label
 322     (onClick)="complimentEvergreen2($event)">
 323   </eg-grid-toolbar-action>
 324   <eg-grid-column name="test" [cellTemplate]="cellTmpl"
 325     [cellContext]="btGridTestContext" [sortable]="false">
 326   </eg-grid-column>
 327   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
 328   <eg-grid-column [sortable]="false" path="datetime_test"
 329     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
 330 </eg-grid>
 331
 332 <br/><br/>
 333 <div class="row">
 334   <div class="col">
 335     <eg-daterange-select
 336       ngModel #myRange="ngModel"
 337       [initialRangeStart]="sevenDaysAgo()"
 338       [initialRangeLength]="5"
 339       [markDisabled]="allFutureDates">
 340     </eg-daterange-select>
 341     Your range is: {{myRange.value | json}}
 342   </div>
 343   <div class="col">
 344     <form [formGroup]="myTimeForm">
 345       <eg-datetime-select
 346         formControlName="datetime">
 347       </eg-datetime-select>
 348       Your datetime is: {{myTimeForm.get('datetime').value | json}}
 349     </form>
 350   </div>
 351 </div>
 352 <label class="form-label" for="date-time-input">
 353   Set the datetime and timezone library settings, and enter a valid datetime string for an exciting animation surprise:
 354 </label>
 355 <input id="date-time-input" type="text" class="date-time-input" ngModel egValidDatetime required>
 356 <br/><br/>
 357
 358 <h4>Grid with filtering</h4>
 359 <eg-grid #acpGrid idlClass="acp"
 360   [dataSource]="acpSource"
 361   [filterable]="true"
 362   [sortable]="true"
 363   [stickyHeader]="true"
 364   showFields="barcode,location,circ_lib,price,dummy_title,create_date"
 365 >
 366   <eg-grid-toolbar-action label="Edit Selected" i18n-label [action]="editSelected">
 367   </eg-grid-toolbar-action>
 368   <eg-grid-column [sortable]="true" [filterable]="false"  path="barcode"></eg-grid-column>
 369   <eg-grid-column [sortable]="true" path="circ_lib"></eg-grid-column>
 370   <eg-grid-column [sortable]="true" path="price"></eg-grid-column>
 371   <eg-grid-column [sortable]="true" path="dummy_title"></eg-grid-column>
 372   <eg-grid-column [sortable]="true" path="create_date"></eg-grid-column>
 373 </eg-grid>
 374
 375 <eg-fm-record-editor #acpEditDialog idlClass="acp" hiddenFields="call_number,creator,create_date,editor,edit_time,loan_duration,fine_level,dummy_author,dummy_isbn,ref,floating,holdable,circ_as_type,active_date,mint_condition,cost,deleted,deposit,deposit_amount,circulate,status_changed_time,copy_number"
 376    [fieldOptions]="{status:{linkedSearchConditions:{'is_available':'t'},preloadLinkedValues:true}}">
 377 </eg-fm-record-editor>
 378 <eg-string #successString text="Updated succeeded!" i18n-text></eg-string>
 379 <eg-string #updateFailedString text="Updated failed!" i18n-text></eg-string>
 380
 381 <h4>PCRUD auto flesh and FormatService detection</h4>
 382 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 383
 384 <div class="row">
 385   <div class="card col-md-6">
 386     <div class="card-body">
 387       <h3 class="card-title">Do you like template-driven forms?</h3>
 388       <div class="card-text">
 389         <eg-org-family-select
 390           [ancestorSelectorChecked]="true"
 391           [hideDescendantSelector]="true"
 392           selectedOrgId="7"
 393           labelText="Choose the best libraries"
 394           ngModel #bestOnes="ngModel">
 395         </eg-org-family-select>
 396         The best libraries are: {{bestOnes.value | json}}
 397         <hr>
 398         <eg-combobox [(ngModel)]="kingdom" [allowFreeText]="true">
 399           <eg-combobox-entry entryId="Bacteria"></eg-combobox-entry>
 400           <eg-combobox-entry entryId="Archaea"></eg-combobox-entry>
 401           <eg-combobox-entry entryId="Protozoa"></eg-combobox-entry>
 402           <eg-combobox-entry entryId="Chromista"></eg-combobox-entry>
 403           <eg-combobox-entry entryId="Plantae"></eg-combobox-entry>
 404           <eg-combobox-entry entryId="Fungi"></eg-combobox-entry>
 405           <eg-combobox-entry entryId="Animalia"></eg-combobox-entry>
 406         </eg-combobox>
 407       Result: {{kingdom | json}}
 408         <hr>
 409         <eg-date-select [(ngModel)]="dateObject">
 410         </eg-date-select>
 411       ngModel: {{dateObject.toLocaleDateString()}}
 412       </div>
 413     </div>
 414   </div>
 415   <form class="card col-md-4" [formGroup]="ranganathan">
 416     <div class="card-body">
 417       <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
 418       <div class="card-text">
 419         Choose your favorite law of library science:
 420         <eg-combobox formControlName="law" value="second"
 421           [allowFreeText]="true" [startIdFiresOnChange]="true">
 422           <eg-combobox-entry entryId="first" entryLabel="Books are for use" i18n-entryLabel></eg-combobox-entry>
 423           <eg-combobox-entry entryId="second" entryLabel="Every person his or her book" i18n-entryLabel></eg-combobox-entry>
 424           <eg-combobox-entry entryId="third" entryLabel="Every book its reader" i18n-entryLabel></eg-combobox-entry>
 425           <eg-combobox-entry entryId="fourth" entryLabel="Save the time of the reader" i18n-entryLabel></eg-combobox-entry>
 426           <eg-combobox-entry entryId="fifth" entryLabel="Library is a growing organism" i18n-entryLabel></eg-combobox-entry>
 427           <eg-combobox-entry entryId="wrong" entryLabel="42" i18n-entryLabel></eg-combobox-entry>
 428         </eg-combobox>
 429         <div *ngIf="!ranganathan.valid" class="alert alert-danger">
 430           <span class="material-icons" aria-hidden="true">error</span>
 431           <span class="visually-hidden" i18n>Error</span>
 432           <span i18n>That isn't a real law of library science!</span>
 433         </div>
 434       </div>
 435     </div>
 436   </form>
 437   <form class="card col-md-4" [formGroup]="badOrgForm">
 438     <div class="card-body">
 439       <h3 class="card-title">Another reactive form!</h3>
 440       <div class="card-text">
 441         <eg-org-family-select
 442           formControlName="badOrgSelector"
 443           ariaLabel="Choose the fanciest libraries" i18n-ariaLabel>
 444         </eg-org-family-select>
 445         <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
 446           <span class="material-icons" aria-hidden="true">error</span>
 447           <span class="visually-hidden" i18n>Error</span>
 448           <span i18n>Too many fancy libraries!</span>
 449         </div>
 450       </div>
 451     </div>
 452   </form>
 453 </div>
 454
 455 <button type="button" (click)="confirmNumber(1)">Confirm 1</button>
 456 <button type="button" (click)="confirmNumber(0)">Confirm 0</button>
 457 <button type="button" (click)="confirmNumber(20)">Confirm 20</button>
 458
 459 <eg-confirm-dialog #numConfirmDialog
 460   i18n-dialogTitle
 461   dialogTitle="Confirm Number"
 462   [dialogBodyTemplate]="confirmMsg">
 463 </eg-confirm-dialog>
 464 <ng-template #confirmMsg>
 465   <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
 466 </ng-template>
 467
 468 <div class="row">
 469   <eg-fm-record-editor #bresvEditor
 470     idlClass="bresv"
 471     hiddenFields="capture_staff,usr" readonlyFields="cancel_time">
 472   </eg-fm-record-editor>
 473   <button type="button" class="btn btn-info" (click)="bresvEditor.open({})">
 474     Test Readonly Date
 475   </button>
 476 </div>
 477
 478 <div class="row m-3 p-3 border-top border-dark">
 479   <div class="col-lg-3">Simple Combobox using [(ngModel)]</div>
 480   <div class="col-lg-3">
 481     <eg-combobox [(ngModel)]="simpleCombo" [allowFreeText]="true">
 482       <eg-combobox-entry
 483         entryId="abc" entryLabel="ABC" i18n-entryLabel></eg-combobox-entry>
 484       <eg-combobox-entry
 485         entryId="def" entryLabel="DEF" i18n-entryLabel></eg-combobox-entry>
 486     </eg-combobox>
 487   </div>
 488   <div class="col-lg-3">
 489     <span i18n>Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}</span>
 490   </div>
 491 </div>
 492
 493 <div class="mt-4 mb-4">
 494   <h4>Inline FM Editor</h4>
 495   <div class="row">
 496     <div class="col-lg-6">
 497       <eg-fm-record-editor displayMode="inline"
 498         idlClass="cbt" mode="update" recordId="1" orgDefaultAllowed="owner">
 499       </eg-fm-record-editor>
 500     </div>
 501
 502 <div class="m-4">
 503   <div class="col-lg-4">
 504     <h4>
 505       <label for="styledOrgSelect" class="form-label org-unit-select-label" i18n>Org Unit Selector With Styled Orgs</label>
 506     </h4>
 507     <eg-org-select domId="styledOrgSelect" [orgClassCallback]="orgClassCallback" labelClass="visually-hidden">
 508     </eg-org-select>
 509   </div>
 510 </div>
 511
 512 <div class="mt-4 mb-4">
 513   <h4>Add Patron Penalty</h4>
 514   <eg-patron-penalty-dialog #penaltyDialog patronId="1"></eg-patron-penalty-dialog>
 515   <button type="button" class="btn btn-outline-dark" (click)="openPenalty()" i18n>
 516     Open Penalty Dialog
 517   </button>
 518 </div>
 519
 520 <div class="mt-4 mb-4">
 521   <h4>Grid Stock Selector Display and Filtering</h4>
 522   <eg-grid #eventsGrid idlClass="atevdef"
 523     [dataSource]="eventsDataSource"
 524     showFields="name,hook,validator,reactor"
 525     [sortable]="true" [filterable]="true">
 526     <!-- demo how explicit fields and auto fields support link field selector
 527          display and filtering consisently without additional biolerplate -->
 528     <eg-grid-column name="name"></eg-grid-column>
 529     <eg-grid-column name="hook"></eg-grid-column>
 530   </eg-grid>
 531 </div>
 532
 533 <div class="mt-4 mb-4">
 534   <h4>Item (Copy) Location Selector</h4>
 535   <div class="row">
 536     <div class="col-lg-3 form-validated">
 537       <eg-item-location-select permFilter="UPDATE_COPY"
 538         [(ngModel)]="locId" (valueChange)="aLocation = $event">
 539       </eg-item-location-select>
 540     </div>
 541     <div class="col-lg-2">Selected ID: {{locId}}</div>
 542     <div class="col-lg-4">
 543       valueChange Handler Produced: {{aLocation ? aLocation.name() : '(none)'}}
 544     </div>
 545   </div>
 546 </div>
 547
 548
 549 <div class="mt-4 mb-4">
 550   <h4>Due Date Pipe Examples</h4>
 551   <div class="row">
 552     <div class="col-lg-2">Due Date Daily Duration:</div>
 553     <div class="col-lg-2">{{circDaily | egDueDate}}</div>
 554     <div class="col-lg-2">Due Date Hourly Duration:</div>
 555     <div class="col-lg-2">{{circHourly | egDueDate}}</div>
 556   </div>
 557 </div>