Merge pull request #1058 from dod-ccpo/cancel-clin-entry

Remove CLIN
2019-09-05 15:05:35 -04:00 · 2019-09-05 15:05:35 -04:00 · 5419e1c475
commit 5419e1c475
parent e948007a8b 20871e787f
7 changed files with 139 additions and 97 deletions
--- 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}`
+    },
  },
 }
--- 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)
+      },
    },
  },
 }
--- 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;
--- a/templates/components/totals_box.html
+++ b/templates/components/totals_box.html
@ -9,9 +9,6 @@
    <div class="h4">{{ 'components.totals_box.obligated_funds' | translate }}</div>
    <div class="h3">{{ obligated_funds | dollars }}</div>
    <p>{{ 'components.totals_box.obligated_text' | translate }}</p>
-    
-    <hr> 
-    
    <div class="h4">{{ 'components.totals_box.total_amount' | translate }}</div>
    <div class="h3">{{ contract_amount | dollars }}</div>
    <p>{{ 'components.totals_box.total_text' | translate }}</p>
--- 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 %}
-  <base-form inline-template>
+  <to-form inline-template {% if form.clins %}v-bind:initial-clin-count="{{ form.clins.data | length }}"{% endif %}>
    <form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
      {{ form.csrf_token }}

@ -51,5 +51,5 @@
      </div>

    </form>
-  </base-form>
+  </to-form>
 {% endblock %}
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@ -16,8 +16,6 @@
  <clin-fields
    {% if fields %}
      v-bind:initial-clin-index='{{ index }}'
-      v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
-      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 }}'"
@ -26,8 +24,17 @@
      v-bind:initial-clin-type="'JEDI_CLIN_1'"
    {% endif %}
    inline-template>
-    <div class="clin-card">
-      <div class="card__title h4" v-html='clinTitle'></div>
+    <div class="clin-card" v-if="showClin">
+      <div class="card__title">
+        <span class="h4" v-html='clinTitle'></span>
+        <button
+          v-if='$parent.clinIndex > 0'
+          class="icon-link icon-link__remove-clin"
+          v-on:click="openModal(removeModalId)"
+          type="button">
+          {{ Icon(name='x') }}
+        </button>
+      </div>
      <div class="card">
        <div class="form-row">
          <div class="h4 clin-card__title">
@ -37,7 +44,7 @@
        <div class="form-row">
          <div class="form-col">
            {% if fields %}
-              {{ TextInput(fields.number, watch=True) }}
+              {{ TextInput(fields.number, watch=True, optional=False) }}
            {% else %}
              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true'
              inline-template>
@ -78,7 +85,7 @@
        <div class="form-row">
          <div class="form-col">
            {% if fields %}
-              {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
+              {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False, optional=False) }}
            {% else %}
              <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
                <div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
@ -109,7 +116,7 @@
        {% if fields %}
          <div class="form-row">
            <div class="form-col">
-              {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
+              {{ TextInput(fields.obligated_amount, validation='dollars', watch=True, optional=False) }}
            </div>
          </div>
        {% else %}
@ -318,33 +325,64 @@
          </p>
        </div>
      </div>
+
+      <div v-show="$root.activeModal === removeModalId" v-cloak>
+        <div :id='"modal--" + removeModalId' class='modal modal--dismissable'>
+          <div class='modal__container'>
+            <div class='modal__dialog' role='dialog' aria-modal='true'>
+              <div class='modal__body'>
+                <div class="task-order__modal-cancel">
+                  <h1 v-html='"{{ 'task_orders.form.clin_remove_text' | translate }}" + clinTitle + "?"'></h1>
+                  <div class="task-order__modal-cancel_buttons">
+                    <button
+                      v-on:click='closeModal(removeModalId)'
+                      class="usa-button usa-button-primary"
+                      type="button">
+                      {{ 'task_orders.form.clin_remove_cancel' | translate }}
+                    </button>
+                    <button
+                      v-on:click="removeClin()"
+                      class="usa-button usa-button-primary"
+                      type="button">
+                      {{ 'task_orders.form.clin_remove_confirm' | translate }}
+                    </button>
+                  </div>
+                </div>
+
+                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal(removeModalId)'>
+                  {{ Icon('x') }}
+                  <span>
+                    {{ "common.close" | translate }}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
    </div>
  </clin-fields>
 {% endmacro %}


 {% block to_builder_form_field %}
-  <to-form
-    inline-template
-    v-bind:initial-clin-count="{{ form.clins.data | length }}">
-    <div>
-      {{ TOFormStepHeader('task_orders.form.clin_title' | translate, 'task_orders.form.clin_description' | translate, task_order.number) }}
+  <div>
+    {{ 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 %}

-      <div v-for="clin in clins">
-        {{ CLINFields() }}
-      </div>
-
-      <button
-        class="icon-link icon-link__add-another-clin"
-        v-on:click="addClin"
-        type="button">
-        {{ Icon('plus') }}
-        <span>{{ 'task_orders.form.add_clin' | translate }}</span>
-      </button>
+    <div v-for="clin in clins">
+      {{ CLINFields() }}
    </div>
-  </to-form>
+
+    <button
+      class="icon-link icon-link__add-another-clin"
+      v-on:click="addClin"
+      type="button">
+      {{ Icon('plus') }}
+      <span>{{ 'task_orders.form.add_clin' | translate }}</span>
+    </button>
+  </div>
 {% endblock %}
--- a/translations.yaml
+++ b/translations.yaml
@ -372,6 +372,9 @@ task_orders:
    clin_funding: CLIN Funding
    clin_number_label: CLIN Number
    clin_type_label: Corresponding IDIQ CLIN
+    clin_remove_text: 'Do you want to remove '
+    clin_remove_confirm: Yes, remove CLIN
+    clin_remove_cancel: No, go back
    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