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         </div>
  34         <div class="col-lg-9">
  35
  36           <ng-container [ngSwitch]="inputType(field)">
  37
  38             <ng-container *ngSwitchCase="'template'">
  39               <ng-container
  40                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
  41               </ng-container>
  42             </ng-container>
  43
  44             <ng-container *ngSwitchCase="'readonly'">
  45               <span>{{record[field.name]()}}</span>
  46             </ng-container>
  47
  48             <ng-container *ngSwitchCase="'readonly-money'">
  49               <span>{{record[field.name]() | currency}}</span>
  50             </ng-container>
  51
  52             <ng-container *ngSwitchCase="'readonly-list'">
  53               <ng-container *ngIf="field.linkedValues">
  54                 <span>{{field.linkedValues[0].label}}</span>
  55               </ng-container>
  56             </ng-container>
  57
  58             <ng-container *ngSwitchCase="'timestamp'">
  59               <eg-date-select
  60                 domId="{{idPrefix}}-{{field.name}}"
  61                 [readOnly]="field.readOnly"
  62                 (onChangeAsIso)="record[field.name]($event)"
  63                 initialIso="{{record[field.name]()}}">
  64               </eg-date-select>
  65             </ng-container>
  66
  67             <ng-container *ngSwitchCase="'timestamp-timepicker'">
  68               <eg-datetime-select
  69                 [showTZ]="timezone"
  70                 [timezone]="timezone"
  71                 domId="{{idPrefix}}-{{field.name}}"
  72                 (onChangeAsIso)="record[field.name]($event)"
  73                 i18n-validatorError
  74                 [readOnly]="field.readOnly"
  75                 initialIso="{{record[field.name]()}}">
  76               </eg-datetime-select>
  77             </ng-container>
  78
  79             <ng-container *ngSwitchCase="'org_unit'">
  80               <eg-org-select
  81                 placeholder="{{field.label}}..."
  82                 i18n-placeholder
  83                 domId="{{idPrefix}}-{{field.name}}"
  84                 [limitPerms]="modePerms[mode]"
  85                 [readOnly]="field.readOnly"
  86                 [applyDefault]="field.orgDefaultAllowed"
  87                 [applyOrgId]="record[field.name]()"
  88                 (onChange)="record[field.name]($event)">
  89               </eg-org-select>
  90             </ng-container>
  91
  92             <ng-container *ngSwitchCase="'money'">
  93               <input
  94                 class="form-control"
  95                 type="number" step="0.1"
  96                 name="{{field.name}}"
  97                 id="{{idPrefix}}-{{field.name}}"
  98                 placeholder="{{field.label}}..."
  99                 i18n-placeholder
 100                 [readonly]="field.readOnly"
 101                 [required]="field.isRequired()"
 102                 [ngModel]="record[field.name]()"
 103                 (ngModelChange)="record[field.name]($event)"/>
 104             </ng-container>
 105
 106             <ng-container *ngSwitchCase="'int'">
 107               <input
 108                 class="form-control"
 109                 type="number"
 110                 name="{{field.name}}"
 111                 id="{{idPrefix}}-{{field.name}}"
 112                 placeholder="{{field.label}}..."
 113                 i18n-placeholder
 114                 [required]="field.isRequired()"
 115                 [ngModel]="record[field.name]()"
 116                 (ngModelChange)="record[field.name]($event)"/>
 117             </ng-container>
 118
 119             <ng-container *ngSwitchCase="'float'">
 120               <input
 121                 class="form-control"
 122                 type="number" step="0.1"
 123                 name="{{field.name}}"
 124                 id="{{idPrefix}}-{{field.name}}"
 125                 placeholder="{{field.label}}..."
 126                 i18n-placeholder
 127                 [required]="field.isRequired()"
 128                 [ngModel]="record[field.name]()"
 129                 (ngModelChange)="record[field.name]($event)"/>
 130             </ng-container>
 131
 132             <ng-container *ngSwitchCase="'text'">
 133               <input
 134                 class="form-control"
 135                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 136                 type="text"
 137                 placeholder="{{field.label}}..." i18n-placeholder
 138                 [required]="field.isRequired()"
 139                 [ngModel]="record[field.name]()"
 140                 (ngModelChange)="record[field.name]($event)"/>
 141             </ng-container>
 142
 143             <ng-container *ngSwitchCase="'bool'">
 144               <input
 145                 class="form-check-input"
 146                 type="checkbox"
 147                 name="{{field.name}}"
 148                 id="{{idPrefix}}-{{field.name}}"
 149                 [disabled]="field.readOnly"
 150                 [ngModel]="record[field.name]()"
 151                 (ngModelChange)="record[field.name]($event)"/>
 152             </ng-container>
 153
 154             <ng-container *ngSwitchCase="'readonly-au'">
 155               <ng-container *ngIf="field.linkedValues">
 156                 <a href="/eg/staff/circ/patron/{{field.linkedValues[0].id}}/checkout" target="_blank">{{field.linkedValues[0].label}}
 157                 <span class="material-icons" i18n-title title="Open user record in new tab">open_in_new</span></a>
 158               </ng-container>
 159             </ng-container>
 160
 161             <ng-container *ngSwitchCase="'list'">
 162               <eg-combobox
 163                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 164                 placeholder="{{field.label}}..." i18n-placeholder
 165                 [required]="field.isRequired()"
 166                 [entries]="field.linkedValues"
 167                 [asyncDataSource]="field.linkedValuesSource"
 168                 [selectedId]="record[field.name]()"
 169                 (onChange)="record[field.name]($event ? $event.id : null)">
 170               </eg-combobox>
 171             </ng-container>
 172           </ng-container> <!-- switch -->
 173         </div>
 174         <div class="col-lg-1" *ngIf="field.i18n && !field.readOnly">
 175           <a (click)="openTranslator(field.name)"
 176             i18n-title title="Translate">
 177             <button class="btn btn-outline-info mat-icon-in-button">
 178               <span class="material-icons">translate</span>
 179             </button>
 180           </a>
 181         </div>
 182       </div>
 183       </ng-container>
 184     </form>
 185   </div>
 186   <div class="modal-footer">
 187     <button type="button" class="btn {{action.buttonCss}}"
 188       *ngFor="let action of actions" [disabled]="action.disabled"
 189       (click)="action.actionClick.emit({action: action.key, record: record})">
 190       {{action.label}}
 191     </button>
 192     <ng-container *ngIf="isDialog()">
 193       <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
 194         (click)="closeEditor()" i18n>Close</button>
 195       <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
 196         (click)="cancel()" i18n>Cancel</button>
 197     </ng-container>
 198
 199     <ng-container *ngIf="showDelete && mode != 'view'">
 200       <button type="button" class="btn btn-warning" (click)="remove()"
 201         [disabled]="record && record.isnew()" i18n>Delete</button>
 202     </ng-container>
 203
 204     <button type="button" class="btn btn-info"
 205       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
 206       (click)="save()" i18n>Save</button>
 207   </div>
 208 </ng-template>
 209
 210 <ng-container *ngIf="!isDialog()">
 211   <!-- in "inline" mode, render the editor pane right here -->
 212   <ng-container *ngTemplateOutlet="dialogContent">
 213   </ng-container>
 214 </ng-container>
 215