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/pages/MainForm.tsx
+115 -220
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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("first-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("last-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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"
type="email"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("email")}
type="email"
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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"
type="tel"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">{errors[0]}</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("phone-number")}
type="tel"
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("company-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("first-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("last-name")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("street")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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 ?? ""}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
variant="soft"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("postal-code")}
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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"
type="tel"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("phone-number")}
type="tel"
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</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"
type="email"
sx={{ borderRadius: "10px" }}
/>
{errors.length > 0 && (
<span className="text-red-500 text-sm">
{errors[0]}
</span>
)}
</FormControl>
);
}}
{(field) => (
<TextField
label={t("email")}
type="email"
required
value={field.state.value}
onBlur={field.handleBlur}
onChange={field.handleChange}
errors={getErrors(field)}
/>
)}
</Field>
</div>
)}