From 52bea200c82495d4dde49a6186df4d5e2d50c9d0 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 17 Jan 2026 11:14:31 -0500
Subject: [PATCH] Fix #147 prevent double clicking submit button

---
 .../trainingReport/trainingReportForm.vue     | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/trainingReport/trainingReportForm.vue b/ui/src/components/trainingReport/trainingReportForm.vue
index 4eea9b3..5c13296 100644
--- a/ui/src/components/trainingReport/trainingReportForm.vue
+++ b/ui/src/components/trainingReport/trainingReportForm.vue
@@ -26,6 +26,7 @@ import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
 import PopoverContent from "@/components/ui/popover/PopoverContent.vue";
 import Combobox from '../ui/combobox/Combobox.vue'
 import Tooltip from '../tooltip/Tooltip.vue'
+import Spinner from '../ui/spinner/Spinner.vue'
 
 
 const { handleSubmit, resetForm, errors, values, setFieldValue } = useForm({
@@ -67,19 +68,24 @@ function toMySQLDateTime(date: Date): string {
         .replace("T", " ") + "000";    // becomes → 2025-11-19 00:00:00.000000
 }
 
-
-function onSubmit(vals) {
+const submitting = ref(false);
+async function onSubmit(vals) {
+    //catch double submit
+    if (submitting.value) return;
+    submitting.value = true;
     try {
         const clean: CourseEventDetails = {
             ...vals,
             event_date: new Date(vals.event_date),
         }
 
-        postTrainingReport(clean).then((newID) => {
+        await postTrainingReport(clean).then((newID) => {
             emit("submit", newID);
         });
     } catch (err) {
         console.error("There was an error submitting the training report", err);
+    } finally {
+        submitting.value = false;
     }
 }
 
@@ -402,7 +408,12 @@ const filteredMembers = computed(() => {
         </FieldGroup>
         <div class="flex gap-3 justify-end">
             <Button type="button" variant="outline" @click="resetForm">Reset</Button>
-            <Button type="submit" form="trainingForm">Submit</Button>
+            <Button type="submit" form="trainingForm" :disabled="submitting" class="w-35">
+                <span class="flex items-center gap-2" v-if="submitting">
+                    <Spinner></Spinner> Submitting…
+                </span>
+                <span v-else>Submit</span>
+            </Button>
         </div>
     </form>
 </template>