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

Remove CLIN

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)) {
+        if (event.name.includes(START_DATE)) {
-          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.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}`
+    },
   },
 }

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,
+    initialClinCount: {
-    initialObligated: Number,
+      type: Number,
-    initialTotal: Number,
+      default: null,
+    },
   },
 
   data: function() {
-    const clins = this.initialClinCount == 0 ? 1 : 0
+    const clins = !this.initialClinCount ? 1 : 0
-    const clinIndex = this.initialClinCount == 0 ? 0 : this.initialClinCount - 1
+    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) {
+    handleRemoveClin: function(event) {
-      this.clinChildren[event.id] = {
+      --this.clinIndex
-        amount: event.amount,
+      for (var field in this.fields) {
-        type: event.clinType,
+        if (field.includes('-' + event.clinIndex + '-')) {
+          delete this.fields[field]
+        }
       }
 
-      let newTotal = 0
+      this.validateForm()
-      let newObligated = 0
+    },
-      Object.values(this.clinChildren).forEach(function(clin) {
+  },
-        newTotal += clin.amount
+
-        if (clin.type.includes('1') || clin.type.includes('3')) {
+  directives: {
-          newObligated += clin.amount
+    sticky: {
+      inserted: (el, binding) => {
+        var customAttributes
+        if (binding.expression) {
+          customAttributes = JSON.parse(binding.expression)
         }
-      })
+        stickybits(el, customAttributes)
-      this.total = newTotal
+      },
-      this.obligated = newObligated
     },
   },
 }

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;

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>

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 %}

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="clin-card" v-if="showClin">
-      <div class="card__title h4" v-html='clinTitle'></div>
+      <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,15 +325,47 @@
           </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) }}
 
@@ -346,5 +385,4 @@
       <span>{{ 'task_orders.form.add_clin' | translate }}</span>
     </button>
   </div>
-  </to-form>
 {% endblock %}

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