Add CLINs to Task Order

js/components/clin_fields.js

@@ -0,0 +1,92 @@
+import DateSelector from './date_selector'
+import optionsinput from './options_input'
+import textinput from './text_input'
+
+export default {
+  name: 'clin-fields',
+
+  components: {
+    DateSelector,
+    optionsinput,
+    textinput,
+  },
+
+  props: {
+    clinIndex: String,
+  },
+  // get clin index from props and pass into template
+  template: `
+    <div>
+      <optionsinput name="clins-0-jedi_clin_type">
+      </optionsinput>
+      <div class="  usa-input usa-input--validation--anything usa-input--success">
+        <label for="clins-0-number">
+          <div class="usa-input__title"> Number </div>
+        </label>
+        <input type="text" id="clins-0-number" placeholder="">
+        <input type="hidden" name="clins-0-number" value="123">
+      </div>
+      <fieldset class="usa-input date-picker">
+        <legend>
+          <div class="usa-input__title"> Start Date
+          </div>
+        </legend>
+        <div class="date-picker-component">
+          <input name="clins-0-start_date" type="hidden">
+          <div class="usa-form-group usa-form-group-month">
+            <label>Month
+            </label>
+            <input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
+          </div>
+          <div class="usa-form-group usa-form-group-day">
+            <label>Day
+            </label>
+            <input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
+          </div>
+          <div class="usa-form-group usa-form-group-year">
+            <label>Year
+            </label>
+            <input id="date-year" maxlength="4" type="number">
+          </div>
+          <!---->
+        </div>
+        <p class="usa-input-error-message">
+        </p>
+      </fieldset>
+      <fieldset class="usa-input date-picker">
+        <legend>
+          <div class="usa-input__title"> End Date
+          </div>
+        </legend>
+        <div class="date-picker-component">
+          <input name="clins-0-end_date" type="hidden">
+          <div class="usa-form-group usa-form-group-month">
+            <label>Month
+            </label>
+            <input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
+          </div>
+          <div class="usa-form-group usa-form-group-day">
+            <label>Day
+            </label>
+            <input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
+          </div>
+          <div class="usa-form-group usa-form-group-year">
+            <label>Year
+            </label>
+            <input id="date-year" maxlength="4" type="number">
+          </div>
+          <!---->
+        </div>
+        <p class="usa-input-error-message">
+        </p>
+      </fieldset>
+      <div class="  usa-input usa-input--validation--anything">
+        <label for="clins-0-obligated_amount">
+          <div class="usa-input__title"> Obligated Amount
+          </div>
+        </label>
+        <input type="text" id="clins-0-obligated_amount" placeholder="">
+        <input type="hidden" name="clins-0-obligated_amount">
+      </div>
+    </div>`,
+}

js/components/forms/to_form.js

@@ -0,0 +1,40 @@
+import ClinFields from '../clin_fields'
+import DateSelector from '../date_selector'
+import FormMixin from '../../mixins/form'
+import optionsinput from '../options_input'
+import textinput from '../text_input'
+
+export default {
+  name: 'to-form',
+
+  mixins: [FormMixin],
+
+  components: {
+    ClinFields,
+    DateSelector,
+    optionsinput,
+    textinput,
+  },
+
+  props: {
+    initialClinCount: String,
+  },
+
+  data: function() {
+    const clins = this.initialClinCount == 0 ? [''] : []
+
+    return {
+      clins,
+      clinCount: this.initalClinCount - 1,
+    }
+    // pass initialCLINIndex in props and add one each time a clin is added...
+    // this way we can keep track of the clin id for the html name/id/etc
+  },
+
+  methods: {
+    addClin: function(event) {
+      this.clins.push('')
+      this.clinCount = this.clinCount + 1
+    },
+  },
+}

js/index.js

@@ -41,6 +41,8 @@ import DeleteConfirmation from './components/delete_confirmation'
 import NewEnvironment from './components/forms/new_environment'
 import EnvironmentRole from './components/environment_role'
 import SemiCollapsibleText from './components/semi_collapsible_text'
+import ToForm from './components/forms/to_form'
+import ClinFields from './components/clin_fields'
 
 Vue.config.productionTip = false
 
@@ -83,6 +85,8 @@ const app = new Vue({
     NewEnvironment,
     EnvironmentRole,
     SemiCollapsibleText,
+    ToForm,
+    ClinFields,
   },
 
   mounted: function() {

templates/task_orders/edit.html

@@ -1,19 +1,31 @@
 {% extends "portfolios/base.html" %}
 
+{% from 'components/date_picker.html' import DatePicker %}
 {% from 'components/save_button.html' import SaveButton %}
+{% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/text_input.html' import TextInput %}
 {% from 'components/upload_input.html' import UploadInput %}
 
+{% macro CLINFields(fields) %}
+  <div>
+    {{ OptionsInput(fields.jedi_clin_type) }}
+    {{ TextInput(fields.number) }}
+    {{ DatePicker(fields.start_date) }}
+    {{ DatePicker(fields.end_date) }}
+    {{ TextInput(fields.obligated_amount) }}
+  </div>
+{% endmacro %}
+
 {% block portfolio_content %}
   <div class="col task-order-form">
     {% include "fragments/flash.html" %}
-    <base-form inline-template>
+    <to-form inline-template initial-clin-count='{{ form.clins | length }}'>
       {% if task_order_id %}
         {% set action = url_for("task_orders.update", portfolio_id=portfolio.id, task_order_id=task_order_id) %}
       {% else %}
         {% set action = url_for("task_orders.update", portfolio_id=portfolio.id) %}
       {% endif %}
-      <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+      <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off">
         {{ form.csrf_token }}
         <!-- TODO: implement save bar with component -->
         <span class="h3">Add Funding</span>
@@ -29,8 +41,24 @@
         </p>
         <hr>
         {{ TextInput(form.number, validation='taskOrderNumber') }}
+        {% for clin in form.clins %}
+          {{ CLINFields(clin) }}
+        {% endfor %}
+        <div v-for="clin in clins">
+            <!-- do something to display this when no clins exist -->
+            <!-- fix names and ids -->
+            <!-- make new vue component for clin -->
+            <!-- try <clin inline-template v-for="clin in clins"> -->
+            <!-- create CLIN vue component with a template in the component -->
+            <!-- use it to iterate through or if clinCount === 0 -->
+          <clin-fields v-bind:clin-index='clinCount'></clin-fields>
+        </div>
+
+        <button v-on:click="addClin" type="button">
+          Add CLIN
+        </button>
         {{ UploadInput(form.pdf) }}
       </form>
-    </base-form>
+    </to-form>
   </div>
 {% endblock %}