LP1809288 Angular fm-editor read-only additions

[Evergreen.git] / Open-ILS / src / eg2 / src / app / share / fm-editor / fm-editor.component.html

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index 4aab72d..233c302 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -27,28 +27,42 @@
               {{record[field.name]()}}
             </span>
   
-            <input *ngIf="field.datatype == 'id' && pkeyIsEditable"
-              class="form-control"
-              name="{{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)"/>
+            <ng-container *ngIf="field.datatype == 'id' && pkeyIsEditable">
+              <ng-container *ngIf="field.readOnly">
+                <span>{{record[field.name]()}}</span>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+                <input
+                  class="form-control"
+                  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>
   
-            <input *ngIf="field.datatype == 'text' || field.datatype == 'interval'"
-              class="form-control"
-              name="{{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)"/>
+            <ng-container 
+              *ngIf="field.datatype == 'text' || field.datatype == 'interval'">
+              <ng-container *ngIf="field.readOnly">
+                <span>{{record[field.name]()}}</span>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+                <input
+                  class="form-control"
+                  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>
 
+            <!-- TODO: add support to eg-date-select for read-only view -->
             <span *ngIf="field.datatype == 'timestamp'">
               <eg-date-select
                 domId="{{idPrefix}}-{{field.name}}"
@@ -57,83 +71,101 @@
               </eg-date-select>
             </span>
 
-            <input *ngIf="field.datatype == 'int'"
-              class="form-control"
-              type="number"
-              name="{{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)"/>
-  
-            <input *ngIf="field.datatype == 'float'"
-              class="form-control"
-              type="number" step="0.1"
-              name="{{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 *ngIf="field.datatype == 'money'">
-              <!-- in read-only mode display the local-aware currency -->
-              <input *ngIf="field.readOnly"
-                class="form-control"
-                type="number" step="0.1"
-                name="{{field.name}}"
-                id="{{idPrefix}}-{{field.name}}"
-                [readonly]="field.readOnly"
-                [required]="field.isRequired()"
-                [ngModel]="record[field.name]() | currency"/>
-  
-              <input *ngIf="!field.readOnly"
+            <ng-container *ngIf="field.datatype == 'int'">
+              <ng-container *ngIf="field.readOnly">
+                <span>{{record[field.name]()}}</span>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+
+              <input
                 class="form-control"
-                type="number" step="0.1"
+                type="number"
                 name="{{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>
+              </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="field.datatype == 'float'">
+              <ng-container *ngIf="field.readOnly">
+                <span>{{record[field.name]()}}</span>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+                <input
+                  class="form-control"
+                  type="number" step="0.1"
+                  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>
+      
+            <ng-container *ngIf="field.datatype == 'money'">
+              <ng-container *ngIf="field.readOnly">
+                <span>{{record[field.name]() | currency}}</span>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+                <input
+                  class="form-control"
+                  type="number" step="0.1"
+                  name="{{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)"/>
+              </ng-container>
+            </ng-container>
   
             <input *ngIf="field.datatype == 'bool'"
               class="form-check-input"
               type="checkbox"
               name="{{field.name}}"
               id="{{idPrefix}}-{{field.name}}"
-              [readonly]="field.readOnly"
+              [disabled]="field.readOnly"
               [ngModel]="record[field.name]()"
               (ngModelChange)="record[field.name]($event)"/>
   
-            <span *ngIf="field.datatype == 'link'"
-              [ngClass]="{nullable : !field.isRequired()}">
-              <select
-                class="form-control"
-                name="{{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>
+            <ng-container *ngIf="field.datatype == 'link'">
+              <ng-container *ngIf="field.readOnly">
+                <!-- in readOnly mode, if a value is presetn, it will
+                    live as the only item in the linkedValues array -->
+                <ng-container *ngIf="field.linkedValues[0]">
+                  <span>{{field.linkedValues[0].name}}</span>
+                </ng-container>
+              </ng-container>
+              <ng-container *ngIf="!field.readOnly">
+                <span [ngClass]="{nullable : !field.isRequired()}">
+                  <select
+                    class="form-control"
+                    name="{{field.name}}"
+                    id="{{idPrefix}}-{{field.name}}"
+                    [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>
+              </ng-container>
+            </ng-container>
   
             <eg-org-select *ngIf="field.datatype == 'org_unit'"
               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)">