Merge pull request #1180 from dod-ccpo/vue-emitters-fix_part-2

Vue emitters fix part 2 -- New app form and app settings

js/components/forms/base_form.js

@@ -2,7 +2,7 @@ import ally from 'ally.js'
 import stickybits from 'stickybits'
 
 import DateSelector from '../date_selector'
-import FormMixin from '../../mixins/form'
+import FormMixin from '../../mixins/form_mixin'
 import Modal from '../../mixins/modal'
 import MultiStepModalForm from './multi_step_modal_form'
 import checkboxinput from '../checkbox_input'
@@ -10,7 +10,6 @@ import multicheckboxinput from '../multi_checkbox_input'
 import optionsinput from '../options_input'
 import SemiCollapsibleText from '../semi_collapsible_text'
 import textinput from '../text_input'
-import ToForm from './to_form.js'
 import toggler from '../toggler'
 import uploadinput from '../upload_input'
 
@@ -25,7 +24,6 @@ export default {
     optionsinput,
     SemiCollapsibleText,
     textinput,
-    ToForm,
     toggler,
     uploadinput,
   },

js/components/forms/new_application/environments.js

@@ -51,7 +51,6 @@ export default {
   },
 
   mounted: function() {
-    this.$root.$on('onEnvironmentAdded', this.addEnvironment)
     this.validate()
   },
 

js/components/forms/new_application/name_and_description.js

@@ -1,23 +0,0 @@
-import FormMixin from '../../../mixins/form'
-import textinput from '../../text_input'
-import * as R from 'ramda'
-
-export default {
-  name: 'application-name-and-description',
-
-  mixins: [FormMixin],
-
-  components: {
-    textinput,
-  },
-  created: function() {
-    this.$root.$on('field-change', this.handleFieldChange)
-    if (this.initialData) this.changed = true
-  },
-
-  data: function() {
-    return {
-      errors: [],
-    }
-  },
-}

js/components/multi_checkbox_input.js

@@ -1,15 +1,6 @@
-import optionsinput from '../components/options_input'
-import textinput from '../components/text_input'
-import { emitEvent } from '../lib/emitters'
-
 export default {
   name: 'multicheckboxinput',
 
-  components: {
-    optionsinput,
-    textinput,
-  },
-
   props: {
     name: String,
     initialErrors: {
@@ -41,10 +32,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      emitEvent('field-change', this, {
+      this.$parent.$emit('field-change')
-        value: e.target.value,
-        name: this.name,
-      })
       this.showError = false
       this.showValid = true
     },
@@ -52,4 +40,10 @@ export default {
       this.otherChecked = !this.otherChecked
     },
   },
+
+  computed: {
+    valid: function() {
+      return this.showValid
+    },
+  },
 }

js/components/toggler.js

@@ -1,12 +1,10 @@
-import FormMixin from '../mixins/form'
 import optionsinput from './options_input'
 import textinput from './text_input'
+import BaseForm from './forms/base_form'
 
 export default {
   name: 'toggler',
 
-  mixins: [FormMixin],
-
   props: {
     initialSelectedSection: {
       type: String,
@@ -18,6 +16,7 @@ export default {
     optionsinput,
     textinput,
     optionsinput,
+    BaseForm,
     toggler: this,
   },
 

js/index.js

@@ -14,7 +14,6 @@ import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
 import poc from './components/forms/poc'
 import toggler from './components/toggler'
-import ApplicationNameAndDescription from './components/forms/new_application/name_and_description'
 import ApplicationEnvironments from './components/forms/new_application/environments'
 import MultiStepModalForm from './components/forms/multi_step_modal_form'
 import uploadinput from './components/upload_input'
@@ -49,7 +48,6 @@ const app = new Vue({
     textinput,
     checkboxinput,
     poc,
-    ApplicationNameAndDescription,
     ApplicationEnvironments,
     BudgetChart,
     SpendTable,

js/mixins/form.js

@@ -34,6 +34,18 @@ export default {
       this.validateForm()
     },
 
+    handleChildFieldChange: function(event) {
+      // need to temporarily use this function because we will no longer be passing
+      // parent_uid or watch from the child components
+      const { name, valid } = event
+      if (typeof this.fields[name] !== 'undefined') {
+        this.fields[name] = valid
+        this.changed = true
+      }
+
+      this.validateForm()
+    },
+
     handleFieldMount: function(event) {
       const { name, optional, valid } = event
       this.fields[name] = optional || valid

templates/applications/fragments/environments.html

@@ -78,6 +78,7 @@
                     {% call ToggleSection(section_name="edit") %}
                       <ul>
                         <li class="accordion-table__item-toggle-content__expanded">
+                          <base-form inline-template>
                             <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                               {{ edit_form.csrf_token }}
                               {{ TextInput(edit_form.name, validation='requiredField', optional=False) }}
@@ -87,6 +88,7 @@
                                 )
                               }}
                             </form>
+                          </base-form>
                         </li>
                       </ul>
                     {% endcall %}

templates/applications/new/step_1.html

@@ -21,7 +21,7 @@
 
   {% include "fragments/flash.html" %}
 
-  <application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+  <base-form inline-template :enable-save="true">
     <form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
       {{ form.csrf_token }}
       <div class="form-row">
@@ -43,12 +43,11 @@
         {% block next_button %}
           {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
         {% endblock %}
-        <button disabled class="usa-button usa-button-secondary">Previous</button>
         <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
           Cancel
         </a>
       </span>
     </form>
-  </application-name-and-description>
+  </base-form>
 
 {% endblock %}