From ccaad6cbbc57c3d75a472774dddc5656cc09fd1a Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Mon, 25 Mar 2019 17:21:18 -0400
Subject: [PATCH] cannot go to next new portfolio member page if form invalid

---
 js/components/forms/multi_step_modal_form.js | 14 +++++++++-----
 js/components/text_input.js                  | 10 ++++++----
 styles/components/_modal.scss                |  5 +++++
 templates/portfolios/admin.html              |  7 ++++++-
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index 780ed936..7b5e0ebf 100644
--- a/js/components/forms/multi_step_modal_form.js
+++ b/js/components/forms/multi_step_modal_form.js
@@ -24,6 +24,7 @@ export default {
     return {
       step: 0,
       fields: {},
+      invalid: true,
     }
   },
 
@@ -37,26 +38,29 @@ export default {
 
   methods: {
     next: function() {
-      if (this.isValid()) {
+      if (this._checkIsValid()) {
         this.step += 1
       }
     },
     goToStep: function(step) {
-      if (this.isValid()) {
+      if (this._checkIsValid()) {
         this.step = step
       }
     },
     handleValidChange: function(event) {
       const { name, valid } = event
       this.fields[name] = valid
+      this._checkIsValid()
     },
-    isValid: function() {
-      return !Object.values(this.fields).some(field => field === false)
+    _checkIsValid: function() {
+      const valid = !Object.values(this.fields).some(field => field === false)
+      this.invalid = !valid
+      return valid
     },
     handleFieldMount: function(event) {
       const { name, optional } = event
       this.fields[name] = optional
-    }
+    },
   },
 
   computed: {},
diff --git a/js/components/text_input.js b/js/components/text_input.js
index 28ac7c30..3d78e662 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -63,11 +63,13 @@ export default {
         this.value = conformToMask(this.value, mask).conformedValue
       }
     }
-
   },
 
   created: function() {
-    this.$root.$emit('field-mount', { name: this.name, optional: this.optional })
+    this.$root.$emit('field-mount', {
+      name: this.name,
+      optional: this.optional,
+    })
   },
 
   methods: {
@@ -88,7 +90,7 @@ export default {
     },
 
     onBlur: function(e) {
-      if (!(this.optional && e.target.value === "")) {
+      if (!(this.optional && e.target.value === '')) {
         this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
       }
       this.value = e.target.value.trim()
@@ -105,7 +107,7 @@ export default {
 
       if (!this.modified && this.initialErrors && this.initialErrors.length) {
         valid = false
-      } else if (this.optional && value == "") {
+      } else if (this.optional && value == '') {
         valid = true
       }
 
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 0947fb35..a09d12f0 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -203,6 +203,11 @@ body {
 
     .usa-button {
       margin-left: 2rem;
+
+      &[type='button']:disabled {
+        background-color: $color-gray-lighter;
+        opacity: inherit;
+      }
     }
 
     .modal__form--padded {
diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html
index 962f8843..405e2b60 100644
--- a/templates/portfolios/admin.html
+++ b/templates/portfolios/admin.html
@@ -92,7 +92,12 @@
         </div>
       </div>
       <div class='action-group'>
-        <a v-on:click="next()" class='action-group__action usa-button'>Next Step</a>
+        <input
+            type='button'
+            v-on:click="next()"
+            v-bind:disabled="invalid"
+            class='action-group__action usa-button'
+            value='Next Step'>
         <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
       </div>
     {% endset %}