mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-11 12:29:24 +00:00
refactor eboutic command page
This commit is contained in:
@ -1,56 +1,61 @@
|
||||
/**
|
||||
* @readonly
|
||||
* @enum {number}
|
||||
*/
|
||||
const BillingInfoReqState = {
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
SUCCESS: 1,
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
FAILURE: 2,
|
||||
// biome-ignore lint/style/useNamingConvention: this feels more like an enum
|
||||
SENDING: 3,
|
||||
};
|
||||
import { exportToHtml } from "#core:utils/globals";
|
||||
import {
|
||||
type BillingInfoSchema,
|
||||
etransactioninfoFetchEtransactionData,
|
||||
etransactioninfoPutUserBillingInfo,
|
||||
} from "#openapi";
|
||||
|
||||
enum BillingInfoReqState {
|
||||
Success = "0",
|
||||
Failure = "1",
|
||||
Sending = "2",
|
||||
}
|
||||
|
||||
exportToHtml("BillingInfoReqState", BillingInfoReqState);
|
||||
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.store("billing_inputs", {
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in eboutic_makecommand.jinja
|
||||
data: etData,
|
||||
Alpine.data("etransactionData", (initialData) => ({
|
||||
data: initialData,
|
||||
|
||||
async fill() {
|
||||
const button = document.getElementById("bank-submit-button") as HTMLButtonElement;
|
||||
button.disabled = true;
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in eboutic_makecommand.jinja
|
||||
const res = await fetch(etDataUrl);
|
||||
if (res.ok) {
|
||||
this.data = await res.json();
|
||||
const res = await etransactioninfoFetchEtransactionData();
|
||||
if (res.response.ok) {
|
||||
this.data = res.data;
|
||||
button.disabled = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
Alpine.data("billing_infos", () => ({
|
||||
Alpine.data("billing_infos", (userId: number) => ({
|
||||
/** @type {BillingInfoReqState | null} */
|
||||
reqState: null,
|
||||
|
||||
async sendForm() {
|
||||
this.reqState = BillingInfoReqState.SENDING;
|
||||
this.reqState = BillingInfoReqState.Sending;
|
||||
const form = document.getElementById("billing_info_form");
|
||||
document.getElementById("bank-submit-button").disabled = true;
|
||||
const submitButton = document.getElementById(
|
||||
"bank-submit-button",
|
||||
) as HTMLButtonElement;
|
||||
submitButton.disabled = true;
|
||||
const payload = Object.fromEntries(
|
||||
Array.from(form.querySelectorAll("input, select"))
|
||||
.filter((elem) => elem.type !== "submit" && elem.value)
|
||||
.map((elem) => [elem.name, elem.value]),
|
||||
.filter((elem: HTMLInputElement) => elem.type !== "submit" && elem.value)
|
||||
.map((elem: HTMLInputElement) => [elem.name, elem.value]),
|
||||
);
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in eboutic_makecommand.jinja
|
||||
const res = await fetch(billingInfoUrl, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(payload),
|
||||
const res = await etransactioninfoPutUserBillingInfo({
|
||||
// biome-ignore lint/style/useNamingConvention: API is snake_case
|
||||
path: { user_id: userId },
|
||||
body: payload as unknown as BillingInfoSchema,
|
||||
});
|
||||
this.reqState = res.ok
|
||||
? BillingInfoReqState.SUCCESS
|
||||
: BillingInfoReqState.FAILURE;
|
||||
if (res.status === 422) {
|
||||
const errors = (await res.json()).detail.flatMap((err) => err.loc);
|
||||
this.reqState = res.response.ok
|
||||
? BillingInfoReqState.Success
|
||||
: BillingInfoReqState.Failure;
|
||||
if (res.response.status === 422) {
|
||||
const errors = await res.response
|
||||
.json()
|
||||
.detail.flatMap((err: Record<"loc", string>) => err.loc);
|
||||
for (const elem of Array.from(form.querySelectorAll("input")).filter((elem) =>
|
||||
errors.includes(elem.name),
|
||||
)) {
|
||||
@ -58,29 +63,27 @@ document.addEventListener("alpine:init", () => {
|
||||
elem.reportValidity();
|
||||
elem.oninput = () => elem.setCustomValidity("");
|
||||
}
|
||||
} else if (res.ok) {
|
||||
Alpine.store("billing_inputs").fill();
|
||||
} else if (res.response.ok) {
|
||||
this.$dispatch("billing-infos-filled");
|
||||
}
|
||||
},
|
||||
|
||||
getAlertColor() {
|
||||
if (this.reqState === BillingInfoReqState.SUCCESS) {
|
||||
if (this.reqState === BillingInfoReqState.Success) {
|
||||
return "green";
|
||||
}
|
||||
if (this.reqState === BillingInfoReqState.FAILURE) {
|
||||
if (this.reqState === BillingInfoReqState.Failure) {
|
||||
return "red";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
|
||||
getAlertMessage() {
|
||||
if (this.reqState === BillingInfoReqState.SUCCESS) {
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in eboutic_makecommand.jinja
|
||||
return billingInfoSuccessMessage;
|
||||
if (this.reqState === BillingInfoReqState.Success) {
|
||||
return gettext("Billing info registration success");
|
||||
}
|
||||
if (this.reqState === BillingInfoReqState.FAILURE) {
|
||||
// biome-ignore lint/correctness/noUndeclaredVariables: defined in eboutic_makecommand.jinja
|
||||
return billingInfoFailureMessage;
|
||||
if (this.reqState === BillingInfoReqState.Failure) {
|
||||
return gettext("Billing info registration failure");
|
||||
}
|
||||
return "";
|
||||
},
|
||||
|
@ -158,4 +158,3 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user