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
  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)="fmRecordEditor.open({size:'lg'})">
  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   </div>
  51   <div class="col-lg-3">
  52     <eg-progress-inline [max]="100" [value]="1" #progress></eg-progress-inline>
  53   </div>
  54 </div>
  55 <div class="row mb-3">
  56   <div class="col-lg-4">
  57     <eg-progress-dialog #progressDialog>
  58     </eg-progress-dialog>
  59     <button class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
  60   </div>
  61   <div class="col-lg-3">
  62     <eg-combobox [allowFreeText]="true"
  63       placeholder="Combobox with static data"
  64       [entries]="cbEntries"></eg-combobox>
  65   </div>
  66   <div class="col-lg-3">
  67     <eg-combobox
  68       placeholder="Combobox with dynamic data"
  69       [asyncDataSource]="cbAsyncSource"></eg-combobox>
  70   </div>
  71 </div>
  72 <div class="row mb-3">
  73   <div class="col-lg-4">
  74    <button class="btn btn-info" (click)="testToast()">Test Toast Message</button>
  75   </div>
  76   <div class="col-lg-2">
  77     Org select with limit perms
  78   </div>
  79   <div class="col-lg-2">
  80     <eg-org-select [limitPerms]="['REGISTER_WORKSTATION']">
  81     </eg-org-select>
  82   </div>
  83 </div>
  84 <!-- /Progress Dialog Experiments ----------------------------- -->
  85
  86 <!-- eg strings -->
  87 <!--
  88 <div class="row mb-3">
  89     <eg-string #helloString text="Hello, {{name}}" i18n-text></eg-string>
  90     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
  91 </div>
  92 -->
  93
  94 <div class="row mb-3">
  95     <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
  96     <!--
  97     <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
  98     -->
  99     <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
 100     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
 101 </div>
 102
 103 <div class="row">
 104   <div class="form-group">
 105     <eg-date-select (onChangeAsDate)="changeDate($event)"
 106         initialYmd="2017-03-04">
 107     </eg-date-select>
 108   </div>
 109   <div>HERE: {{testDate}}</div>
 110 </div>
 111
 112 <!-- printing -->
 113
 114 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
 115 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 116
 117 <br/><br/>
 118 <div class="row">
 119   <div class="col-lg-3">
 120     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
 121     <button class="btn btn-info"
 122       (click)="translate.open({size:'lg'})">Translate</button>
 123   </div>
 124 </div>
 125 <br/><br/>
 126
 127 <!-- grid stuff -->
 128 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
 129   HELLO {{userContext.hello}}
 130   <button>{{row.id()}}</button>
 131 </ng-template>
 132 <eg-grid #cbtGrid idlClass="cbt"
 133   [dataSource]="btSource"
 134   [rowClassCallback]="btGridRowClassCallback"
 135   [rowFlairIsEnabled]="true"
 136   [rowFlairCallback]="btGridRowFlairCallback"
 137   [cellClassCallback]="btGridCellClassCallback"
 138   [sortable]="true">
 139   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
 140     [action]="complimentEvergreen" [disableOnRows]="notOneSelectedRow">
 141   </eg-grid-toolbar-action>
 142   <eg-grid-column name="test" [cellTemplate]="cellTmpl"
 143     [cellContext]="btGridTestContext" [sortable]="false">
 144   </eg-grid-column>
 145   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
 146   <eg-grid-column [sortable]="false" path="datetime_test"
 147     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
 148 </eg-grid>
 149
 150 <br/><br/>
 151
 152 <h4>PCRUD auto flesh and FormatService detection</h4>
 153 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 154