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,
+    initialClinCount: {
-    initialObligated: Number,
+      type: Number,
-    initialTotal: 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,9 +333,6 @@
 
 
 {% 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) }}
 
@@ -355,5 +352,4 @@
       <span>{{ 'task_orders.form.add_clin' | translate }}</span>
     </button>
   </div>
-  </to-form>
 {% endblock %}