90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import "@shoelace-style/shoelace/dist/components/alert/alert.js";
|
|
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
import "@shoelace-style/shoelace/dist/components/card/card.js";
|
|
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
|
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
|
|
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
|
|
|
|
import "./shoelace.js";
|
|
|
|
import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
|
|
|
import { notify, notifyError } from "./alert.js";
|
|
import { getResponseError } from "./ajaxUtil.js";
|
|
|
|
const dlgDelete = document.getElementById("confirm-delete") as SlDialog;
|
|
|
|
const confirmDelete = (
|
|
id: string,
|
|
amount: string,
|
|
date: string,
|
|
vendor: string,
|
|
) => {
|
|
dlgDelete.querySelector(".amount")!.textContent = amount;
|
|
dlgDelete.querySelector(".date")!.textContent = date;
|
|
dlgDelete.querySelector(".receipt-id")!.textContent = id;
|
|
dlgDelete.querySelector(".vendor")!.textContent = vendor;
|
|
dlgDelete.show();
|
|
};
|
|
|
|
const deleteReceipt = async (receiptId: string): Promise<boolean> => {
|
|
let r: Response;
|
|
try {
|
|
r = await fetch(`/receipts/${receiptId}`, { method: "DELETE" });
|
|
} catch (e) {
|
|
notifyError(e.toString());
|
|
return false;
|
|
}
|
|
if (r.ok) {
|
|
notify(`Deleted receipt ${receiptId}`);
|
|
return true;
|
|
} else {
|
|
const err = await getResponseError(r);
|
|
notifyError(err);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
document.querySelectorAll(".receipt-card").forEach((card) => {
|
|
const amount = card.querySelector(".amount")!.textContent!;
|
|
const date = (card.querySelector(".date") as HTMLElement).dataset.date!;
|
|
const vendor = card.querySelector(".vendor")!.textContent!;
|
|
const btn = card.querySelector("sl-icon-button[name='trash']");
|
|
if (btn) {
|
|
btn.addEventListener("click", (evt) => {
|
|
evt.preventDefault();
|
|
confirmDelete(
|
|
(card as HTMLElement).dataset.receiptId!,
|
|
amount,
|
|
date,
|
|
vendor,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
|
|
dlgDelete
|
|
.querySelector("sl-button[aria-label='No']")!
|
|
.addEventListener("click", () => {
|
|
dlgDelete.hide();
|
|
});
|
|
|
|
dlgDelete
|
|
.querySelector("sl-button[aria-label='Yes']")!
|
|
.addEventListener("click", async () => {
|
|
dlgDelete.hide();
|
|
const receiptId = dlgDelete.querySelector(".receipt-id")?.textContent;
|
|
if (receiptId) {
|
|
const success = await deleteReceipt(receiptId);
|
|
if (success) {
|
|
const card = document.querySelector(
|
|
`sl-card[data-receipt-id="${receiptId}"]`,
|
|
) as HTMLElement;
|
|
card.style.opacity = "0";
|
|
setTimeout(() => {
|
|
card.remove();
|
|
}, 1000);
|
|
}
|
|
}
|
|
});
|