2 <eg-staff-banner bannerText="Sandbox" i18n-bannerText>
6 i18n-prefix i18n-suffix
7 prefix=":) {{dynamicTitleText}}"
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"/>
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 -->
24 placeholder="{{hello}}"
27 [readonly]="field.readOnly"
28 [required]="field.isRequired()"
29 [ngModel]="record[field.name]()"
30 (ngModelChange)="record[field.name]($event)">
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()">
45 <!-- / FM Editor Experiments ----------------------------- -->
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.">
54 <div class="col-lg-3">
55 <eg-progress-inline [max]="100" [value]="1" #progress></eg-progress-inline>
58 <div class="row mb-3">
59 <div class="col-lg-4">
60 <eg-progress-dialog #progressDialog>
62 <button class="btn btn-light" (click)="showProgress()">Test Progress Dialog</button>
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>
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>
73 placeholder="Combobox with dynamic data that does not enable click if no search term is supplied"
74 [asyncDataSource]="cbAsyncSource"></eg-combobox>
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>
82 <div class="col-lg-2">
83 Org select with limit perms
85 <div class="col-lg-2">
86 <eg-org-select [limitPerms]="['REGISTER_WORKSTATION']">
90 <div class="row mb-3">
91 <div class="col-lg-4">
93 <div class="col-lg-3">
94 <eg-combobox placeholder="Combobox with @idlClass = 'aou' @idlField='shortname'" idlClass="aou" idlField="shortname" [asyncSupportsEmptyTermClick]="true">
97 <div class="col-lg-3">
98 <eg-combobox placeholder="Combobox with @idlClass = 'cvrfm'" idlClass="cvrfm" [asyncSupportsEmptyTermClick]="true">
101 <div class="col-lg-3">
102 <eg-combobox placeholder="Combobox with @idlClass = 'csp'" idlClass="csp" [asyncSupportsEmptyTermClick]="true">
106 <div class="row mb-3">
107 <div class="col-lg-4">
109 <div class="col-lg-3">
110 <eg-combobox placeholder="Combobox with @idlClass = 'aou'" idlClass="aou" [asyncSupportsEmptyTermClick]="true">
113 <div class="col-lg-3">
114 <eg-multi-select idlClass="acpl" linkedLibraryLabel="owning_lib" [startValue]="'{129,130,131}'">
118 <!-- /Progress Dialog Experiments ----------------------------- -->
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>
128 <div class="row mb-3">
129 <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
131 <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
133 <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
134 <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
138 <div class="form-group">
139 <eg-date-select (onChangeAsDate)="changeDate($event)"
140 initialYmd="2017-03-04">
143 <div>HERE: {{testDate}}</div>
152 <button class="btn btn-info" (click)="doPrint()">Test Local Print</button>
153 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
156 <button class="btn btn-info" (click)="printWithDialog()">
157 Print with dialog (Hatch Only)
161 <button class="btn btn-info"
162 (click)="testServerPrint()">Test Server-Generated Print</button>
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>
178 <h4>Cross-tab communications example</h4>
179 <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.
180 You should see the message that you sent to the other browser tab.</p>
183 <div class="col-lg-3">
184 <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
186 <div class="col-lg-3">
187 message received: {{sbChannelText}}
193 <ngb-panel title="Open me for comboboxes">
194 <ng-template ngbPanelContent>
195 <eg-org-select></eg-org-select>
197 <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
198 i18n-entryLabel></eg-combobox-entry>
199 <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
200 i18n-entryLabel></eg-combobox-entry>
201 <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
202 i18n-entryLabel></eg-combobox-entry>
209 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
210 HELLO {{userContext.hello}}
211 <button>{{row.id()}}</button>
213 <eg-grid #cbtGrid idlClass="cbt"
214 [dataSource]="btSource"
215 [rowClassCallback]="btGridRowClassCallback"
216 [rowFlairIsEnabled]="true"
217 [rowFlairCallback]="btGridRowFlairCallback"
218 [cellClassCallback]="btGridCellClassCallback"
219 [stickyHeader]="true"
220 [cellTextGenerator]="btGridCellTextGenerator"
222 <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
223 (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
224 </eg-grid-toolbar-action>
225 <eg-grid-toolbar-action [isSeparator]="true">
226 </eg-grid-toolbar-action>
227 <eg-grid-toolbar-action label="Another Action" i18n-label
228 (onClick)="complimentEvergreen2($event)">
229 </eg-grid-toolbar-action>
230 <eg-grid-column name="test" [cellTemplate]="cellTmpl"
231 [cellContext]="btGridTestContext" [sortable]="false">
233 <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
234 <eg-grid-column [sortable]="false" path="datetime_test"
235 datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
242 ngModel #myRange="ngModel"
243 [initialRangeStart]="sevenDaysAgo()"
244 [initialRangeLength]="5"
245 [markDisabled]="allFutureDates">
246 </eg-daterange-select>
247 Your range is: {{myRange.value | json}}
250 <form [formGroup]="myTimeForm">
252 formControlName="datetime">
253 </eg-datetime-select>
254 Your datetime is: {{myTimeForm.get('datetime').value | json}}
258 <label for="date-time-input">
259 Set the datetime and timezone library settings, and enter a valid datetime string for an exciting animation surprise:
261 <input id="date-time-input" type="text" class="date-time-input" ngModel egValidDatetime required>
264 <h4>Grid with filtering</h4>
265 <eg-grid #acpGrid idlClass="acp"
266 [dataSource]="acpSource"
269 [stickyHeader]="true"
270 showFields="barcode,location,circ_lib,price,dummy_title,create_date"
272 <eg-grid-toolbar-action label="Edit Selected" i18n-label [action]="editSelected">
273 </eg-grid-toolbar-action>
274 <eg-grid-column [sortable]="true" [filterable]="false" path="barcode"></eg-grid-column>
275 <eg-grid-column [sortable]="true" path="circ_lib"></eg-grid-column>
276 <eg-grid-column [sortable]="true" path="price"></eg-grid-column>
277 <eg-grid-column [sortable]="true" path="dummy_title"></eg-grid-column>
278 <eg-grid-column [sortable]="true" path="create_date"></eg-grid-column>
281 <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">
282 </eg-fm-record-editor>
283 <eg-string #successString text="Updated succeeded!" i18n-text></eg-string>
284 <eg-string #updateFailedString text="Updated failed!" i18n-text></eg-string>
286 <h4>PCRUD auto flesh and FormatService detection</h4>
287 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
290 <div class="card col-md-6">
291 <div class="card-body">
292 <h3 class="card-title">Do you like template-driven forms?</h3>
293 <div class="card-text">
294 <eg-org-family-select
295 [ancestorSelectorChecked]="true"
296 [hideDescendantSelector]="true"
298 labelText="Choose the best libraries"
299 ngModel #bestOnes="ngModel">
300 </eg-org-family-select>
301 The best libraries are: {{bestOnes.value | json}}
303 <eg-combobox [(ngModel)]="kingdom" [allowFreeText]="true">
304 <eg-combobox-entry entryId="Bacteria"></eg-combobox-entry>
305 <eg-combobox-entry entryId="Archaea"></eg-combobox-entry>
306 <eg-combobox-entry entryId="Protozoa"></eg-combobox-entry>
307 <eg-combobox-entry entryId="Chromista"></eg-combobox-entry>
308 <eg-combobox-entry entryId="Plantae"></eg-combobox-entry>
309 <eg-combobox-entry entryId="Fungi"></eg-combobox-entry>
310 <eg-combobox-entry entryId="Animalia"></eg-combobox-entry>
312 Result: {{kingdom | json}}
314 <eg-date-select [(ngModel)]="dateObject">
316 ngModel: {{dateObject.toLocaleDateString()}}
320 <form class="card col-md-4" [formGroup]="ranganathan">
321 <div class="card-body">
322 <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
323 <div class="card-text">
324 Choose your favorite law of library science:
325 <eg-combobox formControlName="law" value="second"
326 [allowFreeText]="true" [startIdFiresOnChange]="true">
327 <eg-combobox-entry entryId="first" entryLabel="Books are for use" i18n-entryLabel></eg-combobox-entry>
328 <eg-combobox-entry entryId="second" entryLabel="Every person his or her book" i18n-entryLabel></eg-combobox-entry>
329 <eg-combobox-entry entryId="third" entryLabel="Every book its reader" i18n-entryLabel></eg-combobox-entry>
330 <eg-combobox-entry entryId="fourth" entryLabel="Save the time of the reader" i18n-entryLabel></eg-combobox-entry>
331 <eg-combobox-entry entryId="fifth" entryLabel="Library is a growing organism" i18n-entryLabel></eg-combobox-entry>
332 <eg-combobox-entry entryId="wrong" entryLabel="42" i18n-entryLabel></eg-combobox-entry>
334 <div *ngIf="!ranganathan.valid" class="alert alert-danger">
335 <span class="material-icons">error</span>
336 <span i18n>That isn't a real law of library science!</span>
341 <form class="card col-md-4" [formGroup]="badOrgForm">
342 <div class="card-body">
343 <h3 class="card-title">Another reactive form!</h3>
344 <div class="card-text">
345 <eg-org-family-select
346 formControlName="badOrgSelector"
347 labelText="Choose the fanciest libraries">
348 </eg-org-family-select>
349 <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
350 <span class="material-icons">error</span>
351 <span i18n>Too many fancy libraries!</span>
358 <button (click)="confirmNumber(1)">Confirm 1</button>
359 <button (click)="confirmNumber(0)">Confirm 0</button>
360 <button (click)="confirmNumber(20)">Confirm 20</button>
362 <eg-confirm-dialog #numConfirmDialog
364 dialogTitle="Confirm Number"
365 [dialogBodyTemplate]="confirmMsg">
367 <ng-template #confirmMsg>
368 <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
372 <eg-fm-record-editor #bresvEditor
374 hiddenFields="capture_staff,usr" readonlyFields="cancel_time">
375 </eg-fm-record-editor>
376 <button class="btn btn-info" (click)="bresvEditor.open({})">
381 <div class="row m-3 p-3 border-top border-dark">
382 <div class="col-lg-3">Simple Combobox using [(ngModel)]</div>
383 <div class="col-lg-3">
384 <eg-combobox [(ngModel)]="simpleCombo" [allowFreeText]="true">
386 entryId="abc" entryLabel="ABC" i18n-entryLabel></eg-combobox-entry>
388 entryId="def" entryLabel="DEF" i18n-entryLabel></eg-combobox-entry>
391 <div class="col-lg-3">
392 <span i18n>Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}</span>
396 <div class="mt-4 mb-4">
397 <h4>Inline FM Editor</h4>
399 <div class="col-lg-6">
400 <eg-fm-record-editor displayMode="inline"
401 idlClass="cbt" mode="update" recordId="1" orgDefaultAllowed="owner">
402 </eg-fm-record-editor>
407 <div class="mt-4 mb-4">
408 <h4>Grid Stock Selector Display and Filtering</h4>
409 <eg-grid #eventsGrid idlClass="atevdef"
410 [dataSource]="eventsDataSource"
411 showFields="name,hook,validator,reactor"
412 [sortable]="true" [filterable]="true">
413 <!-- demo how explicit fields and auto fields support link field selector
414 display and filtering consisently without additional biolerplate -->
415 <eg-grid-column name="name"></eg-grid-column>
416 <eg-grid-column name="hook"></eg-grid-column>
420 <div class="mt-4 mb-4">
421 <h4>Item (Copy) Location Selector</h4>
423 <div class="col-lg-3">
424 <eg-item-location-select permFilter="CREATE_WORKSTATION"
425 [(ngModel)]="locId" (valueChange)="aLocation = $event">
426 </eg-item-location-select>
428 <div class="col-lg-2">Selected ID: {{locId}}</div>
429 <div class="col-lg-4">
430 valueChange Handler Produced: {{aLocation ? aLocation.name() : '(none)'}}