1 <!-- idlObject and fieldName applied programmatically -->
2 <eg-translate #translator></eg-translate>
4 <eg-string #successStr text="Update Succeeded" i18n-text></eg-string>
5 <eg-string #failStr text="Update Failed" i18n-text></eg-string>
7 <eg-confirm-dialog #confirmDel
8 dialogTitle="Delete?" i18n-dialogTitle
9 dialogBody="Delete {{recordLabel}}?" i18n-dialogBody>
12 <ng-template #dialogContent>
13 <div class="modal-header" *ngIf="!hideBanner">
14 <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
15 <ng-container *ngIf="isDialog()">
16 <button type="button" class="btn-close btn-close-white"
17 i18n-title title="Close"
18 i18n-aria-label aria-label="Close" (click)="closeEditor()"></button>
21 <div class="modal-body">
22 <form #fmEditForm="ngForm" [ngClass]="idlClass"
23 class="form-validated common-form striped-odd"
24 [egDateFieldOrderList]="dateFieldOrderList">
25 <ng-container *ngIf="!record">
26 <!-- display a progress dialog while the editor
27 fetches the needed data -->
28 <eg-progress-inline></eg-progress-inline>
30 <ng-container *ngIf="record">
31 <div role="alert" class="alert alert-danger" *ngIf="fmEditForm.errors?.['datesOutOfOrder'] && (fmEditForm.touched || fmEditForm.dirty)">
32 <span class="material-icons" aria-hidden="true">error</span>
33 <span i18n class="visually-hidden">Error: </span>
34 <span i18n>Dates must be in the correct order</span>
37 <div class="form-group row" *ngFor="let field of fields" [ngClass]="field.name">
38 <div class="col-lg-3">
39 <label class="form-label" for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
41 <div class="col-lg-9">
42 <div class="fm-form-input-and-help">
43 <div class="form-text" id="{{idPrefix}}-{{field.name}}-help" *ngIf="field.helpText">
44 {{field.helpTextValue}}
46 <div class="fm-form-input">
47 <ng-container [ngSwitch]="inputType(field)">
49 <ng-container *ngSwitchCase="'template'">
51 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
55 <ng-container *ngSwitchCase="'readonly'">
56 <span>{{record[field.name]()}}</span>
59 <ng-container *ngSwitchCase="'readonly-money'">
60 <span>{{record[field.name]() | currency}}</span>
63 <ng-container *ngSwitchCase="'readonly-list'">
64 <ng-container *ngIf="field.linkedValues && field.linkedValues[0]?.label">
65 <span>{{field.linkedValues[0].label}}</span>
69 <ng-container *ngSwitchCase="'timestamp'">
71 domId="{{idPrefix}}-{{field.name}}"
72 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
73 [readOnly]="field.readOnly"
74 [ngModel]="record[field.name]()"
76 (onChangeAsIso)="record[field.name]($event)"
77 initialIso="{{record[field.name]()}}">
81 <ng-container *ngSwitchCase="'timestamp-timepicker'">
85 domId="{{idPrefix}}-{{field.name}}"
86 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
87 (onChangeAsIso)="record[field.name]($event)"
89 [readOnly]="field.readOnly"
90 [ngModel]="record[field.name]()"
92 initialIso="{{record[field.name]()}}">
96 <ng-container *ngSwitchCase="'org_unit'">
98 domId="{{idPrefix}}-{{field.name}}"
99 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
100 persistKey="{{field.persistKey}}"
101 [limitPerms]="modePerms[mode]"
102 [readOnly]="field.readOnly"
103 [applyDefault]="field.orgDefaultAllowed"
104 [applyOrgId]="record[field.name]()"
105 (onChange)="record[field.name]($event)">
109 <ng-container *ngSwitchCase="'money'">
112 type="number" step="0.1"
113 name="{{field.name}}"
114 id="{{idPrefix}}-{{field.name}}"
115 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
116 [readonly]="field.readOnly"
117 [required]="field.isRequired()"
118 [ngModel]="record[field.name]()"
119 (ngModelChange)="record[field.name]($event)"/>
122 <ng-container *ngSwitchCase="'int'">
126 name="{{field.name}}"
127 id="{{idPrefix}}-{{field.name}}"
128 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
129 [required]="field.isRequired()"
130 egMin="{{field.min}}"
131 egMax="{{field.max}}"
132 [ngModel]="record[field.name]()"
133 (ngModelChange)="record[field.name]($event)"/>
136 <ng-container *ngSwitchCase="'float'">
139 type="number" step="0.1"
140 name="{{field.name}}"
141 id="{{idPrefix}}-{{field.name}}"
142 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
143 [required]="field.isRequired()"
144 [ngModel]="record[field.name]()"
145 (ngModelChange)="record[field.name]($event)"/>
148 <ng-container *ngSwitchCase="'text'">
149 <div class="input-group">
152 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
153 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
154 type="text" pattern="[\s\S]*\S[\s\S]*"
155 [required]="field.isRequired()"
156 [ngModel]="record[field.name]()"
157 (ngModelChange)="record[field.name]($event)"/>
158 <span *ngIf="field.i18n && !field.readOnly" [ngClass]="(field.i18n && !field.readOnly) ? 'input-group-text' : null">
159 <button type="button" (click)="openTranslator(field.name)" class="btn"
160 i18n-title title="Translate" i18n-aria-label aria-label="Translate">
161 <span class="material-icons text-info" aria-hidden="true">translate</span>
167 <ng-container *ngSwitchCase="'bool'">
171 name="{{field.name}}"
172 id="{{idPrefix}}-{{field.name}}"
173 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
174 [disabled]="field.readOnly"
175 [ngModel]="record[field.name]()"
176 (ngModelChange)="record[field.name]($event)"/>
179 <ng-container *ngSwitchCase="'readonly-au'">
180 <ng-container *ngIf="field.linkedValues">
181 <a href="/eg/staff/circ/patron/{{field.linkedValues[0].id}}/checkout"
182 target="_blank" i18n-title title="Open user record in new tab"
183 i18n-aria-label aria-label="Open user record in new tab">{{field.linkedValues[0].label}}
184 <span class="material-icons" aria-hidden="true">open_in_new</span></a>
188 <ng-container *ngSwitchCase="'link'">
190 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
191 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
192 [required]="field.isRequired()"
193 [idlClass]="field.class" [asyncSupportsEmptyTermClick]="true"
194 [idlBaseQuery]="field.idlBaseQuery"
195 [idlField]="field.selector"
196 [selectedId]="record[field.name]()"
197 (onChange)="record[field.name]($event ? $event.id : null)">
201 <ng-container *ngSwitchCase="'list'">
203 domId="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
204 [attr.aria-describedby]="field.helpText ? idPrefix+'-'+field.name+'-help' : null"
205 [required]="field.isRequired()"
206 [entries]="field.linkedValues"
207 [asyncDataSource]="field.linkedValuesSource"
208 [selectedId]="record[field.name]()"
209 (onChange)="record[field.name]($event ? $event.id : null)">
212 </ng-container> <!-- switch -->
220 <div class="modal-footer">
221 <button type="button" class="btn {{action.buttonCss}}"
222 *ngFor="let action of actions" [disabled]="action.disabled"
223 (click)="action.actionClick.emit({action: action.key, record: record})">
226 <ng-container *ngIf="isDialog()">
227 <button type="button" class="btn btn-success" *ngIf="mode === 'view'"
228 (click)="closeEditor()" i18n>Close</button>
229 <button type="button" class="btn btn-normal ms-2" *ngIf="mode !== 'view'"
230 (click)="cancel()" i18n>Cancel</button>
233 <ng-container *ngIf="showDelete && mode !== 'view'">
234 <button type="button" class="btn btn-destroy" (click)="remove()"
235 [disabled]="record && record.isnew()" i18n>Delete</button>
238 <button type="button" class="btn btn-info"
239 [disabled]="fmEditForm.invalid" *ngIf="mode !== 'view'"
240 (click)="save()" i18n>Save</button>
244 <ng-container *ngIf="!isDialog()">
245 <!-- in "inline" mode, render the editor pane right here -->
246 <ng-container *ngTemplateOutlet="dialogContent">