pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
atst/js/test_templates/to_form.html
dandds 112f0e0ab2 Initial JS tests for the Vue TOForm component. 
This adds BeautifulSoup to the Python dev dependencies so that we can
render an entire page and then extract the Vue component we need.
Ideally, we should refactor all the Vue components so that they live in
Jinja macros and we can render those macros directly.
2019-09-20 15:24:55 -04:00

341 lines
19 KiB
HTML
Raw Blame History

<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">
<div class="task-order__modal-cancel">
<h1>Do you want to save this draft?</h1>
<div class="task-order__modal-cancel_buttons">
<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>
<span>
Close
</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="$parent.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 v-html="percentObligated"></p>
<hr/>
<div class="form-row">
<div class="h4 clin-card__title">
Period of Performance
</div>
</div>
<div class="form-row">
<div class="form-col">
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" :watch="true" inline-template="">
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation }">
<legend>
<div class="usa-input__title">
Start Date
</div>
<p class="usa-input__help">
For example: 07 04 1776
</p>
</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 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>
</fieldset>
</date-selector>
</div>
</div>
<div class="form-row">
<div class="form-col">
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" :watch="true" inline-template="">
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation }">
<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>
</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 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>
</fieldset>
</date-selector>
</div>
</div>
<div class="form-row">
<div class="usa-input-error-message form-has-errors">
<p :key="error" v-for="error in popErrors" v-html="error"></p>
</div>
</div>
</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>
Reference in New Issue View Git Blame Copy Permalink