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.
Dustin 2025-03-08 20:15:41 -06:00
parent 9fe1eb2c0d
commit b5dff8eaf7
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(
" 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) {