Remove unnecessary savebutton vue component and create SaveButton Macro

js/components/forms/new_application.js

@@ -112,15 +112,11 @@ export default {
     validateAndOpenModal: function() {
       let isValid = this.$children.reduce((previous, newVal) => {
         // display textInput error if it is not valid
-        if (newVal.$options.name == 'savebutton') {
-          return true
-        } else {
-          if (!newVal.showValid) {
-            newVal.showError = true
-          }
-
-          return newVal.showValid && previous
+        if (!newVal.showValid) {
+          newVal.showError = true
         }
+
+        return newVal.showValid && previous
       }, true)
       this.validate()
       isValid = this.errors.length == 0 && isValid

js/components/save_button.js

@@ -1,18 +0,0 @@
-export default {
-  name: 'savebutton',
-
-  props: {
-    text: String,
-    disabled: Boolean,
-    classes: String,
-  },
-
-  data: function() {
-    return {
-      displayClasses: `usa-button usa-button-primary ${this.classes}`,
-    }
-  },
-
-  template:
-    '<button type="submit" :class="displayClasses" tabindex="0" :disabled="disabled">{{ text }}</button>',
-}

js/index.js

@@ -33,7 +33,6 @@ import { isNotInVerticalViewport } from './lib/viewport'
 import DateSelector from './components/date_selector'
 import SidenavToggler from './components/sidenav_toggler'
 import KoReview from './components/forms/ko_review'
-import savebutton from './components/save_button'
 import BaseForm from './components/forms/base_form'
 
 Vue.config.productionTip = false
@@ -70,7 +69,6 @@ const app = new Vue({
     EditOfficerForm,
     SidenavToggler,
     KoReview,
-    savebutton,
     BaseForm,
   },
 

js/mixins/form.js

@@ -1,5 +1,3 @@
-import savebutton from '../components/save_button'
-
 export default {
   mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
@@ -29,8 +27,4 @@ export default {
       default: true,
     },
   },
-
-  components: {
-    savebutton,
-  },
 }

templates/components/save_button.html

@@ -0,0 +1,6 @@
+{% macro SaveButton(text, additional_classes="") -%}
+  {% set class = "usa-button usa-button-primary" + additional_classes %}
+  <button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="disabled">
+    {{ text }}
+  </button>
+{%- endmacro %}

templates/fragments/admin/portfolio_members.html

@@ -1,5 +1,6 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/options_input.html" import OptionsInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}

templates/fragments/edit_user_form.html

@@ -3,6 +3,7 @@
 {% from "components/date_input.html" import DateInput %}
 {% from "components/phone_input.html" import PhoneInput %}
 {% from "components/date_picker.html" import DatePicker %}
+{% from 'components/save_button.html' import SaveButton %}
 
 <base-form inline-template>
   <form method="POST" action='{{ form_action }}'>
@@ -34,11 +35,7 @@
     </div>
 
     <div class='action-group'>
-      <savebutton
-        text='{{ "fragments.edit_user_form.save_details_button" | translate }}'
-        classes="usa-button-big"
-        :disabled="disabled">
-      </savebutton>
+      {{ SaveButton(text=("fragments.edit_user_form.save_details_button" | translate), additional_classes="usa-button-big" )}}
     </div>
   </form>
 </base-form>

templates/portfolios/admin.html

@@ -4,6 +4,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
 
@@ -24,7 +25,7 @@
               </div>
 
                 <div class='edit-portfolio-name action-group'>
-                  <savebutton text="Save" classes="usa-button-big" :disabled="disabled"></savebutton>
+                  {{ SaveButton(text='Save', additional_classes='usa-button-big') }}
                 </div>
               </div>
                 <div class='defense-row'>

templates/portfolios/applications/new.html

@@ -4,6 +4,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/text_input.html" import TextInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
 
@@ -76,10 +77,7 @@
       </div>
 
       <div class="action-group">
-        <savebutton
-          text="{{ 'portfolios.applications.create_button_text' | translate }}"
-          :disabled="disabled">
-        </savebutton>
+        {{ SaveButton(text=('portfolios.applications.create_button_text' | translate)) }}
       </div>
     </form>
   </new-application>

templates/portfolios/task_orders/invitations.html

@@ -6,6 +6,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/confirmation_button.html" import ConfirmationButton %}
+{% from 'components/save_button.html' import SaveButton %}
 
 
 {% macro Link(text, icon_name, onClick=None, url='#', classes='') %}
@@ -59,7 +60,7 @@
             {{ Icon("x") }}
             <span>Cancel</span>
           </a>
-          <savebutton text="Save Changes" :disabled="disabled"></savebutton>
+          {{ SaveButton(text='Save Changes') }}
         </div>
       </div>
     </template>

templates/portfolios/task_orders/review.html

@@ -10,7 +10,7 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/review_field.html" import ReviewField %}
 {% from "components/upload_input.html" import UploadInput %}
-
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
 <ko-review inline-template v-bind:initial-data='{{ form.data|tojson }}'>
@@ -103,7 +103,7 @@
       {% endblock %}
 
       <div class='action-group'>
-        <savebutton text="Continue" :disabled="disabled"></savebutton>
+        {{ SaveButton(text="Continue") }}
       </div>
 
     </form>

templates/portfolios/task_orders/so_review.html

@@ -2,6 +2,7 @@
 
 {% from "components/text_input.html" import TextInput %}
 {% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
 
@@ -31,7 +32,7 @@
           {{ MultiCheckboxInput(form.required_distribution) }}
 
           <div class="action-group">
-            <savebutton text="Continue" :disabled="disabled"></savebutton>
+            {{ SaveButton(text='Continue') }}
           </div>
         </form>
       </div>

templates/task_orders/signing/signature_requested.html

@@ -3,6 +3,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
 {% from "components/icon.html" import Icon %}
+{% from 'components/save_button.html' import SaveButton %}
 
 {% block content %}
 <base-form inline-template>
@@ -38,7 +39,7 @@
           </div>
         </div>
         <div class="action-group">
-          <savebutton text="{{ 'common.sign' | translate }}" :disabled="disabled"></savebutton>
+          {{ SaveButton(text=('common.sign' | translate)) }}
           <a
             href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
             class="action-group__action icon-link">