atst/templates/components/clin_dollar_amount.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 %}