work on team enrollment
This commit is contained in:
yohlo
268
src/features/teams/components/team-form/index.tsx
Normal file
268
src/features/teams/components/team-form/index.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import { Badge, FileInput, Group, Stack, Text, TextInput } from "@mantine/core";
|
||||
import { useForm, UseFormInput } from "@mantine/form";
|
||||
import { LinkIcon } from "@phosphor-icons/react";
|
||||
import SlidePanel, { SlidePanelField } from "@/components/sheet/slide-panel";
|
||||
import { isNotEmpty } from "@mantine/form";
|
||||
import useCreateTeam from "../../hooks/use-create-team";
|
||||
import useUpdateTeam from "../../hooks/use-update-team";
|
||||
import toast from "@/lib/sonner";
|
||||
import { logger } from "../..";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { tournamentKeys } from "@/features/tournaments/queries";
|
||||
import { useCallback } from "react";
|
||||
import { TeamInput } from "../../types";
|
||||
import { teamKeys } from "../../queries";
|
||||
import SongPicker from "./song-picker";
|
||||
import TeamColorPicker from "./color-picker";
|
||||
import PlayersPicker from "./players-picker";
|
||||
|
||||
interface TeamFormProps {
|
||||
close: () => void;
|
||||
initialValues?: Partial<TeamInput>;
|
||||
teamId?: string;
|
||||
tournamentId?: string;
|
||||
}
|
||||
|
||||
const TeamForm = ({
|
||||
close,
|
||||
initialValues,
|
||||
teamId,
|
||||
tournamentId,
|
||||
}: TeamFormProps) => {
|
||||
const isEditMode = !!teamId;
|
||||
|
||||
const config: UseFormInput<TeamInput> = {
|
||||
initialValues: {
|
||||
name: initialValues?.name || "",
|
||||
primary_color: initialValues?.primary_color,
|
||||
accent_color: initialValues?.accent_color,
|
||||
song_id: initialValues?.song_id,
|
||||
song_name: initialValues?.song_name,
|
||||
song_artist: initialValues?.song_artist,
|
||||
song_album: initialValues?.song_album,
|
||||
song_year: initialValues?.song_year,
|
||||
song_start: initialValues?.song_start,
|
||||
song_end: initialValues?.song_end,
|
||||
song_image_url: initialValues?.song_image_url,
|
||||
logo: undefined,
|
||||
players: initialValues?.players || []
|
||||
},
|
||||
onSubmitPreventDefault: "always",
|
||||
validate: {
|
||||
name: isNotEmpty("Name is required"),
|
||||
players: (value: string[]) => value.length > 1 && value[1] !== '' ? undefined : "Players are required"
|
||||
},
|
||||
};
|
||||
|
||||
const form = useForm(config);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate: createTournament, isPending: createPending } = useCreateTeam();
|
||||
const { mutate: updateTournament, isPending: updatePending } = useUpdateTeam(teamId!);
|
||||
|
||||
const isPending = createPending || updatePending;
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (values: TeamInput) => {
|
||||
const { logo, ...teamData } = values;
|
||||
|
||||
const mutation = isEditMode ? updateTournament : createTournament;
|
||||
const successMessage = isEditMode
|
||||
? "Team updated successfully!"
|
||||
: "Team created successfully!";
|
||||
const errorMessage = isEditMode
|
||||
? "Failed to update team"
|
||||
: "Failed to create team";
|
||||
|
||||
mutation(teamData, {
|
||||
onSuccess: async (team) => {
|
||||
if (logo && team) {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("teamId", team.id);
|
||||
formData.append("logo", logo);
|
||||
|
||||
const response = await fetch("/api/teams/upload-logo", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || "Failed to upload logo");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: teamKeys.list });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: teamKeys.details(result.team!.id),
|
||||
});
|
||||
queryClient.setQueryData(
|
||||
tournamentKeys.details(result.team!.id),
|
||||
result.team
|
||||
);
|
||||
|
||||
toast.success(successMessage);
|
||||
} catch (error: any) {
|
||||
const logoErrorMessage = isEditMode
|
||||
? `Team updated but logo upload failed: ${error.message}`
|
||||
: `Team created but logo upload failed: ${error.message}`;
|
||||
toast.error(logoErrorMessage);
|
||||
logger.error("Team logo upload error", error);
|
||||
}
|
||||
} else {
|
||||
toast.success(successMessage);
|
||||
}
|
||||
close();
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(`${errorMessage}: ${error.message}`);
|
||||
logger.error(
|
||||
`Team ${isEditMode ? "update" : "create"} error`,
|
||||
error
|
||||
);
|
||||
},
|
||||
});
|
||||
},
|
||||
[isEditMode, createTournament, updateTournament, queryClient]
|
||||
);
|
||||
|
||||
return (
|
||||
<SlidePanel
|
||||
onSubmit={form.onSubmit((values) => console.log(values))}
|
||||
onCancel={close}
|
||||
submitText={isEditMode ? "Update Team" : "Create Team"}
|
||||
cancelText="Cancel"
|
||||
loading={isPending}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label="Name"
|
||||
withAsterisk
|
||||
key={form.key("name")}
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
<FileInput
|
||||
key={form.key("logo")}
|
||||
accept="image/png,image/jpeg,image/gif,image/jpg"
|
||||
label={isEditMode ? "Change Logo" : "Logo"}
|
||||
leftSection={<LinkIcon size={16} />}
|
||||
{...form.getInputProps("logo")}
|
||||
/>
|
||||
|
||||
{
|
||||
tournamentId && (
|
||||
<PlayersPicker
|
||||
tournamentId={tournamentId}
|
||||
key={form.key("players")}
|
||||
{...form.getInputProps("players")}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
<SlidePanelField
|
||||
key={form.key("primary_color")}
|
||||
{...form.getInputProps("primary_color")}
|
||||
Component={TeamColorPicker}
|
||||
title="Select Primary Color"
|
||||
placeholder="Select Primary Color"
|
||||
label="Primary Color"
|
||||
formatValue={(value) => (
|
||||
<Group>
|
||||
<Badge variant="filled" radius="sm" color={value} />
|
||||
{value}
|
||||
</Group>
|
||||
)}
|
||||
/>
|
||||
|
||||
<SlidePanelField
|
||||
key={form.key("accent_color")}
|
||||
{...form.getInputProps("accent_color")}
|
||||
Component={TeamColorPicker}
|
||||
title="Select Accent Color"
|
||||
placeholder="Select Accent Color"
|
||||
label="Accent Color"
|
||||
formatValue={(value) => (
|
||||
<Group>
|
||||
<Badge variant="filled" radius="sm" color={value} />
|
||||
{value}
|
||||
</Group>
|
||||
)}
|
||||
/>
|
||||
|
||||
<SongPicker form={form} />
|
||||
|
||||
|
||||
{/*
|
||||
<SlidePanelField
|
||||
key={form.key("start_time")}
|
||||
{...form.getInputProps("start_time")}
|
||||
Component={DateTimePicker}
|
||||
title="Select Start Date"
|
||||
label="Start Date"
|
||||
withAsterisk
|
||||
formatValue={(date) =>
|
||||
!date ? 'Select a time' :
|
||||
new Date(date).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<SlidePanelField
|
||||
key={form.key("enroll_time")}
|
||||
{...form.getInputProps("enroll_time")}
|
||||
Component={DateTimePicker}
|
||||
title="Select Enrollment Due Date"
|
||||
label="Enrollment Due"
|
||||
withAsterisk
|
||||
formatValue={(date) =>
|
||||
!date ? 'Select a time' :
|
||||
new Date(date).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{isEditMode && (
|
||||
<SlidePanelField
|
||||
key={form.key("end_time")}
|
||||
{...form.getInputProps("end_time")}
|
||||
Component={DateTimePicker}
|
||||
title="Select End Date"
|
||||
label="End Date (Optional)"
|
||||
formatValue={(date) =>
|
||||
!date ? 'Select a time' :
|
||||
new Date(date).toLocaleDateString("en-US", {
|
||||
weekday: "short",
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
*/}
|
||||
</Stack>
|
||||
</SlidePanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamForm;
|
||||
Reference in New Issue
Block a user