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 z from "zod";
import validator from "validator"; import validator from "validator";
import type { ReactNode } from "react";
export interface FormData { export interface FormData {
firstName: string; firstName: string;
@@ -23,6 +24,18 @@ export interface Message {
text: string; 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 = ( export const createFormSchema = (
t: (key: string) => string, t: (key: string) => string,
invoice: boolean, 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 { changeTranslation } from "../utils/uxFncs";
import { createFormSchema } from "../config/interfaces.config"; import { createFormSchema } from "../config/interfaces.config";
import type { ZodObject, ZodRawShape } from "zod"; import type { ZodObject, ZodRawShape } from "zod";
import { TextField } from "../components/TextField";
const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const; const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
const PAYMENT_LABELS: Record<string, string> = { const PAYMENT_LABELS: Record<string, string> = {
@@ -252,100 +253,64 @@ export const MainForm = () => {
name="firstName" name="firstName"
validators={makeFieldValidator("firstName")} validators={makeFieldValidator("firstName")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("first-name")}
<FormControl required> required
<FormLabel>{t("first-name")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
<Field <Field
name="lastName" name="lastName"
validators={makeFieldValidator("lastName")} validators={makeFieldValidator("lastName")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("last-name")}
<FormControl required> required
<FormLabel>{t("last-name")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
</div> </div>
<Field name="email" validators={makeFieldValidator("email")}> <Field name="email" validators={makeFieldValidator("email")}>
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("email")}
<FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
type="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>
<Field <Field
name="phoneNumber" name="phoneNumber"
validators={makeFieldValidator("phoneNumber")} validators={makeFieldValidator("phoneNumber")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("phone-number")}
<FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
type="tel" 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>
{/* Tickets + Invoice toggle */} {/* Tickets + Invoice toggle */}
@@ -414,26 +379,16 @@ export const MainForm = () => {
name="companyName" name="companyName"
validators={makeFieldValidator("companyName")} validators={makeFieldValidator("companyName")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("company-name")}
<FormControl required> required
<FormLabel>{t("company-name")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
@@ -441,156 +396,96 @@ export const MainForm = () => {
name="cmpFirstName" name="cmpFirstName"
validators={makeFieldValidator("cmpFirstName")} validators={makeFieldValidator("cmpFirstName")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("first-name")}
<FormControl required> required
<FormLabel>{t("first-name")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
<Field <Field
name="cpmLastName" name="cpmLastName"
validators={makeFieldValidator("cpmLastName")} validators={makeFieldValidator("cpmLastName")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("last-name")}
<FormControl required> required
<FormLabel>{t("last-name")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
</div> </div>
<Field name="street" validators={makeFieldValidator("street")}> <Field name="street" validators={makeFieldValidator("street")}>
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("street")}
<FormControl required> required
<FormLabel>{t("street")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
<Field <Field
name="postalCode" name="postalCode"
validators={makeFieldValidator("postalCode")} validators={makeFieldValidator("postalCode")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("postal-code")}
<FormControl required> required
<FormLabel>{t("postal-code")}</FormLabel> value={field.state.value}
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={field.handleChange}
variant="soft" errors={getErrors(field)}
sx={{ borderRadius: "10px" }}
/> />
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)} )}
</FormControl>
);
}}
</Field> </Field>
<Field <Field
name="cpmPhoneNumber" name="cpmPhoneNumber"
validators={makeFieldValidator("cpmPhoneNumber")} validators={makeFieldValidator("cpmPhoneNumber")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("phone-number")}
<FormControl required>
<FormLabel>{t("phone-number")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
type="tel" 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>
<Field <Field
name="cpmEmail" name="cpmEmail"
validators={makeFieldValidator("cpmEmail")} validators={makeFieldValidator("cpmEmail")}
> >
{(field) => { {(field) => (
const errors = getErrors(field); <TextField
return ( label={t("email")}
<FormControl required>
<FormLabel>{t("email")}</FormLabel>
<Input
value={field.state.value ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
type="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>
</div> </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-headline": "No user selected",
"set-username-text": "To start the ticket sale, you must select a user first from the top left.", "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!", "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!" "phone-error": "You have to enter a vaild phone number!"
} }