157 lines
4.1 KiB
TypeScript
157 lines
4.1 KiB
TypeScript
import { Button, TextInput, Stack, Group, Text, Flex, Divider, NumberInput } from "@mantine/core";
|
|
import { useForm } from "@mantine/form";
|
|
import { Match } from "@/features/matches/types";
|
|
|
|
interface MatchFormProps {
|
|
match: Match;
|
|
onSubmit: (data: {
|
|
home_cups: number;
|
|
away_cups: number;
|
|
ot_count: number;
|
|
}) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export const MatchForm: React.FC<MatchFormProps> = ({
|
|
match,
|
|
onSubmit,
|
|
onCancel,
|
|
}) => {
|
|
const form = useForm({
|
|
initialValues: {
|
|
home_cups: match.home_cups || 10,
|
|
away_cups: match.away_cups || 10,
|
|
ot_count: match.ot_count || 0,
|
|
},
|
|
validate: {
|
|
home_cups: (value, values) => {
|
|
if (value === null || value === undefined) return "Home cups is required";
|
|
if (values.ot_count > 0) return null;
|
|
|
|
const homeCups = Number(value);
|
|
const awayCups = Number(values.away_cups);
|
|
|
|
if (homeCups !== 10 && awayCups !== 10) {
|
|
return "At least one team must have 10 cups";
|
|
}
|
|
|
|
// Both teams can't have 10 cups
|
|
if (homeCups === 10 && awayCups === 10) {
|
|
return "Both teams cannot have 10 cups";
|
|
}
|
|
|
|
return null;
|
|
},
|
|
away_cups: (value, values) => {
|
|
if (value === null || value === undefined) return "Away cups is required";
|
|
if (values.ot_count > 0) return null;
|
|
|
|
const awayCups = Number(value);
|
|
const homeCups = Number(values.home_cups);
|
|
|
|
if (homeCups !== 10 && awayCups !== 10) {
|
|
return "At least one team must have 10 cups";
|
|
}
|
|
|
|
if (homeCups === 10 && awayCups === 10) {
|
|
return "Both teams cannot have 10 cups";
|
|
}
|
|
|
|
return null;
|
|
},
|
|
ot_count: (value) =>
|
|
value === null || value === undefined
|
|
? "Overtime count is required"
|
|
: null,
|
|
},
|
|
transformValues: (values) => ({
|
|
home_cups: Number(values.home_cups),
|
|
away_cups: Number(values.away_cups),
|
|
ot_count: Number(values.ot_count),
|
|
}),
|
|
});
|
|
|
|
const handleSubmit = form.onSubmit(() => {
|
|
const transformedValues = form.getTransformedValues();
|
|
onSubmit(transformedValues);
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<Stack gap="md">
|
|
<Flex mx='auto' direction='column' gap='md' miw={250}>
|
|
|
|
<Group gap="xs">
|
|
<Stack gap={0}>
|
|
<Text fw={500} size="sm">
|
|
{match.home?.name} Cups
|
|
</Text>
|
|
{
|
|
match.home?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
|
|
{p.first_name} {p.last_name}
|
|
</Text>))
|
|
}
|
|
</Stack>
|
|
<NumberInput
|
|
ml='auto'
|
|
min={0}
|
|
w={70}
|
|
ta="center"
|
|
key={form.key("home_cups")}
|
|
{...form.getInputProps("home_cups")}
|
|
/>
|
|
</Group>
|
|
|
|
<Divider />
|
|
|
|
<Group gap="xs">
|
|
<Stack gap={0}>
|
|
<Text fw={500} size="sm">
|
|
{match.away?.name} Cups
|
|
</Text>
|
|
{
|
|
match.away?.players?.map(p => (<Text key={p.id} size='xs' c='dimmed'>
|
|
{p.first_name} {p.last_name}
|
|
</Text>))
|
|
}
|
|
</Stack>
|
|
<NumberInput
|
|
ml='auto'
|
|
ta="center"
|
|
w={70}
|
|
min={0}
|
|
key={form.key("away_cups")}
|
|
{...form.getInputProps("away_cups")}
|
|
/>
|
|
</Group>
|
|
|
|
<Divider />
|
|
|
|
<Group gap="xs">
|
|
<Text fw={500} size="sm">
|
|
OT Count
|
|
</Text>
|
|
<TextInput
|
|
ml='auto'
|
|
ta="center"
|
|
w={50}
|
|
type="number"
|
|
min={0}
|
|
key={form.key("ot_count")}
|
|
{...form.getInputProps("ot_count")}
|
|
/>
|
|
</Group>
|
|
|
|
</Flex>
|
|
|
|
<Stack mt="md">
|
|
<Button type="submit">Update Match</Button>
|
|
<Button variant="subtle" color="red" onClick={onCancel}>
|
|
Cancel
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
};
|