From 012a83d37fd9b67fb1c0327c8656a135c83a429b Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Tue, 21 Oct 2014 15:45:20 -0400
Subject: [PATCH] adding 'surveyCheckboxes' directive

the surveyCheckboxes directive takes a list of checkbox values and creates a checkbox list that collectively represents one scope object instead of several individual ones
---
 awx/ui/static/js/helpers/JobSubmission.js | 62 +++++-----------
 awx/ui/static/lib/ansible/directives.js   | 86 +++++++++++++----------
 2 files changed, 66 insertions(+), 82 deletions(-)

diff --git a/awx/ui/static/js/helpers/JobSubmission.js b/awx/ui/static/js/helpers/JobSubmission.js
index 4f267f8349..855c3c1d43 100644
--- a/awx/ui/static/js/helpers/JobSubmission.js
+++ b/awx/ui/static/js/helpers/JobSubmission.js
@@ -543,7 +543,6 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
                 checked, min, max,
                 survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ;
 
-
             function buildHtml(question, index){
                 question.index = index;
 
@@ -594,47 +593,26 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
                 }
 
                 if(question.type === "multiselect"){
-                    // question.options = question.choices.split(/\n/);
+                    //seperate the choices out into an array
                     choices = question.choices.split(/\n/);
-
-                    // element = (question.type==="multiselect") ? "checkbox" : 'radio';
                     question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ;
-                    // scope[question.variable].choices = choices;
-                    // scope[question.variable] = {
-                    //     options: question.options,
-                    //     default: question.default,
-                    //     name: 'multi checkboxes',
-                    //     required: true,
-                    //     value: ''
-                    // }
-                    // function Ctrl(scope) {
-                    //     scope.field = {
-                    //         name:'multi checkboxes',
-                    //         value:'',
-                    //         required:true,
-                    //         options:[
-                    //             {value:'option 1'},
-                    //             {value:'option 2'},
-                    //             {value:'option 3'}
-                    //         ]
-                    //     };
-                    // }
-
-                    // html+='<survey-checkboxes ng-model=" '+question.variable+' " ></survey-checkboxes>' +
-                    //     '<div ng-show="job_launch_form.$valid">valid</div>'+
-                    //     '<div ng-hide="job_launch_form.$valid">invalid</div>';
-
-
-                    html+='<div class="survey_taker_input" > ';
-                    for( j = 0; j<choices.length; j++){
-                        checked = (!Empty(question.default) && question.default.indexOf(choices[j])!==-1) ? "checked" : "";
-                        html+= '<input  type="checkbox"  class="mc" name="'+question.variable+ ' " id="'+question.variable+'" value=" '+choices[j]+' " '+checked+' >' +
-                        '<span>'+choices[j] +'</span><br>' ;
+                    //ensure that the default answers are in an array
+                    scope[question.variable] = question.default.split(/\n/);
+                    //create a new object to be used by the surveyCheckboxes directive
+                    scope[question.variable + '_object'] = {
+                        name: question.variable,
+                        value: (question.default.split(/\n/)[0]==="") ? [] : question.default.split(/\n/) ,
+                        required: question.required,
+                        options:[]
+                    };
+                    //load the options into the 'options' key of the new object
+                    for(j=0; j<choices.length; j++){
+                        scope[question.variable+'_object'].options.push( {value:choices[j]} );
                     }
-                    html+=  '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' +
-                        'job_launch_form.'+question.variable+'.$error.required\">A value is required!</div>'+
-                        '<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>';
-                    html+= '</div>'; //end survey_taker_input
+                    //surveyCheckboxes takes a list of checkboxes and connects them to one scope variable
+                    html += '<survey-checkboxes name="'+question.variable+'" ng-model=" '+question.variable + '_object " ng-required="'+question.required+'">'+
+                        '</survey-checkboxes>{{job_launch_form.'+question.variable+'_object.$error.checkbox}}'+
+                        '<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.checkbox">A value is required!</div>';
                 }
 
                 if(question.type === 'integer'){
@@ -659,11 +637,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
                 }
             }
 
-            scope.someSelected = function (object) {
-                return Object.keys(object).some(function (key) {
-                    return object[key];
-                });
-            };
+
 
 
             Rest.setUrl(survey_url);
diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js
index 6d5b16096e..a62a1d3367 100644
--- a/awx/ui/static/lib/ansible/directives.js
+++ b/awx/ui/static/lib/ansible/directives.js
@@ -64,48 +64,58 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
     })
 
 
-// .directive('surveyCheckboxes', function(){
-//     return {
-//         restrict: 'E',
-//         require: 'ngModel',
-//         scope: { 'ngModel': '=accessor' },
-//         template: '<div ng-repeat="option in ngModel().options">'
-//             +'<label>'
-//             +'<input type="checkbox" ng-model="cbModel[option]" '
-//             +'value="{{option}}" ng-change="update()" ng-required="isRequired()"/>'
-//             +'{{option}}'
-//             +'</label>'
-//             +'</div>',
-//         link: function(scope, element, attrs, ctrl){
-//             scope.cbModel= {};
+.directive('surveyCheckboxes', function(){
+    return {
+        restrict: 'E',
+        require: 'ngModel',
+        scope: { ngModel: '=ngModel' },
+        template: '<div class="survey_taker_input" ng-repeat="option in ngModel.options">' +
+            '<input type="checkbox" ng-model="cbModel[option.value]" ' +
+            'value="{{option.value}}" class="mc" ng-change="update(this.value)" />' +
+            '<span>'+
+            '{{option.value}}'+
+            '</span>'+
+            '</div>',
+        link: function(scope, element, attrs, ctrl){
+            scope.cbModel= {};
+            ctrl.$setValidity('reqCheck', true);
+            angular.forEach(scope.ngModel.value, function(value){
+                scope.cbModel[value] = true;
 
-//             ctrl.$parsers.unshift(function(value){
-//                 for (var c in scope.cbModel) {
-//                     if (scope.cbModel[c]) {
-//                         ctrl.$setValidity('checkbox', true);
-//                     }
-//                 }
-//                 ctrl.$setValidity('checkbox', false);
-//             });
+            });
 
-//             scope.update = function(){
-//                 var val = [];
-//                 angular.forEach(scope.cbModel, function(v,k){
-//                     if (v)
-//                         val.push(k);
-//                 });
-//                 if (val.length>0)
-//                     scope.ngModel().value = angular.toJson(val);
-//             };
+            if(scope.ngModel.required===true && scope.ngModel.value.length===0){
+                ctrl.$setValidity('reqCheck', false);
+            }
 
-//             scope.isRequired = function(){
-//                 if (!scope.ngModel().required) return false;
+            ctrl.$parsers.unshift(function(){
+                for (var c in scope.cbModel) {
+                    if (scope.cbModel[c]) {
+                        ctrl.$setValidity('checkbox', true);
+                    }
+                }
+                ctrl.$setValidity('checkbox', false);
+            });
 
-//                 return scope.ngModel().required;
-//             };
-//         }
-//     };
-// })
+            scope.update = function(){
+                var val = [];
+                angular.forEach(scope.cbModel, function(v,k){
+                    if (v)
+                        val.push(k);
+                });
+                if (val.length>0){
+                    scope.ngModel.value = val;
+                    scope.$parent[scope.ngModel.name] = val;
+                    ctrl.$setValidity('checkbox', true);
+                    ctrl.$setValidity('reqCheck', true);
+                }
+                 else if(scope.ngModel.required===true){
+                    ctrl.$setValidity('checkbox' , false);
+                }
+            };
+        }
+    };
+})
 
     // caplitalize  Add to any input field where the first letter of each
     //              word should be capitalized. Use in place of css test-transform.