LP#1793005 Angular6 Hatch support / printer settings
[working/Evergreen.git] / 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 <!-- grid stuff -->
130 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
131   HELLO {{userContext.hello}}
132   <button>{{row.id()}}</button>
133 </ng-template>
134 <eg-grid #cbtGrid idlClass="cbt" 
135   [dataSource]="btSource" 
136   [rowClassCallback]="btGridRowClassCallback"
137   [rowFlairIsEnabled]="true"
138   [rowFlairCallback]="btGridRowFlairCallback"
139   [cellClassCallback]="btGridCellClassCallback"
140   [sortable]="true">
141   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
142     [action]="complimentEvergreen" [disableOnRows]="notOneSelectedRow">
143   </eg-grid-toolbar-action>
144   <eg-grid-column name="test" [cellTemplate]="cellTmpl" 
145     [cellContext]="btGridTestContext" [sortable]="false">
146   </eg-grid-column>
147   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
148   <eg-grid-column [sortable]="false" path="datetime_test" 
149     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
150 </eg-grid>
151
152 <br/><br/>
153
154 <h4>PCRUD auto flesh and FormatService detection</h4>
155 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
156