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"
  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 <!-- /Progress Dialog Experiments ----------------------------- -->
  90
  91 <!-- eg strings -->
  92 <!--
  93 <div class="row mb-3">
  94     <eg-string #helloString text="Hello, {{name}}" i18n-text></eg-string>
  95     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
  96 </div>
  97 -->
  98
  99 <div class="row mb-3">
 100     <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
 101     <!--
 102     <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
 103     -->
 104     <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
 105     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
 106 </div>
 107
 108 <div class="row">
 109   <div class="form-group">
 110     <eg-date-select (onChangeAsDate)="changeDate($event)"
 111         initialYmd="2017-03-04">
 112     </eg-date-select>
 113   </div>
 114   <div>HERE: {{testDate}}</div>
 115 </div>
 116
 117 <!-- printing -->
 118
 119 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
 120 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
 121
 122 <button class="btn btn-secondary" (click)="printWithDialog()">Print with dialog</button>
 123
 124 <br/><br/>
 125 <div class="row">
 126   <div class="col-lg-3">
 127     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
 128     <button class="btn btn-info"
 129       (click)="translate.open({size:'lg'})">Translate</button>
 130   </div>
 131 </div>
 132 <br/><br/>
 133
 134 <div>
 135   <h4>Cross-tab communications example</h4>
 136   <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.
 137      You should see the message that you sent to the other browser tab.</p>
 138 </div>
 139 <div class="row">
 140   <div class="col-lg-3">
 141     <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
 142   </div>
 143   <div class="col-lg-3">
 144     message received: {{sbChannelText}}
 145   </div>
 146 </div>
 147
 148 <!-- grid stuff -->
 149 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
 150   HELLO {{userContext.hello}}
 151   <button>{{row.id()}}</button>
 152 </ng-template>
 153 <eg-grid #cbtGrid idlClass="cbt"
 154   [dataSource]="btSource"
 155   [rowClassCallback]="btGridRowClassCallback"
 156   [rowFlairIsEnabled]="true"
 157   [rowFlairCallback]="btGridRowFlairCallback"
 158   [cellClassCallback]="btGridCellClassCallback"
 159   [sortable]="true">
 160   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
 161     (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
 162   </eg-grid-toolbar-action>
 163   <eg-grid-toolbar-action [isSeparator]="true">
 164   </eg-grid-toolbar-action>
 165   <eg-grid-toolbar-action label="Another Action" i18n-label
 166     (onClick)="complimentEvergreen2($event)">
 167   </eg-grid-toolbar-action>
 168   <eg-grid-column name="test" [cellTemplate]="cellTmpl"
 169     [cellContext]="btGridTestContext" [sortable]="false">
 170   </eg-grid-column>
 171   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
 172   <eg-grid-column [sortable]="false" path="datetime_test"
 173     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
 174 </eg-grid>
 175
 176 <br/><br/>
 177
 178 <h4>PCRUD auto flesh and FormatService detection</h4>
 179 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 180
 181 <div class="row">
 182   <div class="card col-md-6">
 183     <div class="card-body">
 184       <h3 class="card-title">Do you like template-driven forms?</h3>
 185       <div class="card-text">
 186         <eg-org-family-select
 187           [ancestorSelectorChecked]="true"
 188           [hideDescendantSelector]="true"
 189           selectedOrgId="7"
 190           labelText="Choose the best libraries"
 191           ngModel #bestOnes="ngModel">
 192         </eg-org-family-select>
 193         The best libraries are: {{bestOnes.value | json}}
 194       </div>
 195     </div>
 196   </div>
 197   <form class="card col-md-6" [formGroup]="badOrgForm">
 198     <div class="card-body">
 199       <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
 200       <div class="card-text">
 201         <eg-org-family-select
 202           formControlName="badOrgSelector"
 203           labelText="Choose the worst libraries">
 204         </eg-org-family-select>
 205         <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
 206           <span class="material-icons">error</span>
 207           <span i18n>Too many bad libraries!</span>
 208         </div>
 209       </div>
 210     </div>
 211   </form>
 212 </div>