From 77840ad34e3ce62972104db0ebc34a14b99aab50 Mon Sep 17 00:00:00 2001
From: Francis Page <fpage@isbx.com>
Date: Wed, 2 Aug 2017 17:36:00 +0800
Subject: [PATCH] [DD-2031] Included handling of space key for multi-select

---
 .../directives/ModelField/ModelField.js       | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/client/common/directives/ModelField/ModelField.js b/client/common/directives/ModelField/ModelField.js
index 4d10563e..12723b17 100644
--- a/client/common/directives/ModelField/ModelField.js
+++ b/client/common/directives/ModelField/ModelField.js
@@ -40,6 +40,19 @@ angular.module('dashboard.directives.ModelField', [
   };
 })
 
+.directive('mySpace', function () {
+  return function (scope, element, attrs) {
+    element.bind("keydown keypress", function (event) {
+      if(event.which === 32) {
+        scope.$apply(function (){
+            scope.$eval(attrs.mySpace);
+        });
+        event.preventDefault();
+      }
+    });
+  };
+})
+
 .directive('modelFieldEdit', function($compile, $cookies) {
   function getTemplate(type, scope) {
     var template = '';
@@ -137,8 +150,8 @@ angular.module('dashboard.directives.ModelField', [
         template = '<label class="col-sm-2 control-label">{{ display.label || key }}:</label>\
           <div class="col-sm-10 multi-select">\
             <div class="select-item checkbox-container" ng-repeat="(itemKey, itemValue) in display.options">\
-              <input type="checkbox" class="field" ng-attr-id="{{key+\'-\'+itemKey}}" ng-model="multiSelectOptions[itemKey]" ng-checked="multiSelectOptions[itemKey]" ng-disabled="{{ display.readonly }}" ng-change="clickMultiSelectCheckbox(key, itemKey, itemValue, multiSelectOptions)">\
-              <label class="checkbox-label" ng-attr-for="{{key+\'-\'+itemKey}}">{{ itemValue }}</label>\
+              <input type="checkbox" class="field" my-Space="clickMultiSelectCheckbox(key, itemKey, itemValue, multiSelectOptions)" ng-model="multiSelectOptions[itemKey]" ng-checked="multiSelectOptions[itemKey]" ng-disabled="display.readonly">\
+              <label class="checkbox-label" ng-click="clickMultiSelectCheckbox(key, itemKey, itemValue, multiSelectOptions)">{{ itemValue }}</label>\
             </div>\
             <div class="model-field-description" ng-if="display.description">{{ display.description }}</div>\
           </div>';
@@ -278,8 +291,8 @@ angular.module('dashboard.directives.ModelField', [
             scope.model.properties[scope.key.property].display = scope.key;
           }
           scope.key = scope.key.property;
-        } 
-        
+        }
+
         var property = { display: {type: "text"} };
         if (scope.model.properties && scope.model.properties[scope.key]) property = scope.model.properties[scope.key];
         if (!property) {
@@ -290,7 +303,7 @@ angular.module('dashboard.directives.ModelField', [
           if (!property.display) property.display = {};
           //TODO: check the property definition in the loopback model and pick a better default "type"
           switch (property.type) {
-            case "date": 
+            case "date":
             case "Date":
                 property.display.type = "datetime";
             break;
@@ -338,7 +351,7 @@ angular.module('dashboard.directives.ModelField', [
           //Make sure boolean (checkbox) values are numeric (below only gets called on init and not when state changes)
           if (typeof scope.data[scope.key] === "string") scope.data[scope.key] = parseInt(scope.data[scope.key]);
         }
-        
+
         if (property.display.type == "slider") {
           if (typeof scope.data[scope.key] === 'undefined' || scope.data[scope.key] == null) {
             scope.data[scope.key] = property.display.options.from + ";" + property.display.options.to;
@@ -381,9 +394,10 @@ angular.module('dashboard.directives.ModelField', [
               break;
           }
         }
-        
+
         //Handle translating multi-select checks to scope.data[scope.key] output format
         scope.clickMultiSelectCheckbox = function(questionKey, itemKey, itemValue, multiSelectOptions) {
+          multiSelectOptions[itemKey] = !multiSelectOptions[itemKey];
           var output = property.display.output == "array" ? [] : property.display.output == "object" ? {} : "";
           if (property.display.output == "object") {
             //Return Key/Value Pair