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