In order to place modal forms in other places on the page (so that forms are not nested) it's necessary to move MultiStepModalForm links out of the component. They just need to refer to the correct modal. This PR also makes changes to ensure that the active modal is being unset everywhere correctly when a modal is closed.
109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
{% from "components/icon.html" import Icon %}
|
|
{% from 'components/save_button.html' import SaveButton %}
|
|
{% from "components/modal.html" import Modal %}
|
|
{% from "components/alert.html" import Alert %}
|
|
|
|
<section class="member-list" id="portfolio-members">
|
|
<base-form inline-template>
|
|
<div class='responsive-table-wrapper panel accordion-table'>
|
|
{% if g.matchesPath("portfolio-members") %}
|
|
{% include "fragments/flash.html" %}
|
|
{% endif %}
|
|
<form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
|
|
{{ member_perms_form.csrf_token }}
|
|
|
|
<div class='application-list-item'>
|
|
<header>
|
|
<div class='responsive-table-wrapper__header'>
|
|
<div class='responsive-table-wrapper__title'>
|
|
<div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
|
|
<div class='subheading'>
|
|
{{ "portfolios.admin.portfolio_members_subheading" | translate }}
|
|
</div>
|
|
</div>
|
|
|
|
<a class='icon-link'>
|
|
{{ Icon('info') }}
|
|
{{ "portfolios.admin.settings_info" | translate }}
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
{% if not portfolio.members %}
|
|
<p>{{ "portfolios.admin.no_members" | translate }}</p>
|
|
{% else %}
|
|
<table>
|
|
|
|
<thead>
|
|
<tr>
|
|
<td>{{ "portfolios.members.permissions.name" | translate }}</td>
|
|
<td>{{ "portfolios.members.permissions.app_mgmt" | translate }}</td>
|
|
<td>{{ "portfolios.members.permissions.funding" | translate }}</td>
|
|
<td>{{ "portfolios.members.permissions.reporting" | translate }}</td>
|
|
<td>{{ "portfolios.members.permissions.portfolio_mgmt" | translate }}</td>
|
|
<td></td>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
|
{% include "fragments/admin/members_edit.html" %}
|
|
{% elif user_can(permissions.VIEW_PORTFOLIO_USERS) %}
|
|
{% include "fragments/admin/members_view.html" %}
|
|
{% endif %}
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
|
|
<div class="panel__footer">
|
|
<div class="action-group save">
|
|
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
|
{{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
|
|
{% endif %}
|
|
|
|
{% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
|
|
{% include "fragments/admin/add_new_portfolio_member.html" %}
|
|
<a class="icon-link modal-link" v-on:click="openModal('add-port-mem')">
|
|
{{ "portfolios.admin.add_new_member" | translate }}
|
|
|
|
{{ Icon("plus") }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
|
|
{% for member in portfolio.members %}
|
|
{% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, member.user_id) %}
|
|
{% call Modal(name=modal_id, dismissable=False) %}
|
|
<h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
|
|
|
|
{{
|
|
Alert(
|
|
title="portfolios.admin.alert_title" | translate,
|
|
message="portfolios.admin.alert_message" | translate,
|
|
level="warning"
|
|
)
|
|
}}
|
|
|
|
<div class="panel__footer">
|
|
<div class="action-group">
|
|
<form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, user_id=member.user_id) }}">
|
|
{{ member_perms_form.csrf_token }}
|
|
<button class="usa-button usa-button-danger">
|
|
{{ "portfolios.members.archive_button" | translate }}
|
|
</button>
|
|
</form>
|
|
<a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</base-form>
|
|
</section>
|