LP1809288 Angular fm-editor read-only additions
[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           <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             <ng-container *ngIf="field.datatype == 'id' && pkeyIsEditable">
31               <ng-container *ngIf="field.readOnly">
32                 <span>{{record[field.name]()}}</span>
33               </ng-container>
34               <ng-container *ngIf="!field.readOnly">
35                 <input
36                   class="form-control"
37                   name="{{field.name}}"
38                   id="{{idPrefix}}-{{field.name}}"
39                   placeholder="{{field.label}}..."
40                   i18n-placeholder
41                   [required]="field.isRequired()"
42                   [ngModel]="record[field.name]()"
43                   (ngModelChange)="record[field.name]($event)"/>
44               </ng-container>
45             </ng-container>
46   
47             <ng-container 
48               *ngIf="field.datatype == 'text' || field.datatype == 'interval'">
49               <ng-container *ngIf="field.readOnly">
50                 <span>{{record[field.name]()}}</span>
51               </ng-container>
52               <ng-container *ngIf="!field.readOnly">
53                 <input
54                   class="form-control"
55                   name="{{field.name}}"
56                   id="{{idPrefix}}-{{field.name}}"
57                   placeholder="{{field.label}}..."
58                   i18n-placeholder
59                   [required]="field.isRequired()"
60                   [ngModel]="record[field.name]()"
61                   (ngModelChange)="record[field.name]($event)"/>
62               </ng-container>
63             </ng-container>
64
65             <!-- TODO: add support to eg-date-select for read-only view -->
66             <span *ngIf="field.datatype == 'timestamp'">
67               <eg-date-select
68                 domId="{{idPrefix}}-{{field.name}}"
69                 (onChangeAsIso)="record[field.name]($event)"
70                 initialIso="{{record[field.name]()}}">
71               </eg-date-select>
72             </span>
73
74             <ng-container *ngIf="field.datatype == 'int'">
75               <ng-container *ngIf="field.readOnly">
76                 <span>{{record[field.name]()}}</span>
77               </ng-container>
78               <ng-container *ngIf="!field.readOnly">
79
80               <input
81                 class="form-control"
82                 type="number"
83                 name="{{field.name}}"
84                 id="{{idPrefix}}-{{field.name}}"
85                 placeholder="{{field.label}}..."
86                 i18n-placeholder
87                 [required]="field.isRequired()"
88                 [ngModel]="record[field.name]()"
89                 (ngModelChange)="record[field.name]($event)"/>
90               </ng-container>
91             </ng-container>
92
93             <ng-container *ngIf="field.datatype == 'float'">
94               <ng-container *ngIf="field.readOnly">
95                 <span>{{record[field.name]()}}</span>
96               </ng-container>
97               <ng-container *ngIf="!field.readOnly">
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             </ng-container>
110       
111             <ng-container *ngIf="field.datatype == 'money'">
112               <ng-container *ngIf="field.readOnly">
113                 <span>{{record[field.name]() | currency}}</span>
114               </ng-container>
115               <ng-container *ngIf="!field.readOnly">
116                 <input
117                   class="form-control"
118                   type="number" step="0.1"
119                   name="{{field.name}}"
120                   id="{{idPrefix}}-{{field.name}}"
121                   placeholder="{{field.label}}..."
122                   i18n-placeholder
123                   [readonly]="field.readOnly"
124                   [required]="field.isRequired()"
125                   [ngModel]="record[field.name]()"
126                   (ngModelChange)="record[field.name]($event)"/>
127               </ng-container>
128             </ng-container>
129   
130             <input *ngIf="field.datatype == 'bool'"
131               class="form-check-input"
132               type="checkbox"
133               name="{{field.name}}"
134               id="{{idPrefix}}-{{field.name}}"
135               [disabled]="field.readOnly"
136               [ngModel]="record[field.name]()"
137               (ngModelChange)="record[field.name]($event)"/>
138   
139             <ng-container *ngIf="field.datatype == 'link'">
140               <ng-container *ngIf="field.readOnly">
141                 <!-- in readOnly mode, if a value is presetn, it will
142                     live as the only item in the linkedValues array -->
143                 <ng-container *ngIf="field.linkedValues[0]">
144                   <span>{{field.linkedValues[0].name}}</span>
145                 </ng-container>
146               </ng-container>
147               <ng-container *ngIf="!field.readOnly">
148                 <span [ngClass]="{nullable : !field.isRequired()}">
149                   <select
150                     class="form-control"
151                     name="{{field.name}}"
152                     id="{{idPrefix}}-{{field.name}}"
153                     [required]="field.isRequired()"
154                     [ngModel]="record[field.name]()"
155                     (ngModelChange)="record[field.name]($event)">
156                     <option *ngFor="let item of field.linkedValues" 
157                       [value]="item.id">{{item.name}}</option>
158                   </select>
159                 </span>
160               </ng-container>
161             </ng-container>
162   
163             <eg-org-select *ngIf="field.datatype == 'org_unit'"
164               placeholder="{{field.label}}..."
165               i18n-placeholder
166               domId="{{idPrefix}}-{{field.name}}"
167               [limitPerms]="modePerms[mode]"
168               [readOnly]="field.readOnly"
169               [applyDefault]="field.orgDefaultAllowed"
170               [initialOrgId]="record[field.name]()"
171               (onChange)="record[field.name]($event)">
172             </eg-org-select>
173
174           </span>
175         </div>
176       </div>
177     </form>
178   </div>
179   <div class="modal-footer">
180     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
181       (click)="close()" i18n>Close</button>
182     <button type="button" class="btn btn-info" 
183       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
184       (click)="save()" i18n>Save</button>
185     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
186       (click)="cancel()" i18n>Cancel</button>
187   </div>
188 </ng-template>