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,51 +10,59 @@
     {% if g.matchesPath("portfolio-members") %}
       {% include "fragments/flash.html" %}
     {% endif %}
-    <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
+    <base-form inline-template>
-    {{ member_perms_form.csrf_token }}
+      <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 }}
 
-    <div class='member-list-header'>
+      <div class='member-list-header'>
-      <div class='left'>
+        <div class='left'>
-        <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
+          <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
-        <div class='subheading'>
+          <div class='subheading'>
-          {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+            {{ "portfolios.admin.portfolio_members_subheading" | translate }}
+          </div>
+        </div>
+        <a class='icon-link'>
+          {{ Icon('info') }}
+          {{ "portfolios.admin.settings_info" | translate }}
+        </a>
         </div>
-      </div>
-      <a class='icon-link'>
-        {{ Icon('info') }}
-        {{ "portfolios.admin.settings_info" | translate }}
-      </a>
-      </div>
 
-    {% if not portfolio.members %}
+      {% if not portfolio.members %}
-      <p>{{ "portfolios.admin.no_members" | translate }}</p>
+        <p>{{ "portfolios.admin.no_members" | translate }}</p>
-    {% else %}
+      {% else %}
-      <table>
+        <table>
 
-        <thead>
+          <thead>
-          <tr>
+            <tr>
-              <td>{{ "portfolios.members.permissions.name" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.name" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.funding" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
-              <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
+                <td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
-              <td></td>
+                <td></td>
-          </tr>
+            </tr>
-        </thead>
+          </thead>
 
-        <tbody>
+          <tbody>
-          {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+            {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-            {% include "fragments/admin/members_edit.html" %}
+              {% include "fragments/admin/members_edit.html" %}
-          {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
+            {% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
-            {% include "fragments/admin/members_view.html" %}
+              {% include "fragments/admin/members_view.html" %}
-          {% endif %}
+            {% endif %}
-        </tbody>
+          </tbody>
 
-      </table>
+        </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 %}
 
-    {% endif %}
+      </form>
-
+    </base-form>
-    </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>