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           <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             <ng-container *ngIf="field.datatype == 'id' && pkeyIsEditable">
  31               <ng-container *ngIf="field.readOnly">
  32                 <span>{{record[field.name]()}}</span>
  33               </ng-container>
  34               <ng-container *ngIf="!field.readOnly">
  35                 <input
  36                   class="form-control"
  37                   name="{{field.name}}"
  38                   id="{{idPrefix}}-{{field.name}}"
  39                   placeholder="{{field.label}}..."
  40                   i18n-placeholder
  41                   [required]="field.isRequired()"
  42                   [ngModel]="record[field.name]()"
  43                   (ngModelChange)="record[field.name]($event)"/>
  44               </ng-container>
  45             </ng-container>
  46
  47             <ng-container
  48               *ngIf="field.datatype == 'text' || field.datatype == 'interval'">
  49               <ng-container *ngIf="field.readOnly">
  50                 <span>{{record[field.name]()}}</span>
  51               </ng-container>
  52               <ng-container *ngIf="!field.readOnly">
  53                 <input
  54                   class="form-control"
  55                   name="{{field.name}}"
  56                   id="{{idPrefix}}-{{field.name}}"
  57                   placeholder="{{field.label}}..."
  58                   i18n-placeholder
  59                   [required]="field.isRequired()"
  60                   [ngModel]="record[field.name]()"
  61                   (ngModelChange)="record[field.name]($event)"/>
  62               </ng-container>
  63             </ng-container>
  64
  65             <!-- TODO: add support to eg-date-select for read-only view -->
  66             <span *ngIf="field.datatype == 'timestamp'">
  67               <eg-date-select
  68                 domId="{{idPrefix}}-{{field.name}}"
  69                 (onChangeAsIso)="record[field.name]($event)"
  70                 initialIso="{{record[field.name]()}}">
  71               </eg-date-select>
  72             </span>
  73
  74             <ng-container *ngIf="field.datatype == 'int'">
  75               <ng-container *ngIf="field.readOnly">
  76                 <span>{{record[field.name]()}}</span>
  77               </ng-container>
  78               <ng-container *ngIf="!field.readOnly">
  79
  80               <input
  81                 class="form-control"
  82                 type="number"
  83                 name="{{field.name}}"
  84                 id="{{idPrefix}}-{{field.name}}"
  85                 placeholder="{{field.label}}..."
  86                 i18n-placeholder
  87                 [required]="field.isRequired()"
  88                 [ngModel]="record[field.name]()"
  89                 (ngModelChange)="record[field.name]($event)"/>
  90               </ng-container>
  91             </ng-container>
  92
  93             <ng-container *ngIf="field.datatype == 'float'">
  94               <ng-container *ngIf="field.readOnly">
  95                 <span>{{record[field.name]()}}</span>
  96               </ng-container>
  97               <ng-container *ngIf="!field.readOnly">
  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             </ng-container>
 110
 111             <ng-container *ngIf="field.datatype == 'money'">
 112               <ng-container *ngIf="field.readOnly">
 113                 <span>{{record[field.name]() | currency}}</span>
 114               </ng-container>
 115               <ng-container *ngIf="!field.readOnly">
 116                 <input
 117                   class="form-control"
 118                   type="number" step="0.1"
 119                   name="{{field.name}}"
 120                   id="{{idPrefix}}-{{field.name}}"
 121                   placeholder="{{field.label}}..."
 122                   i18n-placeholder
 123                   [readonly]="field.readOnly"
 124                   [required]="field.isRequired()"
 125                   [ngModel]="record[field.name]()"
 126                   (ngModelChange)="record[field.name]($event)"/>
 127               </ng-container>
 128             </ng-container>
 129
 130             <input *ngIf="field.datatype == 'bool'"
 131               class="form-check-input"
 132               type="checkbox"
 133               name="{{field.name}}"
 134               id="{{idPrefix}}-{{field.name}}"
 135               [disabled]="field.readOnly"
 136               [ngModel]="record[field.name]()"
 137               (ngModelChange)="record[field.name]($event)"/>
 138
 139             <ng-container *ngIf="field.datatype == 'link'">
 140               <ng-container *ngIf="field.readOnly">
 141                 <!-- in readOnly mode, if a value is present, it will
 142                     live as the only item in the linkedValues array -->
 143                 <ng-container *ngIf="(field.linkedValues != null) && (field.linkedValues.length)">
 144                   <span>{{field.linkedValues[0].name}}</span>
 145                 </ng-container>
 146               </ng-container>
 147               <ng-container *ngIf="!field.readOnly">
 148                 <span [ngClass]="{nullable : !field.isRequired()}">
 149                   <select
 150                     class="form-control"
 151                     name="{{field.name}}"
 152                     id="{{idPrefix}}-{{field.name}}"
 153                     [required]="field.isRequired()"
 154                     [ngModel]="record[field.name]()"
 155                     (ngModelChange)="record[field.name]($event)">
 156                     <option *ngFor="let item of field.linkedValues"
 157                       [value]="item.id">{{item.name}}</option>
 158                   </select>
 159                 </span>
 160               </ng-container>
 161             </ng-container>
 162
 163             <eg-org-select *ngIf="field.datatype == 'org_unit'"
 164               placeholder="{{field.label}}..."
 165               i18n-placeholder
 166               domId="{{idPrefix}}-{{field.name}}"
 167               [limitPerms]="modePerms[mode]"
 168               [readOnly]="field.readOnly"
 169               [applyDefault]="field.orgDefaultAllowed"
 170               [initialOrgId]="record[field.name]()"
 171               (onChange)="record[field.name]($event)">
 172             </eg-org-select>
 173
 174           </span>
 175         </div>
 176       </div>
 177     </form>
 178   </div>
 179   <div class="modal-footer">
 180     <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
 181       (click)="close()" i18n>Close</button>
 182     <button type="button" class="btn btn-info"
 183       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
 184       (click)="save()" i18n>Save</button>
 185     <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
 186       (click)="cancel()" i18n>Cancel</button>
 187   </div>
 188 </ng-template>