emits

benchtop-fe/src/components/Sheet.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="item card">
-      <UploadForm />
+      <UploadForm @uploadForm="uploadForm" />
     </div>
   </div>
 
@@ -19,13 +19,25 @@
     <div class="item card">
       <NewCalibrationDeviceForm />
     </div>
+
   </div>
 </template>
 
 <script setup>
+import { ref, defineEmits } from "vue";
+
 import CustomerForm from "./CustomerForm.vue";
 import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
 import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
 import EnvironmentForm from "./EnvironmentForm.vue";
 import UploadForm from "./UploadForm.vue";
-</script>
+
+const upload_form_data = ref();
+
+const uploadForm = (form) => {
+  upload_form_data.value = form;
+}
+
+
+const emits = defineEmits(["uploadForm"]);
+</script>

benchtop-fe/src/components/UploadForm.vue

@@ -3,109 +3,144 @@
   <div class="card-body">
     <table class="table">
       <tbody>
-      <tr>
-        <td>Report Type</td>
-        <td>
-          <select name="report_type" v-model="report_type" required id="id_report_type">
-            <option value="" selected>---------</option>
-            <option value="TV">Transducer Verify</option>
-            <option value="HC">Hardware Calibration</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td colspan=2>
-          <ul>
-            <li v-for="file in files" :key="file.id">
-              {{ file.name }}
+        <tr>
+          <td>Report Type</td>
+          <td>
+            <select
+              name="report_type"
+              v-model="report_type"
+              required
+              id="id_report_type"
+            >
+              <option value="" selected>---------</option>
+              <option value="TV">Transducer Verify</option>
+              <option value="HC">Hardware Calibration</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <button class="button" @click="openFileInput" v-if="showUpload">
+              Select File
+            </button>
+          </td>
+          <td>
+            <ul>
+              <li v-for="(file, index) in files" :key="index">
+                <button @click="removeUpload(index)">x</button>
+                {{ file.name }}
                 <label>
-                  <input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
+                  <input
+                    type="radio"
+                    name="alignment"
+                    value="both"
+                    @change="kindChange('both', file)"
+                  />
+                  Both
                 </label>
                 <label>
-                    <input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
+                  <input
+                    type="radio"
+                    name="alignment"
+                    value="left"
+                    @change="kindChange('left', file)"
+                  />
+                  As Left
                 </label>
                 <label>
-                    <input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
+                  <input
+                    type="radio"
+                    name="alignment"
+                    value="found"
+                    @change="kindChange('found', file)"
+                  />
+                  As Found
                 </label>
-            </li>
-          </ul>
-          <file-upload
-              class="btn btn-primary"
-              post-action="/upload/post"
-              extensions="txt"
-              accept="text/plain"
-              :multiple="true"
-              :size="1024 * 1024 * 10"
-              v-model="files"
-              @input-filter="inputFilter"
-              @input-file="inputFile"
-              ref="upload">
-            <i class="fa fa-plus"></i>
-            Select files
-          </file-upload>
+              </li>
+            </ul>
 
- <button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
-          <i class="fa fa-arrow-up" aria-hidden="true"></i>
-          Start Upload
-        </button>
-        <button type="button" class="btn btn-danger"  v-else @click.prevent="upload.active = false">
-          <i class="fa fa-stop" aria-hidden="true"></i>
-          Stop Upload
-        </button>
-
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td align="right">
-          <input type="submit" value="Generate PDF and Label">
-        </td>
-      </tr>
+            <input
+              ref="doc"
+              type="file"
+              style="display: none"
+              @change="readFile($event)"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td align="right">
+            <input type="submit" value="Generate PDF and Label" />
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
 </template>
 
-
 <script setup>
-import { ref, defineProps } from 'vue'
-import {VueUploadComponent as FileUpload} from 'vue-upload-component'
+import { ref, computed, watchEffect } from "vue";
 
-const report_type = ref('')
-const files = ref([])
-const upload = ref(null)
+const report_type = ref("");
+const files = ref([]);
+const current_file = ref(null);
+const doc = ref();
 
-const inputFile = (newFile, oldFile) => {
-  if (newFile && oldFile && !newFile.active && oldFile.active) {
-    // Get response data
-    console.log('response', newFile.response)
-    if (newFile.xhr) {
-      // Get the response status code
-      console.log('status', newFile.xhr.status)
+const showUpload = computed({
+  get() {
+    if (files.length > 2) {
+      return false;
     }
-  }
-}
-
-const inputFilter = (newFile, oldFile, prevent) => {
-  if (newFile && !oldFile) {
-    // Filter non-image file
-    if (!/\.(txt)$/i.test(newFile.name)) {
-      return prevent()
+    if (files.value.length > 0 && files.value[0].kind == "both") {
+      return false;
     }
-  }
 
-  // Create a blob field
-  newFile.blob = ''
-  const URL = window.URL || window.webkitURL
-  if (URL && URL.createObjectURL) {
-    newFile.blob = URL.createObjectURL(newFile.file)
-  }
-  console.log(URL)
-}
+    return true;
+  },
+});
+
+const openFileInput = () => {
+  // Trigger a click event on the file input element
+  doc.value.click();
+};
 
 const kindChange = (opt, file) => {
   // Change the file kind metadata, (both, as found, as left) for the uploaded file
-  file.kind = opt
-  console.log(file)
-}
-</script>
+  file.kind = opt;
+  console.log(file);
+};
+
+const removeUpload = (index) => {
+  files.value.splice(index, 1);
+};
+
+const readFile = ($event) => {
+  const target = $event.target;
+  if (target && target.files) {
+    current_file.value = target.files[0];
+  }
+  if (!current_file.value.name.includes(".txt")) {
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = (res) => {
+    let content = res.target.result;
+    files.value.push({
+      name: current_file.value.name,
+      value: content,
+      kind: "",
+    });
+  };
+  reader.onerror = (err) => console.log(err);
+  reader.readAsText(current_file.value);
+  doc.value.value = null;
+};
+
+const emit = defineEmits();
+watchEffect(() => {
+  emit("upload-form", {
+    report_type,
+    files,
+  });
+});
+</script>

benchtop-fe/src/components/_UploadForm.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="card-header">Report Uploads</div>
+  <div class="card-body">
+    <table class="table">
+      <tbody>
+      <tr>
+        <td>Report Type</td>
+        <td>
+          <select name="report_type" v-model="report_type" required id="id_report_type">
+            <option value="" selected>---------</option>
+            <option value="TV">Transducer Verify</option>
+            <option value="HC">Hardware Calibration</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td colspan=2>
+          <ul>
+            <li v-for="file in files" :key="file.id">
+              {{ file.name }}
+                <label>
+                  <input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
+                </label>
+                <label>
+                    <input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
+                </label>
+                <label>
+                    <input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
+                </label>
+            </li>
+          </ul>
+          <file-upload
+              class="btn btn-primary"
+              post-action="/upload/post"
+              extensions="txt"
+              accept="text/plain"
+              :multiple="true"
+              :size="1024 * 1024 * 10"
+              v-model="files"
+              @input-filter="inputFilter"
+              @input-file="inputFile"
+              ref="upload">
+            <i class="fa fa-plus"></i>
+            Select files
+          </file-upload>
+
+ <button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
+          <i class="fa fa-arrow-up" aria-hidden="true"></i>
+          Start Upload
+        </button>
+        <button type="button" class="btn btn-danger"  v-else @click.prevent="upload.active = false">
+          <i class="fa fa-stop" aria-hidden="true"></i>
+          Stop Upload
+        </button>
+
+        </td>
+      </tr>
+      <tr>
+        <td>&nbsp;</td>
+        <td align="right">
+          <input type="submit" value="Generate PDF and Label">
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, defineProps } from 'vue'
+import {VueUploadComponent as FileUpload} from 'vue-upload-component'
+
+const report_type = ref('')
+const files = ref([])
+const upload = ref(null)
+
+const inputFile = (newFile, oldFile) => {
+  if (newFile && oldFile && !newFile.active && oldFile.active) {
+    // Get response data
+    console.log('response', newFile.response)
+    if (newFile.xhr) {
+      // Get the response status code
+      console.log('status', newFile.xhr.status)
+    }
+  }
+}
+
+const inputFilter = (newFile, oldFile, prevent) => {
+  if (newFile && !oldFile) {
+    // Filter non-image file
+    if (!/\.(txt)$/i.test(newFile.name)) {
+      return prevent()
+    }
+  }
+
+  // Create a blob field
+  newFile.blob = ''
+  const URL = window.URL || window.webkitURL
+  if (URL && URL.createObjectURL) {
+    newFile.blob = URL.createObjectURL(newFile.file)
+  }
+  console.log(URL)
+}
+
+const kindChange = (opt, file) => {
+  // Change the file kind metadata, (both, as found, as left) for the uploaded file
+  file.kind = opt
+  console.log(file)
+}
+</script>