#12 Add support to custom fields with enumerated list of possible values

Author: nadouani

ui/app/index.html

@@ -190,6 +190,7 @@
     <script src="scripts/directives/updatableBoolean.js"></script>
     <script src="scripts/directives/updatableDataDropdown.js"></script>
     <script src="scripts/directives/updatableDate.js"></script>
+    <script src="scripts/directives/updatableSelect.js"></script>
     <script src="scripts/directives/updatableSimpleText.js"></script>
     <script src="scripts/directives/updatableTags.js"></script>
     <script src="scripts/directives/updatableText.js"></script>

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

@@ -19,9 +19,27 @@
                 NotificationSrv.error('AdminCustomFieldDialogCtrl', response.data, response.status);
             };
 
+            var buildOptionsCollection = function(options) {
+                if(!options || options === '') {
+                    return [];
+                }
+
+                var type = self.customField.type;
+                //var values = _.isArray(self.customField.options) ? self.customField.options : self.customField.options.split('\n');
+                var values = self.customField.options.split('\n');
+
+                if(type === 'number') {                    
+                    return _.without(values.map(function(item) {
+                        return Number(item);
+                    }), NaN);
+                }
+
+                return values;
+            };
+
             self.saveField = function() {
                 var postData = _.pick(self.customField, 'name', 'title', 'label', 'description', 'type');
-                postData.options = _.isArray(self.customField.options) ? self.customField.options : self.customField.options.split('\n');
+                postData.options = buildOptionsCollection(self.customField.options);
 
                 if(self.customField.id) {
                     ListSrv.update(

ui/app/scripts/directives/updatableBoolean.js

@@ -7,7 +7,6 @@
                 'link': UtilsSrv.updatableLink,
                 'templateUrl': 'views/directives/updatable-boolean.html',
                 'scope': {
-                    'inputType': '@',
                     'value': '=?',
                     'onUpdate': '&',
                     'active': '=?',

ui/app/scripts/directives/updatableSelect.js

@@ -0,0 +1,18 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives')
+        .directive('updatableSelect', function(UtilsSrv) {
+            return {
+                'restrict': 'E',
+                'link': UtilsSrv.updatableLink,
+                'templateUrl': 'views/directives/updatable-select.html',
+                'scope': {
+                    'options': '=?',
+                    'value': '=?',
+                    'onUpdate': '&',
+                    'active': '=?',
+                    'placeholder': '@'
+                }
+            };
+        });
+})();

ui/app/views/directives/updatable-boolean.html

@@ -6,7 +6,7 @@
 			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
 		</a>
 	</small>
-	<span ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
 </span>
 <span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
 	<form ng-submit="update()">

ui/app/views/directives/updatable-date.html

@@ -6,7 +6,7 @@
             <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
         </a>
     </small>
-    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    <small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
 </span>
 <span ng-init="updatable.dropdownOpen=false" ng-show="updatable.updating">
 

ui/app/views/directives/updatable-select.html

@@ -0,0 +1,25 @@
+<span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
+	<span ng-if="value!==null && value !==''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value">{{value}}</span>
+	<span ng-if="value === null || value === undefined" style="vertical-align: top;" class="updatable-value text-warning"><em>Not Specified</em></span>
+	<small ng-show="active">
+		<a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
+			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
+		</a>
+	</small>
+	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
+</span>
+<span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
+	<form ng-submit="update()">
+		<div class="input-group input-group-sm">
+			<select class="form-control input-sm" ng-model="value" ng-options="v for v in options" ng-change="update()"></select>
+			<span class="input-group-btn">
+				<button class="btn btn-sm btn-default" type="submit">
+					<i class="text-success glyphicon glyphicon-ok"></i>
+				</button>
+				<button class="btn btn-sm btn-default" type="button" ng-click="cancel()">
+					<i class="text-danger glyphicon glyphicon-remove"></i>
+				</button>
+            </span>
+		</div>
+	</form>
+</span>

ui/app/views/directives/updatable-simple-text.html

@@ -6,7 +6,7 @@
 			<i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
 		</a>
 	</small>
-	<span ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+	<small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
 </span>
 <span ng-show="updatable.updating" ng-init="updatable.dropdownOpen=false">
 	<form ng-submit="update()">

ui/app/views/directives/updatable-tags.html

@@ -1,12 +1,11 @@
 <span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
     <span class="updatable-value" ng-show="!value || value.length === 0" style="vertical-align:top; white-space: pre-wrap"><span class="text-warning"><em>Not Specified</em></span></span>
-    <span ng-repeat="tag in value">
-        <span class="label label-primary mr-xxxs"><span ng-bind="tag.text"></span>
-        </span>
-    </span>
+    <small ng-repeat="tag in value">
+        <span class="label label-primary mr-xxxs" ng-bind="tag.text"></span>
+    </small>
 
     <small ng-show="active">
-        <a style="cursor: pointer;" target="_self" tooltip-popup-delay='500' uib-tooltip="edit">
+        <a href class="clickable" tooltip-popup-delay='500' uib-tooltip="edit">
             <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
         </a>
     </small>

ui/app/views/directives/updatable-text.html

@@ -13,7 +13,7 @@
             <em>Not specified</em>
         </span>
         <small ng-show="active">
-            <a style="cursor: pointer;" uib-tooltip="edit">
+            <a href class="clickable" uib-tooltip="edit">
                 <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
             </a>
         </small>

ui/app/views/directives/updatable-user.html

@@ -5,7 +5,7 @@
             <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
         </a>
     </small>
-    <span ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    <small ng-hide="active">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</small>
 
 </span>
 <span ng-init="updatable.dropdownOpen=false" ng-show="updatable.updating">

ui/app/views/partials/case/details/custom.fields.html

@@ -21,7 +21,14 @@ <h4 class="vpad10 text-primary">
         ng-repeat="k in orderedFields"
         ng-init="fieldDef = customFieldsCache[k]; customFieldValue=caze.customFields[fieldDef.name][fieldDef.type];">
         <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.label}}</dt>
-        <dd ng-switch="fieldDef.type">
+        <dd ng-if="fieldDef.options.length > 0">
+            <updatable-select
+                options="fieldDef.options"
+                on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                value="customFieldValue"></updatable-select>
+        </dd>
+
+        <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
             <updatable-simple-text ng-switch-when="string"
                 input-type="text"
                 on-update="updateField(getCustomFieldName(fieldDef), newValue)"
@@ -41,8 +48,6 @@ <h4 class="vpad10 text-primary">
                 on-update="updateField(getCustomFieldName(fieldDef), newValue)"
                 value="customFieldValue"></updatable-boolean>
 
-
-
             <span ng-switch-default>Not Editable</span>
         </dd>
     </dl>