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