pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
leigh-mil
2019-04-04 15:54:51 -04:00
parent f3ea704c1b
commit 5aae1691a2
3 changed files with 83 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
js/components/forms/base_form.js
View File

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

6
styles/components/_portfolio_layout.scss
View File

@@ -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 {

92
templates/fragments/admin/portfolio_members.html
View File

@@ -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">
{{ member_perms_form.csrf_token }}
<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 }}
<div class='member-list-header'>
<div class='left'>
<div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
<div class='subheading'>
{{ "portfolios.admin.portfolio_members_subheading" | translate }}
<div class='member-list-header'>
<div class='left'>
<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>
</div>
<a class='icon-link'>
{{ Icon('info') }}
{{ "portfolios.admin.settings_info" | translate }}
</a>
</div>
{% if not portfolio.members %}
<p>{{ "portfolios.admin.no_members" | translate }}</p>
{% else %}
<table>
{% 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>
<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>
<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>
</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>
</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>