LP1825851 Server managed/processed print templates
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / share / fm-editor / fm-editor.component.html
index bcd995d..476c261 100644 (file)
+<!-- idlObject and fieldName applied programmatically -->
+<eg-translate #translator></eg-translate>
+
+<eg-string #successStr text="Update Succeeded" i18n-text></eg-string>
+<eg-string #failStr text="Update Failed" i18n-text></eg-string>
+
 <ng-template #dialogContent>
   <div class="modal-header bg-info">
     <h4 class="modal-title" i18n>Record Editor: {{recordLabel}}</h4>
-    <button type="button" class="close" 
-      i18n-aria-label aria-label="Close" 
-      (click)="dismiss('cross_click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <ng-container *ngIf="isDialog()">
+      <button type="button" class="close" 
+        i18n-aria-label aria-label="Close" (click)="close()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </ng-container>
   </div>
   <div class="modal-body">
     <form #fmEditForm="ngForm" role="form" class="form-validated common-form striped-odd">
+      <ng-container *ngIf="!record">
+        <!-- display a progress dialog while the editor 
+            fetches the needed data -->
+        <eg-progress-inline></eg-progress-inline> 
+      </ng-container>
+      <ng-container *ngIf="record">
       <div class="form-group row" *ngFor="let field of fields">
-        <div class="col-lg-3 offset-lg-1">
-          <label for="rec-{{field.name}}">{{field.label}}</label>
+        <div class="col-lg-3">
+          <label for="{{idPrefix}}-{{field.name}}">{{field.label}}</label>
         </div>
-        <div class="col-lg-7">
+        <div class="col-lg-9">
+
+          <ng-container [ngSwitch]="inputType(field)">
 
-          <span *ngIf="field.template">
-            <ng-container
-              *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
+            <ng-container *ngSwitchCase="'template'">
+              <ng-container
+                *ngTemplateOutlet="field.template; context:customTemplateFieldContext(field)">
+              </ng-container> 
             </ng-container> 
-          </span>
 
-          <span *ngIf="!field.template">
+            <ng-container *ngSwitchCase="'readonly'">
+              <span>{{record[field.name]()}}</span>
+            </ng-container>
 
-            <span *ngIf="field.datatype == 'id' && !pkeyIsEditable">
-              {{record[field.name]()}}
-            </span>
-  
-            <input *ngIf="field.datatype == 'id' && pkeyIsEditable"
-              class="form-control"
-              name="{{field.name}}"
-              id="rec-{{field.name}}"
-              placeholder="{{field.label}}..."
-              i18n-placeholder
-              [readonly]="field.readOnly"
-              [required]="field.isRequired()"
-              [ngModel]="record[field.name]()"
-              (ngModelChange)="record[field.name]($event)"/>
-  
-            <input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
-              class="form-control"
-              name="{{field.name}}"
-              id="rec-{{field.name}}"
-              placeholder="{{field.label}}..."
-              i18n-placeholder
-              [readonly]="field.readOnly"
-              [required]="field.isRequired()"
-              [ngModel]="record[field.name]()"
-              (ngModelChange)="record[field.name]($event)"/>
+            <ng-container *ngSwitchCase="'readonly-money'">
+              <span>{{record[field.name]() | currency}}</span>
+            </ng-container>
 
-            <span *ngIf="field.datatype == 'timestamp'">
+            <ng-container *ngSwitchCase="'readonly-list'">
+              <ng-container *ngIf="field.linkedValues">
+                <span>{{field.linkedValues[0].label}}</span>
+              </ng-container>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'timestamp'">
               <eg-date-select
-                domId="rec-{{field.name}}"
+                domId="{{idPrefix}}-{{field.name}}"
+                [readOnly]="field.readOnly"
                 (onChangeAsIso)="record[field.name]($event)"
                 initialIso="{{record[field.name]()}}">
               </eg-date-select>
-            </span>
+            </ng-container>
 
-            <input *ngIf="field.datatype == 'int'"
-              class="form-control"
-              type="number"
-              name="{{field.name}}"
-              id="rec-{{field.name}}"
-              placeholder="{{field.label}}..."
-              i18n-placeholder
-              [readonly]="field.readOnly"
-              [required]="field.isRequired()"
-              [ngModel]="record[field.name]()"
-              (ngModelChange)="record[field.name]($event)"/>
-  
-            <input *ngIf="field.datatype == 'float'"
-              class="form-control"
-              type="number" step="0.1"
-              name="{{field.name}}"
-              id="rec-{{field.name}}"
-              placeholder="{{field.label}}..."
-              i18n-placeholder
-              [readonly]="field.readOnly"
-              [required]="field.isRequired()"
-              [ngModel]="record[field.name]()"
-              (ngModelChange)="record[field.name]($event)"/>
-  
-            <span *ngIf="field.datatype == 'money'">
-              <!-- in read-only mode display the local-aware currency -->
-              <input *ngIf="field.readOnly"
+            <ng-container *ngSwitchCase="'org_unit'">
+              <eg-org-select
+                placeholder="{{field.label}}..."
+                i18n-placeholder
+                domId="{{idPrefix}}-{{field.name}}"
+                [limitPerms]="modePerms[mode]"
+                [readOnly]="field.readOnly"
+                [applyDefault]="field.orgDefaultAllowed"
+                [initialOrgId]="record[field.name]()"
+                (onChange)="record[field.name]($event)">
+              </eg-org-select>
+            </ng-container>
+          
+            <ng-container *ngSwitchCase="'money'">
+              <input
                 class="form-control"
                 type="number" step="0.1"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
+                placeholder="{{field.label}}..."
+                i18n-placeholder
                 [readonly]="field.readOnly"
                 [required]="field.isRequired()"
-                [ngModel]="record[field.name]() | currency"/>
-  
-              <input *ngIf="!field.readOnly"
+                [ngModel]="record[field.name]()"
+                (ngModelChange)="record[field.name]($event)"/>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'int'">
+              <input
+                class="form-control"
+                type="number"
+                name="{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
+                placeholder="{{field.label}}..."
+                i18n-placeholder
+                [required]="field.isRequired()"
+                [ngModel]="record[field.name]()"
+                (ngModelChange)="record[field.name]($event)"/>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'float'">
+              <input
                 class="form-control"
                 type="number" step="0.1"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
                 placeholder="{{field.label}}..."
                 i18n-placeholder
-                [readonly]="field.readOnly"
                 [required]="field.isRequired()"
                 [ngModel]="record[field.name]()"
                 (ngModelChange)="record[field.name]($event)"/>
-            </span>
-  
-            <input *ngIf="field.datatype == 'bool'"
-              class="form-check-input"
-              type="checkbox"
-              name="{{field.name}}"
-              id="rec-{{field.name}}"
-              [readonly]="field.readOnly"
-              [ngModel]="record[field.name]()"
-              (ngModelChange)="record[field.name]($event)"/>
-  
-            <span *ngIf="field.datatype == 'link'"
-              [ngClass]="{nullable : !field.isRequired()}">
-              <select
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'text'">
+              <input
                 class="form-control"
+                id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
+                type="text"
+                placeholder="{{field.label}}..." i18n-placeholder
+                [required]="field.isRequired()"
+                [ngModel]="record[field.name]()"
+                (ngModelChange)="record[field.name]($event)"/>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'bool'">
+              <input
+                class="form-check-input"
+                type="checkbox"
                 name="{{field.name}}"
-                id="rec-{{field.name}}"
+                id="{{idPrefix}}-{{field.name}}"
                 [disabled]="field.readOnly"
-                [required]="field.isRequired()"
                 [ngModel]="record[field.name]()"
-                (ngModelChange)="record[field.name]($event)">
-                <option *ngFor="let item of field.linkedValues" 
-                  [value]="item.id">{{item.name}}</option>
-              </select>
-            </span>
+                (ngModelChange)="record[field.name]($event)"/>
+            </ng-container>
   
-            <eg-org-select *ngIf="field.datatype == 'org_unit'"
-              placeholder="{{field.label}}..."
-              i18n-placeholder
-              domId="rec-{{field.name}}"
-              [limitPerms]="modePerms[mode]"
-              [applyDefault]="field.orgDefaultAllowed"
-              [initialOrgId]="record[field.name]()"
-              (onChange)="record[field.name]($event)">
-            </eg-org-select>
-
-          </span>
+            <ng-container *ngSwitchCase="'list'">
+              <eg-combobox
+                id="{{idPrefix}}-{{field.name}}" name="{{field.name}}"
+                placeholder="{{field.label}}..." i18n-placeholder 
+                [required]="field.isRequired()"
+                [entries]="field.linkedValues"
+                [asyncDataSource]="field.linkedValuesSource"
+                [startId]="record[field.name]()"
+                (onChange)="record[field.name]($event ? $event.id : null)">
+              </eg-combobox>
+            </ng-container>
+          </ng-container> <!-- switch -->
+        </div>
+        <div class="col-lg-1" *ngIf="field.i18n && !field.readOnly">
+          <a (click)="openTranslator(field.name)"
+            i18n-title title="Translate">
+            <button class="btn btn-outline-info mat-icon-in-button">
+              <span class="material-icons">translate</span>
+            </button>
+          </a>
         </div>
       </div>
+      </ng-container>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
-      (click)="close()" i18n>Close</button>
+    <ng-container *ngIf="isDialog()">
+      <button type="button" class="btn btn-success" *ngIf="mode == 'view'"
+        (click)="close()" i18n>Close</button>
+      <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
+        (click)="cancel()" i18n>Cancel</button>
+    </ng-container>
     <button type="button" class="btn btn-info" 
       [disabled]="fmEditForm.invalid" *ngIf="mode != 'view'"
       (click)="save()" i18n>Save</button>
-    <button type="button" class="btn btn-warning ml-2" *ngIf="mode != 'view'"
-      (click)="cancel()" i18n>Cancel</button>
   </div>
 </ng-template>
+
+<ng-container *ngIf="!isDialog()">
+  <!-- in "inline" mode, render the editor pane right here -->
+  <ng-container *ngTemplateOutlet="dialogContent">
+  </ng-container>
+</ng-container>
+