create new, or search, component booleans

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="card-header">Primary Cal Device</div>
+  <div class="card-header">
+    Primary Cal Device
+    <button @click="showNewCalibrationClick">New</button>
+  </div>
   <div class="card-body">
     <table class="table">
       <tbody>
@@ -23,9 +26,11 @@
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";
 
-const
+const serial = ref("");
-  serial = ref("")
 
+const showNewCalibrationClick = () => {
+  emit("show-new-calibration", true);
+};
 
 const emit = defineEmits();
 watchEffect(() => {

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

@@ -73,12 +73,11 @@ import { ref, defineEmits, watchEffect } from "vue";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 
-const
+const model = ref(""),
-  model = ref(""),
   serial = ref(""),
   cert_id = ref(""),
   due_date = ref(""),
-  date = ref("")
+  date = ref("");
 
 const flow = ref(["year", "month", "calendar"]);
 

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="card-header">Instrument</div>
+  <div class="card-header">
+    Instrument
+    <button @click="showNewInstrumentClick">New</button>
+  </div>
   <div class="card-body">
     <table class="table">
       <tbody>
@@ -23,9 +26,11 @@
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";
 
-const
+const serial = ref("");
-  serial = ref("")
 
+const showNewInstrumentClick = () => {
+  emit("show-new-instrument", true);
+};
 
 const emit = defineEmits();
 watchEffect(() => {

benchtop-fe/src/components/Sheet.vue

@@ -14,14 +14,27 @@
     </div>
 
     <div class="item card">
-      <InstrumentForm @instrumentForm="instrumentForm" />
+      <InstrumentForm
-      <!-- <NewInstrumentForm @newInstrumentForm="newInstrumentForm" /> -->
+        v-if="!show_new_instrument"
+        @instrumentForm="instrumentForm"
+        @showNewInstrument="showNewInstrument"
+      />
+      <NewInstrumentForm
+        v-if="show_new_instrument"
+        @newInstrumentForm="newInstrumentForm"
+      />
     </div>
     <div class="item card">
-      <CalibrationDeviceForm @calibrationForm="calibrationForm" />
+      <CalibrationDeviceForm
-      <!-- <NewCalibrationDeviceForm @newCalibrationForm="newCalibrationForm" /> -->
+        v-if="!show_new_calibration"
+        @calibrationForm="calibrationForm"
+        @showNewCalibration="showNewCalibration"
+      />
+      <NewCalibrationDeviceForm
+        v-if="show_new_calibration"
+        @newCalibrationForm="newCalibrationForm"
+      />
     </div>
-
   </div>
 </template>
 
@@ -36,15 +49,15 @@ import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue
 import EnvironmentForm from "./EnvironmentForm.vue";
 import UploadForm from "./UploadForm.vue";
 
-const
+const upload_form_data = ref(),
-  upload_form_data = ref(),
   calibration_form_data = ref(),
   customer_form_data = ref(),
   environment_form_data = ref(),
   new_instrument_form_data = ref(),
   instrument_form_data = ref(),
-  new_calibration_form_data = ref()
+  new_calibration_form_data = ref(),
-
+  show_new_instrument = ref(false),
+  show_new_calibration = ref(false);
 
 const uploadForm = (form) => {
   upload_form_data.value = form;
@@ -74,6 +87,13 @@ const calibrationForm = (form) => {
   calibration_form_data.value = form;
 };
 
+const showNewInstrument = (val) => {
+  show_new_instrument.value = val;
+};
+const showNewCalibration = (val) => {
+  show_new_calibration.value = val;
+};
+
 const emits = defineEmits([
   "uploadForm",
   "customerForm",
@@ -82,5 +102,7 @@ const emits = defineEmits([
   "newInstrumentForm",
   "calibrationForm",
   "newCalibrationForm",
+  "showNewInstrument",
+  "showNewCalibration",
 ]);
 </script>

benchtop-fe/src/components/UploadForm.vue

@@ -1,4 +1,4 @@
-<template>
+d ..<template>
   <div class="card-header">Report Uploads</div>
   <div class="card-body">
     <table class="table">