LP1811288 Angular fm-editor uses combobox
[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="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
15         </div>
16         <div class="col-lg-7">
17
18           <ng-container [ngSwitch]="inputType(field)">
19
20             <ng-container *ngSwitchCase="'template'">
21               <ng-container
22                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
23               </ng-container> 
24             </ng-container> 
25
26             <ng-container *ngSwitchCase="'readonly'">
27               <span>{{record[field.name]()}}</span>
28             </ng-container>
29
30             <ng-container *ngSwitchCase="'readonly-money'">
31               <span>{{record[field.name]() | currency}}</span>
32             </ng-container>
33
34             <ng-container *ngSwitchCase="'readonly-list'">
35               <ng-container *ngIf="field.linkedValues">
36                 <span>{{field.linkedValues[0].label}}</span>
37               </ng-container>
38             </ng-container>
39
40             <ng-container *ngSwitchCase="'timestamp'">
41               <eg-date-select
42                 domId="{{idPrefix}}-{{field.name}}"
43                 (onChangeAsIso)="record[field.name]($event)"
44                 initialIso="{{record[field.name]()}}">
45               </eg-date-select>
46             </ng-container>
47
48             <ng-container *ngSwitchCase="'org_unit'">
49               <eg-org-select
50                 placeholder="{{field.label}}..."
51                 i18n-placeholder
52                 domId="{{idPrefix}}-{{field.name}}"
53                 [limitPerms]="modePerms[mode]"
54                 [readOnly]="field.readOnly"
55                 [applyDefault]="field.orgDefaultAllowed"
56                 [initialOrgId]="record[field.name]()"
57                 (onChange)="record[field.name]($event)">
58               </eg-org-select>
59             </ng-container>
60           
61             <ng-container *ngSwitchCase="'money'">
62               <input
63                 class="form-control"
64                 type="number" step="0.1"
65                 name="{{field.name}}"
66                 id="{{idPrefix}}-{{field.name}}"
67                 placeholder="{{field.label}}..."
68                 i18n-placeholder
69                 [readonly]="field.readOnly"
70                 [required]="field.isRequired()"
71                 [ngModel]="record[field.name]()"
72                 (ngModelChange)="record[field.name]($event)"/>
73             </ng-container>
74
75             <ng-container *ngSwitchCase="'int'">
76               <input
77                 class="form-control"
78                 type="number"
79                 name="{{field.name}}"
80                 id="{{idPrefix}}-{{field.name}}"
81                 placeholder="{{field.label}}..."
82                 i18n-placeholder
83                 [required]="field.isRequired()"
84                 [ngModel]="record[field.name]()"
85                 (ngModelChange)="record[field.name]($event)"/>
86             </ng-container>
87
88             <ng-container *ngSwitchCase="'float'">
89               <input
90                 class="form-control"
91                 type="number" step="0.1"
92                 name="{{field.name}}"
93                 id="{{idPrefix}}-{{field.name}}"
94                 placeholder="{{field.label}}..."
95                 i18n-placeholder
96                 [required]="field.isRequired()"
97                 [ngModel]="record[field.name]()"
98                 (ngModelChange)="record[field.name]($event)"/>
99             </ng-container>
100
101             <ng-container *ngSwitchCase="'text'">
102               <input
103                 class="form-control"
104                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
105                 type="text"
106                 placeholder="{{field.label}}..." i18n-placeholder
107                 [required]="field.isRequired()"
108                 [ngModel]="record[field.name]()"
109                 (ngModelChange)="record[field.name]($event)"/>
110             </ng-container>
111
112             <ng-container *ngSwitchCase="'bool'">
113               <input
114                 class="form-check-input"
115                 type="checkbox"
116                 name="{{field.name}}"
117                 id="{{idPrefix}}-{{field.name}}"
118                 [disabled]="field.readOnly"
119                 [ngModel]="record[field.name]()"
120                 (ngModelChange)="record[field.name]($event)"/>
121             </ng-container>
122   
123             <ng-container *ngSwitchCase="'list'">
124               <eg-combobox
125                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
126                 placeholder="{{field.label}}..." i18n-placeholder 
127                 [required]="field.isRequired()"
128                 [entries]="field.linkedValues"
129                 [asyncDataSource]="field.linkedValuesSource"
130                 [startId]="record[field.name]()"
131                 (onChange)="record[field.name]($event ? $event.id : null)">
132               </eg-combobox>
133             </ng-container>
134           </ng-container> <!-- switch -->
135         </div>
136       </div>
137     </form>
138   </div>
139   <div class="modal-footer">
140     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
141       (click)="close()" i18n>Close</button>
142     <button type="button" class="btn btn-info" 
143       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
144       (click)="save()" i18n>Save</button>
145     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
146       (click)="cancel()" i18n>Cancel</button>
147   </div>
148 </ng-template>