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