theis.gaedigk/ca-lose
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Merge branch 'dev' into prod

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-20 10:39:43 +02:00
parent 5c43b817a7 f32931ded3
commit 43f8e00968
9 changed files with 133 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitmodules
+3
View File
@@ -0,0 +1,3 @@
[submodule "wg-easy-ca-lose"]
path = wg-easy-ca-lose
url = https://git.the1s.de/theis.gaedigk/wg-easy-ca-lose.git
frontend/src/components/modals/QR-CodeModal.tsx
+31
View File
@@ -0,0 +1,31 @@
import { Modal, ModalDialog, Typography, ModalClose } from "@mui/joy";
import { useTranslation } from "react-i18next";
import qrCode from "../../assets/PayPal-QR-Code.png";
interface QRcodeModalProps {
QRmodal: boolean;
setQRmodal: (value: boolean) => void;
}
export const QRcodeModal = (props: QRcodeModalProps) => {
const { t } = useTranslation();
return (
<Modal open={props.QRmodal}>
<ModalDialog color="primary" layout="center" size="lg">
<ModalClose onClick={() => props.setQRmodal(false)} />
<Typography>{t("qr-text")}</Typography>
<img
src={qrCode}
alt="PayPal QR Code"
style={{
width: "100%",
height: "auto",
maxHeight: "70vh",
objectFit: "contain",
}}
/>
</ModalDialog>
</Modal>
);
};
frontend/src/components/modals/SelectUserModal.tsx
+40
View File
@@ -0,0 +1,40 @@
import {
Modal,
ModalDialog,
Typography,
ModalClose,
Autocomplete,
} from "@mui/joy";
import { useTranslation } from "react-i18next";
interface SelectUserModalProps {
showSelectUser: boolean;
setShowSelectUser: (value: boolean) => void;
usernameData: { users: string[] };
usernameDataIsLoading: boolean;
selectedUser: string | null;
handleUserSelection: (value: string | null) => void;
}
export const SelectUserModal = (props: SelectUserModalProps) => {
const { t } = useTranslation();
return (
<Modal open={props.showSelectUser}>
<ModalDialog color="primary" layout="center" size="lg">
<ModalClose onClick={() => props.setShowSelectUser(false)} />
<Typography>{t("user")}</Typography>
{/* User selection */}
<Autocomplete
options={props.usernameData?.users ?? []}
loading={props.usernameDataIsLoading}
loadingText={t("loading")}
value={props.selectedUser}
onChange={(_, value) => props.handleUserSelection(value)}
placeholder={t("user")}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
</ModalDialog>
</Modal>
);
};
frontend/src/pages/MainForm.tsx
+42 -73
View File
@@ -13,11 +13,7 @@ import {
Typography,
FormControl,
FormLabel,
Autocomplete,
ButtonGroup,
Modal,
ModalDialog,
ModalClose,
CircularProgress,
} from "@mui/joy";
import { submitFormData } from "../utils/api/form";
@@ -25,9 +21,10 @@ import type { FormData, Message } from "../config/interfaces.config";
import PersonIcon from "@mui/icons-material/Person";
import QrCodeIcon from "@mui/icons-material/QrCode";
import TranslateIcon from "@mui/icons-material/Translate";
import qrCode from "../assets/PayPal-QR-Code.png";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { confirmUser, fetchUsers } from "../utils/api/users";
import { QRcodeModal } from "../components/modals/QR-CodeModal";
import { SelectUserModal } from "../components/modals/SelectUserModal";
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
const PAYMENT_LABELS: Record<string, string> = {
@@ -88,8 +85,7 @@ export const MainForm = () => {
const [invoice, setInvoice] = useState(false);
const [msg, setMsg] = useState<Message | null>(null);
const [nextID, setNextID] = useState<number | null>(null);
const [selectedUser, setSelectedUser] = useState("");
const [selectedUser, setSelectedUser] = useState<string | null>(null);
const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
const [showSelectUser, setShowSelectUser] = useState(false);
const [QRmodal, setQRmodal] = useState(false);
@@ -102,6 +98,12 @@ export const MainForm = () => {
const savedUser = Cookies.get("selectedUser");
if (savedUser) {
setSelectedUser(savedUser);
} else {
setMsg({
type: "warning",
headline: t("set-username-headline"),
text: t("set-username-text"),
});
}
}, []);
@@ -110,43 +112,30 @@ export const MainForm = () => {
queryFn: fetchUsers,
});
const { data: userData, isSuccess: userDataIsSuccess } = useQuery({
const { data: userData } = useQuery({
queryKey: ["user", selectedUser],
enabled: !!selectedUser,
queryFn: () => confirmUser(selectedUser),
});
const {
mutate: mutateForm,
isSuccess: mutateFormIsSuccess,
isPending: mutateFormIsPending,
isError: mutateFormIsError,
} = useMutation({
const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
mutationFn: () => submitFormData(formData, selectedUser),
});
// Redirecting to success page if mutation was successful
useEffect(() => {
if (mutateFormIsSuccess) {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
}
if (mutateFormIsError) {
},
onError: () => {
queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
setMsg({
type: "danger",
headline: t("error"),
text: t("form-submission-failed"),
});
}
}, [mutateFormIsSuccess, mutateFormIsError]);
},
});
// Setting the nextID after a user is selected
useEffect(() => {
if (!userData) return;
setNextID(userData.nextID);
}, [userDataIsSuccess]);
const nextID = userData?.nextID ?? "N/A";
const handleUserSelection = (username: string | null) => {
if (username == null || username == "") {
@@ -174,50 +163,21 @@ export const MainForm = () => {
}
};
useEffect(() => {
if (formData.paymentMethod === "paypal") {
setQRmodal(true);
}
}, [formData.paymentMethod]);
// Shorthand so we don't repeat formData + onChange on every Field usage
const fieldProps = { formData, onChange: handleChange };
return (
<>
<Modal open={showSelectUser}>
<ModalDialog color="primary" layout="center" size="lg">
<ModalClose onClick={() => setShowSelectUser(false)} />
<Typography>{t("user")}</Typography>
{/* User selection */}
<Autocomplete
options={usernameData?.users ?? []}
loading={usernameDataIsLoading}
loadingText={t("loading")}
value={selectedUser}
onChange={(_, value) => handleUserSelection(value)}
placeholder={t("user")}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
</ModalDialog>
</Modal>
<Modal open={QRmodal}>
<ModalDialog color="primary" layout="center" size="lg">
<ModalClose onClick={() => setQRmodal(false)} />
<Typography>{t("qr-text")}</Typography>
<img
src={qrCode}
alt="PayPal QR Code"
style={{
width: "100%",
height: "auto",
maxHeight: "70vh",
objectFit: "contain",
}}
/>
</ModalDialog>
</Modal>
<SelectUserModal
showSelectUser={showSelectUser}
setShowSelectUser={setShowSelectUser}
usernameData={usernameData}
usernameDataIsLoading={usernameDataIsLoading}
selectedUser={selectedUser}
handleUserSelection={handleUserSelection}
/>
<QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
<div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
<Sheet
@@ -382,12 +342,15 @@ export const MainForm = () => {
formData.paymentMethod === method ? "solid" : "soft"
}
color="primary"
onClick={() =>
onClick={() => {
setFormData((prev) => ({
...prev,
paymentMethod: method,
}))
}
}));
if (method === "paypal") {
setQRmodal(true);
}
}}
sx={{
flex: 1,
minWidth: "90px",
@@ -442,10 +405,16 @@ export const MainForm = () => {
</Button>
)}
{/* Alert message */}
{/* Message */}
{msg && (
<Alert color={msg.type} sx={{ borderRadius: "12px" }}>
<strong>{msg.headline}:</strong> {msg.text}
<Alert
color={msg.type}
sx={{ flexDirection: "column", alignItems: "flex-start" }}
>
<Typography level="title-lg" sx={{ mb: 0.5 }}>
{msg.headline}
</Typography>
<Typography level="body-sm">{msg.text}</Typography>
</Alert>
)}
</form>
frontend/src/utils/api/form.ts
+5 -2
View File
@@ -1,10 +1,13 @@
import { API_BASE } from "../../config/api.config";
import type { FormData } from "../../config/interfaces.config";
export const submitFormData = async (data: FormData, username: string) => {
export const submitFormData = async (
data: FormData,
username: string | null,
) => {
console.warn("submitFormData is fetching!");
await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
// await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
const response = await fetch(
`${API_BASE}/default/new-entry?username=${username}`,
frontend/src/utils/api/users.ts
+5 -1
View File
@@ -10,7 +10,11 @@ export const fetchUsers = async () => {
return data;
};
export const confirmUser = async (username: string) => {
export const confirmUser = async (username: string | null) => {
if (!username) {
return;
}
console.warn("confirmUser is fetching!");
const response = await fetch(
`${API_BASE}/default/confirm-user?username=${username}`,
frontend/src/utils/i18n/locales/de/de.json
+3 -1
View File
@@ -28,5 +28,7 @@
"return-to-homepage": "Zurück",
"qr-text": "PayPal QR-Code der Claudius Akademie",
"loading": "Lädt...",
"greeting": "Hallo,"
"greeting": "Hallo,",
"set-username-headline": "Keinen Benutzer ausgewählt",
"set-username-text": "Um mit dem Losverkauf zu beginnen, musst du einen Benutzer oben links auswählen."
}
frontend/src/utils/i18n/locales/en/en.json
+3 -1
View File
@@ -29,5 +29,7 @@
"return-to-homepage": "Return",
"qr-text": "PayPal QR-Code from the Claudius Akademie",
"loading": "Loading...",
"greeting": "Hello,"
"greeting": "Hello,",
"set-username-headline": "No user selected",
"set-username-text": "To start the ticket sale, you must select a user first from the top left."
}
wg-easy-ca-lose
Submodule
+1
Submodule wg-easy-ca-lose added at da90d67cc0