diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index 4516b31f..acf45d09 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -1,10 +1,9 @@ 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' -const JEDI_CLIN_TYPE = 'jedi_clin_type' -const OBLIGATED_AMOUNT = 'obligated_amount' const START_DATE = 'start_date' const END_DATE = 'end_date' const POP = 'period_of_performance' @@ -19,13 +18,10 @@ export default { textinput, }, + mixins: [Modal], + props: { initialClinIndex: Number, - initialClinType: String, - initialAmount: { - type: Number, - default: 0, - }, initialStartDate: { type: String, default: null, @@ -55,13 +51,12 @@ export default { return { clinIndex: this.initialClinIndex, - clinType: this.initialClinType, - amount: this.initialAmount || 0, startDate: start, endDate: end, popValid: popValidation, showPopError: showPopValidation, clinNumber: clinNumber, + showClin: true, } }, @@ -70,27 +65,14 @@ export default { }, created: function() { - emitEvent('clin-change', this, { - id: this._uid, - clinType: this.clinType, - amount: this.initialAmount, - }) emitEvent('field-mount', this, { optional: false, - name: POP, + name: 'clins-' + this.clinIndex + '-' + POP, valid: this.checkPopValid(), }) }, methods: { - clinChangeEvent: function() { - emitEvent('clin-change', this, { - id: this._uid, - clinType: this.clinType, - amount: this.amount, - }) - }, - checkPopValid: function() { return this.startDate < this.endDate }, @@ -103,20 +85,14 @@ export default { } emitEvent('field-change', this, { - name: POP, + name: 'clins-' + this.clinIndex + '-' + POP, valid: this.checkPopValid(), }) }, handleFieldChange: function(event) { if (this._uid === event.parent_uid) { - if (event.name.includes(JEDI_CLIN_TYPE)) { - this.clinType = event.value - this.clinChangeEvent() - } else if (event.name.includes(OBLIGATED_AMOUNT)) { - this.amount = parseFloat(event.value) - this.clinChangeEvent() - } else if (event.name.includes(START_DATE)) { + if (event.name.includes(START_DATE)) { if (!!event.value) this.startDate = new Date(event.value) this.validatePop() } else if (event.name.includes(END_DATE)) { @@ -127,6 +103,14 @@ export default { } } }, + + removeClin: function() { + this.showClin = false + emitEvent('remove-clin', this, { + clinIndex: this.clinIndex, + }) + this.closeModal('remove_clin') + }, }, computed: { @@ -137,5 +121,9 @@ export default { return `CLIN` } }, + + removeModalId: function() { + return `remove-clin-${this.clinIndex}` + }, }, } diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index 2493d123..9fe18b27 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,26 +27,24 @@ export default { }, props: { - initialClinCount: Number, - initialObligated: Number, - initialTotal: Number, + initialClinCount: { + type: Number, + default: null, + }, }, 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, 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) }, methods: { @@ -51,22 +53,27 @@ export default { ++this.clinIndex }, - calculateClinAmounts: function(event) { - this.clinChildren[event.id] = { - amount: event.amount, - type: event.clinType, + handleRemoveClin: function(event) { + --this.clinIndex + for (var field in this.fields) { + if (field.includes('-' + event.clinIndex + '-')) { + delete this.fields[field] + } } - 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.validateForm() + }, + }, + + directives: { + sticky: { + inserted: (el, binding) => { + var customAttributes + if (binding.expression) { + customAttributes = JSON.parse(binding.expression) } - }) - this.total = newTotal - this.obligated = newObligated + stickybits(el, customAttributes) + }, }, }, } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index ca2e4be2..e4a42843 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -32,6 +32,7 @@ border: 0; margin-top: $gap * 4; margin-bottom: $gap * 4; + border-bottom: 1px solid $color-gray-lighter; } table { @@ -84,6 +85,7 @@ .usa-input { margin: 0 $gap 0 0; width: 45rem; + min-width: 45rem; } fieldset.date-picker { @@ -203,18 +205,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 +247,24 @@ 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; + + .icon > svg * { + fill: $color-gray; + } + } + } } .task-order__modal-cancel { @@ -270,6 +278,7 @@ .clin-card { width: 62rem; + position: relative; &__title.h4 { margin-top: 0; diff --git a/templates/components/totals_box.html b/templates/components/totals_box.html index cb354fb8..1369c52d 100644 --- a/templates/components/totals_box.html +++ b/templates/components/totals_box.html @@ -9,9 +9,6 @@
{{ 'components.totals_box.obligated_text' | translate }}
- -{{ 'components.totals_box.total_text' | translate }}
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 %} -