#12 Add custom field managment to case template admin page

Author: nadouani

ui/app/scripts/controllers/admin/AdminCaseTemplatesCtrl.js

@@ -8,8 +8,28 @@
             $scope.templates = [];
             $scope.metrics = [];
             $scope.fields = [];
+            $scope.templateCustomFields = [];
             $scope.templateIndex = -1;
 
+            /**
+             * Convert the template custom fields definition to a list of ordered field names
+             * to be used for drag&drop sorting feature
+             */
+            var getTemplateCustomFields = function(customFields) {
+                var result = [];
+
+                result = _.pluck(_.sortBy(_.map(customFields, function(definition, name){
+                    return {
+                        name: name,
+                        order: definition.order
+                    }
+                }), function(item){
+                    return item.order;
+                }), 'name');
+
+                return result;
+            }
+
             $scope.sortableOptions = {
                 handle: '.drag-handle',
                 stop: function(/*e, ui*/) {
@@ -23,6 +43,13 @@
                 axis: 'y'
             };
 
+            $scope.keys = function(obj) {
+                if(!obj) {
+                    return [];
+                }
+                return _.keys(obj);
+            };
+
             $scope.loadCache = function() {
                 MetricsCacheSrv.all().then(function(metrics){
                     $scope.metrics = metrics;
@@ -59,6 +86,8 @@
 
                     $scope.template = template;
                     $scope.tags = UtilsSrv.objectify($scope.template.tags, 'text');
+
+                    $scope.templateCustomFields = getTemplateCustomFields(template.customFields);
                 });
 
                 $scope.templateIndex = index;
@@ -73,7 +102,7 @@
                     tags: [],
                     tasks: [],
                     metricNames: [],
-                    customFieldNames: [],
+                    customFields: {},
                     description: ''
                 };
                 $scope.tags = [];
@@ -134,18 +163,15 @@
             };
 
             $scope.addCustomField = function(field) {
-                var fields = $scope.template.customFieldNames || [];
-
-                if(fields.indexOf(field.name) === -1) {
-                    fields.push(field.name);
-                    $scope.template.customFieldNames = fields;
+                if($scope.templateCustomFields.indexOf(field.name) === -1) {
+                    $scope.templateCustomFields.push(field.name);
                 } else {
                     NotificationSrv.log('The custom field [' + field.label + '] has already been added to the template', 'warning');
                 }
             };
 
             $scope.removeCustomField = function(fieldName) {
-                $scope.template.customFieldNames = _.without($scope.template.customFieldNames, fieldName);
+                $scope.templateCustomFields = _.without($scope.templateCustomFields, fieldName);
             };
 
             $scope.deleteTemplate = function() {
@@ -158,7 +184,19 @@
             };
 
             $scope.saveTemplate = function() {
+                // Set tags
                 $scope.template.tags = _.pluck($scope.tags, 'text');
+
+                // Set custom fields
+                $scope.template.customFields = {};
+                _.each($scope.templateCustomFields, function(value, index) {
+                    var fieldDef = $scope.fields[value];
+
+                    $scope.template.customFields[value] = {};
+                    $scope.template.customFields[value][fieldDef.type] = null;
+                    $scope.template.customFields[value].order = index + 1;
+                });
+
                 if (_.isEmpty($scope.template.id)) {
                     $scope.createTemplate();
                 } else {
@@ -207,7 +245,7 @@
                         $scope.template.tasks.push(task);
                     } else {
                         $scope.template.tasks = [task];
-                    }                    
+                    }
                 }
 
                 $uibModalInstance.dismiss();

ui/app/views/partials/admin/case-templates.html

@@ -194,8 +194,7 @@ <h4 class="vpad10 text-primary">
                     <div class="row">
                         <div class="col-md-6">
                             <h4 class="vpad10 text-primary">
-                                Case custom fields ({{template.customFieldNames.length || 0}})
-
+                                Case custom fields ({{keys(template.customFields).length}})
                                 <span uib-dropdown class="pull-right">
                                     <a href class="dropdown-toggle" uib-dropdown-toggle>
                                         <i class="fa fa-plus"></i>
@@ -210,8 +209,8 @@ <h4 class="vpad10 text-primary">
                                 </span>
                             </h4>
 
-                            <div ng-if="template.customFieldNames.length !== 0" ng-init="isCollapsed=true"  ui-sortable="sortableFields" ng-model="template.customFieldNames">
-                                <div class="panel panel-default" ng-repeat="m in template.customFieldNames" ng-init="description=fields[m].description">
+                            <div ng-if="templateCustomFields.length !== 0" ng-init="isCollapsed=true" ui-sortable="sortableFields" ng-model="templateCustomFields">
+                                <div class="panel panel-default" ng-repeat="m in templateCustomFields" ng-init="description=fields[m].description">
                                     <div class="panel-heading">
                                         <span class="drag-handle text-primary clickable mr-xxs">
                                             <i class="fa fa-bars"></i>
@@ -233,10 +232,10 @@ <h4 class="vpad10 text-primary">
                                     </div>
                                 </div>
                             </div>
-                            <div class="text-danger" ng-if="!template.customFieldNames || template.customFieldNames.length === 0">
+                            <div class="text-danger" ng-if="templateCustomFields.length === 0">
                                 <table class="table table-striped">
                                     <tr>
-                                        <td>No customfields have been added</td>
+                                        <td>No custom fields have been added</td>
                                     </tr>
                                 </table>
                             </div>