webstaff: teach egEditFmRecord how to use custom template for a field
authorGalen Charlton <gmc@equinoxinitiative.org>
Wed, 10 May 2017 21:36:44 +0000 (17:36 -0400)
committerGalen Charlton <gmc@equinoxinitiative.org>
Wed, 10 May 2017 21:36:44 +0000 (17:36 -0400)
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/templates/staff/share/t_fm_record_editor.tt2
Open-ILS/web/js/ui/default/staff/services/fm_record_editor.js

index f7a7a6e..2b7788c 100644 (file)
         <label for="rec-{{field.name}}">{{field.label}}</label>
       </div>
       <div class="col-md-9">
-        <span  ng-if="field.datatype == 'id'">{{rec[field.name]()}}</span>
-        <input ng-if="field.datatype == 'text'"
-          ng-readonly="field.readonly"
-          ng-required="field.is_required()"
-          ng-model="rec[field.name]"
-          ng-model-options="{ getterSetter : true }">
-        </input>
-        <input ng-if="field.datatype == 'int'"
-          type="number"
-          ng-readonly="field.readonly"
-          ng-required="field.is_required()"
-          ng-model="rec[field.name]"
-          ng-model-options="{ getterSetter : true }">
-        </input>
-        <input ng-if="field.datatype == 'float'"
-          type="number" step="0.1"
-          ng-readonly="field.readonly"
-          ng-required="field.is_required()"
-          ng-model="rec[field.name]"
-          ng-model-options="{ getterSetter : true }">
-        </input>
-        <input ng-if="field.datatype == 'bool'"
-          type="checkbox"
-          ng-readonly="field.readonly"
-          ng-model="rec[field.name]"
-          ng-model-options="{ getterSetter : true }">
-        </input>
-        <span ng-if="field.datatype == 'link'"
-          ng-class="{nullable : !field.is_required()}">
-          <select ng-if="field.datatype == 'link'"
+        <span  ng-if="field.use_custom_template">
+          <eg-fm-custom-field-input template="field.custom_template" handlers="field.handlers">
+        </span>
+        <span  ng-if="!field.use_custom_template">
+          <span  ng-if="field.datatype == 'id'">{{rec[field.name]()}}</span>
+          <input ng-if="field.datatype == 'text'"
+            ng-readonly="field.readonly"
+            ng-required="field.is_required()"
+            ng-model="rec[field.name]"
+            ng-model-options="{ getterSetter : true }">
+          </input>
+          <input ng-if="field.datatype == 'int'"
+            type="number"
+            ng-readonly="field.readonly"
+            ng-required="field.is_required()"
+            ng-model="rec[field.name]"
+            ng-model-options="{ getterSetter : true }">
+          </input>
+          <input ng-if="field.datatype == 'float'"
+            type="number" step="0.1"
             ng-readonly="field.readonly"
             ng-required="field.is_required()"
-            ng-options="item.id as item.name for item in field.linked_values"
             ng-model="rec[field.name]"
             ng-model-options="{ getterSetter : true }">
-          </select>
+          </input>
+          <input ng-if="field.datatype == 'bool'"
+            type="checkbox"
+            ng-readonly="field.readonly"
+            ng-model="rec[field.name]"
+            ng-model-options="{ getterSetter : true }">
+          </input>
+          <span ng-if="field.datatype == 'link'"
+            ng-class="{nullable : !field.is_required()}">
+            <select ng-if="field.datatype == 'link'"
+              ng-readonly="field.readonly"
+              ng-required="field.is_required()"
+              ng-options="item.id as item.name for item in field.linked_values"
+              ng-model="rec[field.name]"
+              ng-model-options="{ getterSetter : true }">
+            </select>
+          </span>
+          <eg-org-selector ng-if="field.datatype == 'org_unit'"
+            selected="rec_org_values[field.name]"
+            onchange="rec_orgs[field.name]" nodefault>
+          </eg-org-selector>
         </span>
-        <eg-org-selector ng-if="field.datatype == 'org_unit'"
-          selected="rec_org_values[field.name]"
-          onchange="rec_orgs[field.name]" nodefault>
-        </eg-org-selector>
       </div>
     </div>
   </div>
index be04844..5c62eb3 100644 (file)
@@ -16,6 +16,14 @@ angular.module('egFmRecordEditorMod',
             // record ID to update
             recordId : '=',
 
+            // fields with custom templates
+            // hash keyed on field name; may contain
+            //   template - Angular template; should access
+            //              field value using rec_flat[field.name]
+            //   handlers - any functions you want to pass
+            //              in to the custom template
+            customFieldTemplates : '=',
+
             // comma-separated list of fields that should not be
             // displayed
             hiddenFields : '@',
@@ -74,6 +82,7 @@ angular.module('egFmRecordEditorMod',
 
             $scope.record_label = egCore.idl.classes[$scope.idlClass].label;
             $scope.rec_orgs = {};
+            $scope.rec_flat = {};
             $scope.rec_org_values = {};
 
             if ($scope.mode == 'update') {
@@ -110,6 +119,12 @@ angular.module('egFmRecordEditorMod',
                             rec[field.name]('f');
                         }
                     }
+                    // retrieve values from any fields controlled
+                    // by custom templates, which for the moment all
+                    // expect to be passed an ordinary flat value
+                    if (field.name in $scope.rec_flat) {
+                        rec[field.name]($scope.rec_flat[field.name]);
+                    }
                 });
             }
 
@@ -166,6 +181,12 @@ angular.module('egFmRecordEditorMod',
                             $scope.rec_org_values[field.name] = $scope.rec_orgs[field.name]();
                         }
                     }
+                    if (field.name in $scope.customFieldTemplates) {
+                        field.use_custom_template = true;
+                        field.custom_template = $scope.customFieldTemplates[field.name].template;
+                        field.handlers = $scope.customFieldTemplates[field.name].handlers;
+                        $scope.rec_flat[field.name] = $scope.rec[field.name]();
+                    }
                 });
                 return fields.filter(function(field) { return !(field.name in $scope.hidden) });
             }
@@ -189,3 +210,17 @@ angular.module('egFmRecordEditorMod',
         }]
     };
 })
+
+.directive('egFmCustomFieldInput', function($compile) {
+    return {
+        restrict : 'E',
+        scope : {
+            template : '=',
+            handlers : '='
+        },
+        link : function(scope, element, attrs) {
+            element.html(scope.template);
+            $compile(element.contents())(scope.$parent);
+        }
+    };
+})