From 69b511613f379c8fe46af4a39745123d459dc1f7 Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Sat, 8 Mar 2025 20:15:41 -0600
Subject: [PATCH] ui: Disable submit button while cropping

It's not immediately clear that submitting the form while the cropper is
active will not include the image _at all_.  To make this evident, we
disable the submit button until the crop is complete.
---
 js/transaction.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/transaction.ts b/js/transaction.ts
index c373dab..59f453c 100644
--- a/js/transaction.ts
+++ b/js/transaction.ts
@@ -31,6 +31,7 @@ const btncrop = photoview.querySelector(
 const btnreset = photoview.querySelector(
     " sl-icon-button[label='Start Over']",
 ) as SlIconButton;
+const btnsubmit = form.querySelector("sl-button[type='submit']") as SlButton;
 
 let cropper: Cropper | null = null;
 let initialized = false;
@@ -77,8 +78,7 @@ async function startCamera() {
 }
 
 async function submitForm(data: FormData) {
-    const btn = form.querySelector("sl-button[type='submit']") as SlButton;
-    btn.loading = true;
+    btnsubmit.loading = true;
     let r: Response | null = null;
     try {
         r = await fetch("", {
@@ -93,7 +93,7 @@ async function submitForm(data: FormData) {
             null,
         );
     }
-    btn.loading = false;
+    btnsubmit.loading = false;
     if (r) {
         if (r.ok) {
             notify("Successfully updated transaction");
@@ -115,6 +115,7 @@ async function submitForm(data: FormData) {
 }
 
 function takePhoto() {
+    btnsubmit.disabled = true;
     btnshutter.disabled = true;
     btnshutter.classList.add("invisible");
     video.pause();
@@ -162,6 +163,7 @@ btnshutter.addEventListener("click", async () => {
 });
 
 btncrop.addEventListener("click", async () => {
+    btnsubmit.disabled = false;
     if (cropper) {
         const canvas = await cropper.getCropperSelection()?.$toCanvas();
         if (canvas) {