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 <eg-confirm-dialog #confirmDel
   8   dialogTitle="Delete?" i18n-dialogTitle
   9   dialogBody="Delete {{recordLabel}}?" i18n-dialogBody>
  10 </eg-confirm-dialog>
  11
  12 <ng-template #dialogContent>
  13   <div class="modal-header bg-info" *ngIf="!hideBanner">
  14     <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
  15     <ng-container *ngIf="isDialog()">
  16       <button type="button" class="close"
  17         i18n-aria-label aria-label="Close" (click)="closeEditor()">
  18         <span aria-hidden="true">&times;</span>
  19       </button>
  20     </ng-container>
  21   </div>
  22   <div class="modal-body">
  23     <form #fmEditForm="ngForm" role="form"
  24           class="form-validated common-form striped-odd"
  25           [egDateFieldOrderList]="dateFieldOrderList">
  26       <ng-container *ngIf="!record">
  27         <!-- display a progress dialog while the editor
  28             fetches the needed data -->
  29         <eg-progress-inline></eg-progress-inline>
  30       </ng-container>
  31       <ng-container *ngIf="record">
  32       <div role="alert" class="alert alert-danger" *ngIf="fmEditForm.errors?.['datesOutOfOrder'] && (fmEditForm.touched || fmEditForm.dirty)">
  33         <span class="material-icons" aria-hidden="true">error</span>
  34         <span i18n>Dates must be in the correct order</span>
  35       </div>
  36
  37       <div class="form-group row" *ngFor="let field of fields">
  38         <div class="col-lg-3">
  39           <label for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
  40           <eg-help-popover [placement]="'right'" *ngIf="field.helpText" helpText="{{field.helpTextValue}}"></eg-help-popover>
  41         </div>
  42         <div class="col-lg-9">
  43
  44           <ng-container [ngSwitch]="inputType(field)">
  45
  46             <ng-container *ngSwitchCase="'template'">
  47               <ng-container
  48                 *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
  49               </ng-container>
  50             </ng-container>
  51
  52             <ng-container *ngSwitchCase="'readonly'">
  53               <span>{{record[field.name]()}}</span>
  54             </ng-container>
  55
  56             <ng-container *ngSwitchCase="'readonly-money'">
  57               <span>{{record[field.name]() | currency}}</span>
  58             </ng-container>
  59
  60             <ng-container *ngSwitchCase="'readonly-list'">
  61               <ng-container *ngIf="field.linkedValues && field.linkedValues[0]?.label">
  62                 <span>{{field.linkedValues[0].label}}</span>
  63               </ng-container>
  64             </ng-container>
  65
  66             <ng-container *ngSwitchCase="'timestamp'">
  67               <eg-date-select
  68                 domId="{{idPrefix}}-{{field.name}}"
  69                 [readOnly]="field.readOnly"
  70                 [ngModel]="record[field.name]()"
  71                 name="{{field.name}}"
  72                 (onChangeAsIso)="record[field.name]($event)"
  73                 initialIso="{{record[field.name]()}}">
  74               </eg-date-select>
  75             </ng-container>
  76
  77             <ng-container *ngSwitchCase="'timestamp-timepicker'">
  78               <eg-datetime-select
  79                 [showTZ]="timezone"
  80                 [timezone]="timezone"
  81                 domId="{{idPrefix}}-{{field.name}}"
  82                 (onChangeAsIso)="record[field.name]($event)"
  83                 i18n-validatorError
  84                 [readOnly]="field.readOnly"
  85                 [ngModel]="record[field.name]()"
  86                 name="{{field.name}}"
  87                 initialIso="{{record[field.name]()}}">
  88               </eg-datetime-select>
  89             </ng-container>
  90
  91             <ng-container *ngSwitchCase="'org_unit'">
  92               <eg-org-select
  93                 placeholder="{{field.label}}..."
  94                 i18n-placeholder
  95                 domId="{{idPrefix}}-{{field.name}}"
  96                 [limitPerms]="modePerms[mode]"
  97                 [readOnly]="field.readOnly"
  98                 [applyDefault]="field.orgDefaultAllowed"
  99                 [applyOrgId]="record[field.name]()"
 100                 (onChange)="record[field.name]($event)">
 101               </eg-org-select>
 102             </ng-container>
 103
 104             <ng-container *ngSwitchCase="'money'">
 105               <input
 106                 class="form-control"
 107                 type="number" step="0.1"
 108                 name="{{field.name}}"
 109                 id="{{idPrefix}}-{{field.name}}"
 110                 placeholder="{{field.label}}..."
 111                 i18n-placeholder
 112                 [readonly]="field.readOnly"
 113                 [required]="field.isRequired()"
 114                 [ngModel]="record[field.name]()"
 115                 (ngModelChange)="record[field.name]($event)"/>
 116             </ng-container>
 117
 118             <ng-container *ngSwitchCase="'int'">
 119               <input
 120                 class="form-control"
 121                 type="number"
 122                 name="{{field.name}}"
 123                 id="{{idPrefix}}-{{field.name}}"
 124                 placeholder="{{field.label}}..."
 125                 i18n-placeholder
 126                 [required]="field.isRequired()"
 127                 egMin="{{field.min}}"
 128                 egMax="{{field.max}}"
 129                 [ngModel]="record[field.name]()"
 130                 (ngModelChange)="record[field.name]($event)"/>
 131             </ng-container>
 132
 133             <ng-container *ngSwitchCase="'float'">
 134               <input
 135                 class="form-control"
 136                 type="number" step="0.1"
 137                 name="{{field.name}}"
 138                 id="{{idPrefix}}-{{field.name}}"
 139                 placeholder="{{field.label}}..."
 140                 i18n-placeholder
 141                 [required]="field.isRequired()"
 142                 [ngModel]="record[field.name]()"
 143                 (ngModelChange)="record[field.name]($event)"/>
 144             </ng-container>
 145
 146             <ng-container *ngSwitchCase="'text'">
 147               <input
 148                 class="form-control"
 149                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 150                 type="text" pattern="[\s\S]*\S[\s\S]*"
 151                 placeholder="{{field.label}}..." i18n-placeholder
 152                 [required]="field.isRequired()"
 153                 [ngModel]="record[field.name]()"
 154                 (ngModelChange)="record[field.name]($event)"/>
 155             </ng-container>
 156
 157             <ng-container *ngSwitchCase="'bool'">
 158               <input
 159                 class="form-check-input"
 160                 type="checkbox"
 161                 name="{{field.name}}"
 162                 id="{{idPrefix}}-{{field.name}}"
 163                 [disabled]="field.readOnly"
 164                 [ngModel]="record[field.name]()"
 165                 (ngModelChange)="record[field.name]($event)"/>
 166             </ng-container>
 167
 168             <ng-container *ngSwitchCase="'readonly-au'">
 169               <ng-container *ngIf="field.linkedValues">
 170                 <a href="/eg/staff/circ/patron/{{field.linkedValues[0].id}}/checkout" target="_blank">{{field.linkedValues[0].label}}
 171                 <span class="material-icons" i18n-title title="Open user record in new tab">open_in_new</span></a>
 172               </ng-container>
 173             </ng-container>
 174
 175             <ng-container *ngSwitchCase="'link'">
 176               <eg-combobox
 177                 id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 178                 placeholder="{{field.label}}..." i18n-placeholder
 179                 [required]="field.isRequired()"
 180                 [idlClass]="field.class" [asyncSupportsEmptyTermClick]="true"
 181                 [idlBaseQuery]="field.idlBaseQuery"
 182                 [idlField]="field.selector"
 183                 [selectedId]="record[field.name]()"
 184                 (onChange)="record[field.name]($event ? $event.id : null)">
 185               </eg-combobox>
 186             </ng-container>
 187
 188             <ng-container *ngSwitchCase="'list'">
 189               <eg-combobox
 190                 domId="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
 191                 placeholder="{{field.label}}..." i18n-placeholder
 192                 [required]="field.isRequired()"
 193                 [entries]="field.linkedValues"
 194                 [asyncDataSource]="field.linkedValuesSource"
 195                 [selectedId]="record[field.name]()"
 196                 (onChange)="record[field.name]($event ? $event.id : null)">
 197               </eg-combobox>
 198             </ng-container>
 199           </ng-container> <!-- switch -->
 200         </div>
 201         <div class="col-lg-1" *ngIf="field.i18n && !field.readOnly">
 202           <a (click)="openTranslator(field.name)"
 203             i18n-title title="Translate">
 204             <button class="btn btn-outline-info mat-icon-in-button">
 205               <span class="material-icons">translate</span>
 206             </button>
 207           </a>
 208         </div>
 209       </div>
 210       </ng-container>
 211     </form>
 212   </div>
 213   <div class="modal-footer">
 214     <button type="button" class="btn {{action.buttonCss}}"
 215       *ngFor="let action of actions" [disabled]="action.disabled"
 216       (click)="action.actionClick.emit({action: action.key, record: record})">
 217       {{action.label}}
 218     </button>
 219     <ng-container *ngIf="isDialog()">
 220       <button type="button" class="btn btn-success" *ngIf="mode === 'view'"
 221         (click)="closeEditor()" i18n>Close</button>
 222       <button type="button" class="btn btn-warning ml-2" *ngIf="mode !== 'view'"
 223         (click)="cancel()" i18n>Cancel</button>
 224     </ng-container>
 225
 226     <ng-container *ngIf="showDelete && mode !== 'view'">
 227       <button type="button" class="btn btn-warning" (click)="remove()"
 228         [disabled]="record && record.isnew()" i18n>Delete</button>
 229     </ng-container>
 230
 231     <button type="button" class="btn btn-info"
 232       [disabled]="fmEditForm.invalid" *ngIf="mode !== 'view'"
 233       (click)="save()" i18n>Save</button>
 234   </div>
 235 </ng-template>
 236
 237 <ng-container *ngIf="!isDialog()">
 238   <!-- in "inline" mode, render the editor pane right here -->
 239   <ng-container *ngTemplateOutlet="dialogContent">
 240   </ng-container>
 241 </ng-container>
 242