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