<div></div>

benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <div class="card-header">
     Primary Cal Device
     <button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
@@ -27,6 +28,7 @@
       </p>
     </div>
   </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";

benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Calibration Devices</div>
     <div class="card-body">
       <h3>Primary Device</h3>
@@ -25,6 +26,7 @@
         <VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";

benchtop-fe/src/components/CustomerForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Customer</div>
     <div class="card-body">
       <table class="table">
@@ -19,7 +20,7 @@
               <span class="switch-left">Yes</span>
               <span class="switch-right">No</span>
             </label>
-</div>
+  </div>
           </td>
         </tr>
         <tr>
@@ -37,6 +38,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 
 <script setup>

benchtop-fe/src/components/EnvironmentForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Environment</div>
     <div class="card-body">
       <table class="table">
@@ -33,6 +34,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from 'vue'

benchtop-fe/src/components/Instrument/InstrumentForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">
       Instrument
       <button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
@@ -27,6 +28,7 @@
         </p>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";

benchtop-fe/src/components/Instrument/NewInstrumentForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Instrument</div>
     <div class="card-body">
       <table class="table">
@@ -97,6 +98,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";

benchtop-fe/src/components/PDF/PDF.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Finished?</div>
     <div class="card-body">
       <button class="custom-button" @click="exportToPDF">
@@ -118,6 +119,7 @@
     <div>
       {{ output() }}
     </div>
+  </div>
 </template>
 
 <script setup>

benchtop-fe/src/components/PDF/ReadingTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="readings">
       <table class="table table-striped">
         <thead>
@@ -95,6 +96,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 <script setup>
 import {defineProps, ref} from "vue";

benchtop-fe/src/components/Sheet.vue

@@ -110,7 +110,7 @@ const showNewCalibration = (val) => {
   show_new_calibration.value = val;
 };
 
-const emit = defineEmits([
+const emits = defineEmits([
   "uploadForm",
   "customerForm",
   "environmentForm",

benchtop-fe/src/components/UploadForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="card-header">Report Uploads</div>
     <div class="card-body">
       <table class="table">
@@ -82,6 +83,7 @@
         @change="readFile($event)"
       />
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -152,7 +154,7 @@ const readFile = ($event) => {
 
 const emit = defineEmits();
 watchEffect(() => {
-  emit("upload-form", {
+  emit("uploadForm", {
     report_type,
     files,
   });