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 <eg-confirm-dialog #confirmDel
   8   dialogTitle="Delete?" i18n-dialogTitle
   9   dialogBody="Delete {{recordLabel}}?" i18n-dialogBody>
  10 </eg-confirm-dialog>
  11
  12 <ng-template #dialogContent>
  13   <div class="modal-header bg-info" *ngIf="!hideBanner">
  14     <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
  15     <ng-container *ngIf="isDialog()">
  16       <button type="button" class="close"
  17         i18n-aria-label aria-label="Close" (click)="closeEditor()">
  18         <span aria-hidden="true">&times;</span>
  19       </button>
  20     </ng-container>
  21   </div>
  22   <div class="modal-body">
  23     <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
  24       <ng-container *ngIf="!record">
  25         <!-- display a progress dialog while the editor
  26             fetches the needed data -->
  27         <eg-progress-inline></eg-progress-inline>
  28       </ng-container>
  29       <ng-container *ngIf="record">
  30       <div class="form-group row" *ngFor="let field of fields">
  31         <div class="col-lg-3">
  32           <label for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
  33           <eg-help-popover [placement]="'right'" *ngIf="field.helpText" helpText="{{field.helpTextValue}}"></eg-help-popover>
  34         </div>
  35         <div class="col-lg-9">
  36
  37           <ng-container [ngSwitch]="inputType(field)">
  38
  39             <ng-container *ngSwitchCase="'template'">
  40               <ng-container
  41                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
  42               </ng-container>
  43             </ng-container>
  44
  45             <ng-container *ngSwitchCase="'readonly'">
  46               <span>{{record[field.name]()}}</span>
  47             </ng-container>
  48
  49             <ng-container *ngSwitchCase="'readonly-money'">
  50               <span>{{record[field.name]() | currency}}</span>
  51             </ng-container>
  52
  53             <ng-container *ngSwitchCase="'readonly-list'">
  54               <ng-container *ngIf="field.linkedValues && field.linkedValues[0]?.label">
  55                 <span>{{field.linkedValues[0].label}}</span>
  56               </ng-container>
  57             </ng-container>
  58
  59             <ng-container *ngSwitchCase="'timestamp'">
  60               <eg-date-select
  61                 domId="{{idPrefix}}-{{field.name}}"
  62                 [readOnly]="field.readOnly"
  63                 (onChangeAsIso)="record[field.name]($event)"
  64                 initialIso="{{record[field.name]()}}">
  65               </eg-date-select>
  66             </ng-container>
  67
  68             <ng-container *ngSwitchCase="'timestamp-timepicker'">
  69               <eg-datetime-select
  70                 [showTZ]="timezone"
  71                 [timezone]="timezone"
  72                 domId="{{idPrefix}}-{{field.name}}"
  73                 (onChangeAsIso)="record[field.name]($event)"
  74                 i18n-validatorError
  75                 [readOnly]="field.readOnly"
  76                 initialIso="{{record[field.name]()}}">
  77               </eg-datetime-select>
  78             </ng-container>
  79
  80             <ng-container *ngSwitchCase="'org_unit'">
  81               <eg-org-select
  82                 placeholder="{{field.label}}..."
  83                 i18n-placeholder
  84                 domId="{{idPrefix}}-{{field.name}}"
  85                 [limitPerms]="modePerms[mode]"
  86                 [readOnly]="field.readOnly"
  87                 [applyDefault]="field.orgDefaultAllowed"
  88                 [applyOrgId]="record[field.name]()"
  89                 (onChange)="record[field.name]($event)">
  90               </eg-org-select>
  91             </ng-container>
  92
  93             <ng-container *ngSwitchCase="'money'">
  94               <input
  95                 class="form-control"
  96                 type="number" step="0.1"
  97                 name="{{field.name}}"
  98                 id="{{idPrefix}}-{{field.name}}"
  99                 placeholder="{{field.label}}..."
 100                 i18n-placeholder
 101                 [readonly]="field.readOnly"
 102                 [required]="field.isRequired()"
 103                 [ngModel]="record[field.name]()"
 104                 (ngModelChange)="record[field.name]($event)"/>
 105             </ng-container>
 106
 107             <ng-container *ngSwitchCase="'int'">
 108               <input
 109                 class="form-control"
 110                 type="number"
 111                 name="{{field.name}}"
 112                 id="{{idPrefix}}-{{field.name}}"
 113                 placeholder="{{field.label}}..."
 114                 i18n-placeholder
 115                 [required]="field.isRequired()"
 116                 egMin="{{field.min}}"
 117                 egMax="{{field.max}}"
 118                 [ngModel]="record[field.name]()"
 119                 (ngModelChange)="record[field.name]($event)"/>
 120             </ng-container>
 121
 122             <ng-container *ngSwitchCase="'float'">
 123               <input
 124                 class="form-control"
 125                 type="number" step="0.1"
 126                 name="{{field.name}}"
 127                 id="{{idPrefix}}-{{field.name}}"
 128                 placeholder="{{field.label}}..."
 129                 i18n-placeholder
 130                 [required]="field.isRequired()"
 131                 [ngModel]="record[field.name]()"
 132                 (ngModelChange)="record[field.name]($event)"/>
 133             </ng-container>
 134
 135             <ng-container *ngSwitchCase="'text'">
 136               <input
 137                 class="form-control"
 138                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 139                 type="text" pattern="[\s\S]*\S[\s\S]*"
 140                 placeholder="{{field.label}}..." i18n-placeholder
 141                 [required]="field.isRequired()"
 142                 [ngModel]="record[field.name]()"
 143                 (ngModelChange)="record[field.name]($event)"/>
 144             </ng-container>
 145
 146             <ng-container *ngSwitchCase="'bool'">
 147               <input
 148                 class="form-check-input"
 149                 type="checkbox"
 150                 name="{{field.name}}"
 151                 id="{{idPrefix}}-{{field.name}}"
 152                 [disabled]="field.readOnly"
 153                 [ngModel]="record[field.name]()"
 154                 (ngModelChange)="record[field.name]($event)"/>
 155             </ng-container>
 156
 157             <ng-container *ngSwitchCase="'readonly-au'">
 158               <ng-container *ngIf="field.linkedValues">
 159                 <a href="/eg/staff/circ/patron/{{field.linkedValues[0].id}}/checkout" target="_blank">{{field.linkedValues[0].label}}
 160                 <span class="material-icons" i18n-title title="Open user record in new tab">open_in_new</span></a>
 161               </ng-container>
 162             </ng-container>
 163
 164             <ng-container *ngSwitchCase="'link'">
 165               <eg-combobox
 166                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 167                 placeholder="{{field.label}}..." i18n-placeholder
 168                 [required]="field.isRequired()"
 169                 [idlClass]="field.class" [asyncSupportsEmptyTermClick]="true"
 170                 [idlBaseQuery]="field.idlBaseQuery"
 171                 [idlField]="field.selector"
 172                 [selectedId]="record[field.name]()"
 173                 (onChange)="record[field.name]($event ? $event.id : null)">
 174               </eg-combobox>
 175             </ng-container>
 176
 177             <ng-container *ngSwitchCase="'list'">
 178               <eg-combobox
 179                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 180                 placeholder="{{field.label}}..." i18n-placeholder
 181                 [required]="field.isRequired()"
 182                 [entries]="field.linkedValues"
 183                 [asyncDataSource]="field.linkedValuesSource"
 184                 [selectedId]="record[field.name]()"
 185                 (onChange)="record[field.name]($event ? $event.id : null)">
 186               </eg-combobox>
 187             </ng-container>
 188           </ng-container> <!-- switch -->
 189         </div>
 190         <div class="col-lg-1" *ngIf="field.i18n && !field.readOnly">
 191           <a (click)="openTranslator(field.name)"
 192             i18n-title title="Translate">
 193             <button class="btn btn-outline-info mat-icon-in-button">
 194               <span class="material-icons">translate</span>
 195             </button>
 196           </a>
 197         </div>
 198       </div>
 199       </ng-container>
 200     </form>
 201   </div>
 202   <div class="modal-footer">
 203     <button type="button" class="btn {{action.buttonCss}}"
 204       *ngFor="let action of actions" [disabled]="action.disabled"
 205       (click)="action.actionClick.emit({action: action.key, record: record})">
 206       {{action.label}}
 207     </button>
 208     <ng-container *ngIf="isDialog()">
 209       <button type="button" class="btn btn-success" *ngIf="mode === 'view'"
 210         (click)="closeEditor()" i18n>Close</button>
 211       <button type="button" class="btn btn-warning ml-2" *ngIf="mode !== 'view'"
 212         (click)="cancel()" i18n>Cancel</button>
 213     </ng-container>
 214
 215     <ng-container *ngIf="showDelete && mode !== 'view'">
 216       <button type="button" class="btn btn-warning" (click)="remove()"
 217         [disabled]="record && record.isnew()" i18n>Delete</button>
 218     </ng-container>
 219
 220     <button type="button" class="btn btn-info"
 221       [disabled]="fmEditForm.invalid" *ngIf="mode !== 'view'"
 222       (click)="save()" i18n>Save</button>
 223   </div>
 224 </ng-template>
 225
 226 <ng-container *ngIf="!isDialog()">
 227   <!-- in "inline" mode, render the editor pane right here -->
 228   <ng-container *ngTemplateOutlet="dialogContent">
 229   </ng-container>
 230 </ng-container>
 231