From e6742fb31906a6edbf54d962d615f6f2d68c379d Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Thu, 18 Jul 2019 16:48:52 -0400 Subject: [PATCH 01/10] Add max width to TO form, put each clin inside .card, fix html indenting --- templates/task_orders/step_3.html | 310 +++++++++++++++--------------- 1 file changed, 151 insertions(+), 159 deletions(-) diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index c15533d2..433ae7a5 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -51,17 +51,13 @@ {% endmacro %} {% macro CLINFields(fields, index) %} - {% if index != 0 %} -
- {% endif %} - -
+
{{ OptionsInput(fields.jedi_clin_type, watch=True) }} @@ -106,131 +102,128 @@ {{ CLINFields(clin, index=loop.index - 1) }} {% endfor %} -
-
- -
-
-
- -
-
- -
- {{ 'task_orders.form.clin_type_label' | translate }} -
- - -
-
- +
+ +
+
+
+ +
+
+ +
+ {{ 'task_orders.form.clin_type_label' | translate }} +
+ + +
+
+ +
+
+ +
+ + + + + + + + + +
+ +
-
- -
- - - - - - - - - -
- +
+
+ +
+ {{ 'task_orders.form.loa_label' | translate }} +
+ + {{ LOAInput() }} +
-
-
-
- -
- {{ 'task_orders.form.loa_label' | translate }} -
- - {{ LOAInput() }} -
-
+ +
+ +
+ {{ 'task_orders.form.pop_start' | translate }} +
+ - -
- -
- {{ 'task_orders.form.pop_start' | translate }} -
- +
+ -
- +
+ + +
-
- - -
+
+ + +
-
- - -
- -
- - - -
+
+ + +
{{ Icon("ok", classes="icon--green") }} @@ -250,45 +243,44 @@
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - -
+
+ + +
{{ Icon("ok", classes="icon--green") }} From c4651332a2ef97d2dc5d4a1388e9b5fbefe5fda3 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 24 Jul 2019 10:36:00 -0400 Subject: [PATCH 02/10] Move clin fields into macro --- templates/task_orders/step_3.html | 475 +++++++++++++++--------------- 1 file changed, 232 insertions(+), 243 deletions(-) diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 433ae7a5..bfb29b54 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -50,20 +50,80 @@ {% endmacro %} -{% macro CLINFields(fields, index) %} +{% macro CLINFields(fields=None, index=None) %}
- {{ OptionsInput(fields.jedi_clin_type, watch=True) }} + {% if fields %} + {{ OptionsInput(fields.jedi_clin_type, watch=True) }} + {% else %} + +
+
+ +
+ {{ 'task_orders.form.clin_type_label' | translate }} +
+ + +
+
+ + {% endif %}
- {{ TextInput(fields.number, watch=True) }} + {% if fields %} + {{ TextInput(fields.number, watch=True) }} + {% else %} + +
+ + + + + + + + + +
+ + {% endif %}
@@ -82,253 +142,182 @@
- {{ DatePicker(fields.start_date, watch=True, optional=False) }} - {{ DatePicker(fields.end_date, watch=True, optional=False) }} - {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} + {% if fields %} + {{ DatePicker(fields.start_date, watch=True, optional=False) }} + {{ DatePicker(fields.end_date, watch=True, optional=False) }} + {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} + {% else %} + +
+ +
+ {{ 'task_orders.form.pop_start' | translate }} +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {{ Icon("ok", classes="icon--green") }} +
+
+
+ + + +
+ +
+ {{ 'task_orders.form.pop_end' | translate }} +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {{ Icon("ok", classes="icon--green") }} +
+
+
+ + + +
+ + + + + + + + + +
+ + {% endif %}
{% endmacro %} {% block to_builder_form_field %} - -
- {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }} +
+ {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }} - {% for clin in form.clins %} - {{ CLINFields(clin, index=loop.index - 1) }} - {% endfor %} + {% for clin in form.clins %} + {{ CLINFields(clin, index=loop.index - 1) }} + {% endfor %} -
- -
-
-
- -
-
- -
- {{ 'task_orders.form.clin_type_label' | translate }} -
- - -
-
- -
-
- -
- - - - - - - - - -
- -
-
- -
-
- -
- {{ 'task_orders.form.loa_label' | translate }} -
- - {{ LOAInput() }} -
-
- - -
- -
- {{ 'task_orders.form.pop_start' | translate }} -
- - -
- - -
- - -
- -
- - -
- -
- - -
- -
- {{ Icon("ok", classes="icon--green") }} -
-
-
- - - -
- -
- {{ 'task_orders.form.pop_end' | translate }} -
- - -
- - -
- - -
- -
- - -
- -
- - -
- -
- {{ Icon("ok", classes="icon--green") }} -
-
-
- - - -
- - - - - - - - - -
- -
- +
+ {{ CLINFields() }}
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index bfb29b54..b027b18c 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -30,13 +30,6 @@ - - -
@@ -63,10 +56,13 @@ {% endif %} inline-template>
+
+ Base CLIN Information +
{% if fields %} - {{ OptionsInput(fields.jedi_clin_type, watch=True) }} + {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }} {% else %}
@@ -127,140 +123,151 @@
-
-
- -
- {{ 'task_orders.form.loa_label' | translate }} -
- - {% for loa in fields.loas %} - {{ TextInput(loa, showLabel=False, watch=True) }} - {% endfor %} +
+ +
+ {{ 'task_orders.form.loa_label' | translate }} +
+ + {% for loa in fields.loas %} + {{ TextInput(loa, showLabel=False, watch=True, show_validation=False) }} + {% endfor %} - {{ LOAInput() }} -
+ {{ LOAInput() }} +
+ +
+ {% if fields %} +
+ {{ DatePicker(fields.start_date, watch=True, optional=False) }} +
+
+ {{ DatePicker(fields.end_date, watch=True, optional=False) }} +
+ {% else %} +
+ +
+ +
+ {{ 'task_orders.form.pop_start' | translate }} +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {{ Icon("ok", classes="icon--green") }} +
+
+
+ +
+ +
+ +
+ +
+ {{ 'task_orders.form.pop_end' | translate }} +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ {{ Icon("ok", classes="icon--green") }} +
+
+
+ +
+ {% endif %}
{% if fields %} - {{ DatePicker(fields.start_date, watch=True, optional=False) }} - {{ DatePicker(fields.end_date, watch=True, optional=False) }} {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }} {% else %} - -
- -
- {{ 'task_orders.form.pop_start' | translate }} -
- - -
- - -
- - -
- -
- - -
- -
- - -
- -
- {{ Icon("ok", classes="icon--green") }} -
-
-
- - - -
- -
- {{ 'task_orders.form.pop_end' | translate }} -
- - -
- - -
- - -
- -
- - -
- -
- - -
- -
- {{ Icon("ok", classes="icon--green") }} -
-
-
- - Date: Wed, 24 Jul 2019 13:16:12 -0400 Subject: [PATCH 04/10] Update copy --- templates/task_orders/step_3.html | 4 ++-- translations.yaml | 29 +++++++++++++++-------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index b027b18c..42da056e 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -57,7 +57,7 @@ inline-template>
- Base CLIN Information + {{ 'task_orders.form.base_clin_title' | translate }}
@@ -317,7 +317,7 @@ inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
- {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }} + {{ TOFormStepHeader('task_orders.form.clin_title' | translate, 'task_orders.form.clin_description' | translate, task_order.number) }} {% for clin in form.clins %} {{ CLINFields(clin, index=loop.index - 1) }} diff --git a/translations.yaml b/translations.yaml index 9ecfaf00..b53b18cb 100644 --- a/translations.yaml +++ b/translations.yaml @@ -140,10 +140,10 @@ forms: none: Not planning to migrate any applications not_sure: Not sure on_premise: 'Yes, migrating from an on-premise data center' - clin_01_label: 'CLIN 01 : Unclassified' - clin_02_label: 'CLIN 02: Classified' - clin_03_label: 'CLIN 03: Unclassified' - clin_04_label: 'CLIN 04: Classified' + clin_01_label: '0001: Unclassified IaaS and PaaS' + clin_02_label: '0002' + clin_03_label: '0003' + clin_04_label: '0004' complexity: conus: CONUS access data_analytics: Data analytics @@ -337,22 +337,23 @@ task_orders: pop_end: PoP End loa: LOA form: - add_clin: Add another CLIN or Sub-CLIN - add_loa: Add another line of accounting + add_clin: Enter another CLIN + add_loa: Enter another line of accounting add_to_header: Add your task order add_to_description: Now, refer to your document to find the 13-digit task order number. It should be located at lorem ipsum dolar. From now on we'll refer to this portion of funding by the recorded task order number. - base_clin_title: Add Base CLIN - base_clin_description: Next, continue to refer to your document to locate your CLINs (Contract Line Item Numbers). CLINs are how you break the contract down by the commodities being procured (labor hours of services, funding for travel, quantity product A, etc.). - clin_number_label: CLIN - clin_type_label: CLIN type + clin_title: Enter CLINs + clin_description: "Continue to refer to your TO to locate your Contract Line Item Numbers (CLINs). You must add CLINs one at a time, and select a corresponding ID/IQ description for each." + base_clin_title: Base CLIN Information + clin_number_label: Enter task order CLIN + clin_type_label: "Select ID/IQ CLIN description" cloud_funding_header: Add the summary of cloud funding cloud_funding_text: Data must match with what is in your uploaded document. draft_alert_title: Your information has been saved draft_alert_message: You can return to the Task Order Builder to enter missing information. Once you are finished, you’ll be ready to submit this request. - loa_label: 'Line of accounting (43 characters)' - obligated_funds_label: Funds obligated for cloud - pop_end: 'End of period of performance (PoP)' - pop_start: 'Start of period of performance (PoP)' + loa_label: 'Enter line of accounting (43 characters)' + obligated_funds_label: Enter obligated funds for Base CLIN + pop_end: 'Period of Performance (PoP) end date' + pop_start: 'Period of Performance (PoP) start date' review_button: Review task order supporting_docs_header: Upload your supporting documentation supporting_docs_size_limit: Your file may not exceed 1MB From 94ee8521f9b23b281f7477cf074a9dc43862b1e8 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 24 Jul 2019 13:22:01 -0400 Subject: [PATCH 05/10] Make CLIN option list bold --- styles/sections/_task_order.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 70699557..afcecc38 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -90,6 +90,7 @@ select { max-width: -webkit-fill-available; + font-weight: bold; } button { From f50beae7543d1059ee27c48df07854404df22cdc Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 24 Jul 2019 13:27:13 -0400 Subject: [PATCH 06/10] Align TO number to the right --- styles/sections/_task_order.scss | 8 ++++++++ templates/task_orders/form_header.html | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index afcecc38..4fc3c141 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -58,6 +58,14 @@ margin-bottom: $gap * 4; } + .task-order__number { + text-align: right; + } + + .task-order__details { + max-width: 65%; + } + .totals-box { padding: $gap * 4; padding-top: $gap * 2; diff --git a/templates/task_orders/form_header.html b/templates/task_orders/form_header.html index 3c86cf01..a5081b96 100644 --- a/templates/task_orders/form_header.html +++ b/templates/task_orders/form_header.html @@ -6,7 +6,7 @@ {{ title }}
-
+
{% if to_number %} Task Order Number: {{ to_number }} {% endif %} From f1f344388abd0965f4607ede86d2c116985f3fe2 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 24 Jul 2019 14:02:02 -0400 Subject: [PATCH 07/10] Fix validation icon and spacing --- styles/sections/_task_order.scss | 5 +++-- templates/task_orders/step_3.html | 12 +++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 4fc3c141..d0e4d873 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -84,8 +84,9 @@ margin: 0 $gap 0 0; } - span.icon.icon--ok.icon-validation { - left: 47.5em; + .usa-input--validation--dollars label span.icon.icon--ok.icon-validation { + left: auto; + right: -$gap * 9; } .form-row { diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 42da056e..f1c3d115 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -200,6 +200,11 @@ {{ Icon("ok", classes="icon--green") }}
+

+ {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} +

@@ -259,6 +264,11 @@ {{ Icon("ok", classes="icon--green") }}
+

+ {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} + {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} +

@@ -274,7 +284,7 @@ :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" :watch='true'> -
+