multi-step form modal with basic implementation for adding new member

templates/components/multi_step_modal_form.html

@@ -0,0 +1,45 @@
+{% from "components/modal.html" import Modal %}
+
+{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}
+
+{% macro FormSteps(step_count, current_step) -%}
+  {% set count = numbers[step_count - 1] %}
+  <div class="progress-menu progress-menu--{{ count }}">
+    <ul>
+      {% for step in range(step_count) %}
+        <li class="progress-menu__item
+        {% if loop.index < current_step %}
+          progress-menu__item--complete
+        {% elif loop.index == current_step %}
+          progress-menu__item--active
+        {% else %}
+          progress-menu__item--incomplete
+        {% endif %}">
+          <a v-on:click="goToStep({{ step }})">
+            Step {{ loop.index }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endmacro %}
+
+{% macro MultiStepModalForm(name, form, form_action, steps, button_text="", dismissable=False) -%}
+  {% set step_count = steps|length %}
+  <multi-step-modal-form inline-template>
+    <div>
+      <button v-on:click="openModal('{{ name }}')" type="button" class="icon-link">{{ button_text }}</button>
+      <form action="{{ form_action }}" method="POST">
+        {{ form.csrf_token }}
+        {% call Modal(name=name, dismissable=dismissable) %}
+          {% for step in steps %}
+            <div v-show="step === {{ loop.index0 }}">
+              {{ FormSteps(step_count, loop.index) }}
+              {{ step }}
+            </div>
+          {% endfor %}
+        {% endcall %}
+      </form>
+    </div>
+  </multi-step-modal-form>
+{% endmacro %}

templates/portfolios/admin.html

@@ -3,6 +3,8 @@
 {% from "components/pagination.html" import Pagination %}
 {% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
+{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
 
@@ -50,6 +52,61 @@
       {% include "fragments/admin/portfolio_members.html" %}
     {% endif %}
 
+    {% set step_one %}
+      <h1>Invite New Portfolio Member</h1>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(member_form.first_name, validation='requiredField') }}
+        </div>
+        <div class='form-col form-col--half'>
+          {{ TextInput(member_form.last_name, validation='requiredField') }}
+        </div>
+      </div>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(member_form.email, validation='email') }}
+        </div>
+        <div class='form-col form-col--half'>
+          {{ TextInput(member_form.phone_number, validation='usPhone') }}
+        </div>
+      </div>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(member_form.dod_id, validation='dodId') }}
+        </div>
+        <div class='form-col form-col--half'>
+        </div>
+      </div>
+      <div class='action-group'>
+        <a v-on:click="next()" class='action-group__action usa-button'>Next Step</a>
+        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
+      </div>
+    {% endset %}
+    {% set step_two %}
+      <h1>Assign Member Permissions</h1>
+      <a class='icon-link'>
+        <span class='icon'>{{ Icon('info') }}</span>
+        {{ "portfolios.admin.permissions_info" | translate }}
+      </a>
+      {{ OptionsInput(member_form.perms_app_mgmt) }}
+      {{ OptionsInput(member_form.perms_funding) }}
+      {{ OptionsInput(member_form.perms_reporting) }}
+      {{ OptionsInput(member_form.perms_portfolio_mgmt) }}
+      <div class='action-group'>
+        <input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
+        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
+      </div>
+    {% endset %}
+    {{ MultiStepModalForm(
+        'add-port-mem',
+        member_form,
+        url_for("portfolios.create_member", portfolio_id=portfolio.id),
+        [step_one, step_two],
+        button_text="add new member")
+      }}
+
+    {% include "fragments/audit_events_log.html" %}
+
     {% if user_can(permissions.VIEW_PORTFOLIO_ACTIVITY_LOG) %}
       {% include "fragments/audit_events_log.html" %}
       {{ Pagination(audit_events, 'portfolios.portfolio_admin', portfolio_id=portfolio.id) }}