LP1832146: Make sure that comboboxes don't get cut off
[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" 
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 that does not enable click if no search term is supplied"
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 <div class="row mb-3">
90   <div class="col-lg-4">
91   </div>
92   <div class="col-lg-3">
93     <eg-combobox placeholder="Combobox with @idlClass = 'aou' @idlField='shortname'" idlClass="aou" idlField="shortname" [asyncSupportsEmptyTermClick]="true">
94     </eg-combobox>
95   </div>
96   <div class="col-lg-3">
97     <eg-combobox placeholder="Combobox with @idlClass = 'cvrfm'" idlClass="cvrfm" [asyncSupportsEmptyTermClick]="true">
98     </eg-combobox>
99   </div>
100   <div class="col-lg-3">
101     <eg-combobox placeholder="Combobox with @idlClass = 'csp'" idlClass="csp" [asyncSupportsEmptyTermClick]="true">
102     </eg-combobox>
103   </div>
104 </div>
105 <div class="row mb-3">
106   <div class="col-lg-4">
107   </div>
108   <div class="col-lg-3">
109     <eg-combobox placeholder="Combobox with @idlClass = 'aou'" idlClass="aou" [asyncSupportsEmptyTermClick]="true">
110     </eg-combobox>
111   </div>
112   <div class="col-lg-3">
113   </div>
114 </div>
115 <!-- /Progress Dialog Experiments ----------------------------- -->
116
117 <!-- eg strings -->
118 <!--
119 <div class="row mb-3">
120     <eg-string #helloString text="Hello, {{name}}" i18n-text></eg-string>
121     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
122 </div>
123 -->
124
125 <div class="row mb-3">
126     <ng-template #helloStrTmpl let-name="name" i18n>Hello, {{name}}</ng-template>
127     <!--
128     <eg-string #helloStr key="helloKey" [template]="helloStrTmpl"></eg-string>
129     -->
130     <eg-string key="staff.sandbox.test" [template]="helloStrTmpl"></eg-string>
131     <button class="btn btn-success" (click)="testStrings()">Test Strings</button>
132 </div>
133
134 <div class="row">
135   <div class="form-group">
136     <eg-date-select (onChangeAsDate)="changeDate($event)"
137         initialYmd="2017-03-04">
138     </eg-date-select>
139   </div>
140   <div>HERE: {{testDate}}</div>
141 </div>
142
143 <!-- printing -->
144
145 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
146 <ng-template #printTemplate let-context>Hello, {{context.world}}!</ng-template>
147
148 <button class="btn btn-secondary" (click)="printWithDialog()">Print with dialog</button>
149
150 <br/><br/>
151 <div class="row">
152   <div class="col-lg-3">
153     <eg-translate #translate [idlObject]="oneBtype" fieldName="name"></eg-translate>
154     <button class="btn btn-info"
155       (click)="translate.open({size:'lg'})">Translate</button>
156   </div>
157 </div>
158 <br/><br/>
159
160
161 <div>
162   <h4>Cross-tab communications example</h4>
163   <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. 
164      You should see the message that you sent to the other browser tab.</p>
165 </div>
166 <div class="row">
167   <div class="col-lg-3">
168     <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
169   </div>
170   <div class="col-lg-3">
171     message received: {{sbChannelText}}
172   </div>
173 </div>
174 <br/><br/>
175
176 <ngb-accordion>
177   <ngb-panel title="Open me for comboboxes">
178     <ng-template ngbPanelContent>
179       <eg-org-select></eg-org-select>
180       <eg-combobox>
181         <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
182           i18n-entryLabel></eg-combobox-entry>
183         <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
184           i18n-entryLabel></eg-combobox-entry>
185         <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
186           i18n-entryLabel></eg-combobox-entry>
187       </eg-combobox>
188     </ng-template>
189   </ngb-panel>
190 </ngb-accordion>
191
192 <!-- grid stuff -->
193 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
194   HELLO {{userContext.hello}}
195   <button>{{row.id()}}</button>
196 </ng-template>
197 <eg-grid #cbtGrid idlClass="cbt" 
198   [dataSource]="btSource" 
199   [rowClassCallback]="btGridRowClassCallback"
200   [rowFlairIsEnabled]="true"
201   [rowFlairCallback]="btGridRowFlairCallback"
202   [cellClassCallback]="btGridCellClassCallback"
203   [stickyHeader]="true"
204   [sortable]="true">
205   <eg-grid-toolbar-action label="Action that needs a single row" i18n-label
206     (onClick)="complimentEvergreen($event)" [disableOnRows]="notOneSelectedRow">
207   </eg-grid-toolbar-action>
208   <eg-grid-toolbar-action [isSeparator]="true">
209   </eg-grid-toolbar-action>
210   <eg-grid-toolbar-action label="Another Action" i18n-label
211     (onClick)="complimentEvergreen2($event)">
212   </eg-grid-toolbar-action>
213   <eg-grid-column name="test" [cellTemplate]="cellTmpl" 
214     [cellContext]="btGridTestContext" [sortable]="false">
215   </eg-grid-column>
216   <eg-grid-column [sortable]="false" path="owner.name"></eg-grid-column>
217   <eg-grid-column [sortable]="false" path="datetime_test" 
218     datatype="timestamp" [datePlusTime]="true"></eg-grid-column>
219 </eg-grid>
220
221 <br/><br/>
222
223 <h4>Grid with filtering</h4>
224 <eg-grid #acpGrid idlClass="acp"
225   [dataSource]="acpSource"
226   [filterable]="true"
227   [sortable]="true"
228   [showLinkSelectors]="true"
229   [stickyHeader]="true"
230   showFields="barcode,location,circ_lib,price,dummy_title,create_date"
231 >
232   <eg-grid-toolbar-action label="Edit Selected" i18n-label [action]="editSelected">
233   </eg-grid-toolbar-action>
234   <eg-grid-column [sortable]="true" [filterable]="false"  path="barcode"></eg-grid-column>
235   <eg-grid-column [sortable]="true" path="circ_lib"></eg-grid-column>
236   <eg-grid-column [sortable]="true" path="price"></eg-grid-column>
237   <eg-grid-column [sortable]="true" path="dummy_title"></eg-grid-column>
238   <eg-grid-column [sortable]="true" path="create_date"></eg-grid-column>
239 </eg-grid>
240
241 <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">
242 </eg-fm-record-editor>
243 <eg-string #successString text="Updated succeeded!" i18n-text></eg-string>
244 <eg-string #updateFailedString text="Updated failed!" i18n-text></eg-string>
245
246 <h4>PCRUD auto flesh and FormatService detection</h4>
247 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
248
249 <div class="row">
250   <div class="card col-md-6">
251     <div class="card-body">
252       <h3 class="card-title">Do you like template-driven forms?</h3>
253       <div class="card-text">
254         <eg-org-family-select
255           [ancestorSelectorChecked]="true"
256           [hideDescendantSelector]="true"
257           selectedOrgId="7"
258           labelText="Choose the best libraries"
259           ngModel #bestOnes="ngModel">
260         </eg-org-family-select>
261         The best libraries are: {{bestOnes.value | json}}
262         <hr>
263         <eg-combobox [(ngModel)]="kingdom" [allowFreeText]="true">
264           <eg-combobox-entry entryId="Bacteria"></eg-combobox-entry>
265           <eg-combobox-entry entryId="Archaea"></eg-combobox-entry>
266           <eg-combobox-entry entryId="Protozoa"></eg-combobox-entry>
267           <eg-combobox-entry entryId="Chromista"></eg-combobox-entry>
268           <eg-combobox-entry entryId="Plantae"></eg-combobox-entry>
269           <eg-combobox-entry entryId="Fungi"></eg-combobox-entry>
270           <eg-combobox-entry entryId="Animalia"></eg-combobox-entry>
271         </eg-combobox>
272       Result: {{kingdom | json}}
273         <hr>
274         <eg-date-select [(ngModel)]="dateObject">
275         </eg-date-select>
276       ngModel: {{dateObject.toLocaleDateString()}}
277       </div>
278     </div>
279   </div>
280   <form class="card col-md-4" [formGroup]="ranganathan">
281     <div class="card-body">
282       <h3 class="card-title">Or perhaps reactive forms interest you?</h3>
283       <div class="card-text">
284         Choose your favorite law of library science: 
285         <eg-combobox formControlName="law" value="second" 
286           [allowFreeText]="true" [startIdFiresOnChange]="true">
287           <eg-combobox-entry entryId="first" entryLabel="Books are for use" i18n-entryLabel></eg-combobox-entry>
288           <eg-combobox-entry entryId="second" entryLabel="Every person his or her book" i18n-entryLabel></eg-combobox-entry>
289           <eg-combobox-entry entryId="third" entryLabel="Every book its reader" i18n-entryLabel></eg-combobox-entry>
290           <eg-combobox-entry entryId="fourth" entryLabel="Save the time of the reader" i18n-entryLabel></eg-combobox-entry>
291           <eg-combobox-entry entryId="fifth" entryLabel="Library is a growing organism" i18n-entryLabel></eg-combobox-entry>
292           <eg-combobox-entry entryId="wrong" entryLabel="42" i18n-entryLabel></eg-combobox-entry>
293         </eg-combobox>
294         <div *ngIf="!ranganathan.valid" class="alert alert-danger">
295           <span class="material-icons">error</span>
296           <span i18n>That isn't a real law of library science!</span>
297         </div>
298       </div>
299     </div>
300   </form>
301   <form class="card col-md-4" [formGroup]="badOrgForm">
302     <div class="card-body">
303       <h3 class="card-title">Another reactive form!</h3>
304       <div class="card-text">
305         <eg-org-family-select
306           formControlName="badOrgSelector"
307           labelText="Choose the fanciest libraries">
308         </eg-org-family-select>
309         <div *ngIf="!badOrgForm.valid" class="alert alert-danger">
310           <span class="material-icons">error</span>
311           <span i18n>Too many fancy libraries!</span>
312         </div>
313       </div>
314     </div>
315   </form>
316 </div>
317
318 <button (click)="confirmNumber(1)">Confirm 1</button>
319 <button (click)="confirmNumber(0)">Confirm 0</button>
320 <button (click)="confirmNumber(20)">Confirm 20</button>
321
322 <eg-confirm-dialog #numConfirmDialog
323   i18n-dialogTitle
324   dialogTitle="Confirm Number"
325   [dialogBodyTemplate]="confirmMsg">
326 </eg-confirm-dialog>
327 <ng-template #confirmMsg>
328   <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
329 </ng-template>
330
331 <div class="row">
332   <eg-fm-record-editor #bresvEditor
333     idlClass="bresv"
334     hiddenFields="capture_staff,usr" readonlyFields="cancel_time">
335   </eg-fm-record-editor>
336   <button class="btn btn-info" (click)="bresvEditor.open({})">
337     Test Readonly Date
338   </button>
339 </div>
340
341 <div class="row m-3 p-3 border-top border-dark">
342   <div class="col-lg-3">Simple Combobox using [(ngModel)]</div>
343   <div class="col-lg-3">
344     <eg-combobox [(ngModel)]="simpleCombo" [allowFreeText]="true">
345       <eg-combobox-entry 
346         entryId="abc" entryLabel="ABC" i18n-entryLabel></eg-combobox-entry>
347       <eg-combobox-entry 
348         entryId="def" entryLabel="DEF" i18n-entryLabel></eg-combobox-entry>
349     </eg-combobox>
350   </div>
351   <div class="col-lg-3">
352     <span i18n>Combobox Value: {{simpleCombo ? simpleCombo.label : ''}}</span>
353   </div>
354 </div>
355