From d1e1a2a36a1bd1ab6b3a1b4b8bc49654b95c4dce Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 7 Nov 2019 15:02:20 -0500
Subject: [PATCH 1/4] Update TO form and nested components to emit directly to
 parent components instead of emitting from the root component

---
 js/mixins/form.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/js/mixins/form.js b/js/mixins/form.js
index 87f5a044..59d7d2f5 100644
--- a/js/mixins/form.js
+++ b/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 { value, 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

From 3e57579990f6faef4bba75dd0397e66ca14bea83 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 13:30:11 -0500
Subject: [PATCH 2/4] Use BaseForm instead of specialized Vue component for
 step 1 of the application form

Remove unnecessary event listener
---
 .../forms/new_application/environments.js     |  1 -
 .../new_application/name_and_description.js   | 23 -------------------
 js/index.js                                   |  2 --
 templates/applications/new/step_1.html        |  7 +++---
 4 files changed, 3 insertions(+), 30 deletions(-)
 delete mode 100644 js/components/forms/new_application/name_and_description.js

diff --git a/js/components/forms/new_application/environments.js b/js/components/forms/new_application/environments.js
index e2a49c5e..c5ab3e31 100644
--- a/js/components/forms/new_application/environments.js
+++ b/js/components/forms/new_application/environments.js
@@ -51,7 +51,6 @@ export default {
   },
 
   mounted: function() {
-    this.$root.$on('onEnvironmentAdded', this.addEnvironment)
     this.validate()
   },
 
diff --git a/js/components/forms/new_application/name_and_description.js b/js/components/forms/new_application/name_and_description.js
deleted file mode 100644
index cabcd92c..00000000
--- a/js/components/forms/new_application/name_and_description.js
+++ /dev/null
@@ -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: [],
-    }
-  },
-}
diff --git a/js/index.js b/js/index.js
index b1fbca9f..3ed54260 100644
--- a/js/index.js
+++ b/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,
diff --git a/templates/applications/new/step_1.html b/templates/applications/new/step_1.html
index 385d80de..fbb70c9e 100644
--- a/templates/applications/new/step_1.html
+++ b/templates/applications/new/step_1.html
@@ -16,12 +16,12 @@
   {% include "portfolios/header.html" %}
   {{ StickyCTA(text=('portfolios.applications.new.step_1_header' | translate | safe), context="Step 1 of 3") }}
 {% endblock %}
-  
+
 {% block application_content %}
 
   {% 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 %}

From 0abe27eb36589efca15d434093c8e880de09bf60 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 14:08:51 -0500
Subject: [PATCH 3/4] Remove form mixin from toggler component

---
 js/components/toggler.js                      |  5 ++---
 .../applications/fragments/environments.html  | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/js/components/toggler.js b/js/components/toggler.js
index 0b68a97f..6c493863 100644
--- a/js/components/toggler.js
+++ b/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,
   },
 
diff --git a/templates/applications/fragments/environments.html b/templates/applications/fragments/environments.html
index a3e420ad..23fa6f82 100644
--- a/templates/applications/fragments/environments.html
+++ b/templates/applications/fragments/environments.html
@@ -78,15 +78,17 @@
                     {% call ToggleSection(section_name="edit") %}
                       <ul>
                         <li class="accordion-table__item-toggle-content__expanded">
-                          <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) }}
-                            {{
-                              SaveButton(
-                                text=("common.save" | translate)
-                              )
-                            }}
-                          </form>
+                          <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) }}
+                              {{
+                                SaveButton(
+                                  text=("common.save" | translate)
+                                )
+                              }}
+                            </form>
+                          </base-form>
                         </li>
                       </ul>
                     {% endcall %}

From 1ecd786857b0e68187d30ff61c529e9c50b59214 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 14:28:10 -0500
Subject: [PATCH 4/4] Update BaseForm and nested vue components to properly use
 emitters

---
 js/components/forms/base_form.js      |  4 +---
 js/components/multi_checkbox_input.js | 20 +++++++-------------
 js/mixins/form.js                     |  4 ++--
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/js/components/forms/base_form.js b/js/components/forms/base_form.js
index 7dd9ad81..149304ae 100644
--- a/js/components/forms/base_form.js
+++ b/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,
   },
diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js
index 2be2d0fa..3c1839f5 100644
--- a/js/components/multi_checkbox_input.js
+++ b/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, {
-        value: e.target.value,
-        name: this.name,
-      })
+      this.$parent.$emit('field-change')
       this.showError = false
       this.showValid = true
     },
@@ -52,4 +40,10 @@ export default {
       this.otherChecked = !this.otherChecked
     },
   },
+
+  computed: {
+    valid: function() {
+      return this.showValid
+    },
+  },
 }
diff --git a/js/mixins/form.js b/js/mixins/form.js
index 59d7d2f5..a0643f3a 100644
--- a/js/mixins/form.js
+++ b/js/mixins/form.js
@@ -37,8 +37,8 @@ export default {
     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 { value, name, valid } = event
-      if (typeof this.fields[name] !== undefined) {
+      const { name, valid } = event
+      if (typeof this.fields[name] !== 'undefined') {
         this.fields[name] = valid
         this.changed = true
       }