dustin
/
receipts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
bugfix/ci-buildah
Dustin 2025-03-08 20:15:41 -06:00
parent 9a0674ec18
commit 69b511613f
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/transaction.ts
View File

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