Add max width to TO form, put each clin inside .card, fix html indenting
This commit is contained in:
leigh-mil
parent
9ff440d845
commit
e6742fb319
@ -51,17 +51,13 @@
|
|||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% macro CLINFields(fields, index) %}
|
{% macro CLINFields(fields, index) %}
|
||||||
{% if index != 0 %}
|
|
||||||
<hr>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<clin-fields
|
<clin-fields
|
||||||
v-bind:initial-clin-index='{{ index }}'
|
v-bind:initial-clin-index='{{ index }}'
|
||||||
v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
|
v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
|
||||||
v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
|
v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
|
||||||
v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
|
v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
|
||||||
inline-template>
|
inline-template>
|
||||||
<div>
|
<div class="card">
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<div class="form-col form-col--two-thirds">
|
<div class="form-col form-col--two-thirds">
|
||||||
{{ OptionsInput(fields.jedi_clin_type, watch=True) }}
|
{{ OptionsInput(fields.jedi_clin_type, watch=True) }}
|
||||||
@ -106,131 +102,128 @@
|
|||||||
{{ CLINFields(clin, index=loop.index - 1) }}
|
{{ CLINFields(clin, index=loop.index - 1) }}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<div v-for="clin in clins">
|
<div v-for="clin in clins">
|
||||||
<hr v-if="clinIndex !== 0">
|
<clin-fields
|
||||||
<clin-fields
|
v-bind:initial-clin-index='clinIndex'
|
||||||
v-bind:initial-clin-index='clinIndex'
|
v-bind:initial-clin-type="'JEDI_CLIN_1'"
|
||||||
v-bind:initial-clin-type="'JEDI_CLIN_1'"
|
inline-template>
|
||||||
inline-template>
|
<div class="card">
|
||||||
<div>
|
<div class="form-row">
|
||||||
<div class="form-row">
|
<div class="form-col form-col--two-thirds">
|
||||||
<div class="form-col form-col--two-thirds">
|
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
|
||||||
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
|
<div class="usa-input">
|
||||||
<div class="usa-input">
|
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
|
||||||
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
|
<legend>
|
||||||
<legend>
|
<div class="usa-input__title">
|
||||||
<div class="usa-input__title">
|
{{ 'task_orders.form.clin_type_label' | translate }}
|
||||||
{{ 'task_orders.form.clin_type_label' | translate }}
|
</div>
|
||||||
</div>
|
</legend>
|
||||||
</legend>
|
<select :id='name' :name='name'>
|
||||||
<select :id='name' :name='name'>
|
<option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
|
||||||
<option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
|
<option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
|
||||||
<option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
|
<option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
|
||||||
<option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
|
<option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
|
||||||
<option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
|
</select>
|
||||||
</select>
|
</fieldset>
|
||||||
</fieldset>
|
</div>
|
||||||
</div>
|
</optionsinput>
|
||||||
</optionsinput>
|
</div>
|
||||||
|
<div class="form-col form-col--third">
|
||||||
|
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
|
||||||
|
<div class="usa-input">
|
||||||
|
<label :for="name">
|
||||||
|
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||||
|
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||||
|
<div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
|
||||||
|
</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='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>
|
||||||
<div class="form-col form-col--third">
|
|
||||||
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
|
|
||||||
<div class="usa-input">
|
|
||||||
<label :for="name">
|
|
||||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
|
||||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
|
||||||
<div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
|
|
||||||
</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='showError'>
|
|
||||||
<span class='usa-input__message' v-html='validationError'></span>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<span class='usa-input__message'></span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</textinput>
|
|
||||||
|
|
||||||
|
<div class="usa-input">
|
||||||
|
<fieldset class="usa-input__choices task-order__loa-fieldset">
|
||||||
|
<legend>
|
||||||
|
<div class="usa-input__title">
|
||||||
|
{{ 'task_orders.form.loa_label' | translate }}
|
||||||
|
</div>
|
||||||
|
</legend>
|
||||||
|
{{ LOAInput() }}
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="usa-input">
|
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
|
||||||
<fieldset class="usa-input__choices task-order__loa-fieldset">
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
|
||||||
<legend>
|
<legend>
|
||||||
<div class="usa-input__title">
|
<div class="usa-input__title">
|
||||||
{{ 'task_orders.form.loa_label' | translate }}
|
{{ 'task_orders.form.pop_start' | translate }}
|
||||||
</div>
|
</div>
|
||||||
</legend>
|
</legend>
|
||||||
{{ LOAInput() }}
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
|
<div class="date-picker-component">
|
||||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
|
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||||
<legend>
|
|
||||||
<div class="usa-input__title">
|
|
||||||
{{ 'task_orders.form.pop_start' | translate }}
|
|
||||||
</div>
|
|
||||||
</legend>
|
|
||||||
|
|
||||||
<div class="date-picker-component">
|
<div class="usa-form-group usa-form-group-month">
|
||||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
<label>{{ 'components.date_selector.month' | translate }}</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-month">
|
<div class="usa-form-group usa-form-group-day">
|
||||||
<label>{{ 'components.date_selector.month' | translate }}</label>
|
<label>{{ 'components.date_selector.day' | translate }}</label>
|
||||||
<input
|
<input
|
||||||
name="date-month"
|
name="date-day"
|
||||||
max="12"
|
maxlength="2"
|
||||||
maxlength="2"
|
min="1"
|
||||||
min="1"
|
type="number"
|
||||||
type="number"
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
||||||
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
v-bind:max="daysMaxCalculation"
|
||||||
v-model="month"
|
v-model="day"
|
||||||
v-on:change="onInput"
|
v-on:change="onInput"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="usa-form-group usa-form-group-day">
|
<div class="usa-form-group usa-form-group-year">
|
||||||
<label>{{ 'components.date_selector.day' | translate }}</label>
|
<label>{{ 'components.date_selector.year' | translate }}</label>
|
||||||
<input
|
<input
|
||||||
name="date-day"
|
name="date-year"
|
||||||
maxlength="2"
|
maxlength="4"
|
||||||
min="1"
|
type="number"
|
||||||
type="number"
|
v-model="year"
|
||||||
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
v-on:change="onInput"
|
||||||
v-bind:max="daysMaxCalculation"
|
/>
|
||||||
v-model="day"
|
</div>
|
||||||
v-on:change="onInput"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="usa-form-group usa-form-group-year">
|
|
||||||
<label>{{ 'components.date_selector.year' | translate }}</label>
|
|
||||||
<input
|
|
||||||
name="date-year"
|
|
||||||
maxlength="4"
|
|
||||||
type="number"
|
|
||||||
v-model="year"
|
|
||||||
v-on:change="onInput"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||||
{{ Icon("ok", classes="icon--green") }}
|
{{ Icon("ok", classes="icon--green") }}
|
||||||
@ -250,45 +243,44 @@
|
|||||||
<div class="date-picker-component">
|
<div class="date-picker-component">
|
||||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||||
|
|
||||||
<div class="usa-form-group usa-form-group-month">
|
<div class="usa-form-group usa-form-group-month">
|
||||||
<label>{{ 'components.date_selector.month' | translate }}</label>
|
<label>{{ 'components.date_selector.month' | translate }}</label>
|
||||||
<input
|
<input
|
||||||
name="date-month"
|
name="date-month"
|
||||||
max="12"
|
max="12"
|
||||||
maxlength="2"
|
maxlength="2"
|
||||||
min="1"
|
min="1"
|
||||||
type="number"
|
type="number"
|
||||||
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
||||||
v-model="month"
|
v-model="month"
|
||||||
v-on:change="onInput"
|
v-on:change="onInput"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="usa-form-group usa-form-group-day">
|
<div class="usa-form-group usa-form-group-day">
|
||||||
<label>{{ 'components.date_selector.day' | translate }}</label>
|
<label>{{ 'components.date_selector.day' | translate }}</label>
|
||||||
<input
|
<input
|
||||||
name="date-day"
|
name="date-day"
|
||||||
maxlength="2"
|
maxlength="2"
|
||||||
min="1"
|
min="1"
|
||||||
type="number"
|
type="number"
|
||||||
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
||||||
v-bind:max="daysMaxCalculation"
|
v-bind:max="daysMaxCalculation"
|
||||||
v-model="day"
|
v-model="day"
|
||||||
v-on:change="onInput"
|
v-on:change="onInput"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="usa-form-group usa-form-group-year">
|
<div class="usa-form-group usa-form-group-year">
|
||||||
<label>{{ 'components.date_selector.year' | translate }}</label>
|
<label>{{ 'components.date_selector.year' | translate }}</label>
|
||||||
<input
|
<input
|
||||||
name="date-year"
|
name="date-year"
|
||||||
maxlength="4"
|
maxlength="4"
|
||||||
type="number"
|
type="number"
|
||||||
v-model="year"
|
v-model="year"
|
||||||
v-on:change="onInput"
|
v-on:change="onInput"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||||
{{ Icon("ok", classes="icon--green") }}
|
{{ Icon("ok", classes="icon--green") }}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user