hydra-billing · hydra-billing-robot · Jan 17, 2019 · Jan 17, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ v1.6.0 [unreleased]
 -   [#213](https://github.com/latera/homs/pull/213) Add payload to widget's requests.
 -   [#218](https://github.com/latera/homs/pull/218) Pass initial BP variables to widget initial payload.
 -   [#223](https://github.com/latera/homs/pull/223) Add directories for postgresql-client.
+-   [#227](https://github.com/latera/homs/pull/227) Add `required` option for string inputs. Use `nullable: false` in select/select_table for the same reason.
 
 ### Bugfixes
 -   [#194](https://github.com/latera/homs/pull/194) Set limit on the number of choices in lookup select from sql requests.

diff --git a/hbw/app/javascript/packs/hbw/components/form.js.jsx b/hbw/app/javascript/packs/hbw/components/form.js.jsx
@@ -110,7 +110,7 @@ modulejs.define('HBWForm', ['React', 'jQuery', 'HBWError', 'HBWFormDatetime',
     },
 
     isFormValid () {
-      return this.getElement().find('input[type="text"].invalid').length === 0;
+      return this.getElement().find('.invalid').length === 0;
     },
 
     fileListPresent (fields) {

diff --git a/hbw/app/javascript/packs/hbw/components/form/select.js.jsx b/hbw/app/javascript/packs/hbw/components/form/select.js.jsx
@@ -2,7 +2,8 @@
 
 import Select from 'react-select';
 import AsyncSelect from 'react-select/lib/Async';
-import { withDeleteIf, withSelect, compose } from '../helpers';
+import Tooltip from 'tooltip.js';
+import { withDeleteIf, withSelect, withCallbacks, compose } from '../helpers';
 
 modulejs.define('HBWFormSelect',
   ['React'],
@@ -19,13 +20,24 @@ modulejs.define('HBWFormSelect',
         };
       },
 
+      componentDidMount () {
+        this.tooltip = new Tooltip(this.select, {
+          title:     this.props.env.translator('errors.field_is_required'),
+          container: this.tooltipContainer,
+          trigger:   'manual',
+          placement: 'top'
+        });
+
+        this.validateOnSubmit();
+      },
+
       render () {
         const opts = {
           name:             this.props.name,
           options:          this.buildOptions(),
           defaultValue:     this.getDefaultValue(),
           placeholder:      this.props.params.placeholder || '',
-          isClearable:      this.props.params.nullable || this.props.value === null,
+          isClearable:      this.props.params.nullable,
           isDisabled:       this.props.params.editable === false,
           noOptionsMessage: this.noOptionsMessage,
           loadingMessage:   this.loadingMessage,
@@ -52,6 +64,11 @@ modulejs.define('HBWFormSelect',
           selectErrorMessageCss += ' hidden';
         }
 
+        const errorTooltip = <div
+          ref={(t) => { this.tooltipContainer = t; }}
+          className={`${!this.state.valid && 'tooltip-red'}`}
+        />;
+
         let formGroupCss = 'form-group';
 
         if (this.state.error) {
@@ -61,12 +78,53 @@ modulejs.define('HBWFormSelect',
         return <div className={cssClass} title={tooltip}>
           <span className={labelCss}>{label}</span>
           <div className={selectErrorMessageCss}>{selectErrorMessage}</div>
-          <div className={formGroupCss}>
+          <div className={formGroupCss} ref={(i) => { this.select = i; }}>
             {this.selectComponent(opts)}
           </div>
+          {errorTooltip}
         </div>;
       },
 
+      validateOnSubmit () {
+        this.props.bind('hbw:validate-form', this.onFormSubmit);
+      },
+
+      onFormSubmit () {
+        const el = this.select;
+
+        if (this.isValid()) {
+          el.classList.remove('invalid');
+        } else {
+          el.classList.add('invalid');
+
+          this.setValidationState();
+          this.controlValidationTooltip(this.isValid());
+          this.props.trigger('hbw:form-submitting-failed');
+        }
+      },
+
+      isValid () {
+        return this.props.params.nullable || this.isFilled();
+      },
+
+      isFilled () {
+        const { value } = this.state;
+
+        return value !== null && value !== undefined && value.length > 0;
+      },
+
+      setValidationState () {
+        this.setState({ valid: this.isValid() });
+      },
+
+      controlValidationTooltip (toHide) {
+        if (toHide) {
+          this.tooltip.hide();
+        } else {
+          this.tooltip.show();
+        }
+      },
+
       customStyles () {
         const bgColor = (state) => {
           if (state.isFocused) {
@@ -237,5 +295,5 @@ modulejs.define('HBWFormSelect',
       }
     });
 
-    return compose(withSelect, withDeleteIf)(FormSelect);
+    return compose(withSelect, withDeleteIf, withCallbacks)(FormSelect);
   });
diff --git a/hbw/app/javascript/packs/hbw/components/form/select_table.js.jsx b/hbw/app/javascript/packs/hbw/components/form/select_table.js.jsx
@@ -1,4 +1,5 @@
-import { withDeleteIf, withSelect, compose } from '../helpers';
+import Tooltip from 'tooltip';
+import { withDeleteIf, withSelect, withCallbacks, compose } from '../helpers';
 
 modulejs.define('HBWFormSelectTable',
   ['React'],
@@ -13,24 +14,40 @@ modulejs.define('HBWFormSelectTable',
         return {
           value:   this.props.params.current_value,
           choices: this.getChoices(),
-          error:   (!this.props.hasValueInChoices(value) && value) || this.props.missFieldInVariables()
+          error:   (!this.props.hasValueInChoices(value) && value) || this.props.missFieldInVariables(),
+          valid:   true
         };
       },
 
+      componentDidMount () {
+        this.tooltip = new Tooltip(this.label, {
+          title:     this.props.env.translator('errors.field_is_required'),
+          container: this.tooltipContainer,
+          trigger:   'manual',
+          placement: 'bottom'
+        });
+
+        this.validateOnSubmit();
+      },
+
       render () {
         let cssClass = this.props.params.css_class;
 
         if (this.props.hidden) {
           cssClass += ' hidden';
         }
 
-        const { tooltip } = this.props.params;
-        const { label } = this.props.params;
+        const { tooltip, label } = this.props.params;
         const labelCss = this.props.params.label_css;
 
         const selectErrorMessage = this.props.env.translator('errors.field_not_defined_in_bp',
           { field_name: this.props.name });
 
+        const errorTooltip = <div
+          ref={(t) => { this.tooltipContainer = t; }}
+          className={`${!this.state.valid && 'tooltip-red'}`}
+        />;
+
         let selectErrorMessageCss = 'alert alert-danger';
         if (!this.props.missFieldInVariables()) {
           selectErrorMessageCss += ' hidden';
@@ -47,7 +64,7 @@ modulejs.define('HBWFormSelectTable',
         }
 
         return <div className={cssClass} title={tooltip}>
-          <span className={labelCss}>{label}</span>
+          <span className={labelCss} ref={(i) => { this.label = i; }}>{label}</span>
           <div className={selectErrorMessageCss}>{selectErrorMessage}</div>
           <div className={formGroupCss}>
             <table className={tableCss}>
@@ -59,11 +76,52 @@ modulejs.define('HBWFormSelectTable',
               <tbody>
               {this.buildTableBody(this.state.choices, this.props.name, this.state.value)}
               </tbody>
+              {errorTooltip}
             </table>
           </div>
         </div>;
       },
 
+      validateOnSubmit () {
+        this.props.bind('hbw:validate-form', this.onFormSubmit);
+      },
+
+      onFormSubmit () {
+        const el = this.label;
+
+        if (this.isValid()) {
+          el.classList.remove('invalid');
+        } else {
+          el.classList.add('invalid');
+
+          this.setValidationState();
+          this.controlValidationTooltip(this.isValid());
+          this.props.trigger('hbw:form-submitting-failed');
+        }
+      },
+
+      isValid () {
+        return this.props.params.nullable || this.isFilled();
+      },
+
+      isFilled () {
+        const { value } = this.state;
+
+        return value !== null && value !== undefined && value.length > 0;
+      },
+
+      setValidationState () {
+        this.setState({ valid: this.isValid() });
+      },
+
+      controlValidationTooltip (toHide) {
+        if (toHide) {
+          this.tooltip.hide();
+        } else {
+          this.tooltip.show();
+        }
+      },
+
       addNullChoice (choices) {
         let hasNullValue = false;
 
@@ -99,6 +157,8 @@ modulejs.define('HBWFormSelectTable',
         }
 
         this.setState({ value: event.target.parentElement.getElementsByTagName('input')[0].value });
+        this.setValidationState();
+        this.controlValidationTooltip(this.isValid());
       },
 
       buildTableBody (choices, name, value) {
@@ -168,5 +228,5 @@ modulejs.define('HBWFormSelectTable',
       }
     });
 
-    return compose(withSelect, withDeleteIf)(FormSelectTable);
+    return compose(withSelect, withDeleteIf, withCallbacks)(FormSelectTable);
   });
diff --git a/hbw/app/javascript/packs/hbw/components/form/string.js.jsx b/hbw/app/javascript/packs/hbw/components/form/string.js.jsx
@@ -5,7 +5,7 @@ import CustomFormatter from 'formatter';
 import Tooltip from 'tooltip';
 import { withCallbacks, withDeleteIf, compose } from '../helpers';
 
-modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
+modulejs.define('HBWFormString', ['React'], (React) => {
   const FormString = React.createClass({
     displayName: 'HBWFormString',
 
@@ -44,6 +44,11 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
         readOnly:  this.props.params.editable === false
       };
 
+      const errorTooltip = <div
+        ref={(t) => { this.tooltipContainer = t; }}
+        className={`${!this.state.valid && 'tooltip-red'}`}
+      />;
+
       let inputCSS = this.props.params.css_class;
 
       if (this.props.hidden) {
@@ -57,18 +62,18 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
                  ref={(i) => { this.input = i; }}
                  className={`form-control ${!this.state.valid && ' invalid'}`}
                  value={this.state.visualValue} />
-          <div ref={(t) => { this.tooltipContainer = t; }} className={`${!this.state.valid && 'tooltip-red'}`}></div>
           {!opts.readOnly && <input name={this.props.name} value={this.state.value} type="hidden" />}
+          {errorTooltip}
         </div>
       </div>;
     },
 
     componentDidMount () {
       this.tooltip = new Tooltip(this.input, {
-        title:     this.props.params.message,
+        title:     this.props.params.message || this.props.env.translator('errors.field_is_required'),
         container: this.tooltipContainer,
         trigger:   'manual',
-        placement: 'bottom'
+        placement: 'top'
       });
 
       this.validateOnSubmit();
@@ -94,17 +99,17 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
     },
 
     getElement () {
-      return jQuery(this.input);
+      return this.input;
     },
 
     onFormSubmit () {
       if (this.validationRequired()) {
-        const $el = this.getElement();
+        const el = this.getElement();
 
         if (this.isValid()) {
-          $el.removeClass('invalid');
+          el.classList.remove('invalid');
         } else {
-          $el.addClass('invalid');
+          el.classList.add('invalid');
 
           this.setValidationState();
           this.controlValidationTooltip(this.isValid());
@@ -114,7 +119,7 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
     },
 
     onLoadValidation () {
-      if (this.validationRequired() && !!this.state.value) {
+      if (this.validationRequired() && this.isFilled()) {
         this.controlValidationTooltip(this.isValid());
         this.setValidationState();
       }
@@ -139,19 +144,21 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
     },
 
     onKeyDown (event) {
-      if (this.validationRequired()) {
+      if (this.props.params.pattern) {
         if ((event.keyCode === 8) || (event.keyCode === 46)) {
           event.preventDefault();
 
           this.updateValue(event.target, true);
         } else {
           this.updateValue(event.target, false);
         }
-
-        this.runValidation();
       } else {
         this.updateValue(event.target, true);
       }
+
+      if (this.validationRequired()) {
+        this.runValidation();
+      }
     },
 
     onBlur () {
@@ -185,11 +192,26 @@ modulejs.define('HBWFormString', ['React', 'jQuery'], (React, jQuery) => {
     },
 
     isValid () {
-      return (this.state.value || '').search(new RegExp(this.props.params.regex)) >= 0;
+      const requiredOK = !this.props.params.required || this.isFilled();
+      const regexOK = !this.props.params.regex || this.regexMatched();
+
+      return requiredOK && regexOK;
     },
 
     validationRequired () {
-      return !!this.props.params.regex || !!this.props.params.pattern;
+      const { required, regex } = this.props.params;
+
+      return required || !!regex;
+    },
+
+    isFilled () {
+      const { value } = this.state;
+
+      return value !== null && value !== undefined && value.length > 0;
+    },
+
+    regexMatched () {
+      return (this.state.value || '').search(new RegExp(this.props.params.regex)) >= 0;
     },
 
     buildVisualAndHiddenValues (extractValueRegexp, valueParts, pattern, nextVal) {

diff --git a/hbw/config/locales/en.yml b/hbw/config/locales/en.yml
@@ -15,6 +15,7 @@ en:
         cannot_obtain_available_actions: Cannot obtain available actions
         cannot_start_process: Cannot start process
         file_list_field_required: Field of "file_list" type with name "homsOrderDataFileList" required
+        field_is_required: Field is required
 
       components:
         select:

diff --git a/hbw/config/locales/ru.yml b/hbw/config/locales/ru.yml
@@ -15,6 +15,7 @@ ru:
         cannot_obtain_available_actions: Не удалось получить список доступных действий
         cannot_start_process: Не удалось начать процесс
         file_list_field_required: Для загрузки файлов необходимо добавить поле типа "file_list" с именем "homsOrderDataFileList"
+        field_is_required: Обязательное поле
 
       components:
         select: