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