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

Add js/test_templates to .gitignore file and remove ignored folder

Browse Source
This commit is contained in:
leigh-mil 2019-10-16 11:49:57 -04:00 committed by dandds
parent ff68c640de
commit 248e93103b
8 changed files with 4 additions and 1347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -67,3 +67,6 @@ atst-overrides.ini
# binary file created by celery beat
celerybeat-schedule
# templates created for JS tests
js/test_templates

21
js/test_templates/checkbox_input_template.html
View File

@ -1,21 +0,0 @@
<checkboxinput
name='datafield'
inline-template
key='datafield'
v-bind:initial-checked='initialvalue'
v-bind:optional=false
>
<div>
<div class='usa-input ' v-bind:class="[{ 'checked': isChecked }]">
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
<legend>
<input checked id="datafield" name="datafield" type="checkbox" v-model="isChecked" value="initialvalue">
<label for="datafield">initialvalue value</label>
</legend>
</fieldset>
</div>
</div>
</checkboxinput>

601
js/test_templates/clin_fields.html
View File

@ -1,601 +0,0 @@
<clin-fields
v-bind:initial-clin-index='0'
v-bind:initial-total='0'
v-bind:initial-obligated='0'
v-bind:initial-start-date="'None'"
v-bind:initial-end-date="'None'"
v-bind:initial-clin-number="'None'"
v-bind:contract-start="'2019-09-14'"
v-bind:contract-end="'2022-09-14'"
inline-template>
<div class="clin-card" v-if="showClin">
<div class="card__title">
<span class="h4" v-html='clinTitle'></span>
<button
v-if='clinIndex > 0'
class="icon-link icon-link__remove-clin"
v-on:click="openModal(removeModalId)"
type="button">
<span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
</span>
</button>
</div>
<div class="card">
<div class="form-row">
<div class="h4 clin-card__title">
CLIN Details
</div>
</div>
<div class="form-row">
<div class="form-col">
<textinput
v-cloak
name='number'
validation='anything'
v-bind:optional=false
key='number'
:watch='true'
inline-template>
<div
class=' '
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
<label for=number>
<div class="usa-input__title">
CLIN
</div>
<span v-show='showError'>
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</span>
<span v-show='showValid'>
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</span>
</label>
<masked-input
v-on:input='onInput'
v-on:blur='onBlur'
v-on:change='onChange'
v-bind:value='value'
v-bind:mask='mask'
v-bind:pipe='pipe'
v-bind:keep-char-positions='keepCharPositions'
v-bind:aria-invalid='showError'
type='text'
id='number'
ref='input'
placeholder=''>
</masked-input>
<input
type='hidden'
v-bind:value='rawValue'
name='number'
/>
<template v-if='showError'>
<span class='usa-input__message' v-html='validationError'></span>
</template>
<template v-else>
<span class='usa-input__message'></span>
</template>
</div>
</textinput>
</div>
</div>
<div class="form-row">
<div class="form-col">
<optionsinput
name='jedi_clin_type'
inline-template
key='jedi_clin_type'
v-bind:watch='true'
v-bind:optional=false
v-bind:null-option="'None'"
>
<div
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
<legend>
<div class="usa-input__title-inline">
Corresponding IDIQ CLIN
</div>
</legend>
<select id="jedi_clin_type" name="jedi_clin_type"><option value="JEDI_CLIN_1">IaaS/PaaS (IDIQ CLIN 0001)</option><option value="JEDI_CLIN_2">IDIQ CLIN 0002</option><option value="JEDI_CLIN_3">IDIQ CLIN 0003</option><option value="JEDI_CLIN_4">IDIQ CLIN 0004</option></select>
<template v-if='showError'>
<span class='usa-input__message' v-html='validationError'></span>
</template>
</fieldset>
</div>
</optionsinput>
</div>
</div>
<hr>
<div class="form-row">
<div class="h4 clin-card__title">
CLIN Funding
</div>
</div>
<div class="form-row">
<div class="form-col">
<clindollaramount
v-cloak
inline-template
:funding-valid='true'
name='total_amount'
key='total_amount'
validation="clinDollars"
:watch='true'>
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
<label for='total_amount'>
<div class="usa-input__title">Total CLIN Value</div>
<span v-show='showFundingError'>
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</span>
<span v-show='showFundingValid'>
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</span>
</label>
<masked-input
v-on:input='onInput'
v-on:blur='onBlur'
v-on:change='onChange'
v-bind:value='value'
v-bind:mask='mask'
v-bind:pipe='pipe'
v-bind:keep-char-positions='keepCharPositions'
v-bind:aria-invalid='showError'
type='text'
:id='name'
ref='input'>
</masked-input>
<input type='hidden' v-bind:value='rawValue' :name='name' />
<template v-if='!fundingValid'>
<span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
</template>
<template v-else-if='showError'>
<span class='usa-input__message' v-html='validationError'></span>
</template>
<template v-else>
<span class='usa-input__message'></span>
</template>
</div>
</clindollaramount>
</div>
</div>
<div class="form-row">
<div class="form-col">
<clindollaramount
v-cloak
inline-template
:funding-valid='fundingValid'
name='obligated_amount'
key='obligated_amount'
validation="clinDollars"
:watch='true'>
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
<label for='obligated_amount'>
<div class="usa-input__title">Obligated Funds</div>
<span v-show='showFundingError'>
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</span>
<span v-show='showFundingValid'>
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</span>
</label>
<masked-input
v-on:input='onInput'
v-on:blur='onBlur'
v-on:change='onChange'
v-bind:value='value'
v-bind:mask='mask'
v-bind:pipe='pipe'
v-bind:keep-char-positions='keepCharPositions'
v-bind:aria-invalid='showError'
type='text'
:id='name'
ref='input'>
</masked-input>
<input type='hidden' v-bind:value='rawValue' :name='name' />
<template v-if='!fundingValid'>
<span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
</template>
<template v-else-if='showError'>
<span class='usa-input__message' v-html='validationError'></span>
</template>
<template v-else>
<span class='usa-input__message'></span>
</template>
</div>
</clindollaramount>
</div>
</div>
<div class="h5 clin-card__title">Percent Obligated</div>
<p id="percent-obligated" v-html='percentObligated'></p>
<hr>
<div class="form-row">
<div class="h4 clin-card__title">
Period of Performance
</div>
</div>
<pop-date-range
initial-min-start-date="2019-09-14"
initial-max-end-date="2022-09-14"
v-bind:clin-index="clinIndex"
initial-start-date="None"
initial-end-date="None"
inline-template>
<div>
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='start_date'
initialmonth=""
initialday=""
initialyear=""
:optional='false'
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 }">
<legend>
<div class="usa-input__title">
Start Date
</div>
<p class='usa-input__help'>
For example: 07 04 1776
</p>
<div v-if='outsideRange && !minError' class="usa-input-error-message">
PoP start date must be before or on September 14, 2022.
</div>
<div v-if='minError' class="usa-input-error-message">
PoP start date must be on or after September 14, 2019.
</div>
<div v-if='maxError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" 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"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input
name="date-day"
maxlength="2"
min="1"
type="number"
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input
name="date-year"
maxlength="4"
type="number"
v-model="year"
max="2022"
min="2019"
v-on:change="onInput"
/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else>
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='end_date'
initialmonth=""
initialday=""
initialyear=""
:optional='false'
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 }">
<legend>
<div class="usa-input__title">
End Date
</div>
<div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
<div class='usa-alert-body'>
<p class='usa-alert-text'>
A CLIN's period of performance must end before September 14, 2022.
</p>
</div>
</div>
<p class='usa-input__help'>
For example: 07 04 1776
</p>
<div v-if='outsideRange && !maxError' class="usa-input-error-message">
PoP end date must be after or on September 14, 2019.
</div>
<div v-if='minError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
<div v-if='maxError' class="usa-input-error-message">
PoP end date must be before or on September 14, 2022.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" 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"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input
name="date-day"
maxlength="2"
min="1"
type="number"
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input
name="date-year"
maxlength="4"
type="number"
v-model="year"
v-on:change="onInput"
/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else>
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
</div>
</pop-date-range>
</div>
<div v-show="$root.activeModal === removeModalId" v-cloak>
<div :id='"modal--" + removeModalId' class='modal modal--dismissable'>
<div class='modal__container'>
<div class='modal__dialog' role='dialog' aria-modal='true'>
<div class='modal__body'>
<div class="task-order__modal-cancel">
<h1 v-html='"Do you want to remove " + clinTitle + "?"'></h1>
<div class="task-order__modal-cancel_buttons">
<button
v-on:click='closeModal(removeModalId)'
class="usa-button usa-button-primary"
type="button">
No, go back
</button>
<button
v-on:click="removeClin()"
class="usa-button usa-button-primary"
type="button">
Yes, remove CLIN
</button>
</div>
</div>
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal(removeModalId)'>
<span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
</span>
<span>
Close
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</clin-fields>

245
js/test_templates/pop_date_range.html
View File

@ -1,245 +0,0 @@
<pop-date-range
initial-min-start-date="2019-09-14"
initial-max-end-date="2022-09-14"
v-bind:clin-index="1"
initial-start-date="None"
initial-end-date="None"
inline-template>
<div>
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='start_date'
initialmonth=""
initialday=""
initialyear=""
:optional='true'
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 }">
<legend>
<div class="usa-input__title">
Start Date
</div>
<p class='usa-input__help'>
For example: 07 04 1776
</p>
<div v-if='outsideRange && !minError' class="usa-input-error-message">
PoP start date must be before or on September 14, 2022.
</div>
<div v-if='minError' class="usa-input-error-message">
PoP start date must be on or after September 14, 2019.
</div>
<div v-if='maxError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" 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"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input
name="date-day"
maxlength="2"
min="1"
type="number"
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input
name="date-year"
maxlength="4"
type="number"
v-model="year"
max="2022"
min="2019"
v-on:change="onInput"
/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else>
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='end_date'
initialmonth=""
initialday=""
initialyear=""
:optional='true'
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 }">
<legend>
<div class="usa-input__title">
End Date
</div>
<div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
<div class='usa-alert-body'>
<p class='usa-alert-text'>
A CLIN's period of performance must end before September 14, 2022.
</p>
</div>
</div>
<p class='usa-input__help'>
For example: 07 04 1776
</p>
<div v-if='outsideRange && !maxError' class="usa-input-error-message">
PoP end date must be after or on September 14, 2019.
</div>
<div v-if='minError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
<div v-if='maxError' class="usa-input-error-message">
PoP end date must be before or on September 14, 2022.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" 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"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input
name="date-day"
maxlength="2"
min="1"
type="number"
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input
name="date-year"
maxlength="4"
type="number"
v-model="year"
v-on:change="onInput"
/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else>
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
</div>
</pop-date-range>

375
js/test_templates/to_form.html
View File

@ -1,375 +0,0 @@
<to-form inline-template="">
<form action="/task_orders//form/step_3" autocomplete="off" enctype="multipart/form-data" id="to_form" method="POST">
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
<div class="sticky-cta-container">
<div class="sticky-cta-text">
<h3>Add Task Order (step 3 of 5)</h3>
</div>
<div class="sticky-cta-buttons">
<span class="action-group">
<input :disabled="!canSave" class="usa-button usa-button-primary" form="to_form" tabindex="0" type="submit" value="Next: Review Task Order"/>
<a class="usa-button usa-button-secondary" href="/task_orders//form/step_2">
Previous
</a>
<a class="action-group__action icon-link" v-on:click="openModal('cancel')">
Cancel
</a>
</span>
</div>
</div>
</div>
<div v-cloak="" v-show="$root.activeModal === 'cancel'">
<div class="modal modal--dismissable" id="modal--cancel">
<div class="modal__container">
<div aria-modal="true" class="modal__dialog" role="dialog">
<div class="modal__body">
<!-- Use these elements in caller for modal to be styled properly -->
<!-- h1 for header text -->
<!-- hr -->
<!-- div class='action-group' for buttons -->
<div class="task-order__modal-cancel">
<h1>Do you want to save this draft?</h1>
<div class="action-group">
<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=False" type="submit">No, delete it</button>
<button class="usa-button usa-button-primary" formaction="/portfolios/e4edf994-04f4-4aaa-ba30-39507e1068a8/task_orders/form/cancel?save=True" type="submit">Yes, save for later</button>
</div>
</div>
<button class="icon-link modal__dismiss" type="button" v-on:click='closeModal("cancel")'>
<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="task-order">
<div>
<div class="task-order__header">
<div class="h2">
Enter Contract Line Items
</div>
<p>
<strong>Task Order Number:</strong> 1234567890123
</p>
<p>
Refer to your task order to locate your Contract Line Item Numbers (CLINs).
</p>
</div>
<div v-for="clin in clins">
<clin-fields inline-template="" v-bind:contract-end="'2022-09-14'" v-bind:contract-start="'2019-09-14'" v-bind:initial-clin-index="clinIndex" v-bind:initial-clin-type="'JEDI_CLIN_1'">
<div class="clin-card" v-if="showClin">
<div class="card__title">
<span class="h4" v-html="clinTitle"></span>
<button class="icon-link icon-link__remove-clin" type="button" v-if="clinIndex &gt; 0" v-on:click="openModal(removeModalId)">
<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
</span>
</button>
</div>
<div class="card">
<div class="form-row">
<div class="h4 clin-card__title">
CLIN Details
</div>
</div>
<div class="form-row">
<div class="form-col">
<textinput :name="'clins-' + clinIndex + '-number'" :watch="true" inline-template="">
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
<label :for="name">
<span v-show="showError">
<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
</svg>
</span>
</span>
<span v-show="showValid">
<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
</span>
<div class="usa-input__title">CLIN</div>
</label>
<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
</masked-input>
<input :name="name" type="hidden" v-bind:value="rawValue">
<template v-if="showError">
<span class="usa-input__message" v-html="validationError"></span>
</template>
<template v-else="">
<span class="usa-input__message"></span>
</template>
</input></div>
</textinput>
</div>
</div>
<div class="form-row">
<div class="form-col">
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :optional="false" :watch="true" inline-template="">
<div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<fieldset class="usa-input__choices" data-ally-disabled="true" v-on:change="onInput">
<legend>
<div class="usa-input__title">
Corresponding IDIQ CLIN
</div>
</legend>
<select :id="name" :name="name">
<option value="JEDI_CLIN_1">IaaS/PaaS (IDIQ CLIN 0001)</option>
<option value="JEDI_CLIN_2">IDIQ CLIN 0002</option>
<option value="JEDI_CLIN_3">IDIQ CLIN 0003</option>
<option value="JEDI_CLIN_4">IDIQ CLIN 0004</option>
</select>
</fieldset>
</div>
</optionsinput>
</div>
</div>
<hr/>
<div class="form-row">
<div class="h4 clin-card__title">
CLIN Funding
</div>
</div>
<div class="form-row">
<div class="form-col">
<clindollaramount :funding-valid="true" :key="'clins-' + clinIndex + '-' + 'total' + '_amount'" :name="'clins-' + clinIndex + '-' + 'total' + '_amount'" :watch="true" inline-template="" v-cloak="" validation="clinDollars">
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
<label :for="name">
<div class="usa-input__title">Total CLIN Value</div>
<span v-show="showFundingError">
<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
</svg>
</span>
</span>
<span v-show="showFundingValid">
<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
</span>
</label>
<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
</masked-input>
<input :name="name" type="hidden" v-bind:value="rawValue"/>
<template v-if="!fundingValid">
<span class="usa-input__message">Obligated amount must be less than or equal to total amount</span>
</template>
<template v-else-if="showError">
<span class="usa-input__message" v-html="validationError"></span>
</template>
<template v-else="">
<span class="usa-input__message"></span>
</template>
</div>
</clindollaramount>
</div>
</div>
<div class="form-row">
<div class="form-col">
<clindollaramount :funding-valid="fundingValid" :key="'clins-' + clinIndex + '-' + 'obligated' + '_amount'" :name="'clins-' + clinIndex + '-' + 'obligated' + '_amount'" :watch="true" inline-template="" v-cloak="" validation="clinDollars">
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
<label :for="name">
<div class="usa-input__title">Obligated Funds</div>
<span v-show="showFundingError">
<span aria-hidden="true" class="icon icon--alert icon-validation"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
</svg>
</span>
</span>
<span v-show="showFundingValid">
<span aria-hidden="true" class="icon icon--ok icon-validation"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
</span>
</label>
<masked-input :id="name" ref="input" type="text" v-bind:aria-invalid="showError" v-bind:keep-char-positions="keepCharPositions" v-bind:mask="mask" v-bind:pipe="pipe" v-bind:value="value" v-on:blur="onBlur" v-on:change="onChange" v-on:input="onInput">
</masked-input>
<input :name="name" type="hidden" v-bind:value="rawValue"/>
<template v-if="!fundingValid">
<span class="usa-input__message">Obligated amount must be less than or equal to total amount</span>
</template>
<template v-else-if="showError">
<span class="usa-input__message" v-html="validationError"></span>
</template>
<template v-else="">
<span class="usa-input__message"></span>
</template>
</div>
</clindollaramount>
</div>
</div>
<div class="h5 clin-card__title">Percent Obligated</div>
<p id="percent-obligated" v-html="percentObligated"></p>
<hr/>
<div class="form-row">
<div class="h4 clin-card__title">
Period of Performance
</div>
</div>
<pop-date-range initial-max-end-date="2022-09-14" initial-min-start-date="2019-09-14" inline-template="" v-bind:clin-index="clinIndex">
<div>
<div class="form-row">
<div class="form-col">
<date-selector :maxdate="maxStartProp" :maxrange="initialMaxEndDate" :mindate="initialMinStartDate" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
<legend>
<div class="usa-input__title">
Start Date
</div>
<p class="usa-input__help">
For example: 07 04 1776
</p>
<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !minError">
PoP start date must be before or on September 14, 2022.
</div>
<div class="usa-input-error-message" v-if="minError">
PoP start date must be on or after September 14, 2019.
</div>
<div class="usa-input-error-message" v-if="maxError &amp;&amp; !outsideRange">
PoP start date must be before end date.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
<div class="usa-form-group usa-form-group-month">
<label>Month</label>
<input max="12" maxlength="2" min="1" name="date-month" type="number" v-bind:class="{ 'usa-input-error': (month &amp;&amp; !isMonthValid) }" v-model="month" v-on:change="onInput"/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input maxlength="2" min="1" name="date-day" type="number" v-bind:class="{ 'usa-input-error': (day &amp;&amp; !isDayValid) }" v-bind:max="daysMaxCalculation" v-model="day" v-on:change="onInput"/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input max="2022" maxlength="4" min="2019" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else="">
<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
<div class="form-row">
<div class="form-col">
<date-selector :maxdate="initialMaxEndDate" :maxrange="initialMaxEndDate" :mindate="minEndProp" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
<legend>
<div class="usa-input__title">
End Date
</div>
<div aria-live="polite" class="usa-alert usa-alert-info" role="alert">
<div class="usa-alert-body">
<p class="usa-alert-text">
A CLIN's period of performance must end before September 14, 2022.
</p>
</div>
</div>
<p class="usa-input__help">
For example: 07 04 1776
</p>
<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !maxError">
PoP end date must be after or on September 14, 2019.
</div>
<div class="usa-input-error-message" v-if="minError &amp;&amp; !outsideRange">
PoP start date must be before end date.
</div>
<div class="usa-input-error-message" v-if="maxError">
PoP end date must be before or on September 14, 2022.
</div>
</legend>
<div class="date-picker-component">
<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
<div class="usa-form-group usa-form-group-month">
<label>Month</label>
<input max="12" maxlength="2" min="1" name="date-month" type="number" v-bind:class="{ 'usa-input-error': (month &amp;&amp; !isMonthValid) }" v-model="month" v-on:change="onInput"/>
</div>
<div class="usa-form-group usa-form-group-day">
<label>Day</label>
<input maxlength="2" min="1" name="date-day" type="number" v-bind:class="{ 'usa-input-error': (day &amp;&amp; !isDayValid) }" v-bind:max="daysMaxCalculation" v-model="day" v-on:change="onInput"/>
</div>
<div class="usa-form-group usa-form-group-year">
<label>Year</label>
<input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
</div>
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
</div>
<div class="usa-form-group-date-ok" v-else="">
<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
</svg>
</span>
</div>
</div>
</div>
</fieldset>
</date-selector>
</div>
</div>
</div>
</pop-date-range>
</div>
<div v-cloak="" v-show="$root.activeModal === removeModalId">
<div :id='"modal--" + removeModalId' class="modal modal--dismissable">
<div class="modal__container">
<div aria-modal="true" class="modal__dialog" role="dialog">
<div class="modal__body">
<div class="task-order__modal-cancel">
<h1 v-html='"Do you want to remove " + clinTitle + "?"'></h1>
<div class="task-order__modal-cancel_buttons">
<button class="usa-button usa-button-primary" type="button" v-on:click="closeModal(removeModalId)">
No, go back
</button>
<button class="usa-button usa-button-primary" type="button" v-on:click="removeClin()">
Yes, remove CLIN
</button>
</div>
</div>
<button class="icon-link modal__dismiss" type="button" v-on:click="closeModal(removeModalId)">
<span aria-hidden="true" class="icon icon--x"><svg viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"></path><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"></path></svg>
</span>
<span>
Close
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</clin-fields>
</div>
<button class="icon-link icon-link__add-another-clin" id="add-clin" type="button" v-on:click="addClin">
<span aria-hidden="true" class="icon icon--plus"><?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" version="1.1" viewbox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>UI element / Icons / Plus / White</title>
<desc>Created with Sketch.</desc>
<g fill="none" fill-rule="evenodd" id="Wizard_Services" stroke="none" stroke-width="1">
<g fill="#0071BC" id="c5-Add-Services" transform="translate(-285.000000, -1059.000000)">
<g id="Group-3" transform="translate(285.000000, 1035.000000)">
<g id="Group-2" transform="translate(0.000000, 21.000000)">
<g id="UI-element-/-Icons-/-Plus-/-White" transform="translate(0.000000, 3.000000)">
<g id="Group">
<path d="M8,16 C3.589,16 0,12.411 0,8 C0,3.589 3.589,0 8,0 C12.411,0 16,3.589 16,8 C16,12.411 12.411,16 8,16 Z M8,2 C4.691,2 2,4.691 2,8 C2,11.309 4.691,14 8,14 C11.309,14 14,11.309 14,8 C14,4.691 11.309,2 8,2 Z" id="Style"></path>
<path d="M8,12 C7.448,12 7,11.4891429 7,10.8571429 L7,5.14285714 C7,4.512 7.448,4 8,4 C8.552,4 9,4.512 9,5.14285714 L9,10.8571429 C9,11.4891429 8.552,12 8,12 Z" id="Path"></path>
<path d="M8,12 C7.448,12 7,11.4891429 7,10.8571429 L7,5.14285714 C7,4.512 7.448,4 8,4 C8.552,4 9,4.512 9,5.14285714 L9,10.8571429 C9,11.4891429 8.552,12 8,12 Z" id="Path" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg></span>
<span>Add another CLIN</span>
</button>
</div>
</div>
</form>
</to-form>

53
js/test_templates/upload_input_error_template.html
View File

@ -1,53 +0,0 @@
<uploadinput
inline-template
v-bind:initial-errors='true'
v-bind:watch='false'
v-bind:portfolio-id="''"
name='pdf'
:optional='false'
>
<div>
<div v-show="hasAttachment" class="uploaded-file">
<span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<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 }'>
<p>
</p>
<div v-if="!hideInput" class="upload-widget">
<label class="upload-label" for="pdf">
<span class="upload-button">
Browse
</span>
</label>
<input
v-on:change="addAttachment"
ref="attachmentInput"
accept=""
id="pdf"
name="pdf"
aria-label="Task Order Upload"
v-bind:value="attachment"
type="file">
<input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
<input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
</div>
<template v-if="uploadError">
<span class="usa-input__message">There was an error uploading your file. Please try again. If you encounter repeated problems uploading this file, please contact CCPO.</span>
</template>
<template v-if="sizeError">
<span class="usa-input__message">The file you have selected is too large. Please choose a file no larger than 64MB.</span>
</template>
<span class="usa-input__message">Test Error Message</span>
</div>
</div>
</uploadinput>

52
js/test_templates/upload_input_template.html
View File

@ -1,52 +0,0 @@
<uploadinput
inline-template
v-bind:filename='filename'
v-bind:object-name='objectName'
v-bind:watch='false'
v-bind:portfolio-id="''"
name='pdf'
:optional='false'
>
<div>
<div v-show="hasAttachment" class="uploaded-file">
<span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
<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 }'>
<p>
</p>
<div v-if="!hideInput" class="upload-widget">
<label class="upload-label" for="pdf">
<span class="upload-button">
Browse
</span>
</label>
<input
v-on:change="addAttachment"
ref="attachmentInput"
accept=""
id="pdf"
name="pdf"
aria-label="Task Order Upload"
v-bind:value="attachment"
type="file">
<input type="hidden" name="pdf-filename" id="pdf-filename" ref="attachmentFilename">
<input type="hidden" name="pdf-object_name" id="pdf-object_name" ref="attachmentObjectName">
</div>
<template v-if="uploadError">
<span class="usa-input__message">There was an error uploading your file. Please try again. If you encounter repeated problems uploading this file, please contact CCPO.</span>
</template>
<template v-if="sizeError">
<span class="usa-input__message">The file you have selected is too large. Please choose a file no larger than 64MB.</span>
</template>
</div>
</div>
</uploadinput>

1
script/include/run_test
View File

@ -49,6 +49,7 @@ fi
if [ "${RUN_JS_TESTS}" = "true" ]; then
output_divider "Render Vue components"
mkdir js/test_templates | true
run_python_render_vue_component
output_divider "Run JavaScript unit test suite"
run_javascript_tests