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 <ng-template #dialogContent>
   5   <div class="modal-header bg-info">
   6     <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
   7     <button type="button" class="close"
   8       i18n-aria-label aria-label="Close" (click)="close()">
   9       <span aria-hidden="true">&times;</span>
  10     </button>
  11   </div>
  12   <div class="modal-body">
  13     <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
  14       <ng-container *ngIf="!record">
  15         <!-- display a progress dialog while the editor
  16             fetches the needed data -->
  17         <eg-progress-inline></eg-progress-inline>
  18       </ng-container>
  19       <ng-container *ngIf="record">
  20       <div class="form-group row" *ngFor="let field of fields">
  21         <div class="col-lg-3">
  22           <label for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
  23         </div>
  24         <div class="col-lg-7">
  25
  26           <ng-container [ngSwitch]="inputType(field)">
  27
  28             <ng-container *ngSwitchCase="'template'">
  29               <ng-container
  30                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
  31               </ng-container>
  32             </ng-container>
  33
  34             <ng-container *ngSwitchCase="'readonly'">
  35               <span>{{record[field.name]()}}</span>
  36             </ng-container>
  37
  38             <ng-container *ngSwitchCase="'readonly-money'">
  39               <span>{{record[field.name]() | currency}}</span>
  40             </ng-container>
  41
  42             <ng-container *ngSwitchCase="'readonly-list'">
  43               <ng-container *ngIf="field.linkedValues">
  44                 <span>{{field.linkedValues[0].label}}</span>
  45               </ng-container>
  46             </ng-container>
  47
  48             <ng-container *ngSwitchCase="'timestamp'">
  49               <eg-date-select
  50                 domId="{{idPrefix}}-{{field.name}}"
  51                 [readOnly]="field.readOnly"
  52                 (onChangeAsIso)="record[field.name]($event)"
  53                 initialIso="{{record[field.name]()}}">
  54               </eg-date-select>
  55             </ng-container>
  56
  57             <ng-container *ngSwitchCase="'org_unit'">
  58               <eg-org-select
  59                 placeholder="{{field.label}}..."
  60                 i18n-placeholder
  61                 domId="{{idPrefix}}-{{field.name}}"
  62                 [limitPerms]="modePerms[mode]"
  63                 [readOnly]="field.readOnly"
  64                 [applyDefault]="field.orgDefaultAllowed"
  65                 [initialOrgId]="record[field.name]()"
  66                 (onChange)="record[field.name]($event)">
  67               </eg-org-select>
  68             </ng-container>
  69
  70             <ng-container *ngSwitchCase="'money'">
  71               <input
  72                 class="form-control"
  73                 type="number" step="0.1"
  74                 name="{{field.name}}"
  75                 id="{{idPrefix}}-{{field.name}}"
  76                 placeholder="{{field.label}}..."
  77                 i18n-placeholder
  78                 [readonly]="field.readOnly"
  79                 [required]="field.isRequired()"
  80                 [ngModel]="record[field.name]()"
  81                 (ngModelChange)="record[field.name]($event)"/>
  82             </ng-container>
  83
  84             <ng-container *ngSwitchCase="'int'">
  85               <input
  86                 class="form-control"
  87                 type="number"
  88                 name="{{field.name}}"
  89                 id="{{idPrefix}}-{{field.name}}"
  90                 placeholder="{{field.label}}..."
  91                 i18n-placeholder
  92                 [required]="field.isRequired()"
  93                 [ngModel]="record[field.name]()"
  94                 (ngModelChange)="record[field.name]($event)"/>
  95             </ng-container>
  96
  97             <ng-container *ngSwitchCase="'float'">
  98               <input
  99                 class="form-control"
 100                 type="number" step="0.1"
 101                 name="{{field.name}}"
 102                 id="{{idPrefix}}-{{field.name}}"
 103                 placeholder="{{field.label}}..."
 104                 i18n-placeholder
 105                 [required]="field.isRequired()"
 106                 [ngModel]="record[field.name]()"
 107                 (ngModelChange)="record[field.name]($event)"/>
 108             </ng-container>
 109
 110             <ng-container *ngSwitchCase="'text'">
 111               <input
 112                 class="form-control"
 113                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 114                 type="text"
 115                 placeholder="{{field.label}}..." i18n-placeholder
 116                 [required]="field.isRequired()"
 117                 [ngModel]="record[field.name]()"
 118                 (ngModelChange)="record[field.name]($event)"/>
 119             </ng-container>
 120
 121             <ng-container *ngSwitchCase="'bool'">
 122               <input
 123                 class="form-check-input"
 124                 type="checkbox"
 125                 name="{{field.name}}"
 126                 id="{{idPrefix}}-{{field.name}}"
 127                 [disabled]="field.readOnly"
 128                 [ngModel]="record[field.name]()"
 129                 (ngModelChange)="record[field.name]($event)"/>
 130             </ng-container>
 131
 132             <ng-container *ngSwitchCase="'list'">
 133               <eg-combobox
 134                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 135                 placeholder="{{field.label}}..." i18n-placeholder
 136                 [required]="field.isRequired()"
 137                 [entries]="field.linkedValues"
 138                 [asyncDataSource]="field.linkedValuesSource"
 139                 [startId]="record[field.name]()"
 140                 (onChange)="record[field.name]($event ? $event.id : null)">
 141               </eg-combobox>
 142             </ng-container>
 143           </ng-container> <!-- switch -->
 144         </div>
 145         <div class="col-lg-1" *ngIf="field.i18n && !field.readOnly">
 146           <a (click)="openTranslator(field.name)"
 147             i18n-title title="Translate">
 148             <button class="btn btn-outline-info mat-icon-in-button">
 149               <span class="material-icons">translate</span>
 150             </button>
 151           </a>
 152         </div>
 153       </div>
 154       </ng-container>
 155     </form>
 156   </div>
 157   <div class="modal-footer">
 158     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
 159       (click)="close()" i18n>Close</button>
 160     <button type="button" class="btn btn-info"
 161       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
 162       (click)="save()" i18n>Save</button>
 163     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
 164       (click)="cancel()" i18n>Cancel</button>
 165   </div>
 166 </ng-template>