Add modal functionality to BaseForm, use BaseForm and SaveButton in Portfolio members form

js/components/forms/base_form.js

@@ -1,3 +1,5 @@
+import ally from 'ally.js'
+
 import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
@@ -19,4 +21,34 @@ export default {
     levelofwarrant,
   },
   mixins: [FormMixin],
+  methods: {
+    closeModal: function(name) {
+      this.activeModal = null
+      this.$root.$emit('modalOpen', false)
+      if (this.$root.allyHandler) this.$root.allyHandler.disengage()
+    },
+
+    openModal: function(name) {
+      this.$root.activeModal = name
+      this.$root.$emit('modalOpen', true)
+      const idSelector = `#${this.$root.modalId}`
+
+      this.$root.allyHandler = ally.maintain.disabled({
+        filter: idSelector,
+      })
+    },
+  },
+  data: function() {
+    return {
+      activeModal: null,
+      allyHandler: null,
+    }
+  },
+  computed: {
+    modalId: function() {
+      return !!this.$root.activeModal
+        ? `modal--${this.$root.activeModal}`
+        : null
+    },
+  },
 }

styles/components/_portfolio_layout.scss

@@ -297,7 +297,11 @@
 
     .members-table-footer {
       float: right;
-      padding: 3 * $gap;
+      padding: 3 * $gap 0;
+
+      .action-group.save {
+        padding-right: 3 * $gap;
+      }
     }
 
     a.modal-link.icon-link {

templates/fragments/admin/portfolio_members.html

@@ -10,6 +10,7 @@
     {% if g.matchesPath("portfolio-members") %}
       {% include "fragments/flash.html" %}
     {% endif %}
+    <base-form inline-template>
       <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
       {{ member_perms_form.csrf_token }}
 
@@ -51,10 +52,17 @@
           </tbody>
 
         </table>
-
+        <div class="members-table-footer">
+          <div class="action-group save">
+            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+              {{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
+            {% endif %}
+          </div>
+        </div>
       {% endif %}
 
       </form>
+    </base-form>
 
     {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
       {% for member in portfolio.members %}
@@ -85,19 +93,11 @@
 
     <div class="members-table-footer">
       <div class="action-group">
-        {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-          <input
-            type='submit'
-            form="member-perms"
-            class='usa-button usa-button-primary'
-            value={{ "common.save" | translate }} />
-        {% endif %}
         {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
           {% include "fragments/admin/add_new_portfolio_member.html" %}
         {% endif %}
       </div>
     </div>
-
   </div>
 
 </section>