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

Merge pull request #742 from dod-ccpo/disable-save-buttons

Browse Source 
Disable save buttons
This commit is contained in:
leigh-mil 2019-04-08 11:15:19 -04:00 committed by GitHub
commit cf2273d47c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 268 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/components/checkbox_input.js
View File

@ -1,3 +1,5 @@
import { emitFieldChange } from '../lib/emitters'
export default {
name: 'checkboxinput',
@ -7,10 +9,7 @@ export default {
methods: {
onInput: function(e) {
this.$root.$emit('field-change', {
value: e.target.checked,
name: this.name,
})
emitFieldChange(this, { value: e.target.checked, name: this.name })
},
},
}

22
js/components/date_selector.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { getDaysInMonth } from 'date-fns'
import { emitFieldChange } from '../lib/emitters'
var paddedNumber = function(number) {
if ((number + '').length === 1) {
@ -62,18 +63,23 @@ export default {
isMonthValid: function() {
var _month = parseInt(this.month)
return _month >= 0 && _month <= 12
var valid = _month >= 0 && _month <= 12
this._emitChange('month', this.month, valid)
return valid
},
isDayValid: function() {
var _day = parseInt(this.day)
return _day >= 0 && _day <= this.daysMaxCalculation
var valid = _day >= 0 && _day <= this.daysMaxCalculation
this._emitChange('day', this.day, valid)
return valid
},
isYearValid: function() {
return parseInt(this.year) >= 1
// Emit a change event
var valid = parseInt(this.year) >= 1
this._emitChange('year', this.year, valid)
return valid
},
isWithinDateRange: function() {
@ -128,6 +134,12 @@ export default {
},
},
methods: {
_emitChange: function(name, value, valid) {
emitFieldChange(this, { value, name })
},
},
render: function(createElement) {
return createElement('p', 'Please implement inline-template')
},

26
js/components/forms/base_form.js Normal file
View File

@ -0,0 +1,26 @@
import ally from 'ally.js'
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
import optionsinput from '../options_input'
import DateSelector from '../date_selector'
import MultiStepModalForm from './multi_step_modal_form'
import multicheckboxinput from '../multi_checkbox_input'
import checkboxinput from '../checkbox_input'
import levelofwarrant from '../levelofwarrant'
import Modal from '../../mixins/modal'
export default {
name: 'base-form',
components: {
textinput,
optionsinput,
DateSelector,
MultiStepModalForm,
multicheckboxinput,
checkboxinput,
levelofwarrant,
Modal,
},
mixins: [FormMixin, Modal],
}

1
js/components/forms/new_application.js
View File

@ -118,7 +118,6 @@ export default {
return newVal.showValid && previous
}, true)
this.validate()
isValid = this.errors.length == 0 && isValid

6
js/components/multi_checkbox_input.js
View File

@ -1,5 +1,6 @@
import optionsinput from '../components/options_input'
import textinput from '../components/text_input'
import { emitFieldChange } from '../lib/emitters'
export default {
name: 'multicheckboxinput',
@ -40,10 +41,7 @@ export default {
methods: {
onInput: function(e) {
this.$root.$emit('field-change', {
value: e.target.value,
name: this.name,
})
emitFieldChange(this, { value: e.target.value, name: this.name })
this.showError = false
this.showValid = true
},

7
js/components/options_input.js
View File

@ -1,3 +1,5 @@
import { emitFieldChange } from '../lib/emitters'
export default {
name: 'optionsinput',
@ -21,10 +23,7 @@ export default {
methods: {
onInput: function(e) {
this.$root.$emit('field-change', {
value: e.target.value,
name: this.name,
})
emitFieldChange(this, { value: e.target.value, name: this.name })
this.showError = false
this.showValid = true
},

3
js/components/text_input.js
View File

@ -1,6 +1,7 @@
import MaskedInput, { conformToMask } from 'vue-text-mask'
import inputValidations from '../lib/input_validations'
import { formatDollars } from '../lib/dollars'
import { emitFieldChange } from '../lib/emitters'
export default {
name: 'textinput',
@ -124,7 +125,7 @@ export default {
this.showValid = this.value != '' && valid
// Emit a change event
this.$root.$emit('field-change', {
emitFieldChange(this, {
value: this._rawValue(value),
valid,
name: this.name,

7
js/index.js
View File

@ -33,6 +33,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
import DateSelector from './components/date_selector'
import SidenavToggler from './components/sidenav_toggler'
import KoReview from './components/forms/ko_review'
import BaseForm from './components/forms/base_form'
Vue.config.productionTip = false
@ -68,12 +69,14 @@ const app = new Vue({
EditOfficerForm,
SidenavToggler,
KoReview,
BaseForm,
},
mounted: function() {
this.$on('modalOpen', isOpen => {
if (isOpen) {
this.$on('modalOpen', data => {
if (data['isOpen']) {
document.body.className += ' modal-open'
this.activeModal = data['name']
} else {
document.body.className = document.body.className.replace(
' modal-open',

6
js/lib/emitters.js Normal file
View File

@ -0,0 +1,6 @@
export const emitFieldChange = (el, data) => {
el.$root.$emit('field-change', {
...data,
parent_uid: el.$parent && el.$parent._uid,
})
}

16
js/mixins/form.js
View File

@ -8,7 +8,23 @@ export default {
const { value, name } = event
if (typeof this[name] !== undefined) {
this[name] = value
if (event['parent_uid'] === this._uid) {
this.changed = true
}
}
},
},
data: function() {
return {
changed: this.hasChanges,
}
},
props: {
hasChanges: {
type: Boolean,
default: false,
},
},
}

2
js/mixins/modal.js
View File

@ -10,7 +10,7 @@ export default {
openModal: function(name) {
this.activeModal = name
this.$emit('modalOpen', true)
this.$root.$emit('modalOpen', { isOpen: true, name: name })
const idSelector = `#${this.modalId}`
this.allyHandler = ally.maintain.disabled({

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 {

4
styles/sections/_task_order.scss
View File

@ -493,12 +493,10 @@
align-items: center;
justify-content: flex-end;
.usa-button {
button.usa-button {
margin-left: 4 * $gap;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
}
}

10
templates/components/save_button.html Normal file
View File

@ -0,0 +1,10 @@
{% macro SaveButton(text, element="button", additional_classes="", form=None) -%}
{% set class = "usa-button usa-button-primary" + additional_classes %}
{% if element == "button" %}
<button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" {{ form_attr }} >
{{ text }}
</button>
{% elif element == 'input' %}
<input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" value="{{ text }}" {% if form %}form="{{ form }}"{% endif %} />
{% endif %}
{%- endmacro %}

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

@ -1,5 +1,6 @@
{% from "components/icon.html" import Icon %}
{% from "components/options_input.html" import OptionsInput %}
{% from 'components/save_button.html' import SaveButton %}
{% from "components/modal.html" import Modal %}
{% from "components/alert.html" import Alert %}
@ -9,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 %}
@ -84,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>

57
templates/fragments/edit_user_form.html
View File

@ -3,38 +3,39 @@
{% from "components/date_input.html" import DateInput %}
{% from "components/phone_input.html" import PhoneInput %}
{% from "components/date_picker.html" import DatePicker %}
{% from 'components/save_button.html' import SaveButton %}
<form method="POST" action='{{ form_action }}'>
{{ form.csrf_token }}
<div class='panel'>
<div class='panel__content'>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name, validation='requiredField') }}
<base-form inline-template>
<form method="POST" action='{{ form_action }}'>
{{ form.csrf_token }}
<div class='panel'>
<div class='panel__content'>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name, validation='requiredField') }}
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name, validation='requiredField') }}
</div>
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name, validation='requiredField') }}
{{ TextInput(form.email, validation='email') }}
{{ PhoneInput(form.phone_number, form.phone_ext) }}
{{ OptionsInput(form.service_branch) }}
{{ OptionsInput(form.citizenship) }}
{{ OptionsInput(form.designation) }}
<div class="usa-input">
{{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
</div>
</div>
{{ TextInput(form.email, validation='email') }}
{{ PhoneInput(form.phone_number, form.phone_ext) }}
{{ OptionsInput(form.service_branch) }}
{{ OptionsInput(form.citizenship) }}
{{ OptionsInput(form.designation) }}
<div class="usa-input">
{{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
</div>
</div>
</div>
<div class='action-group'>
<button class='usa-button usa-button-big' type='submit'>
{{ "fragments.edit_user_form.save_details_button" | translate }}
</button>
</div>
</form>
<div class='action-group'>
{{ SaveButton(text=("fragments.edit_user_form.save_details_button" | translate), additional_classes="usa-button-big" )}}
</div>
</form>
</base-form>

41
templates/portfolios/admin.html
View File

@ -4,6 +4,7 @@
{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from 'components/save_button.html' import SaveButton %}
{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
@ -15,28 +16,30 @@
<div class="panel__content">
{% if user_can(permissions.VIEW_PORTFOLIO_NAME) %}
<form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
{{ portfolio_form.csrf_token }}
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(portfolio_form.name, validation="portfolioName") }}
</div>
<div class='edit-portfolio-name action-group'>
<button type="submit" class="usa-button usa-button-big usa-button-primary" tabindex="0">Save</button>
<base-form inline-template>
<form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
{{ portfolio_form.csrf_token }}
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(portfolio_form.name, validation="portfolioName") }}
</div>
</div>
<div class='defense-row'>
<div>
<div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
{% if portfolio.defense_component %}
<div class='admin-content'>{{ portfolio.defense_component }}</div>
{% else %}
<div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
{% endif %}
<div class='edit-portfolio-name action-group'>
{{ SaveButton(text='Save', additional_classes='usa-button-big') }}
</div>
</div>
</form>
<div class='defense-row'>
<div>
<div class='admin-title'>{{ "forms.task_order.defense_component_label" | translate }}</div>
{% if portfolio.defense_component %}
<div class='admin-content'>{{ portfolio.defense_component }}</div>
{% else %}
<div class='admin-content'>{{ "fragments.portfolio_admin.none" | translate }}</div>
{% endif %}
</div>
</div>
</form>
</base-form>
{% endif %}
</div>
</div>

3
templates/portfolios/applications/new.html
View File

@ -4,6 +4,7 @@
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/text_input.html" import TextInput %}
{% from 'components/save_button.html' import SaveButton %}
{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
@ -76,7 +77,7 @@
</div>
<div class="action-group">
<button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.create_button_text' | translate }}</button>
{{ SaveButton(text=('portfolios.applications.create_button_text' | translate)) }}
</div>
</form>
</new-application>

3
templates/portfolios/task_orders/invitations.html
View File

@ -6,6 +6,7 @@
{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/confirmation_button.html" import ConfirmationButton %}
{% from 'components/save_button.html' import SaveButton %}
{% macro Link(text, icon_name, onClick=None, url='#', classes='') %}
@ -59,7 +60,7 @@
{{ Icon("x") }}
<span>Cancel</span>
</a>
<input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
{{ SaveButton(text='Save Changes', element="input") }}
</div>
</div>
</template>

4
templates/portfolios/task_orders/review.html
View File

@ -10,7 +10,7 @@
{% from "components/alert.html" import Alert %}
{% from "components/review_field.html" import ReviewField %}
{% from "components/upload_input.html" import UploadInput %}
{% from 'components/save_button.html' import SaveButton %}
{% block content %}
<ko-review inline-template v-bind:initial-data='{{ form.data|tojson }}'>
@ -103,7 +103,7 @@
{% endblock %}
<div class='action-group'>
<input type='submit' class='usa-button usa-button-primary' value='Continue' />
{{ SaveButton(text="Continue", element="input") }}
</div>
</form>

51
templates/portfolios/task_orders/so_review.html
View File

@ -2,42 +2,41 @@
{% from "components/text_input.html" import TextInput %}
{% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
{% from 'components/save_button.html' import SaveButton %}
{% block content %}
{% include "fragments/flash.html" %}
<base-form inline-template>
<div class="col">
<div class="panel">
<div class="col">
<div class="panel">
<div class="panel__heading">
<h1 class="subheading">
<div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
</h1>
</div>
<div class="panel__heading">
<h1 class="subheading">
<div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
</h1>
</div>
<div class="panel__content">
<form method="POST" action='{{ url_for("portfolios.submit_so_review", portfolio_id=portfolio.id, task_order_id=task_order.id) }}'>
{{ form.csrf_token }}
<h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
{{ TextInput(form.certifying_official) }}
{{ TextInput(form.certifying_official_title) }}
{{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
{{ TextInput(form.certifying_official_address, paragraph=True) }}
<div class="panel__content">
<form method="POST" action='{{ url_for("portfolios.submit_so_review", portfolio_id=portfolio.id, task_order_id=task_order.id) }}'>
{{ form.csrf_token }}
<h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
{{ TextInput(form.certifying_official) }}
{{ TextInput(form.certifying_official_title) }}
{{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
{{ TextInput(form.certifying_official_address, paragraph=True) }}
<hr>
<hr>
{{ MultiCheckboxInput(form.required_distribution) }}
{{ MultiCheckboxInput(form.required_distribution) }}
<div class="action-group">
<button class="usa-button usa-button-big usa-button-primary">
Continue
</button>
</div>
</form>
<div class="action-group">
{{ SaveButton(text='Continue', additional_classes="usa-button-big") }}
</div>
</form>
</div>
</div>
</div>
</div>
</base-form>
{% endblock %}

85
templates/task_orders/signing/signature_requested.html
View File

@ -3,54 +3,53 @@
{% from "components/text_input.html" import TextInput %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/icon.html" import Icon %}
{% from 'components/save_button.html' import SaveButton %}
{% block content %}
<form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
{{ form.csrf_token }}
<div class="row row--pad">
<div class="col col--pad">
<div class="panel">
<div class="panel__heading">
<h1 class="task-order-form__heading subheading">
<div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
{{ "task_orders.sign.title" | translate }}
</h1>
</div>
<div class="panel__content">
<div is="levelofwarrant" inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<div>
<span v-bind:class="{ hide: !unlimited_level_of_warrant }">
{{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00', disabled=True) }}
</span>
<span v-bind:class="{ hide: unlimited_level_of_warrant }">
{{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00') }}
</span>
{{ CheckboxInput(form.unlimited_level_of_warrant) }}
</div>
<base-form inline-template>
<form method="POST" action='{{ url_for("task_orders.record_signature", task_order_id=task_order_id) }}'>
{{ form.csrf_token }}
<div class="row row--pad">
<div class="col col--pad">
<div class="panel">
<div class="panel__heading">
<h1 class="task-order-form__heading subheading">
<div class="h2">{{ "task_orders.sign.task_order_builder_title" | translate }}</div>
{{ "task_orders.sign.title" | translate }}
</h1>
</div>
{{ CheckboxInput(form.signature) }}
<div class="panel__content">
<div is="levelofwarrant" inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<div>
<span v-bind:class="{ hide: !unlimited_level_of_warrant }">
{{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00', disabled=True) }}
</span>
<span v-bind:class="{ hide: unlimited_level_of_warrant }">
{{ TextInput(form.level_of_warrant, validation='dollars', placeholder='$0.00') }}
</span>
{{ CheckboxInput(form.unlimited_level_of_warrant) }}
</div>
</div>
{{ CheckboxInput(form.signature) }}
</div>
</div>
<div class="action-group">
{{ SaveButton(text=('common.sign' | translate), additional_classes="usa-button-big") }}
<a
href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
class="action-group__action icon-link">
{{ Icon('caret_left') }}
<span class="icon icon--x"></span>
{{ "common.back" | translate }}
</a>
</div>
</div>
<div class="action-group">
<button class="usa-button usa-button-big usa-button-primary">
{{ "common.sign" | translate }}
</button>
<a
href="{{ url_for("portfolios.ko_review", portfolio_id=portfolio_id, task_order_id=task_order_id) }}"
class="action-group__action icon-link">
{{ Icon('caret_left') }}
<span class="icon icon--x"></span>
{{ "common.back" | translate }}
</a>
</div>
</div>
</div>
</form>
</form>
</base-form>
{% endblock %}