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

Vue for adding multiple CLINs

Browse Source
This commit is contained in:
leigh-mil
2019-06-07 09:25:25 -04:00
parent cca101b50c
commit e017cd12af
5 changed files with 133 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
js/components/clin_fields.js
View File

@@ -6,87 +6,14 @@ export default {
name: 'clin-fields',
components: {
DateSelector,
optionsinput,
textinput,
},
props: {
clinIndex: String,
initialClinIndex: Number,
},
data: function() {
return {clinIndex: this.initialClinIndex}
},
// get clin index from props and pass into template
template: `
<div>
<optionsinput name="clins-0-jedi_clin_type">
</optionsinput>
<div class=" usa-input usa-input--validation--anything usa-input--success">
<label for="clins-0-number">
<div class="usa-input__title"> Number </div>
</label>
<input type="text" id="clins-0-number" placeholder="">
<input type="hidden" name="clins-0-number" value="123">
</div>
<fieldset class="usa-input date-picker">
<legend>
<div class="usa-input__title"> Start Date
</div>
</legend>
<div class="date-picker-component">
<input name="clins-0-start_date" type="hidden">
<div class="usa-form-group usa-form-group-month">
<label>Month
</label>
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day
</label>
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year
</label>
<input id="date-year" maxlength="4" type="number">
</div>
<!---->
</div>
<p class="usa-input-error-message">
</p>
</fieldset>
<fieldset class="usa-input date-picker">
<legend>
<div class="usa-input__title"> End Date
</div>
</legend>
<div class="date-picker-component">
<input name="clins-0-end_date" type="hidden">
<div class="usa-form-group usa-form-group-month">
<label>Month
</label>
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day
</label>
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year
</label>
<input id="date-year" maxlength="4" type="number">
</div>
<!---->
</div>
<p class="usa-input-error-message">
</p>
</fieldset>
<div class=" usa-input usa-input--validation--anything">
<label for="clins-0-obligated_amount">
<div class="usa-input__title"> Obligated Amount
</div>
</label>
<input type="text" id="clins-0-obligated_amount" placeholder="">
<input type="hidden" name="clins-0-obligated_amount">
</div>
</div>`,
}

7
js/components/forms/to_form.js
View File

@@ -17,15 +17,16 @@ export default {
},
props: {
initialClinCount: String,
initialClinCount: Number,
},
data: function() {
const clins = this.initialClinCount == 0 ? [''] : []
const clinIndex = this.initialClinCount == 0 ? 0 : this.initialClinCount - 1
return {
clins,
clinCount: this.initalClinCount - 1,
clinIndex,
}
// pass initialCLINIndex in props and add one each time a clin is added...
// this way we can keep track of the clin id for the html name/id/etc
@@ -34,7 +35,7 @@ export default {
methods: {
addClin: function(event) {
this.clins.push('')
this.clinCount = this.clinCount + 1
this.clinIndex = this.clinIndex + 1
},
},
}