Use to-form Vue component instead of base-form in TO builder base template

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)
+      },
+    },
+  },
 }

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

@@ -333,27 +333,23 @@
 
 
 {% 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 %}