Update emitters for vue components on portfolio settings page

This commit is contained in:
leigh-mil 2019-11-13 15:42:01 -05:00
parent b6e8db2e50
commit d4facd1e36
4 changed files with 41 additions and 68 deletions

View File

@ -1,4 +1,4 @@
import FormMixin from '../../mixins/form' import FormMixin from '../../mixins/form_mixin'
import textinput from '../text_input' import textinput from '../text_input'
import optionsinput from '../options_input' import optionsinput from '../options_input'
import checkboxinput from '../checkbox_input' import checkboxinput from '../checkbox_input'
@ -25,23 +25,16 @@ export default {
data: function() { data: function() {
return { return {
step: 0, step: 0,
fields: {},
invalid: true,
} }
}, },
created: function() {
this.$root.$on('field-mount', this.handleFieldMount)
},
mounted: function() { mounted: function() {
this.$root.$on('field-change', this.handleValidChange)
this.$root.$on('modalOpen', this.handleModalOpen) this.$root.$on('modalOpen', this.handleModalOpen)
}, },
methods: { methods: {
next: function() { next: function() {
if (this._checkIsValid()) { if (this.validateFields()) {
this.step += 1 this.step += 1
} }
}, },
@ -49,27 +42,10 @@ export default {
this.step -= 1 this.step -= 1
}, },
goToStep: function(step) { goToStep: function(step) {
if (this._checkIsValid()) { if (this.validateFields()) {
this.step = step this.step = step
} }
}, },
handleValidChange: function(event) {
const { name, valid, parent_uid } = event
// check that this field is in the modal and not on some other form
if (parent_uid === this._uid) {
this.fields[name] = valid
this._checkIsValid()
}
},
_checkIsValid: function() {
const valid = !Object.values(this.fields).some(field => field === false)
this.invalid = !valid
return valid
},
handleFieldMount: function(event) {
const { name, optional } = event
this.fields[name] = optional
},
handleModalOpen: function(_bool) { handleModalOpen: function(_bool) {
this.step = 0 this.step = 0
}, },
@ -77,12 +53,10 @@ export default {
return this.step === this.steps - 1 return this.step === this.steps - 1
}, },
handleSubmit: function(e) { handleSubmit: function(e) {
if (this.invalid || !this._onLastPage()) { if (!this.validateFields() || !this._onLastPage()) {
e.preventDefault() e.preventDefault()
this.next() this.next()
} }
}, },
}, },
computed: {},
} }

View File

@ -45,7 +45,7 @@
<input <input
type='button' type='button'
v-on:click="next()" v-on:click="next()"
v-bind:disabled="invalid" v-bind:disabled="!canSave"
class='action-group__action usa-button usa-button-primary' class='action-group__action usa-button usa-button-primary'
value='Next'> value='Next'>
<a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a> <a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>

View File

@ -32,7 +32,7 @@
<input <input
type='button' type='button'
v-on:click="next()" v-on:click="next()"
v-bind:disabled="invalid" v-bind:disabled="!canSave"
class='action-group__action usa-button' class='action-group__action usa-button'
value='{{ "fragments.ppoc.assign_user_button_text" | translate }}'> value='{{ "fragments.ppoc.assign_user_button_text" | translate }}'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')"> <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">

View File

@ -4,11 +4,11 @@
{% from "components/alert.html" import Alert %} {% from "components/alert.html" import Alert %}
<section class="member-list" id="portfolio-members"> <section class="member-list" id="portfolio-members">
<base-form inline-template> <div class='responsive-table-wrapper panel accordion-table'>
<div class='responsive-table-wrapper panel accordion-table'> {% if g.matchesPath("portfolio-members") %}
{% if g.matchesPath("portfolio-members") %} {% include "fragments/flash.html" %}
{% include "fragments/flash.html" %} {% endif %}
{% endif %} <base-form inline-template>
<form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data"> <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 }} {{ member_perms_form.csrf_token }}
@ -72,35 +72,34 @@
</div> </div>
</div> </div>
</form> </form>
{% if user_can(permissions.CREATE_PORTFOLIO_USERS) %} </base-form>
{% include "portfolios/fragments/add_new_portfolio_member.html" %} {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
{% endif %} {% for subform in member_perms_form.members_permissions %}
{% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
{% if user_can(permissions.EDIT_PORTFOLIO_USERS) %} {% call Modal(name=modal_id, dismissable=False) %}
{% for subform in member_perms_form.members_permissions %} <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
{% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %} <hr>
{% call Modal(name=modal_id, dismissable=False) %} {{
<h1>{{ "portfolios.admin.alert_header" | translate }}</h1> Alert(
<hr> title="portfolios.admin.alert_title" | translate,
{{ message="portfolios.admin.alert_message" | translate,
Alert( level="warning"
title="portfolios.admin.alert_title" | translate, )
message="portfolios.admin.alert_message" | translate, }}
level="warning" <div class="action-group">
) <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
}} {{ member_perms_form.csrf_token }}
<div class="action-group"> <button class="usa-button usa-button-danger">
<form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}"> {{ "portfolios.members.archive_button" | translate }}
{{ member_perms_form.csrf_token }} </button>
<button class="usa-button usa-button-danger"> </form>
{{ "portfolios.members.archive_button" | translate }} <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
</button> </div>
</form> {% endcall %}
<a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a> {% endfor %}
</div> {% endif %}
{% endcall %} </div>
{% endfor %} {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
{% endif %} {% include "portfolios/fragments/add_new_portfolio_member.html" %}
</div> {% endif %}
</base-form>
</section> </section>