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)="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   </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 <button class="btn btn-secondary" (click)="printWithDialog()">Print with dialog</button>
 118
 119 <br/><br/>
 120 <div class="row">
 121   <div class="col-lg-3">
 122     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
 123     <button class="btn btn-info"
 124       (click)="translate.open({size:'lg'})">Translate</button>
 125   </div>
 126 </div>
 127 <br/><br/>
 128
 129 <div>
 130   <h4>Cross-tab communications example</h4>
 131   <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.
 132      You should see the message that you sent to the other browser tab.</p>
 133 </div>
 134 <div class="row">
 135   <div class="col-lg-3">
 136     <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
 137   </div>
 138   <div class="col-lg-3">
 139     message received: {{sbChannelText}}
 140   </div>
 141 </div>
 142
 143 <!-- grid stuff -->
 144 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
 145   HELLO {{userContext.hello}}
 146   <button>{{row.id()}}</button>
 147 </ng-template>
 148 <eg-grid #cbtGrid idlClass="cbt"
 149   [dataSource]="btSource"
 150   [rowClassCallback]="btGridRowClassCallback"
 151   [rowFlairIsEnabled]="true"
 152   [rowFlairCallback]="btGridRowFlairCallback"
 153   [cellClassCallback]="btGridCellClassCallback"
 154   [sortable]="true">
 155   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
 156     [action]="complimentEvergreen" [disableOnRows]="notOneSelectedRow">
 157   </eg-grid-toolbar-action>
 158   <eg-grid-toolbar-action [isSeparator]="true">
 159   </eg-grid-toolbar-action>
 160   <eg-grid-toolbar-action label="Another Action" i18n-label
 161     (actionClick)="complimentEvergreen2($event)">
 162   </eg-grid-toolbar-action>
 163   <eg-grid-column name="test" [cellTemplate]="cellTmpl"
 164     [cellContext]="btGridTestContext" [sortable]="false">
 165   </eg-grid-column>
 166   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
 167   <eg-grid-column [sortable]="false" path="datetime_test"
 168     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
 169 </eg-grid>
 170
 171 <br/><br/>
 172
 173 <h4>PCRUD auto flesh and FormatService detection</h4>
 174 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 175