70 lines
2.6 KiB
HTML
70 lines
2.6 KiB
HTML
{% from 'components/icon.html' import Icon %}
|
|
|
|
{% macro CLINDollarAmount(type, field=None, funding_validation=False) -%}
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<clindollaramount
|
|
v-cloak
|
|
inline-template
|
|
{% if funding_validation %}
|
|
:funding-valid='fundingValid'
|
|
{% else %}
|
|
:funding-valid='true'
|
|
{% endif %}
|
|
{% if field %}
|
|
name='{{ field.name }}'
|
|
{% if field.data is not none %}initial-value='{{ field.data }}'{% endif %}
|
|
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
|
|
key='{{ field.name }}'
|
|
{% else %}
|
|
:name="'clins-' + clinIndex + '-' + '{{ type }}' + '_amount'"
|
|
:key="'clins-' + clinIndex + '-' + '{{ type }}' + '_amount'"
|
|
{% endif %}
|
|
|
|
validation="clinDollars">
|
|
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
|
|
{% if field %}
|
|
<label for='{{ field.name }}'>
|
|
{% else %}
|
|
<label :for='name'>
|
|
{% endif %}
|
|
|
|
{% if type=="obligated" %}
|
|
<div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
|
|
{% else %}
|
|
<div class="usa-input__title">{{ 'task_orders.form.total_funds_label' | translate }}</div>
|
|
{% endif %}
|
|
<span v-show='showFundingError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
<span v-show='showFundingValid'>{{ Icon('ok',classes="icon-validation") }}</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'>{{ "forms.task_order.clin_funding_errors.obligated_amount_error" | translate }}</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>
|
|
{%- endmacro %}
|