Reimplement SaveButton disabled until input change

js/components/date_selector.js

@@ -20,6 +20,10 @@ export default {
     mindate: { type: String },
     maxdate: { type: String },
     nameTag: { type: String },
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -138,7 +142,11 @@ export default {
 
   methods: {
     _emitChange: function(name, value, valid) {
-      emitEvent('field-change', this, { value, name })
+      emitEvent('field-change', this, {
+        value: value,
+        name: name,
+        watch: this.watch,
+      })
     },
   },
 

js/components/forms/to_form.js

@@ -1,3 +1,5 @@
+import stickybits from 'stickybits'
+
 import ClinFields from '../clin_fields'
 import DateSelector from '../date_selector'
 import FormMixin from '../../mixins/form'
@@ -40,4 +42,12 @@ export default {
       ++this.clinIndex
     },
   },
+
+  directives: {
+    sticky: {
+      inserted: el => {
+        stickybits(el)
+      },
+    },
+  },
 }

js/components/text_input.js

@@ -27,6 +27,10 @@ export default {
     paragraph: String,
     noMaxWidth: String,
     optional: Boolean,
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -122,6 +126,7 @@ export default {
         value: this._rawValue(value),
         valid,
         name: this.name,
+        watch: this.watch,
       })
     },
 

js/components/upload_input.js

@@ -1,6 +1,7 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import { conformToMask } from 'vue-text-mask'
 
+import { emitEvent } from '../lib/emitters'
 import FormMixin from '../mixins/form'
 import textinput from './text_input'
 import optionsinput from './options_input'
@@ -22,6 +23,10 @@ export default {
     initialErrors: {
       type: Boolean,
     },
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -38,6 +43,12 @@ export default {
       this.attachment = e.target.value
       this.showErrors = false
       this.changed = true
+
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+        watch: this.watch,
+      })
     },
     removeAttachment: function(e) {
       e.preventDefault()
@@ -47,6 +58,12 @@ export default {
       }
       this.showErrors = false
       this.changed = true
+
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+        watch: this.watch,
+      })
     },
   },
 

styles/sections/_task_order.scss

@@ -74,7 +74,8 @@
       max-width: unset;
     }
 
-    .usa-input__title, .usa-input__title-inline {
+    .usa-input__title,
+    .usa-input__title-inline {
       font-weight: $font-normal;
     }
 

templates/components/date_picker.html

@@ -5,7 +5,8 @@
   label=field.label | striptags,
   description=field.description,
   mindate=None,
-  maxdate=None) -%}
+  maxdate=None,
+  watch=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -13,6 +14,7 @@
   initialmonth="{{ field.data.month }}"
   initialday="{{ field.data.day }}"
   initialyear="{{ field.data.year }}"
+  v-bind:watch='{{ watch | string | lower }}'
   inline-template>
 
     <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">

templates/components/text_input.html

@@ -15,7 +15,8 @@
   classes='',
   noMaxWidth=False,
   optional=False,
-  showLabel=True) -%}
+  showLabel=True,
+  watch=False) -%}
 
   <textinput
     v-cloak
@@ -27,6 +28,7 @@
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     v-bind:optional={{ optional|lower }}
     key='{{ field.name }}'
+    :watch='{{ watch | string | lower }}'
     inline-template>
 
     <div

templates/components/upload_input.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro UploadInput(field, show_label=False) -%}
+{% macro UploadInput(field, show_label=False, watch=False) -%}
 <uploadinput
   inline-template
   {% if not field.errors %}
@@ -8,6 +8,7 @@
   {% else %}
     v-bind:initial-errors='true'
   {% endif %}
+  v-bind:watch='{{ watch | string | lower }}'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">

templates/task_orders/edit.html

@@ -12,7 +12,7 @@
 
 {% macro LOAInput() %}
   <div v-for="loa in loas">
-    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
+    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" :watch='true' inline-template>
       <div class="usa-input usa-input--validation--anything">
         <masked-input
           v-on:input='onInput'
@@ -62,10 +62,10 @@
     <div>
       <div class="form-row">
         <div class="form-col form-col--two-thirds">
-          {{ OptionsInput(fields.jedi_clin_type) }}
+          {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
         </div>
         <div class="form-col form-col--third">
-          {{ TextInput(fields.number) }}
+          {{ TextInput(fields.number, watch=True) }}
         </div>
       </div>
 
@@ -77,16 +77,16 @@
             </div>
           </legend>
           {% for loa in fields.loas %}
-            {{ TextInput(loa, showLabel=False) }}
+            {{ TextInput(loa, showLabel=False, watch=True) }}
           {% endfor %}
 
           {{ LOAInput() }}
         </fieldset>
       </div>
 
-      {{ DatePicker(fields.start_date) }}
+      {{ DatePicker(fields.start_date, watch=True) }}
-      {{ DatePicker(fields.end_date) }}
+      {{ DatePicker(fields.end_date, watch=True) }}
-      {{ TextInput(fields.obligated_amount, validation='dollars') }}
+      {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
     </div>
   </clin-fields>
 {% endmacro %}
@@ -101,277 +101,287 @@
   {% endif %}
   <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
     {{ form.csrf_token }}
-
-    {% call StickyCTA(text="Add Funding") %}
-      <span class="action-group">
-        <input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
-        <input type="submit" tabindex="0" value="Save" form="new-task-order" class="usa-button usa-button-secondary">
-        <a
-          href="{{ cancel_url }}"
-          class="action-group__action icon-link">
-          {{ "common.cancel" | translate }}
-        </a>
-      </span>
-    {% endcall %}
-
     <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
-      <div class="task-order task_order__form">
+      <div>
-          <p class="section-description">
+        {% call StickyCTA(text="Add Funding") %}
-            {{ "task_orders.new.form_help_text" | translate }}
+          <span class="action-group">
-          </p>
+            <!-- todo: implement the review button -->
+            <input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
+            <input
+              type="submit"
+              class="usa-button usa-button-secondary"
+              tabindex="0"
+              :disabled="!changed"
+              value="{{ 'common.save' | translate }}"
+              form="new-task-order"/>
+            <a
+              href="{{ cancel_url }}"
+              class="action-group__action icon-link">
+              {{ "common.cancel" | translate }}
+            </a>
+          </span>
+        {% endcall %}
 
-          <hr>
+        <div class="task-order task_order__form">
+            <p class="section-description">
+              {{ "task_orders.new.form_help_text" | translate }}
+            </p>
 
-          {% include "fragments/flash.html" %}
+            <hr>
 
-          <div class="row">
+            {% include "fragments/flash.html" %}
-            <div class="col">
-              <div class="h1">Add your task order</div>
-              {{ TextInput(form.number, validation='taskOrderNumber') }}
 
-              <hr>
+            <div class="row">
+              <div class="col">
+                <div class="h1">Add your task order</div>
+                {{ TextInput(form.number, validation='taskOrderNumber') }}
 
-              <div class="h3">Add the summary of cloud funding</div>
+                <hr>
-              <div>
-                Data must match with what is in your uploaded document.
-              </div>
 
-              {% for clin in form.clins %}
+                <div class="h3">Add the summary of cloud funding</div>
-                {{ CLINFields(clin, index=loop.index - 1) }}
+                <div>
-              {% endfor %}
+                  Data must match with what is in your uploaded document.
+                </div>
 
-              <div v-for="clin in clins">
+                {% for clin in form.clins %}
-                <hr v-if="clinIndex !== 0">
+                  {{ CLINFields(clin, index=loop.index - 1) }}
-                <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
+                {% endfor %}
-                  <div>
+
-                    <div class="form-row">
+                <div v-for="clin in clins">
-                      <div class="form-col form-col--two-thirds">
+                  <hr v-if="clinIndex !== 0">
-                        <div class="usa-input">
+                  <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
-                          <fieldset data-ally-disabled="true" class="usa-input__choices">
+                    <div>
-                              <legend>
+                      <div class="form-row">
-                                <div class="usa-input__title">
+                        <div class="form-col form-col--two-thirds">
-                                  CLIN type
+                          <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' inline-template>
-                                </div>
+                            <div class="usa-input">
-                              </legend>
+                              <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
-                              <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
+                                  <legend>
-                                <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
+                                    <div class="usa-input__title">
-                                <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
+                                      CLIN type
-                                <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
+                                    </div>
-                                <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                                  </legend>
-                              </select>
+                                  <select :id='name' :name='name'>
-                          </fieldset>
+                                    <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
+                                    <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
+                                    <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
+                                    <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                                  </select>
+                              </fieldset>
+                            </div>
+                          </optionsinput>
+                        </div>
+                        <div class="form-col form-col--third">
+                          <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
+                            <div class="usa-input">
+                              <label :for="name">
+                                <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                                <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                                <div class="usa-input__title">CLIN</div>
+                              </label>
+
+                              <masked-input
+                                v-on:input='onInput'
+                                v-on:blur='onBlur'
+                                v-on:change='onChange'
+                                v-bind:value='value'
+                                v-bind:mask='mask'
+                                v-bind:pipe='pipe'
+                                v-bind:keep-char-positions='keepCharPositions'
+                                v-bind:aria-invalid='showError'
+                                type='text'
+                                :id='name'
+                                ref='input'>
+                              </masked-input>
+
+                              <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                              <template v-if='showError'>
+                                <span class='usa-input__message' v-html='validationError'></span>
+                              </template>
+                              <template v-else>
+                                <span class='usa-input__message'></span>
+                              </template>
+                            </div>
+                          </textinput>
                         </div>
                       </div>
-                      <div class="form-col form-col--third">
-                        <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
-                          <div class="usa-input">
-                            <label :for="name">
-                              <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                              <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                              <div class="usa-input__title">CLIN</div>
-                            </label>
 
-                            <masked-input
+                      <div class="usa-input">
-                              v-on:input='onInput'
+                        <fieldset class="usa-input__choices task-order__loa-fieldset">
-                              v-on:blur='onBlur'
+                          <legend>
-                              v-on:change='onChange'
+                            <div class="usa-input__title">
-                              v-bind:value='value'
+                              Line of accounting (43 characters)
-                              v-bind:mask='mask'
+                            </div>
-                              v-bind:pipe='pipe'
+                          </legend>
-                              v-bind:keep-char-positions='keepCharPositions'
+                          {{ LOAInput() }}
-                              v-bind:aria-invalid='showError'
+                        </fieldset>
-                              type='text'
-                              :id='name'
-                              ref='input'>
-                            </masked-input>
-
-                            <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                            <template v-if='showError'>
-                              <span class='usa-input__message' v-html='validationError'></span>
-                            </template>
-                            <template v-else>
-                              <span class='usa-input__message'></span>
-                            </template>
-                          </div>
-                        </textinput>
                       </div>
+
+                      <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' inline-template>
+                        <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                          <legend>
+                            <div class="usa-input__title">
+                              Start of period of performance (PoP)
+                            </div>
+                          </legend>
+
+                          <div class="date-picker-component">
+                            <input :name="name" v-bind:value="formattedDate" 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"
+                                v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                                v-model="month"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-day">
+                              <label>Day</label>
+                              <input
+                                name="date-day"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                                v-bind:max="daysMaxCalculation"
+                                v-model="day"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-year">
+                              <label>Year</label>
+                              <input
+                                name="date-year"
+                                maxlength="4"
+                                type="number"
+                                v-model="year"
+                              />
+
+                            </div>
+
+                            <div class="usa-form-group-date-ok" v-if="isDateValid">
+                              {{ Icon("ok", classes="icon--green") }}
+                            </div>
+                          </div>
+                        </fieldset>
+                      </date-selector>
+
+                      <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' inline-template>
+                        <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                          <legend>
+                            <div class="usa-input__title">
+                              End of period of performance (PoP)
+                            </div>
+                          </legend>
+
+                          <div class="date-picker-component">
+                            <input :name="name" v-bind:value="formattedDate" 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"
+                                v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                                v-model="month"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-day">
+                              <label>Day</label>
+                              <input
+                                name="date-day"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                                v-bind:max="daysMaxCalculation"
+                                v-model="day"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-year">
+                              <label>Year</label>
+                              <input
+                                name="date-year"
+                                maxlength="4"
+                                type="number"
+                                v-model="year"
+                              />
+
+                            </div>
+
+                            <div class="usa-form-group-date-ok" v-if="isDateValid">
+                              {{ Icon("ok", classes="icon--green") }}
+                            </div>
+                          </div>
+                        </fieldset>
+                      </date-selector>
+
+                      <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" :watch='true' inline-template>
+                        <div class="usa-input usa-input--validation--dollars noMaxWidth">
+                          <label :for="name">
+                            <div class="usa-input__title">Funds obligated for cloud</div>
+                            <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                            <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                          </label>
+
+                          <masked-input
+                            v-on:input='onInput'
+                            v-on:blur='onBlur'
+                            v-on:change='onChange'
+                            v-bind:value='value'
+                            v-bind:mask='mask'
+                            v-bind:pipe='pipe'
+                            v-bind:keep-char-positions='keepCharPositions'
+                            v-bind:aria-invalid='showError'
+                            v-bind:show-mask='true'
+                            type='text'
+                            :id='name'
+                            ref='input'>
+                          </masked-input>
+
+                          <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                          <template v-if='showError'>
+                            <span class='usa-input__message' v-html='validationError'></span>
+                          </template>
+                          <template v-else>
+                            <span class='usa-input__message'></span>
+                          </template>
+                        </div>
+                      </textinput>
                     </div>
+                  </clin-fields>
+                </div>
 
-                    <div class="usa-input">
+                <button
-                      <fieldset class="usa-input__choices task-order__loa-fieldset">
+                  class="icon-link icon-link__add-another-clin"
-                        <legend>
+                  v-on:click="addClin"
-                          <div class="usa-input__title">
+                  type="button">
-                            Line of accounting (43 characters)
+                  {{ Icon('plus') }}
-                          </div>
+                  <span>Add another CLIN or Sub-CLIN</span>
-                        </legend>
+                </button>
-                        {{ LOAInput() }}
-                      </fieldset>
-                    </div>
 
-                    <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
+                <hr>
-                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                <div class="h3">Upload your supporting documentation</div>
-                        <legend>
+                <div class="task-order__pdf-help-text">
-                          <div class="usa-input__title">
+                  Upload a single PDF containing all relevant information. {{ Icon('help')}}
-                            Start of period of performance (PoP)
+                </div>
-                          </div>
+              {{ UploadInput(form.pdf, watch=True) }}
-                        </legend>
+            </div>
-
+            {{ TotalsBox(task_order=task_order) }}
-                        <div class="date-picker-component">
-                          <input :name="name" v-bind:value="formattedDate" 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"
-                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                              v-model="month"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-day">
-                            <label>Day</label>
-                            <input
-                              name="date-day"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                              v-bind:max="daysMaxCalculation"
-                              v-model="day"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-year">
-                            <label>Year</label>
-                            <input
-                              name="date-year"
-                              maxlength="4"
-                              type="number"
-                              v-model="year"
-                            />
-
-                          </div>
-
-                          <div class="usa-form-group-date-ok" v-if="isDateValid">
-                            {{ Icon("ok", classes="icon--green") }}
-                          </div>
-                        </div>
-                      </fieldset>
-                    </date-selector>
-
-                    <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" inline-template>
-                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                        <legend>
-                          <div class="usa-input__title">
-                            End of period of performance (PoP)
-                          </div>
-                        </legend>
-
-                        <div class="date-picker-component">
-                          <input :name="name" v-bind:value="formattedDate" 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"
-                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                              v-model="month"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-day">
-                            <label>Day</label>
-                            <input
-                              name="date-day"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                              v-bind:max="daysMaxCalculation"
-                              v-model="day"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-year">
-                            <label>Year</label>
-                            <input
-                              name="date-year"
-                              maxlength="4"
-                              type="number"
-                              v-model="year"
-                            />
-
-                          </div>
-
-                          <div class="usa-form-group-date-ok" v-if="isDateValid">
-                            {{ Icon("ok", classes="icon--green") }}
-                          </div>
-                        </div>
-                      </fieldset>
-                    </date-selector>
-
-                    <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
-                      <div class="usa-input usa-input--validation--dollars noMaxWidth">
-                        <label :for="name">
-                          <div class="usa-input__title">Funds obligated for cloud</div>
-                          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                        </label>
-
-                        <masked-input
-                          v-on:input='onInput'
-                          v-on:blur='onBlur'
-                          v-on:change='onChange'
-                          v-bind:value='value'
-                          v-bind:mask='mask'
-                          v-bind:pipe='pipe'
-                          v-bind:keep-char-positions='keepCharPositions'
-                          v-bind:aria-invalid='showError'
-                          v-bind:show-mask='true'
-                          type='text'
-                          :id='name'
-                          ref='input'>
-                        </masked-input>
-
-                        <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                        <template v-if='showError'>
-                          <span class='usa-input__message' v-html='validationError'></span>
-                        </template>
-                        <template v-else>
-                          <span class='usa-input__message'></span>
-                        </template>
-                      </div>
-                    </textinput>
-                  </div>
-                </clin-fields>
-              </div>
-
-              <button
-                class="icon-link icon-link__add-another-clin"
-                v-on:click="addClin"
-                type="button">
-                {{ Icon('plus') }}
-                <span>Add another CLIN or Sub-CLIN</span>
-              </button>
-
-              <hr>
-              <div class="h3">Upload your supporting documentation</div>
-              <div class="task-order__pdf-help-text">
-                Upload a single PDF containing all relevant information. {{ Icon('help')}}
-              </div>
-            {{ UploadInput(form.pdf) }}
           </div>
-          {{ TotalsBox(task_order=task_order) }}
         </div>
       </div>
     </to-form>