Merge pull request #1640 from mabashian/1561-survey-multi-select

Fixed bug on non-required multiple choice survey questions
This commit is contained in:
Michael Abashian
2018-03-23 09:31:56 -04:00
committed by GitHub
5 changed files with 40 additions and 36 deletions

View File

@@ -51,6 +51,7 @@ function TemplatesStrings (BaseString) {
CHOOSE_VERBOSITY: t.s('Choose a verbosity'), CHOOSE_VERBOSITY: t.s('Choose a verbosity'),
EXTRA_VARIABLES: t.s('Extra Variables'), EXTRA_VARIABLES: t.s('Extra Variables'),
PLEASE_ENTER_ANSWER: t.s('Please enter an answer.'), PLEASE_ENTER_ANSWER: t.s('Please enter an answer.'),
PLEASE_SELECT_VALUE: t.s('Please select a value'),
VALID_INTEGER: t.s('Please enter an answer that is a valid integer.'), VALID_INTEGER: t.s('Please enter an answer that is a valid integer.'),
VALID_DECIMAL: t.s('Please enter an answer that is a decimal number.'), VALID_DECIMAL: t.s('Please enter an answer that is a decimal number.'),
PLAYBOOK_RUN: t.s('Playbook Run'), PLAYBOOK_RUN: t.s('Playbook Run'),

View File

@@ -1247,31 +1247,29 @@ function(ConfigurationUtils, i18n, $rootScope) {
}; };
}]) }])
.directive('awRequireMultiple', [function() { .directive('awRequireMultiple', ['Empty', function(Empty) {
return { return {
require: 'ngModel', require: 'ngModel',
link: function postLink(scope, element, attrs, ngModel) { link: function postLink(scope, element, attrs, ngModel) {
// Watch for changes to the required attribute // Watch for changes to the required attribute
attrs.$observe('required', function(value) { attrs.$observe('required', function() {
if(value) { ngModel.$validate();
ngModel.$validators.required = function (value) {
if(angular.isArray(value)) {
if(value.length === 0) {
return false;
}
else {
return (!value[0] || value[0] === "") ? false : true;
}
}
else {
return (!value || value === "") ? false : true;
}
};
}
else {
delete ngModel.$validators.required;
}
}); });
ngModel.$validators.multipleSelect = function (modelValue) {
if(attrs.required) {
if(angular.isArray(modelValue)) {
// Checks to make sure at least one value in the array
return _.some(modelValue, function(arrayVal) {
return !Empty(arrayVal);
});
} else {
return !Empty(modelValue);
}
} else {
return true;
}
};
} }
}; };
}]); }]);

View File

@@ -10,13 +10,13 @@
</div> </div>
<div ng-if="question.type === 'text'"> <div ng-if="question.type === 'text'">
<input type="text" id="survey_question_{{$index}}" ng-model="question.model" name="survey_question_{{$index}}" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" ng-required="question.required"> <input type="text" id="survey_question_{{$index}}" ng-model="question.model" name="survey_question_{{$index}}" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" ng-required="question.required">
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
</div> </div>
<div ng-if="question.type === 'textarea'"> <div ng-if="question.type === 'textarea'">
<textarea id="survey_question_{{$index}}" name="survey_question_{{$index}}" ng-model="question.model" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control final Form-textArea" ng-required="question.required" rows="3"></textarea> <textarea id="survey_question_{{$index}}" name="survey_question_{{$index}}" ng-model="question.model" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control final Form-textArea" ng-required="question.required" rows="3"></textarea>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
</div> </div>
<div ng-if="question.type === 'password'"> <div ng-if="question.type === 'password'">
<div class="input-group"> <div class="input-group">
@@ -26,20 +26,20 @@
<input id="survey_question_{{$index}}" ng-if="!question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" autocomplete="false"> <input id="survey_question_{{$index}}" ng-if="!question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" ng-minlength="question.minlength" ng-maxlength="question.maxlength" class="form-control Form-textInput" autocomplete="false">
<input id="survey_question_{{$index}}" ng-if="question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" aw-password-min="question.minlength" aw-password-max="question.maxlength" class="form-control Form-textInput" autocomplete="false"> <input id="survey_question_{{$index}}" ng-if="question.default" type="password" ng-model="question.model" name="survey_question_{{$index}}" ng-required="question.required" aw-password-min="question.minlength" aw-password-max="question.maxlength" class="form-control Form-textInput" autocomplete="false">
</div> </div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awPasswordMin || forms.survey.survey_question_{{$index}}.$error.awPasswordMax || forms.survey.survey_question_{{$index}}.$error.minlength || forms.survey.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awPasswordMin || surveyForm.survey_question_{{$index}}.$error.awPasswordMax || surveyForm.survey_question_{{$index}}.$error.minlength || surveyForm.survey_question_{{$index}}.$error.maxlength"><span translate>Please enter an answer between</span> {{question.minlength}} <span translate>to</span> {{question.maxlength}} <span translate>characters long.</span></div>
</div> </div>
<div ng-if="question.type === 'integer'"> <div ng-if="question.type === 'integer'">
<input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" integer aw-min="question.minValue" aw-max="question.maxValue"/> <input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" integer aw-min="question.minValue" aw-max="question.maxValue"/>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.number || forms.survey.survey_question_{{$index}}.$error.integer">{{:: vm.strings.get('prompt.VALID_INTEGER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.number || surveyForm.survey_question_{{$index}}.$error.integer">{{:: vm.strings.get('prompt.VALID_INTEGER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awMin || forms.survey.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span>and</span> {{question.maxValue}}.</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awMin || surveyForm.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span>and</span> {{question.maxValue}}.</div>
</div> </div>
<div ng-if="question.type === 'float'"> <div ng-if="question.type === 'float'">
<input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" smart-float aw-min="question.minValue" aw-max="question.maxValue"/> <input type="number" id="survey_question_{{$index}}" ng-model="question.model" class="form-control Form-textInput" name="survey_question_{{$index}}" ng-required="question.required" smart-float aw-min="question.minValue" aw-max="question.maxValue"/>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$dirty && forms.survey.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_ANSWER') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.number || forms.survey.survey_question_{{$index}}.$error.float">{{:: vm.strings.get('prompt.VALID_DECIMAL') }}</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.number || surveyForm.survey_question_{{$index}}.$error.float">{{:: vm.strings.get('prompt.VALID_DECIMAL') }}</div>
<div class="error survey_error" ng-show="forms.survey.survey_question_{{$index}}.$error.awMin || forms.survey.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span translate>and</span> {{question.maxValue}}.</div> <div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$error.awMin || surveyForm.survey_question_{{$index}}.$error.awMax"><span translate>Please enter an answer between</span> {{question.minValue}} <span translate>and</span> {{question.maxValue}}.</div>
</div> </div>
<div ng-if="question.type === 'multiplechoice'"> <div ng-if="question.type === 'multiplechoice'">
<div class="survey_taker_input"> <div class="survey_taker_input">
@@ -48,9 +48,11 @@
question="question" question="question"
choices="question.choices" choices="question.choices"
ng-required="question.required" ng-required="question.required"
ng-model="question.model"> ng-model="question.model"
form-element-name="survey_question_{{$index}}">
</multiple-choice> </multiple-choice>
</div> </div>
<div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.multipleSelect">{{:: vm.strings.get('prompt.PLEASE_SELECT_VALUE') }}</div>
</div> </div>
<div ng-if="question.type === 'multiselect'"> <div ng-if="question.type === 'multiselect'">
<multiple-choice <multiple-choice
@@ -58,8 +60,10 @@
question="question" question="question"
choices="question.choices" choices="question.choices"
ng-required="question.required" ng-required="question.required"
ng-model="question.model"> ng-model="question.model"
form-element-name="survey_question_{{$index}}">
</multiple-choice> </multiple-choice>
<div class="error survey_error" ng-show="surveyForm.survey_question_{{$index}}.$dirty && surveyForm.survey_question_{{$index}}.$error.multipleSelect">{{:: vm.strings.get('prompt.PLEASE_SELECT_VALUE') }}</div>
</div> </div>
</div> </div>
</form> </form>

View File

@@ -36,7 +36,8 @@ export default
isRequired: '=ngRequired', isRequired: '=ngRequired',
selectedValue: '=ngModel', selectedValue: '=ngModel',
isDisabled: '=ngDisabled', isDisabled: '=ngDisabled',
preview: '=' preview: '=',
formElementName: '@'
}, },
templateUrl: templateUrl('templates/survey-maker/render/multiple-choice'), templateUrl: templateUrl('templates/survey-maker/render/multiple-choice'),
link: _.partial(link, $timeout, CreateSelect2) link: _.partial(link, $timeout, CreateSelect2)

View File

@@ -1,5 +1,5 @@
<div> <div>
<select class="form-control SurveyMaker-previewSelect" ng-model="selectedValue" multi-select ng-required="isRequired" ng-disabled="isDisabled" aw-require-multiple> <select class="form-control SurveyMaker-previewSelect" name="{{formElementName}}" ng-model="selectedValue" multi-select ng-required="isRequired" ng-disabled="isDisabled" aw-require-multiple>
<option ng-repeat="choice in choices" value="{{choice}}">{{choice}}</option> <option ng-repeat="choice in choices" value="{{choice}}">{{choice}}</option>
</select> </select>
</div> </div>