LP#1779158 Vandelay UI accessibilty/usability improvements
[Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / cat / vandelay / export.component.html
1 <h2 i18n>Export Records</h2>
2
3 <div class="common-form striped-even form-validated">
4   <div class="row">
5     <div class="col-lg-6">
6       <div class="row"><label>Select a Record Source</label></div>
7       <ngb-accordion [closeOthers]="true" activeIds="csv" 
8         (panelChange)="sourceChange($event)">
9         <ngb-panel id="csv" title="CSV File">
10           <ng-template ngbPanelContent>
11             <div class="row">
12               <div class="col-lg-6">
13                 <label for="csv-input" i18n>Use Field Number</label>
14               </div>
15               <div class="col-lg-6">
16                 <input id='csv-input' type="number" class="form-control" 
17                   [(ngModel)]="fieldNumber"
18                   i18n-placeholder placeholder="Starts at 0..."/>
19               </div>
20             </div>
21             <div class="row">
22               <div class="col-lg-6">
23                 <label for="use-csv-file" i18n>From CSV file</label>
24               </div>
25               <div class="col-lg-6">
26                 <input #fileSelector (change)="fileSelected($event)" 
27                   id="use-csv-file" class="form-control" type="file"/>
28               </div>
29             </div>
30           </ng-template>
31         </ngb-panel>
32         <ngb-panel id="record-id" title="Record ID">
33           <ng-template ngbPanelContent>
34             <div class="row">
35               <div class="col-lg-6">
36                 <label for="record-id-input" i18n>Record ID</label>
37               </div>
38               <div class="col-lg-6">
39                 <input id='record-id-input' type="number" 
40                   class="form-control" [(ngModel)]="recordId"/>
41               </div>
42             </div>
43           </ng-template>
44         </ngb-panel>
45         <ngb-panel id="bucket-id" title="Bucket">
46           <ng-template ngbPanelContent>
47             <div class="row">
48               <div class="col-lg-6">
49                 <label for="bucket-id-input" i18n>Bucket ID</label>
50               </div>
51               <div class="col-lg-6">
52                 <input id='bucket-id-input' type="number" 
53                   class="form-control" [(ngModel)]="bucketId"/>
54               </div>
55             </div>
56           </ng-template>
57         </ngb-panel>
58       </ngb-accordion>
59     </div><!-- col -->
60     <div class="col-lg-6">
61       <div class="row">
62         <div class="col-lg-6">
63           <label for="record-type" i18n>Record Type</label>
64         </div>
65         <div class="col-lg-6">
66           <select class="form-control" 
67             [(ngModel)]="recordType" id="record-type">
68             <option i18n value="biblio">Bibliographic Records</option>
69             <option i18n value="authority">Authority Records</option>
70           </select>
71         </div>
72       </div>
73       <div class="row">
74         <div class="col-lg-6">
75           <label for="record-format" i18n>Record Format</label>
76         </div>
77         <div class="col-lg-6">
78           <select class="form-control" 
79             [(ngModel)]="recordFormat" id="record-format">
80             <option i18n value="USMARC">MARC21</option>
81             <option i18n value="UNIMARC">UNIMARC</option>
82             <option i18n value="XML">MARC XML</option>
83             <option i18n value="BRE">Evergreen Record Entry</option>
84           </select>
85         </div>
86       </div>
87       <div class="row">
88         <div class="col-lg-6">
89           <label for="record-encoding" i18n>Record Encoding</label>
90         </div>
91         <div class="col-lg-6">
92           <select class="form-control" 
93             [(ngModel)]="recordEncoding" id="record-encoding">
94             <option i18n value="UTF-8">UTF-8</option>
95             <option i18n value="MARC8">MARC8</option>
96           </select>
97         </div>
98       </div>
99       <div class="row">
100         <div class="col-lg-6">
101           <label for="include-holdings" i18n>
102             Include holdings in Bibliographic Records
103           </label>
104         </div>
105         <div class="col-lg-6">
106           <input class="form-check-input" type="checkbox" 
107             [(ngModel)]="includeHoldings" id="include-holdings">
108         </div>
109       </div>
110       <div class="row">
111         <div class="col-lg-10 offset-lg-1">
112           <button class="btn btn-success btn-lg btn-block font-weight-bold"
113             [disabled]="isExporting || !hasNeededData()" 
114             (click)="exportRecords()" i18n>Export</button>
115         </div>
116       </div>
117       <div class="row" [hidden]="!isExporting">
118         <div class="col-lg-10 offset-lg-1">
119           <eg-progress-inline #exportProgress></eg-progress-inline>
120         </div>
121       </div>
122     </div><!-- left col -->
123   </div><!-- row -->
124 </div>
125