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           <ng-container [ngSwitch]="inputType(field)">
  19
  20             <ng-container *ngSwitchCase="'template'">
  21               <ng-container
  22                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
  23               </ng-container>
  24             </ng-container>
  25
  26             <ng-container *ngSwitchCase="'readonly'">
  27               <span>{{record[field.name]()}}</span>
  28             </ng-container>
  29
  30             <ng-container *ngSwitchCase="'readonly-money'">
  31               <span>{{record[field.name]() | currency}}</span>
  32             </ng-container>
  33
  34             <ng-container *ngSwitchCase="'readonly-list'">
  35               <ng-container *ngIf="field.linkedValues">
  36                 <span>{{field.linkedValues[0].label}}</span>
  37               </ng-container>
  38             </ng-container>
  39
  40             <ng-container *ngSwitchCase="'timestamp'">
  41               <eg-date-select
  42                 domId="{{idPrefix}}-{{field.name}}"
  43                 (onChangeAsIso)="record[field.name]($event)"
  44                 initialIso="{{record[field.name]()}}">
  45               </eg-date-select>
  46             </ng-container>
  47
  48             <ng-container *ngSwitchCase="'org_unit'">
  49               <eg-org-select
  50                 placeholder="{{field.label}}..."
  51                 i18n-placeholder
  52                 domId="{{idPrefix}}-{{field.name}}"
  53                 [limitPerms]="modePerms[mode]"
  54                 [readOnly]="field.readOnly"
  55                 [applyDefault]="field.orgDefaultAllowed"
  56                 [initialOrgId]="record[field.name]()"
  57                 (onChange)="record[field.name]($event)">
  58               </eg-org-select>
  59             </ng-container>
  60
  61             <ng-container *ngSwitchCase="'money'">
  62               <input
  63                 class="form-control"
  64                 type="number" step="0.1"
  65                 name="{{field.name}}"
  66                 id="{{idPrefix}}-{{field.name}}"
  67                 placeholder="{{field.label}}..."
  68                 i18n-placeholder
  69                 [readonly]="field.readOnly"
  70                 [required]="field.isRequired()"
  71                 [ngModel]="record[field.name]()"
  72                 (ngModelChange)="record[field.name]($event)"/>
  73             </ng-container>
  74
  75             <ng-container *ngSwitchCase="'int'">
  76               <input
  77                 class="form-control"
  78                 type="number"
  79                 name="{{field.name}}"
  80                 id="{{idPrefix}}-{{field.name}}"
  81                 placeholder="{{field.label}}..."
  82                 i18n-placeholder
  83                 [required]="field.isRequired()"
  84                 [ngModel]="record[field.name]()"
  85                 (ngModelChange)="record[field.name]($event)"/>
  86             </ng-container>
  87
  88             <ng-container *ngSwitchCase="'float'">
  89               <input
  90                 class="form-control"
  91                 type="number" step="0.1"
  92                 name="{{field.name}}"
  93                 id="{{idPrefix}}-{{field.name}}"
  94                 placeholder="{{field.label}}..."
  95                 i18n-placeholder
  96                 [required]="field.isRequired()"
  97                 [ngModel]="record[field.name]()"
  98                 (ngModelChange)="record[field.name]($event)"/>
  99             </ng-container>
 100
 101             <ng-container *ngSwitchCase="'text'">
 102               <input
 103                 class="form-control"
 104                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 105                 type="text"
 106                 placeholder="{{field.label}}..." i18n-placeholder
 107                 [required]="field.isRequired()"
 108                 [ngModel]="record[field.name]()"
 109                 (ngModelChange)="record[field.name]($event)"/>
 110             </ng-container>
 111
 112             <ng-container *ngSwitchCase="'bool'">
 113               <input
 114                 class="form-check-input"
 115                 type="checkbox"
 116                 name="{{field.name}}"
 117                 id="{{idPrefix}}-{{field.name}}"
 118                 [disabled]="field.readOnly"
 119                 [ngModel]="record[field.name]()"
 120                 (ngModelChange)="record[field.name]($event)"/>
 121             </ng-container>
 122
 123             <ng-container *ngSwitchCase="'list'">
 124               <eg-combobox
 125                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 126                 placeholder="{{field.label}}..." i18n-placeholder
 127                 [required]="field.isRequired()"
 128                 [entries]="field.linkedValues"
 129                 [asyncDataSource]="field.linkedValuesSource"
 130                 [startId]="record[field.name]()"
 131                 (onChange)="record[field.name]($event ? $event.id : null)">
 132               </eg-combobox>
 133             </ng-container>
 134           </ng-container> <!-- switch -->
 135         </div>
 136       </div>
 137     </form>
 138   </div>
 139   <div class="modal-footer">
 140     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
 141       (click)="close()" i18n>Close</button>
 142     <button type="button" class="btn btn-info"
 143       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
 144       (click)="save()" i18n>Save</button>
 145     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
 146       (click)="cancel()" i18n>Cancel</button>
 147   </div>
 148 </ng-template>