Funding type other input is only required if funding type is other

atst/forms/financial.py

@@ -1,7 +1,7 @@
 import re
 from wtforms.fields.html5 import EmailField
 from wtforms.fields import StringField, SelectField
-from wtforms.validators import Required, Email, InputRequired
+from wtforms.validators import Required, Email, InputRequired, Optional
 
 from atst.domain.exceptions import NotFoundError
 from atst.domain.pe_numbers import PENumbers
@@ -55,6 +55,12 @@ def validate_pe_id(field, existing_request):
 
 
 class FinancialForm(ValidatedForm):
+    def validate(self, *args, **kwargs):
+        if self.funding_type.data == "OTHER":
+            self.funding_type_other.validators.append(Required())
+        return super().validate(*args, **kwargs)
+
+
     def perform_extra_validation(self, existing_request):
         valid = True
         if not existing_request or existing_request.get("pe_id") != self.pe_id.data:
@@ -110,9 +116,7 @@ class FinancialForm(ValidatedForm):
         validators=[InputRequired()]
     )
 
-    funding_type_other = StringField(
+    funding_type_other = StringField("If other, please specify")
-        "If other, please specify", validators=[Required()]
-    )
 
     clin_0001 = StringField(
         "<dl><dt>CLIN 0001</dt> - <dd>Unclassified IaaS and PaaS Amount</dd></dl>",

js/components/forms/financial.js

@@ -0,0 +1,41 @@
+import optionsinput from '../options_input'
+import textinput from '../text_input'
+
+export default {
+  name: 'financial',
+
+  components: {
+    optionsinput,
+    textinput,
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    const {
+      funding_type = ""
+    } = this.initialData
+
+    return {
+      funding_type
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}

js/index.js

@@ -7,6 +7,7 @@ import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
 import DetailsOfUse from './components/forms/details_of_use'
 import poc from './components/forms/poc'
+import financial from './components/forms/financial'
 
 Vue.use(VTooltip)
 
@@ -19,6 +20,7 @@ const app = new Vue({
     checkboxinput,
     DetailsOfUse,
     poc,
+    financial,
   },
   methods: {
     closeModal: function(name) {

templates/requests/financial_verification.html

@@ -6,6 +6,7 @@
 
 {% block content %}
 
+<financial inline-template v-bind:initial-data='{{ f.data|tojson }}'>
 <div class="col">
 
   <div class="panel">
@@ -92,7 +93,9 @@
         <fieldset class="form__sub-fields form__sub-fields--warning">
           {{ OptionsInput(f.funding_type) }}
 
-          {{ TextInput(f.funding_type_other) }}
+          <template v-if="funding_type == 'OTHER'" v-cloak>
+            {{ TextInput(f.funding_type_other) }}
+          </template>
 
           {{ TextInput(
             f.clin_0001,placeholder="50,000",
@@ -132,9 +135,9 @@
       <input type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
       {% endblock %}
       </form>
-
     </div>
   </div>
 </div>
+</financial>
 
-{% endblock %}
+{% endblock %}

tests/forms/test_financial.py

@@ -1,6 +1,6 @@
 import pytest
 
-from atst.forms.financial import suggest_pe_id
+from atst.forms.financial import suggest_pe_id, FinancialForm
 
 
 @pytest.mark.parametrize("input_,expected", [
@@ -12,3 +12,21 @@ from atst.forms.financial import suggest_pe_id
 ])
 def test_suggest_pe_id(input_, expected):
     assert suggest_pe_id(input_) == expected
+
+
+def test_funding_type_other_not_required_if_funding_type_is_not_other():
+    form_data = {
+        "funding_type": "PROC"
+    }
+    form = FinancialForm(data=form_data)
+    form.validate()
+    assert "funding_type_other" not in form.errors
+
+
+def test_funding_type_other_required_if_funding_type_is_other():
+    form_data = {
+        "funding_type": "OTHER"
+    }
+    form = FinancialForm(data=form_data)
+    form.validate()
+    assert "funding_type_other" in form.errors