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