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

refactored code

Browse Source
This commit is contained in:
Theis Gaedigk
2026-05-24 13:26:52 +02:00
parent 1cd0379654
commit ccb09caa4f
4 changed files with 160 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/TextField.tsx
+31
View File
@@ -0,0 +1,31 @@
import type { TextFieldProps } from "../config/interfaces.config";
import { FormControl, FormLabel, Input } from "@mui/joy";
export const TextField = ({
label,
type = "text",
required,
errors,
value,
onBlur,
onChange,
slotProps,
afterInput,
}: TextFieldProps) => (
<FormControl required={required}>
<FormLabel>{label}</FormLabel>
<Input
value={value ?? ""}
onBlur={onBlur}
onChange={(e) => onChange(e.target.value)}
type={type}
variant="soft"
sx={{ borderRadius: "10px" }}
slotProps={slotProps}
/>
{afterInput}
{errors[0] ? (
<span className="text-red-500 text-sm">{errors[0]}</span>
) : null}
</FormControl>
);
frontend/src/config/interfaces.config.ts
+13
View File
@@ -1,5 +1,6 @@
import z from "zod";
import validator from "validator";
import type { ReactNode } from "react";
export interface FormData {
firstName: string;
@@ -23,6 +24,18 @@ export interface Message {
text: string;
}
export type TextFieldProps = {
label: string;
type?: "text" | "email" | "tel" | "number";
required?: boolean;
errors: string[];
onBlur: () => void;
onChange: (value: string) => void;
value: string | number | null | undefined;
slotProps?: { input?: Record<string, unknown> };
afterInput?: ReactNode;
};
export const createFormSchema = (
t: (key: string) => string,
invoice: boolean,
frontend/src/pages/MainForm.tsx
+82 -187
View File
@@ -28,6 +28,7 @@ import { useForm } from "@tanstack/react-form";
import { changeTranslation } from "../utils/uxFncs";
import { createFormSchema } from "../config/interfaces.config";
import type { ZodObject, ZodRawShape } from "zod";
import { TextField } from "../components/TextField";
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
const PAYMENT_LABELS: Record<string, string> = {
@@ -252,100 +253,64 @@ export const MainForm = () => {
name="firstName"
validators={makeFieldValidator("firstName")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("first-name")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("first-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="lastName"
validators={makeFieldValidator("lastName")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("last-name")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("last-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
</div>
<Field name="email" validators={makeFieldValidator("email")}>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
{(field) => (
<TextField
label={t("email")}
type="email"
sx={{ borderRadius: "10px" }}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="phoneNumber"
validators={makeFieldValidator("phoneNumber")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
{(field) => (
<TextField
label={t("phone-number")}
type="tel"
sx={{ borderRadius: "10px" }}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span>
)}
</FormControl>
);
}}
</Field>
{/* Tickets + Invoice toggle */}
@@ -414,26 +379,16 @@ export const MainForm = () => {
name="companyName"
validators={makeFieldValidator("companyName")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("company-name")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("company-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<div className="grid grid-cols-2 gap-3">
@@ -441,156 +396,96 @@ export const MainForm = () => {
name="cmpFirstName"
validators={makeFieldValidator("cmpFirstName")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("first-name")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("first-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="cpmLastName"
validators={makeFieldValidator("cpmLastName")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("last-name")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("last-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
</div>
<Field name="street" validators={makeFieldValidator("street")}>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("street")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("street")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="postalCode"
validators={makeFieldValidator("postalCode")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("postal-code")}</FormLabel>
<Input
value={field.state.value ?? ""}
{(field) => (
<TextField
label={t("postal-code")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="cpmPhoneNumber"
validators={makeFieldValidator("cpmPhoneNumber")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
{(field) => (
<TextField
label={t("phone-number")}
type="tel"
sx={{ borderRadius: "10px" }}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
<Field
name="cpmEmail"
validators={makeFieldValidator("cpmEmail")}
>
{(field) => {
const errors = getErrors(field);
return (
<FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
{(field) => (
<TextField
label={t("email")}
type="email"
sx={{ borderRadius: "10px" }}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
</Field>
</div>
)}
frontend/src/utils/i18n/locales/en/en.json
+1 -1
View File
@@ -33,6 +33,6 @@
"set-username-headline": "No user selected",
"set-username-text": "To start the ticket sale, you must select a user first from the top left.",
"name-error": "You have to enter a name!",
"email-error": "You have to enter a valid e-mail Adress!",
"email-error": "You have to enter a valid E-Mail adress!",
"phone-error": "You have to enter a vaild phone number!"
}