Update TO form and nested components to emit directly to parent components instead of emitting from the root component
This commit is contained in:
parent
92ce3420b6
commit
c94570f83e
@ -25,6 +25,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
this.$parent.$emit('field-change')
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.checked,
|
||||
name: this.name,
|
||||
@ -32,4 +33,10 @@ export default {
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
valid: function() {
|
||||
return this.optional || this.isChecked
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
import Modal from '../mixins/modal'
|
||||
import optionsinput from './options_input'
|
||||
import textinput from './text_input'
|
||||
import clindollaramount from './clin_dollar_amount'
|
||||
@ -19,8 +18,6 @@ export default {
|
||||
PopDateRange,
|
||||
},
|
||||
|
||||
mixins: [Modal],
|
||||
|
||||
props: {
|
||||
initialClinIndex: Number,
|
||||
initialTotal: {
|
||||
@ -54,11 +51,13 @@ export default {
|
||||
totalAmount: this.initialTotal || 0,
|
||||
obligatedAmount: this.initialObligated || 0,
|
||||
fundingValid: fundingValidation,
|
||||
removed: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.$root.$on('field-change', this.handleFieldChange)
|
||||
this.$on('field-change', this.handleFieldChange)
|
||||
this.handleFieldChange()
|
||||
this.validateFunding()
|
||||
},
|
||||
|
||||
@ -90,17 +89,16 @@ export default {
|
||||
},
|
||||
|
||||
handleFieldChange: function(event) {
|
||||
if (this._uid === event.parent_uid) {
|
||||
if (event.name.includes(TOTAL_AMOUNT)) {
|
||||
if (event && event.name.includes(TOTAL_AMOUNT)) {
|
||||
this.totalAmount = parseFloat(event.value)
|
||||
this.validateFunding()
|
||||
} else if (event.name.includes(OBLIGATED_AMOUNT)) {
|
||||
} else if (event && event.name.includes(OBLIGATED_AMOUNT)) {
|
||||
this.obligatedAmount = parseFloat(event.value)
|
||||
this.validateFunding()
|
||||
} else if (event.name.includes(NUMBER)) {
|
||||
} else if (event && event.name.includes(NUMBER)) {
|
||||
this.clinNumber = event.value
|
||||
}
|
||||
}
|
||||
this.$parent.$emit('field-change')
|
||||
},
|
||||
|
||||
removeClin: function() {
|
||||
@ -108,6 +106,8 @@ export default {
|
||||
emitEvent('remove-clin', this, {
|
||||
clinIndex: this.clinIndex,
|
||||
})
|
||||
this.removed = true
|
||||
this.handleFieldChange()
|
||||
this.closeModal('remove_clin')
|
||||
},
|
||||
},
|
||||
@ -140,5 +140,15 @@ export default {
|
||||
removeModalId: function() {
|
||||
return `remove-clin-${this.clinIndex}`
|
||||
},
|
||||
|
||||
valid: function() {
|
||||
if (this.removed) {
|
||||
// the nested component is still mounted, so valid needs to be true or the
|
||||
// save button will never become active
|
||||
return true
|
||||
} else {
|
||||
return this.$children.every(child => child.valid)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -210,6 +210,10 @@ export default {
|
||||
dateParsed: function() {
|
||||
return Date.UTC(this.year, this.month - 1, this.day)
|
||||
},
|
||||
|
||||
valid: function() {
|
||||
return this.isDateValid
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -220,7 +224,7 @@ export default {
|
||||
valid: this.isDateValid,
|
||||
})
|
||||
|
||||
this.$emit('date-change', {
|
||||
this.$parent.$emit('field-change', {
|
||||
value: this.formattedDate,
|
||||
name: this.name,
|
||||
valid: this.isDateValid,
|
||||
|
@ -2,10 +2,7 @@ import stickybits from 'stickybits'
|
||||
|
||||
import checkboxinput from '../checkbox_input'
|
||||
import ClinFields from '../clin_fields'
|
||||
import DateSelector from '../date_selector'
|
||||
import FormMixin from '../../mixins/form'
|
||||
import optionsinput from '../options_input'
|
||||
import SemiCollapsibleText from '../semi_collapsible_text'
|
||||
import FormMixin from '../../mixins/form_mixin'
|
||||
import textinput from '../text_input'
|
||||
import uploadinput from '../upload_input'
|
||||
|
||||
@ -17,9 +14,6 @@ export default {
|
||||
components: {
|
||||
checkboxinput,
|
||||
ClinFields,
|
||||
DateSelector,
|
||||
optionsinput,
|
||||
SemiCollapsibleText,
|
||||
textinput,
|
||||
uploadinput,
|
||||
},
|
||||
@ -58,8 +52,6 @@ export default {
|
||||
delete this.fields[field]
|
||||
}
|
||||
}
|
||||
|
||||
this.validateForm()
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -1,11 +1,8 @@
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
import FormMixin from '../mixins/form'
|
||||
|
||||
export default {
|
||||
name: 'optionsinput',
|
||||
|
||||
mixins: [FormMixin],
|
||||
|
||||
props: {
|
||||
name: String,
|
||||
initialErrors: {
|
||||
@ -48,6 +45,7 @@ export default {
|
||||
this.showValid = true
|
||||
this.value = e.target.value
|
||||
|
||||
this.$parent.$emit('field-change')
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
name: this.name,
|
||||
@ -60,4 +58,10 @@ export default {
|
||||
return this.optional || value !== this.nullOption
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
valid: function() {
|
||||
return this._isValid(this.value)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -50,8 +50,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.$on('field-change', this.handleFieldChange)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDateChange: function(event) {
|
||||
handleFieldChange: function(event) {
|
||||
if (event.name.includes(START_DATE) && event.valid) {
|
||||
let date = new Date(event.value)
|
||||
this.minEndDate = this.calcMinEndDate(date)
|
||||
@ -59,6 +63,7 @@ export default {
|
||||
let date = new Date(event.value)
|
||||
this.maxStartDate = this.calcMaxStartDate(date)
|
||||
}
|
||||
this.$parent.$emit('field-change')
|
||||
},
|
||||
|
||||
calcMaxStartDate: function(date) {
|
||||
@ -86,5 +91,9 @@ export default {
|
||||
minEndProp: function() {
|
||||
return format(this.minEndDate, 'YYYY-MM-DD')
|
||||
},
|
||||
|
||||
valid: function() {
|
||||
return this.$children.every(child => child.valid)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -1,20 +1,8 @@
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
import FormMixin from '../mixins/form'
|
||||
import textinput from './text_input'
|
||||
import optionsinput from './options_input'
|
||||
|
||||
import { buildUploader } from '../lib/upload'
|
||||
|
||||
export default {
|
||||
name: 'uploadinput',
|
||||
|
||||
mixins: [FormMixin],
|
||||
|
||||
components: {
|
||||
textinput,
|
||||
optionsinput,
|
||||
},
|
||||
|
||||
props: {
|
||||
name: String,
|
||||
filename: {
|
||||
@ -25,15 +13,8 @@ export default {
|
||||
},
|
||||
initialErrors: {
|
||||
type: Boolean,
|
||||
},
|
||||
watch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
optional: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
portfolioId: {
|
||||
type: String,
|
||||
},
|
||||
@ -51,12 +32,6 @@ export default {
|
||||
},
|
||||
|
||||
created: async function() {
|
||||
emitEvent('field-mount', this, {
|
||||
optional: this.optional,
|
||||
name: this.name,
|
||||
valid: this.hasAttachment,
|
||||
})
|
||||
|
||||
if (this.hasInitialData) {
|
||||
this.downloadLink = await this.getDownloadLink(
|
||||
this.filename,
|
||||
@ -93,12 +68,7 @@ export default {
|
||||
|
||||
this.changed = true
|
||||
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
valid: this.hasAttachment,
|
||||
})
|
||||
this.$parent.$emit('field-change')
|
||||
},
|
||||
removeAttachment: function(e) {
|
||||
e.preventDefault()
|
||||
@ -110,11 +80,7 @@ export default {
|
||||
this.clearErrors()
|
||||
this.changed = true
|
||||
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
})
|
||||
this.$parent.$emit('field-change')
|
||||
},
|
||||
clearErrors: function() {
|
||||
this.uploadError = false
|
||||
@ -144,9 +110,6 @@ export default {
|
||||
return this.attachment.split(/[\\/]/).pop()
|
||||
}
|
||||
},
|
||||
hasAttachment: function() {
|
||||
return !!this.attachment
|
||||
},
|
||||
hideInput: function() {
|
||||
return this.hasInitialData && !this.changed
|
||||
},
|
||||
@ -157,5 +120,8 @@ export default {
|
||||
this.sizeError
|
||||
)
|
||||
},
|
||||
valid: function() {
|
||||
return !!this.attachment
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -13,10 +13,12 @@ export default {
|
||||
|
||||
mounted: function() {
|
||||
this.$root.$on('field-change', this.handleFieldChange)
|
||||
this.$on('field-change', this.handleFieldChange)
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this.$root.$on('field-mount', this.handleFieldMount)
|
||||
this.$on('field-mount', this.handleFieldMount)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
54
js/mixins/form_mixin.js
Normal file
54
js/mixins/form_mixin.js
Normal file
@ -0,0 +1,54 @@
|
||||
export default {
|
||||
props: {
|
||||
initialSelectedSection: String,
|
||||
hasChanges: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
enableSave: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
changed: this.hasChanges,
|
||||
valid: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.$on('field-change', this.handleFieldChange)
|
||||
this.valid = this.validateFields()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFieldChange: function(event) {
|
||||
this.valid = this.validateFields()
|
||||
this.changed = true
|
||||
},
|
||||
|
||||
validateFields: function() {
|
||||
return this.$children.every(child => child.valid)
|
||||
},
|
||||
|
||||
handleSubmit: function(event) {
|
||||
if (!this.valid) {
|
||||
event.preventDefault()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
canSave: function() {
|
||||
if (this.changed && this.valid) {
|
||||
return true
|
||||
} else if (this.enableSave && this.valid) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
@ -53,6 +53,10 @@ export default {
|
||||
rawValue: function() {
|
||||
return this._rawValue(this.value)
|
||||
},
|
||||
|
||||
valid: function() {
|
||||
return this._isValid(this.value)
|
||||
},
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
@ -136,6 +140,10 @@ export default {
|
||||
}
|
||||
|
||||
// Emit a change event
|
||||
this.$parent.$emit('field-change', {
|
||||
value: this._rawValue(value),
|
||||
name: this.name,
|
||||
})
|
||||
emitEvent('field-change', this, {
|
||||
value: this._rawValue(value),
|
||||
valid: this._isValid(value),
|
||||
|
@ -37,7 +37,6 @@
|
||||
:name-tag="'clins-' + clinIndex + '-start_date'"
|
||||
{% endif %}
|
||||
:optional='{{ optional | string | lower }}'
|
||||
v-on:date-change='handleDateChange'
|
||||
inline-template>
|
||||
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
|
||||
@ -136,7 +135,6 @@
|
||||
:name-tag="'clins-' + clinIndex + '-end_date'"
|
||||
{% endif %}
|
||||
:optional='{{ optional | string | lower }}'
|
||||
v-on:date-change='handleDateChange'
|
||||
inline-template>
|
||||
|
||||
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
|
||||
|
@ -1,6 +1,6 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro UploadInput(field, portfolio_id, show_label=False, watch=False) -%}
|
||||
{% macro UploadInput(field, portfolio_id, show_label=False) -%}
|
||||
<uploadinput
|
||||
inline-template
|
||||
{% if not field.errors %}
|
||||
@ -9,18 +9,16 @@
|
||||
{% else %}
|
||||
v-bind:initial-errors='true'
|
||||
{% endif %}
|
||||
v-bind:watch='{{ watch | string | lower }}'
|
||||
v-bind:portfolio-id="'{{ portfolio_id }}'"
|
||||
name='{{ field.name }}'
|
||||
:optional='false'
|
||||
>
|
||||
<div>
|
||||
<div v-show="hasAttachment" class="uploaded-file">
|
||||
<div v-show="valid" class="uploaded-file">
|
||||
{{ Icon("ok") }}
|
||||
<a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
|
||||
<a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
|
||||
</div>
|
||||
<div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
|
||||
<div v-show="valid === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
|
||||
{% if show_label %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
@ -28,7 +26,7 @@
|
||||
{{ field.description }}
|
||||
</p>
|
||||
<div v-if="!hideInput" class="upload-widget">
|
||||
<label class="upload-label" for="{{ field.name }}">
|
||||
<label class="upload-label" :for="name">
|
||||
<span class="upload-button">
|
||||
Browse
|
||||
</span>
|
||||
@ -37,8 +35,8 @@
|
||||
v-on:change="addAttachment"
|
||||
ref="attachmentInput"
|
||||
accept="{{ field.accept }}"
|
||||
id="{{ field.name }}"
|
||||
name="{{ field.name }}"
|
||||
:id="name"
|
||||
:name="name"
|
||||
aria-label="Task Order Upload"
|
||||
v-bind:value="attachment"
|
||||
type="file">
|
||||
|
@ -4,7 +4,7 @@
|
||||
{% from "components/modal.html" import Modal %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<to-form inline-template {% if form.clins %}v-bind:initial-clin-count="{{ form.clins.data | length }}"{% endif %}>
|
||||
<to-form inline-template {% if form.clins %}v-bind:initial-clin-count="{{ form.clins.data | length }}"{% endif %} :enable-save="true">
|
||||
<form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
|
||||
{{ form.csrf_token }}
|
||||
|
||||
|
@ -16,5 +16,5 @@
|
||||
|
||||
{% block to_builder_form_field %}
|
||||
{{ TOFormStepHeader('task_orders.form.supporting_docs_header' | translate, 'task_orders.form.supporting_docs_text' | translate) }}
|
||||
{{ UploadInput(form.pdf, portfolio.id, watch=True) }}
|
||||
{{ UploadInput(form.pdf, portfolio.id) }}
|
||||
{% endblock %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user