From 23b67ede15be3f71784935ee4c69d978cc1b6e37 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Tue, 3 Sep 2019 16:53:55 -0400 Subject: [PATCH 01/12] Add remove CLIN button --- js/components/forms/to_form.js | 6 ++++++ styles/sections/_task_order.scss | 28 ++++++++++++++++------------ templates/task_orders/step_3.html | 11 ++++++++++- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index 2493d123..e84714e5 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -51,6 +51,12 @@ export default { ++this.clinIndex }, + removeClin: function(clinIndex) { + if (this.clins > 0) { + console.log('removed CLIN') + } + }, + calculateClinAmounts: function(event) { this.clinChildren[event.id] = { amount: event.amount, diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index ca2e4be2..9b0bdeb6 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -203,18 +203,6 @@ } } - button.icon-link { - margin-top: 0; - margin-left: 0; - padding-left: 0; - font-size: $base-font-size; - - &.icon-link__add-another-clin { - margin-top: 0; - margin-bottom: 0; - } - } - .task-order__pdf-help-text { margin-bottom: 4 * $gap; } @@ -257,6 +245,21 @@ font-style: italic; } } + + button.icon-link { + margin-top: 0; + margin-left: 0; + padding-left: 0; + font-size: $base-font-size; + + &.icon-link__remove-clin { + margin: 0; + padding: 0; + right: $gap * 1.5; + position: absolute; + color: $color-gray; + } + } } .task-order__modal-cancel { @@ -270,6 +273,7 @@ .clin-card { width: 62rem; + position: relative; &__title.h4 { margin-top: 0; diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 464c098a..f9b73d79 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -27,7 +27,16 @@ {% endif %} inline-template>
-
+
+ + +
From 6f1f7f0d3d6a681532d7b47885e2bd3d2e125144 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 13:26:46 -0400 Subject: [PATCH 02/12] Use to-form Vue component instead of base-form in TO builder base template --- js/components/forms/to_form.js | 31 ++++++++++++++++++--- templates/task_orders/builder_base.html | 4 +-- templates/task_orders/step_3.html | 36 +++++++++++-------------- 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index e84714e5..ef6b051b 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -1,3 +1,6 @@ +import stickybits from 'stickybits' + +import checkboxinput from '../checkbox_input' import ClinFields from '../clin_fields' import DateSelector from '../date_selector' import FormMixin from '../../mixins/form' @@ -13,6 +16,7 @@ export default { mixins: [FormMixin], components: { + checkboxinput, ClinFields, DateSelector, optionsinput, @@ -23,9 +27,18 @@ export default { }, props: { - initialClinCount: Number, - initialObligated: Number, - initialTotal: Number, + initialClinCount: { + type: Number, + default: null, + }, + initialObligated: { + type: Number, + default: null, + }, + initialTotal: { + type: Number, + default: null, + }, }, data: function() { @@ -75,4 +88,16 @@ export default { this.obligated = newObligated }, }, + + directives: { + sticky: { + inserted: (el, binding) => { + var customAttributes + if (binding.expression) { + customAttributes = JSON.parse(binding.expression) + } + stickybits(el, customAttributes) + }, + }, + }, } diff --git a/templates/task_orders/builder_base.html b/templates/task_orders/builder_base.html index 0f4848f2..d9f778be 100644 --- a/templates/task_orders/builder_base.html +++ b/templates/task_orders/builder_base.html @@ -4,7 +4,7 @@ {% from "components/modal.html" import Modal %} {% block portfolio_content %} - +
{{ form.csrf_token }} @@ -51,5 +51,5 @@
- + {% endblock %} diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index f9b73d79..4b887084 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -333,27 +333,23 @@ {% block to_builder_form_field %} - -
- {{ TOFormStepHeader('task_orders.form.clin_title' | translate, 'task_orders.form.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) }} - {% endfor %} + {% for clin in form.clins %} + {{ CLINFields(clin, index=loop.index - 1) }} + {% endfor %} -
- {{ CLINFields() }} -
- - +
+ {{ CLINFields() }}
- + + +
{% endblock %} From 27d3f46cc970c6cc886f0ee3092d87439e9f6cd8 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 13:32:01 -0400 Subject: [PATCH 03/12] Make remove CLIN button work --- js/components/clin_fields.js | 12 ++++++++++-- js/components/forms/to_form.js | 8 ++++---- templates/task_orders/step_3.html | 6 +++--- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index 4516b31f..56223b54 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -62,6 +62,7 @@ export default { popValid: popValidation, showPopError: showPopValidation, clinNumber: clinNumber, + showClin: true, } }, @@ -77,7 +78,7 @@ export default { }) emitEvent('field-mount', this, { optional: false, - name: POP, + name: POP + "-" + this.clinIndex, valid: this.checkPopValid(), }) }, @@ -103,7 +104,7 @@ export default { } emitEvent('field-change', this, { - name: POP, + name: POP + "-" + this.clinIndex, valid: this.checkPopValid(), }) }, @@ -127,6 +128,13 @@ export default { } } }, + + removeClin: function() { + this.showClin = false + emitEvent('remove-clin', this, { + clinIndex: this.clinIndex, + }) + }, }, computed: { diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index ef6b051b..d8d6eae7 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -56,6 +56,7 @@ export default { mounted: function() { this.$root.$on('clin-change', this.calculateClinAmounts) + this.$root.$on('remove-clin', this.handleRemoveClin) }, methods: { @@ -64,10 +65,9 @@ export default { ++this.clinIndex }, - removeClin: function(clinIndex) { - if (this.clins > 0) { - console.log('removed CLIN') - } + handleRemoveClin: function(event) { + --this.clinIndex + console.log('removed clin') }, calculateClinAmounts: function(event) { diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 4b887084..2e548df1 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -26,13 +26,13 @@ v-bind:initial-clin-type="'JEDI_CLIN_1'" {% endif %} inline-template> -
+
From f5ce35187be09940843d5e015e15e008acd8feb6 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 13:57:08 -0400 Subject: [PATCH 04/12] Make sure form correctly validates after CLIN is removed --- js/components/clin_fields.js | 4 ++-- js/components/forms/to_form.js | 12 +++++++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index 56223b54..a7f646eb 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -78,7 +78,7 @@ export default { }) emitEvent('field-mount', this, { optional: false, - name: POP + "-" + this.clinIndex, + name: 'clins-' + this.clinIndex + '-' + POP, valid: this.checkPopValid(), }) }, @@ -104,7 +104,7 @@ export default { } emitEvent('field-change', this, { - name: POP + "-" + this.clinIndex, + name: 'clins-' + this.clinIndex + '-' + POP, valid: this.checkPopValid(), }) }, diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index d8d6eae7..1118f8e7 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -42,8 +42,8 @@ export default { }, data: function() { - const clins = this.initialClinCount == 0 ? 1 : 0 - const clinIndex = this.initialClinCount == 0 ? 0 : this.initialClinCount - 1 + const clins = !this.initialClinCount ? 1 : 0 + const clinIndex = !this.initialClinCount ? 0 : this.initialClinCount - 1 return { clins, @@ -67,7 +67,13 @@ export default { handleRemoveClin: function(event) { --this.clinIndex - console.log('removed clin') + for (var field in this.fields) { + if (field.includes('-' + event.clinIndex + '-')) { + delete this.fields[field] + } + } + + this.validateForm() }, calculateClinAmounts: function(event) { From 46345657c7d53440938c10f0b2c3802c852b0fff Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 14:01:17 -0400 Subject: [PATCH 05/12] Remove unused code from the totals box functionality that has been since removed --- js/components/forms/to_form.js | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index 1118f8e7..9fe18b27 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -31,14 +31,6 @@ export default { type: Number, default: null, }, - initialObligated: { - type: Number, - default: null, - }, - initialTotal: { - type: Number, - default: null, - }, }, data: function() { @@ -48,14 +40,10 @@ export default { return { clins, clinIndex, - obligated: this.initialObligated || 0, - total: this.initialTotal || 0, - clinChildren: {}, } }, mounted: function() { - this.$root.$on('clin-change', this.calculateClinAmounts) this.$root.$on('remove-clin', this.handleRemoveClin) }, @@ -75,24 +63,6 @@ export default { this.validateForm() }, - - calculateClinAmounts: function(event) { - this.clinChildren[event.id] = { - amount: event.amount, - type: event.clinType, - } - - let newTotal = 0 - let newObligated = 0 - Object.values(this.clinChildren).forEach(function(clin) { - newTotal += clin.amount - if (clin.type.includes('1') || clin.type.includes('3')) { - newObligated += clin.amount - } - }) - this.total = newTotal - this.obligated = newObligated - }, }, directives: { From eb58612182fef06a7da0d309eda110a71e151c17 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 16:21:30 -0400 Subject: [PATCH 06/12] Add remove CLIN confirmation modal --- js/components/clin_fields.js | 8 +++++++ templates/task_orders/step_3.html | 37 ++++++++++++++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index a7f646eb..cd01e43b 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -1,5 +1,6 @@ import DateSelector from './date_selector' import { emitEvent } from '../lib/emitters' +import Modal from '../mixins/modal' import optionsinput from './options_input' import textinput from './text_input' @@ -19,6 +20,8 @@ export default { textinput, }, + mixins: [Modal], + props: { initialClinIndex: Number, initialClinType: String, @@ -134,6 +137,7 @@ export default { emitEvent('remove-clin', this, { clinIndex: this.clinIndex, }) + this.closeModal('remove_clin') }, }, @@ -145,5 +149,9 @@ export default { return `CLIN` } }, + + removeModalId: function() { + return `remove-clin-${this.clinIndex}` + }, }, } diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 2e548df1..0b8a1dd4 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -32,7 +32,7 @@ @@ -327,6 +327,41 @@

+ +
+
+
+ +
+
+
{% endmacro %} From 0bf685311a628fa288fc96ab9d28fd9eabef0b7f Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 16:21:55 -0400 Subject: [PATCH 07/12] Fix validation icon positioning for date picker field --- 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 9b0bdeb6..aa6e4a3c 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -84,6 +84,7 @@ .usa-input { margin: 0 $gap 0 0; width: 45rem; + min-width: 45rem; } fieldset.date-picker { From 48a8a80f878c115347137f0d827b5e0e43a9d991 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 4 Sep 2019 16:29:19 -0400 Subject: [PATCH 08/12] Move text to translations file --- templates/task_orders/step_3.html | 6 +++--- translations.yaml | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index 0b8a1dd4..6256d91d 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -334,19 +334,19 @@