375 lines
22 KiB
HTML
375 lines
22 KiB
HTML
<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 > 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 && 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 class="usa-input-error-message" v-if="outsideRange && !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 && !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 && !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 && !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 && isDateComplete, 'usa-input--error': !isDateValid && 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 && !maxError">
|
|
PoP end date must be on or after September 14, 2019.
|
|
</div>
|
|
<div class="usa-input-error-message" v-if="minError && !outsideRange">
|
|
PoP end date must be after start 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 && !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 && !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> |