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

This commit is contained in:
dandds
2019-03-22 13:36:21 -04:00
parent 6b59ab800b
commit 1bc434be8c
7 changed files with 159 additions and 5 deletions

View File

@@ -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) }}