diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py index e511d53f..bd2a8f77 100644 --- a/atst/forms/task_order.py +++ b/atst/forms/task_order.py @@ -34,12 +34,14 @@ class CLINForm(FlaskForm): label=translate("task_orders.form.clin_number_label"), validators=[Optional()] ) start_date = DateField( - translate("forms.task_order.start_date_label"), + translate("task_orders.form.pop_start"), + description=translate("task_orders.form.pop_example"), format="%m/%d/%Y", validators=[Optional()], ) end_date = DateField( - translate("forms.task_order.end_date_label"), + translate("task_orders.form.pop_end"), + description=translate("task_orders.form.pop_example"), format="%m/%d/%Y", validators=[Optional()], ) diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index 6b948922..4516b31f 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -8,6 +8,7 @@ const OBLIGATED_AMOUNT = 'obligated_amount' const START_DATE = 'start_date' const END_DATE = 'end_date' const POP = 'period_of_performance' +const NUMBER = 'number' export default { name: 'clin-fields', @@ -33,6 +34,10 @@ export default { type: String, default: null, }, + initialClinNumber: { + type: String, + default: null, + }, }, data: function() { @@ -44,6 +49,9 @@ export default { : undefined const popValidation = !this.initialStartDate ? false : start < end const showPopValidation = !this.initialStartDate ? false : !popValidation + const clinNumber = !!this.initialClinNumber + ? this.initialClinNumber + : undefined return { clinIndex: this.initialClinIndex, @@ -53,6 +61,7 @@ export default { endDate: end, popValid: popValidation, showPopError: showPopValidation, + clinNumber: clinNumber, } }, @@ -113,8 +122,20 @@ export default { } else if (event.name.includes(END_DATE)) { if (!!event.value) this.endDate = new Date(event.value) this.validatePop() + } else if (event.name.includes(NUMBER)) { + this.clinNumber = event.value } } }, }, + + computed: { + clinTitle: function() { + if (!!this.clinNumber) { + return `CLIN ${this.clinNumber}` + } else { + return `CLIN` + } + }, + }, } diff --git a/js/test_templates/upload_input_error_template.html b/js/test_templates/upload_input_error_template.html index ff3676ab..1420fe17 100644 --- a/js/test_templates/upload_input_error_template.html +++ b/js/test_templates/upload_input_error_template.html @@ -11,7 +11,7 @@
- + Remove diff --git a/js/test_templates/upload_input_template.html b/js/test_templates/upload_input_template.html index 07fbb194..1eeaa1c7 100644 --- a/js/test_templates/upload_input_template.html +++ b/js/test_templates/upload_input_template.html @@ -12,7 +12,7 @@
- + Remove diff --git a/static/icons/check-circle-solid.svg b/static/icons/check-circle-solid.svg deleted file mode 100644 index 6aaa9742..00000000 --- a/static/icons/check-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/icons/ok.svg b/static/icons/ok.svg index d4f61f78..6aaa9742 100644 --- a/static/icons/ok.svg +++ b/static/icons/ok.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/styles/elements/_card.scss b/styles/elements/_card.scss index 410a6882..36505dd2 100644 --- a/styles/elements/_card.scss +++ b/styles/elements/_card.scss @@ -16,6 +16,11 @@ } } + &__title { + padding: $gap * 2; + background-color: $color-gray-lightest; + } + &__header h3 { margin-top: 0; } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index d874abd6..5ab6c814 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -50,6 +50,13 @@ } } + &__header { + .h2, + p { + margin-bottom: $gap * 0.5; + } + } + .col { flex-grow: 1; } @@ -84,19 +91,15 @@ } .card { - padding: ($gap * 5); + padding: ($gap * 4) ($gap * 5) 0; .usa-input { margin: 0 $gap 0 0; - - input { - max-width: none; - } + width: 45rem; } - .usa-input--validation--dollars label span.icon { - left: auto; - right: -$gap * 9; + fieldset.date-picker { + width: auto; } .form-row { @@ -111,6 +114,39 @@ button { margin-bottom: $gap * 3; } + + .date-picker { + padding-bottom: $gap * 3; + + .usa-input__title { + padding-bottom: $gap; + font-weight: $font-bold; + } + + .usa-input__help { + font-style: italic; + color: $color-gray; + margin-bottom: 1rem; + } + + .usa-alert { + padding: $gap * 0.5; + margin: 0 0 $gap; + background-size: 3rem; + background-position-x: 1.5rem; + background-position-y: 1.25rem; + + &-body { + padding-left: 5rem; + padding-right: $gap * 2; + } + + &-text { + font-weight: 550; + margin-bottom: 0.5rem; + } + } + } } .usa-input__title, @@ -243,3 +279,12 @@ display: flex; justify-content: center; } + +.clin-card { + width: 62rem; + + &__title.h4 { + margin-top: 0; + padding-bottom: $gap * 2.5; + } +} diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html index 16588800..9461f301 100644 --- a/templates/components/date_picker.html +++ b/templates/components/date_picker.html @@ -1,3 +1,4 @@ +{% from "components/alert.html" import Alert %} {% from "components/icon.html" import Icon %} {% macro DatePicker( @@ -26,6 +27,10 @@ {{ label }}
+ {% if caller %} + {{ caller() }} + {% endif %} + {% if description %}

{{ description | safe }} diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html index 5d2bf737..8f5cec3c 100644 --- a/templates/components/upload_input.html +++ b/templates/components/upload_input.html @@ -16,7 +16,7 @@ >

- {{ Icon("check-circle-solid") }} + {{ Icon("ok") }} Remove
diff --git a/templates/fragments/task_order_review.html b/templates/fragments/task_order_review.html index 9b938106..9e926783 100644 --- a/templates/fragments/task_order_review.html +++ b/templates/fragments/task_order_review.html @@ -14,7 +14,7 @@ {{ 'task_orders.review.pdf_title' | translate }}
- {{ Icon('check-circle-solid') }} + {{ Icon('ok') }} {{ task_order.pdf.filename }} diff --git a/templates/task_orders/form_header.html b/templates/task_orders/form_header.html index 749a5d30..79821bf7 100644 --- a/templates/task_orders/form_header.html +++ b/templates/task_orders/form_header.html @@ -1,21 +1,15 @@ {% macro TOFormStepHeader(title, description, to_number=None) %} -
-
-
-
- {{ title }} -
-
-
- {% if to_number %} - Task Order Number: {{ to_number }} - {% endif %} -
+
+
+ {{ title }}
-
+ {% if to_number %}

- {{ description }} + Task Order Number: {{ to_number }}

-
+ {% endif %} +

+ {{ description }} +

{% endmacro %} diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index daeee6b1..464c098a 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -1,5 +1,6 @@ {% extends "task_orders/builder_base.html" %} +{% from 'components/alert.html' import Alert %} {% from 'components/date_picker.html' import DatePicker %} {% from 'components/icon.html' import Icon %} {% from 'components/options_input.html' import OptionsInput %} @@ -7,7 +8,7 @@ {% from 'task_orders/form_header.html' import TOFormStepHeader %} {% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %} -{% set next_button_text = "Next: Review Funding" %} +{% set next_button_text = "task_orders.form.step_3.next_button" | translate %} {% set previous_button_link = url_for("task_orders.form_step_two_add_number", task_order_id=task_order_id) %} {% set step = "3" %} @@ -19,159 +20,177 @@ v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}' v-bind:initial-start-date="'{{ fields.start_date.data | string }}'" v-bind:initial-end-date="'{{ fields.end_date.data | string }}'" + v-bind:initial-clin-number="'{{ fields.number.data | string }}'" {% else %} v-bind:initial-clin-index='clinIndex' v-bind:initial-clin-type="'JEDI_CLIN_1'" {% endif %} inline-template> -
-
- {{ 'task_orders.form.base_clin_title' | translate }} -
-
-
- {% if fields %} - {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }} - {% else %} - -
-
- -
- {{ 'task_orders.form.clin_type_label' | translate }} -
- - -
-
- - {% endif %} -
-
- {% if fields %} - {{ TextInput(fields.number, watch=True) }} - {% else %} - -
- - - - - - - - - -
- - {% endif %} -
-
- -
- {% if fields %} -
- {{ DatePicker(fields.start_date, watch=True, optional=False) }} -
-
- {{ DatePicker(fields.end_date, watch=True, optional=False) }} +
+
+
+
+
+ {{ 'task_orders.form.clin_details' | translate }}
+
+
+
+ {% if fields %} + {{ TextInput(fields.number, watch=True) }} + {% else %} + +
+ - {% else %} -
- -
- -
- {{ 'task_orders.form.pop_start' | translate }} -
- + + -
- + -
- - -
- -
- - -
- -
- - -
- -
- {{ Icon("ok", classes="icon--green") }} -
+ +
-
- + + {% endif %}
+
+
+
+ {% if fields %} + {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }} + {% else %} + +
+
+ +
+ {{ 'task_orders.form.clin_type_label' | translate }} +
+ + +
+
+ + {% endif %} +
+
+
+
+
+ {{ 'task_orders.form.clin_funding' | translate }} +
+
+ {% if fields %} +
+
+ {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} +
+
+ {% else %} +
+
+ +
+ -
- -
- -
- {{ 'task_orders.form.pop_end' | translate }} -
- + + -
- + + + + +
+ +
+
+ {% endif %} +
+
+
+ {{ 'task_orders.form.pop' | translate }} +
+
+ {% if fields %} +
+
+ {{ DatePicker(fields.start_date, watch=True, optional=False) }} +
+
+
+
+ {% call DatePicker(fields.end_date, watch=True, optional=False) %} + {{ Alert(message="task_orders.form.pop_end_alert" | translate) }} + {% endcall %} +
+
+ {% else %} +
+
+ +
+ +
+ {{ 'task_orders.form.pop_start' | translate }} +
+

+ {{ 'task_orders.form.pop_example' | translate }} +

+ + +
+
@@ -212,69 +231,93 @@ />
-
- {{ Icon("ok", classes="icon--green") }} +
+ {{ Icon("ok", classes="icon--green") }} +
-
-
- + + +
+
+
+
+ +
+ +
+ {{ 'task_orders.form.pop_end' | translate }} +
+ + {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }} + +

+ {{ 'task_orders.form.pop_example' | translate }} +

+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {{ Icon("ok", classes="icon--green") }} +
+
+
+ +
{% endif %} -
-
-

- -

-
- - {% if fields %} - {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} - {% else %} - -
- - - - - - - -