Add radio input support to the required field directive (#483)

* Add radio input support to the required field directive * Add the radio error class
b12io · Oct 9, 2018 · d36411f · d36411f
1 parent 2418534
commit d36411f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git a/orchestra/static/dist/main.css b/orchestra/static/dist/main.css
@@ -1912,6 +1912,10 @@ a.logo {
   .task-view .required-field-error.text-error input {
     border: 1px solid red;
     box-shadow: 0px 0px 1px red inset; }
+  .task-view .required-field-error.radio-error {
+    border-left: 2px solid red;
+    padding-left: 10px;
+    display: inline-block; }
 @charset "UTF-8";
 /*!
  * Pikaday

diff --git a/orchestra/static/dist/main.js b/orchestra/static/dist/main.js
@@ -59479,18 +59479,19 @@ function orchestraRequiredField($compile, requiredFields) {
   return {
     restrict: 'EA',
     link: function link(scope, elem, attrs) {
-      var field = elem.find('input')[0];
+      var fields = elem.find('input');
+      var fieldType = fields[0].getAttribute('type');
       var errorClass = elem.attr('data-error-class');
       if (!errorClass) {
-        errorClass = field.getAttribute('type') + '-error';
+        errorClass = fieldType + '-error';
       }
-      if (field && field.getAttribute('type') !== 'checkbox' && field.getAttribute('type') !== 'text') {
+      if (fields[0] && fieldType !== 'radio' && fieldType !== 'checkbox' && fieldType !== 'text') {
         console.error('Unsupported required field type.');
         return;
       }
-      requiredFields.require('input-' + field.getAttribute('type'), field);
+      requiredFields.require('input-' + fieldType, fields);
       var toggleError = function toggleError() {
-        if (requiredFields.invalid.indexOf(field) >= 0) {
+        if (requiredFields.invalid.indexOf(fields) >= 0) {
           elem.addClass('required-field-error ' + errorClass);
         } else {
           elem.removeClass('required-field-error ' + errorClass);
@@ -59522,11 +59523,16 @@ function requiredFields($rootScope, orchestraService) {
 
   var requiredFields = {
     validators: {
-      'input-checkbox': [function (elem) {
-        return elem.checked;
+      'input-checkbox': [function (elems) {
+        return elems[0].checked;
       }],
-      'input-text': [function (elem) {
-        return elem.value && elem.value.length > 0;
+      'input-text': [function (elems) {
+        return elems[0].value && elems[0].value.length > 0;
+      }],
+      'input-radio': [function (elems) {
+        return Array.from(elems).some(function (elem) {
+          return elem.checked;
+        });
       }]
     },
     setup: function setup(data) {

diff --git a/orchestra/static/orchestra/task/required-field.directive.es6.js b/orchestra/static/orchestra/task/required-field.directive.es6.js
@@ -11,20 +11,22 @@ export default function orchestraRequiredField ($compile, requiredFields) {
   return {
     restrict: 'EA',
     link: function (scope, elem, attrs) {
-      var field = elem.find('input')[0]
+      var fields = elem.find('input')
+      var fieldType = fields[0].getAttribute('type')
       var errorClass = elem.attr('data-error-class')
       if (!errorClass) {
-        errorClass = field.getAttribute('type') + '-error'
+        errorClass = fieldType + '-error'
       }
-      if (field &&
-          field.getAttribute('type') !== 'checkbox' &&
-          field.getAttribute('type') !== 'text') {
+      if (fields[0] &&
+          fieldType !== 'radio' &&
+          fieldType !== 'checkbox' &&
+          fieldType !== 'text') {
         console.error('Unsupported required field type.')
         return
       }
-      requiredFields.require('input-' + field.getAttribute('type'), field)
+      requiredFields.require('input-' + fieldType, fields)
       var toggleError = function () {
-        if (requiredFields.invalid.indexOf(field) >= 0) {
+        if (requiredFields.invalid.indexOf(fields) >= 0) {
           elem.addClass('required-field-error ' + errorClass)
         } else {
           elem.removeClass('required-field-error ' + errorClass)

diff --git a/orchestra/static/orchestra/task/required-fields.service.es6.js b/orchestra/static/orchestra/task/required-fields.service.es6.js
@@ -7,13 +7,18 @@ export default function requiredFields ($rootScope, orchestraService) {
   var requiredFields = {
     validators: {
       'input-checkbox': [
-        function (elem) {
-          return elem.checked
+        function (elems) {
+          return elems[0].checked
         }
       ],
       'input-text': [
-        function (elem) {
-          return elem.value && elem.value.length > 0
+        function (elems) {
+          return elems[0].value && elems[0].value.length > 0
+        }
+      ],
+      'input-radio': [
+        function (elems) {
+          return Array.from(elems).some(function (elem) { return elem.checked })
         }
       ]
     },

diff --git a/orchestra/static/orchestra/task/task.scss b/orchestra/static/orchestra/task/task.scss
@@ -213,5 +213,10 @@ $topbar-height: 5rem;
         box-shadow: 0px 0px 1px red inset;
       }
     }
+    &.radio-error {
+      border-left: 2px solid red;
+      padding-left: 10px;
+      display: inline-block;
+    }
   }
 }