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