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