LP1807523: Associating labels and inputs in angular fmeditor
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / share / fm-editor / fm-editor.component.html
1 <ng-template #dialogContent>
2   <div class="modal-header bg-info">
3     <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
4     <button type="button" class="close" 
5       i18n-aria-label aria-label="Close" 
6       (click)="dismiss('cross_click')">
7       <span aria-hidden="true">&times;</span>
8     </button>
9   </div>
10   <div class="modal-body">
11     <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
12       <div class="form-group row" *ngFor="let field of fields">
13         <div class="col-lg-3 offset-lg-1">
14           <label for="rec-{{field.name}}">{{field.label}}</label>
15         </div>
16         <div class="col-lg-7">
17
18           <span *ngIf="field.template">
19             <ng-container
20               *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
21             </ng-container> 
22           </span>
23
24           <span *ngIf="!field.template">
25
26             <span *ngIf="field.datatype == 'id' && !pkeyIsEditable">
27               {{record[field.name]()}}
28             </span>
29   
30             <input *ngIf="field.datatype == 'id' && pkeyIsEditable"
31               class="form-control"
32               name="{{field.name}}"
33               id="rec-{{field.name}}"
34               placeholder="{{field.label}}..."
35               i18n-placeholder
36               [readonly]="field.readOnly"
37               [required]="field.isRequired()"
38               [ngModel]="record[field.name]()"
39               (ngModelChange)="record[field.name]($event)"/>
40   
41             <input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
42               class="form-control"
43               name="{{field.name}}"
44               id="rec-{{field.name}}"
45               placeholder="{{field.label}}..."
46               i18n-placeholder
47               [readonly]="field.readOnly"
48               [required]="field.isRequired()"
49               [ngModel]="record[field.name]()"
50               (ngModelChange)="record[field.name]($event)"/>
51
52             <span *ngIf="field.datatype == 'timestamp'">
53               <eg-date-select
54                 domId="rec-{{field.name}}"
55                 (onChangeAsIso)="record[field.name]($event)"
56                 initialIso="{{record[field.name]()}}">
57               </eg-date-select>
58             </span>
59
60             <input *ngIf="field.datatype == 'int'"
61               class="form-control"
62               type="number"
63               name="{{field.name}}"
64               id="rec-{{field.name}}"
65               placeholder="{{field.label}}..."
66               i18n-placeholder
67               [readonly]="field.readOnly"
68               [required]="field.isRequired()"
69               [ngModel]="record[field.name]()"
70               (ngModelChange)="record[field.name]($event)"/>
71   
72             <input *ngIf="field.datatype == 'float'"
73               class="form-control"
74               type="number" step="0.1"
75               name="{{field.name}}"
76               id="rec-{{field.name}}"
77               placeholder="{{field.label}}..."
78               i18n-placeholder
79               [readonly]="field.readOnly"
80               [required]="field.isRequired()"
81               [ngModel]="record[field.name]()"
82               (ngModelChange)="record[field.name]($event)"/>
83   
84             <span *ngIf="field.datatype == 'money'">
85               <!-- in read-only mode display the local-aware currency -->
86               <input *ngIf="field.readOnly"
87                 class="form-control"
88                 type="number" step="0.1"
89                 name="{{field.name}}"
90                 id="rec-{{field.name}}"
91                 [readonly]="field.readOnly"
92                 [required]="field.isRequired()"
93                 [ngModel]="record[field.name]() | currency"/>
94   
95               <input *ngIf="!field.readOnly"
96                 class="form-control"
97                 type="number" step="0.1"
98                 name="{{field.name}}"
99                 id="rec-{{field.name}}"
100                 placeholder="{{field.label}}..."
101                 i18n-placeholder
102                 [readonly]="field.readOnly"
103                 [required]="field.isRequired()"
104                 [ngModel]="record[field.name]()"
105                 (ngModelChange)="record[field.name]($event)"/>
106             </span>
107   
108             <input *ngIf="field.datatype == 'bool'"
109               class="form-check-input"
110               type="checkbox"
111               name="{{field.name}}"
112               id="rec-{{field.name}}"
113               [readonly]="field.readOnly"
114               [ngModel]="record[field.name]()"
115               (ngModelChange)="record[field.name]($event)"/>
116   
117             <span *ngIf="field.datatype == 'link'"
118               [ngClass]="{nullable : !field.isRequired()}">
119               <select
120                 class="form-control"
121                 name="{{field.name}}"
122                 id="rec-{{field.name}}"
123                 [disabled]="field.readOnly"
124                 [required]="field.isRequired()"
125                 [ngModel]="record[field.name]()"
126                 (ngModelChange)="record[field.name]($event)">
127                 <option *ngFor="let item of field.linkedValues" 
128                   [value]="item.id">{{item.name}}</option>
129               </select>
130             </span>
131   
132             <eg-org-select *ngIf="field.datatype == 'org_unit'"
133               placeholder="{{field.label}}..."
134               i18n-placeholder
135               domId="rec-{{field.name}}"
136               [limitPerms]="modePerms[mode]"
137               [applyDefault]="field.orgDefaultAllowed"
138               [initialOrgId]="record[field.name]()"
139               (onChange)="record[field.name]($event)">
140             </eg-org-select>
141
142           </span>
143         </div>
144       </div>
145     </form>
146   </div>
147   <div class="modal-footer">
148     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
149       (click)="close()" i18n>Close</button>
150     <button type="button" class="btn btn-info" 
151       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
152       (click)="save()" i18n>Save</button>
153     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
154       (click)="cancel()" i18n>Cancel</button>
155   </div>
156 </ng-template>