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 <!-- FM Editor Experiments ----------------------------- -->
  19 <div class="row mb-3">
  20   <ng-template #descriptionTemplate
  21       let-field="field" let-record="record" let-hello="hello">
  22   <!-- example custom template for editing the 'description' field -->
  23     <textarea
  24       placeholder="{{hello}}"
  25       class="form-control"
  26       name="{{field.name}}"
  27       [readonly]="field.readOnly"
  28       [required]="field.isRequired()"
  29       [ngModel]="record[field.name]()"
  30       (ngModelChange)="record[field.name]($event)">
  31     </textarea>
  32   </ng-template>
  33   <!-- note: fieldOptions would be best defined in the .ts file, but
  34       want to demostrate it can be set in the template as well -->
  35   <eg-fm-record-editor #fmRecordEditor
  36       idlClass="cmrcfld" mode="create"
  37       [fieldOptions]="{marc_record_type:{customValues:[{id:'biblio'},{id:'serial'},{id:'authority'}]},description:{customTemplate:{template:descriptionTemplate,context:{'hello':'goodbye'}}}}"
  38       recordId="1" orgDefaultAllowed="owner">
  39   </eg-fm-record-editor>
  40   <button class="btn btn-dark" (click)="openEditor()">
  41       Fm Record Editor
  42   </button>
  43 </div>
  44 <!-- / FM Editor Experiments ----------------------------- -->
  45
  46 <!-- Progress Dialog Experiments ----------------------------- -->
  47 <div class="row mb-3">
  48   <div class="col-lg-3">
  49     <button class="btn btn-outline-danger" (click)="progress.increment()">Increment Inline</button>
  50     <eg-help-popover [placement]="'bottom'" helpText="Exercise your clicking finger by clicking the button above.">
  51     </eg-help-popover>
  52   </div>
  53   <div class="col-lg-3">
  54     <eg-progress-inline [max]="100" [value]="1" #progress></eg-progress-inline>
  55   </div>
  56 </div>
  57 <div class="row mb-3">
  58   <div class="col-lg-4">
  59     <eg-progress-dialog #progressDialog>
  60     </eg-progress-dialog>
  61     <button class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
  62   </div>
  63   <div class="col-lg-3">
  64     <eg-help-popover helpLink="https://www.youtube.com/watch?v=dQw4w9WgXcQ" helpText="This popover is supposed to help or something...!"></eg-help-popover>
  65     <eg-combobox [allowFreeText]="true"
  66       placeholder="Combobox with static data"
  67       [entries]="cbEntries"></eg-combobox>
  68   </div>
  69   <div class="col-lg-3">
  70     <eg-help-popover helpText="You have to type to see any options in this dropdown."></eg-help-popover>
  71     <eg-combobox
  72       placeholder="Combobox with dynamic data that does not enable click if no search term is supplied"
  73       [asyncDataSource]="cbAsyncSource"></eg-combobox>
  74   </div>
  75 </div>
  76 <div class="row mb-3">
  77   <div class="col-lg-4">
  78    <eg-help-popover helpText="If you like Toast you must click below!" placement="'auto'"></eg-help-popover>
  79    <button class="btn btn-info" (click)="testToast()">Test Toast Message</button>
  80   </div>
  81   <div class="col-lg-2">
  82     Org select with limit perms
  83   </div>
  84   <div class="col-lg-2">
  85     <eg-org-select [limitPerms]="['REGISTER_WORKSTATION']">
  86     </eg-org-select>
  87   </div>
  88 </div>
  89 <div class="row mb-3">
  90   <div class="col-lg-4">
  91   </div>
  92   <div class="col-lg-3">
  93     <eg-combobox placeholder="Combobox with @idlClass = 'aou' @idlField='shortname'" idlClass="aou" idlField="shortname" [asyncSupportsEmptyTermClick]="true">
  94     </eg-combobox>
  95   </div>
  96   <div class="col-lg-3">
  97     <eg-combobox placeholder="Combobox with @idlClass = 'cvrfm'" idlClass="cvrfm" [asyncSupportsEmptyTermClick]="true">
  98     </eg-combobox>
  99   </div>
 100   <div class="col-lg-3">
 101     <eg-combobox placeholder="Combobox with @idlClass = 'csp'" idlClass="csp" [asyncSupportsEmptyTermClick]="true">
 102     </eg-combobox>
 103   </div>
 104 </div>
 105 <div class="row mb-3">
 106   <div class="col-lg-4">
 107   </div>
 108   <div class="col-lg-3">
 109     <eg-combobox placeholder="Combobox with @idlClass = 'aou'" idlClass="aou" [asyncSupportsEmptyTermClick]="true">
 110     </eg-combobox>
 111   </div>
 112   <div class="col-lg-3">
 113     <eg-combobox placeholder="Combobox with @idlClass = 'acpl'" [idlClass]="'acpl'" idlIncludeLibraryInLabel="owning_lib" [asyncSupportsEmptyTermClick]="true">
 114     </eg-combobox>
 115   </div>
 116 </div>
 117 <!-- /Progress Dialog Experiments ----------------------------- -->
 118
 119 <!-- eg strings -->
 120 <!--
 121 <div class="row mb-3">
 122     <eg-string #helloString text="Hello, {{name}}" i18n-text></eg-string>
 123     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
 124 </div>
 125 -->
 126
 127 <div class="row mb-3">
 128     <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
 129     <!--
 130     <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
 131     -->
 132     <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
 133     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
 134 </div>
 135
 136 <div class="row">
 137   <div class="form-group">
 138     <eg-date-select (onChangeAsDate)="changeDate($event)"
 139         initialYmd="2017-03-04">
 140     </eg-date-select>
 141   </div>
 142   <div>HERE: {{testDate}}</div>
 143 </div>
 144
 145 <!-- printing -->
 146
 147 <h4>PRINTING</h4>
 148
 149 <div class="d-flex">
 150   <div class="mr-2">
 151     <button class="btn btn-info" (click)="doPrint()">Test Local Print</button>
 152     <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 153   </div>
 154   <div class="mr-2">
 155     <button class="btn btn-info" (click)="printWithDialog()">
 156       Print with dialog (Hatch Only)
 157     </button>
 158   </div>
 159   <div class="mr-2">
 160     <button class="btn btn-info"
 161       (click)="testServerPrint()">Test Server-Generated Print</button>
 162   </div>
 163 </div>
 164
 165 <br/><br/>
 166 <div class="row">
 167   <div class="col-lg-3">
 168     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
 169     <button class="btn btn-info"
 170       (click)="translate.open({size:'lg'})">Translate</button>
 171   </div>
 172 </div>
 173 <br/><br/>
 174
 175
 176 <div>
 177   <h4>Cross-tab communications example</h4>
 178   <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.
 179      You should see the message that you sent to the other browser tab.</p>
 180 </div>
 181 <div class="row">
 182   <div class="col-lg-3">
 183     <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
 184   </div>
 185   <div class="col-lg-3">
 186     message received: {{sbChannelText}}
 187   </div>
 188 </div>
 189 <br/><br/>
 190
 191 <ngb-accordion>
 192   <ngb-panel title="Open me for comboboxes">
 193     <ng-template ngbPanelContent>
 194       <eg-org-select></eg-org-select>
 195       <eg-combobox>
 196         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
 197           i18n-entryLabel></eg-combobox-entry>
 198         <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
 199           i18n-entryLabel></eg-combobox-entry>
 200         <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
 201           i18n-entryLabel></eg-combobox-entry>
 202       </eg-combobox>
 203     </ng-template>
 204   </ngb-panel>
 205 </ngb-accordion>
 206
 207 <!-- grid stuff -->
 208 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
 209   HELLO {{userContext.hello}}
 210   <button>{{row.id()}}</button>
 211 </ng-template>
 212 <eg-grid #cbtGrid idlClass="cbt"
 213   [dataSource]="btSource"
 214   [rowClassCallback]="btGridRowClassCallback"
 215   [rowFlairIsEnabled]="true"
 216   [rowFlairCallback]="btGridRowFlairCallback"
 217   [cellClassCallback]="btGridCellClassCallback"
 218   [stickyHeader]="true"
 219   [sortable]="true">
 220   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
 221     (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
 222   </eg-grid-toolbar-action>
 223   <eg-grid-toolbar-action [isSeparator]="true">
 224   </eg-grid-toolbar-action>
 225   <eg-grid-toolbar-action label="Another Action" i18n-label
 226     (onClick)="complimentEvergreen2($event)">
 227   </eg-grid-toolbar-action>
 228   <eg-grid-column name="test" [cellTemplate]="cellTmpl"
 229     [cellContext]="btGridTestContext" [sortable]="false">
 230   </eg-grid-column>
 231   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
 232   <eg-grid-column [sortable]="false" path="datetime_test"
 233     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
 234 </eg-grid>
 235
 236 <br/><br/>
 237 <div class="row">
 238   <div class="col">
 239     <eg-daterange-select
 240       ngModel #myRange="ngModel"
 241       [initialRangeStart]="sevenDaysAgo()"
 242       [initialRangeLength]="5"
 243       [markDisabled]="allFutureDates">
 244     </eg-daterange-select>
 245     Your range is: {{myRange.value | json}}
 246   </div>
 247   <div class="col">
 248     <form [formGroup]="myTimeForm">
 249       <eg-datetime-select
 250         formControlName="datetime">
 251       </eg-datetime-select>
 252       Your datetime is: {{myTimeForm.get('datetime').value | json}}
 253     </form>
 254   </div>
 255 </div>
 256 <label for="date-time-input">
 257   Set the datetime and timezone library settings, and enter a valid datetime string for an exciting animation surprise:
 258 </label>
 259 <input id="date-time-input" type="text" class="date-time-input" ngModel egValidDatetime required>
 260 <br/><br/>
 261
 262 <h4>Grid with filtering</h4>
 263 <eg-grid #acpGrid idlClass="acp"
 264   [dataSource]="acpSource"
 265   [filterable]="true"
 266   [sortable]="true"
 267   [showLinkSelectors]="true"
 268   [stickyHeader]="true"
 269   showFields="barcode,location,circ_lib,price,dummy_title,create_date"
 270 >
 271   <eg-grid-toolbar-action label="Edit Selected" i18n-label [action]="editSelected">
 272   </eg-grid-toolbar-action>
 273   <eg-grid-column [sortable]="true" [filterable]="false"  path="barcode"></eg-grid-column>
 274   <eg-grid-column [sortable]="true" path="circ_lib"></eg-grid-column>
 275   <eg-grid-column [sortable]="true" path="price"></eg-grid-column>
 276   <eg-grid-column [sortable]="true" path="dummy_title"></eg-grid-column>
 277   <eg-grid-column [sortable]="true" path="create_date"></eg-grid-column>
 278 </eg-grid>
 279
 280 <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">
 281 </eg-fm-record-editor>
 282 <eg-string #successString text="Updated succeeded!" i18n-text></eg-string>
 283 <eg-string #updateFailedString text="Updated failed!" i18n-text></eg-string>
 284
 285 <h4>PCRUD auto flesh and FormatService detection</h4>
 286 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 287
 288 <div class="row">
 289   <div class="card col-md-6">
 290     <div class="card-body">
 291       <h3 class="card-title">Do you like template-driven forms?</h3>
 292       <div class="card-text">
 293         <eg-org-family-select
 294           [ancestorSelectorChecked]="true"
 295           [hideDescendantSelector]="true"
 296           selectedOrgId="7"
 297           labelText="Choose the best libraries"
 298           ngModel #bestOnes="ngModel">
 299         </eg-org-family-select>
 300         The best libraries are: {{bestOnes.value | json}}
 301         <hr>
 302         <eg-combobox [(ngModel)]="kingdom" [allowFreeText]="true">
 303           <eg-combobox-entry entryId="Bacteria"></eg-combobox-entry>
 304           <eg-combobox-entry entryId="Archaea"></eg-combobox-entry>
 305           <eg-combobox-entry entryId="Protozoa"></eg-combobox-entry>
 306           <eg-combobox-entry entryId="Chromista"></eg-combobox-entry>
 307           <eg-combobox-entry entryId="Plantae"></eg-combobox-entry>
 308           <eg-combobox-entry entryId="Fungi"></eg-combobox-entry>
 309           <eg-combobox-entry entryId="Animalia"></eg-combobox-entry>
 310         </eg-combobox>
 311       Result: {{kingdom | json}}
 312         <hr>
 313         <eg-date-select [(ngModel)]="dateObject">
 314         </eg-date-select>
 315       ngModel: {{dateObject.toLocaleDateString()}}
 316       </div>
 317     </div>
 318   </div>
 319   <form class="card col-md-4" [formGroup]="ranganathan">
 320     <div class="card-body">
 321       <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
 322       <div class="card-text">
 323         Choose your favorite law of library science:
 324         <eg-combobox formControlName="law" value="second"
 325           [allowFreeText]="true" [startIdFiresOnChange]="true">
 326           <eg-combobox-entry entryId="first" entryLabel="Books are for use" i18n-entryLabel></eg-combobox-entry>
 327           <eg-combobox-entry entryId="second" entryLabel="Every person his or her book" i18n-entryLabel></eg-combobox-entry>
 328           <eg-combobox-entry entryId="third" entryLabel="Every book its reader" i18n-entryLabel></eg-combobox-entry>
 329           <eg-combobox-entry entryId="fourth" entryLabel="Save the time of the reader" i18n-entryLabel></eg-combobox-entry>
 330           <eg-combobox-entry entryId="fifth" entryLabel="Library is a growing organism" i18n-entryLabel></eg-combobox-entry>
 331           <eg-combobox-entry entryId="wrong" entryLabel="42" i18n-entryLabel></eg-combobox-entry>
 332         </eg-combobox>
 333         <div *ngIf="!ranganathan.valid" class="alert alert-danger">
 334           <span class="material-icons">error</span>
 335           <span i18n>That isn't a real law of library science!</span>
 336         </div>
 337       </div>
 338     </div>
 339   </form>
 340   <form class="card col-md-4" [formGroup]="badOrgForm">
 341     <div class="card-body">
 342       <h3 class="card-title">Another reactive form!</h3>
 343       <div class="card-text">
 344         <eg-org-family-select
 345           formControlName="badOrgSelector"
 346           labelText="Choose the fanciest libraries">
 347         </eg-org-family-select>
 348         <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
 349           <span class="material-icons">error</span>
 350           <span i18n>Too many fancy libraries!</span>
 351         </div>
 352       </div>
 353     </div>
 354   </form>
 355 </div>
 356
 357 <button (click)="confirmNumber(1)">Confirm 1</button>
 358 <button (click)="confirmNumber(0)">Confirm 0</button>
 359 <button (click)="confirmNumber(20)">Confirm 20</button>
 360
 361 <eg-confirm-dialog #numConfirmDialog
 362   i18n-dialogTitle
 363   dialogTitle="Confirm Number"
 364   [dialogBodyTemplate]="confirmMsg">
 365 </eg-confirm-dialog>
 366 <ng-template #confirmMsg>
 367   <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
 368 </ng-template>
 369
 370 <div class="row">
 371   <eg-fm-record-editor #bresvEditor
 372     idlClass="bresv"
 373     hiddenFields="capture_staff,usr" readonlyFields="cancel_time">
 374   </eg-fm-record-editor>
 375   <button class="btn btn-info" (click)="bresvEditor.open({})">
 376     Test Readonly Date
 377   </button>
 378 </div>
 379
 380 <div class="row m-3 p-3 border-top border-dark">
 381   <div class="col-lg-3">Simple Combobox using [(ngModel)]</div>
 382   <div class="col-lg-3">
 383     <eg-combobox [(ngModel)]="simpleCombo" [allowFreeText]="true">
 384       <eg-combobox-entry
 385         entryId="abc" entryLabel="ABC" i18n-entryLabel></eg-combobox-entry>
 386       <eg-combobox-entry
 387         entryId="def" entryLabel="DEF" i18n-entryLabel></eg-combobox-entry>
 388     </eg-combobox>
 389   </div>
 390   <div class="col-lg-3">
 391     <span i18n>Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}</span>
 392   </div>
 393 </div>
 394
 395 <div class="mt-4 mb-4">
 396   <h4>Inline FM Editor</h4>
 397   <div class="row">
 398     <div class="col-lg-6">
 399       <eg-fm-record-editor displayMode="inline"
 400         idlClass="cbt" mode="update" recordId="1" orgDefaultAllowed="owner">
 401       </eg-fm-record-editor>
 402     </div>
 403   </div>
 404 </div>