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="rec-{{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             <input *ngIf="field.datatype == 'id' && pkeyIsEditable"
  31               class="form-control"
  32               name="{{field.name}}"
  33               id="rec-{{field.name}}"
  34               placeholder="{{field.label}}..."
  35               i18n-placeholder
  36               [readonly]="field.readOnly"
  37               [required]="field.isRequired()"
  38               [ngModel]="record[field.name]()"
  39               (ngModelChange)="record[field.name]($event)"/>
  40
  41             <input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
  42               class="form-control"
  43               name="{{field.name}}"
  44               id="rec-{{field.name}}"
  45               placeholder="{{field.label}}..."
  46               i18n-placeholder
  47               [readonly]="field.readOnly"
  48               [required]="field.isRequired()"
  49               [ngModel]="record[field.name]()"
  50               (ngModelChange)="record[field.name]($event)"/>
  51
  52             <span *ngIf="field.datatype == 'timestamp'">
  53               <eg-date-select
  54                 domId="rec-{{field.name}}"
  55                 (onChangeAsIso)="record[field.name]($event)"
  56                 initialIso="{{record[field.name]()}}">
  57               </eg-date-select>
  58             </span>
  59
  60             <input *ngIf="field.datatype == 'int'"
  61               class="form-control"
  62               type="number"
  63               name="{{field.name}}"
  64               id="rec-{{field.name}}"
  65               placeholder="{{field.label}}..."
  66               i18n-placeholder
  67               [readonly]="field.readOnly"
  68               [required]="field.isRequired()"
  69               [ngModel]="record[field.name]()"
  70               (ngModelChange)="record[field.name]($event)"/>
  71
  72             <input *ngIf="field.datatype == 'float'"
  73               class="form-control"
  74               type="number" step="0.1"
  75               name="{{field.name}}"
  76               id="rec-{{field.name}}"
  77               placeholder="{{field.label}}..."
  78               i18n-placeholder
  79               [readonly]="field.readOnly"
  80               [required]="field.isRequired()"
  81               [ngModel]="record[field.name]()"
  82               (ngModelChange)="record[field.name]($event)"/>
  83
  84             <span *ngIf="field.datatype == 'money'">
  85               <!-- in read-only mode display the local-aware currency -->
  86               <input *ngIf="field.readOnly"
  87                 class="form-control"
  88                 type="number" step="0.1"
  89                 name="{{field.name}}"
  90                 id="rec-{{field.name}}"
  91                 [readonly]="field.readOnly"
  92                 [required]="field.isRequired()"
  93                 [ngModel]="record[field.name]() | currency"/>
  94
  95               <input *ngIf="!field.readOnly"
  96                 class="form-control"
  97                 type="number" step="0.1"
  98                 name="{{field.name}}"
  99                 id="rec-{{field.name}}"
 100                 placeholder="{{field.label}}..."
 101                 i18n-placeholder
 102                 [readonly]="field.readOnly"
 103                 [required]="field.isRequired()"
 104                 [ngModel]="record[field.name]()"
 105                 (ngModelChange)="record[field.name]($event)"/>
 106             </span>
 107
 108             <input *ngIf="field.datatype == 'bool'"
 109               class="form-check-input"
 110               type="checkbox"
 111               name="{{field.name}}"
 112               id="rec-{{field.name}}"
 113               [readonly]="field.readOnly"
 114               [ngModel]="record[field.name]()"
 115               (ngModelChange)="record[field.name]($event)"/>
 116
 117             <span *ngIf="field.datatype == 'link'"
 118               [ngClass]="{nullable : !field.isRequired()}">
 119               <select
 120                 class="form-control"
 121                 name="{{field.name}}"
 122                 id="rec-{{field.name}}"
 123                 [disabled]="field.readOnly"
 124                 [required]="field.isRequired()"
 125                 [ngModel]="record[field.name]()"
 126                 (ngModelChange)="record[field.name]($event)">
 127                 <option *ngFor="let item of field.linkedValues"
 128                   [value]="item.id">{{item.name}}</option>
 129               </select>
 130             </span>
 131
 132             <eg-org-select *ngIf="field.datatype == 'org_unit'"
 133               placeholder="{{field.label}}..."
 134               i18n-placeholder
 135               domId="rec-{{field.name}}"
 136               [limitPerms]="modePerms[mode]"
 137               [applyDefault]="field.orgDefaultAllowed"
 138               [initialOrgId]="record[field.name]()"
 139               (onChange)="record[field.name]($event)">
 140             </eg-org-select>
 141
 142           </span>
 143         </div>
 144       </div>
 145     </form>
 146   </div>
 147   <div class="modal-footer">
 148     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
 149       (click)="close()" i18n>Close</button>
 150     <button type="button" class="btn btn-info"
 151       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
 152       (click)="save()" i18n>Save</button>
 153     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
 154       (click)="cancel()" i18n>Cancel</button>
 155   </div>
 156 </ng-template>