feat: add draft board link visibility for all season statuses
This commit is contained in:
Chris Parsons
parent
6c5c9f709b
commit
cf90bf52ec
1 changed files with 78 additions and 56 deletions
|
|
@ -38,7 +38,9 @@ export async function loader(args: Route.LoaderArgs) {
|
||||||
|
|
||||||
// Fetch current season with sports
|
// Fetch current season with sports
|
||||||
const season = await findCurrentSeason(leagueId);
|
const season = await findCurrentSeason(leagueId);
|
||||||
const seasonWithSports = season ? await findSeasonWithSportsSeasons(season.id) : null;
|
const seasonWithSports = season
|
||||||
|
? await findSeasonWithSportsSeasons(season.id)
|
||||||
|
: null;
|
||||||
|
|
||||||
// Fetch commissioners
|
// Fetch commissioners
|
||||||
const commissioners = await findCommissionersByLeagueId(leagueId);
|
const commissioners = await findCommissionersByLeagueId(leagueId);
|
||||||
|
|
@ -71,9 +73,10 @@ export async function loader(args: Route.LoaderArgs) {
|
||||||
const teams = season ? await findTeamsBySeasonId(season.id) : [];
|
const teams = season ? await findTeamsBySeasonId(season.id) : [];
|
||||||
|
|
||||||
// Fetch draft slots if season is in pre_draft or draft status
|
// Fetch draft slots if season is in pre_draft or draft status
|
||||||
const draftSlots = season && (season.status === "pre_draft" || season.status === "draft")
|
const draftSlots =
|
||||||
? await findDraftSlotsBySeasonId(season.id)
|
season && (season.status === "pre_draft" || season.status === "draft")
|
||||||
: [];
|
? await findDraftSlotsBySeasonId(season.id)
|
||||||
|
: [];
|
||||||
|
|
||||||
// Fetch user data for team owners
|
// Fetch user data for team owners
|
||||||
const ownerIds = teams
|
const ownerIds = teams
|
||||||
|
|
@ -297,45 +300,58 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
|
||||||
{/* Right Column - 1/3 width on desktop */}
|
{/* Right Column - 1/3 width on desktop */}
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Draft Order Display - Only show during pre_draft and draft */}
|
{/* Draft Order Display - Only show during pre_draft and draft */}
|
||||||
{season && (season.status === "pre_draft" || season.status === "draft") && draftSlots.length > 0 && (
|
{season &&
|
||||||
<Card>
|
(season.status === "pre_draft" || season.status === "draft") &&
|
||||||
<CardHeader>
|
draftSlots.length > 0 && (
|
||||||
<div className="flex items-center justify-between">
|
<Card>
|
||||||
<div>
|
<CardHeader>
|
||||||
<CardTitle>Draft Order</CardTitle>
|
<div className="flex items-center justify-between">
|
||||||
<CardDescription>
|
<div>
|
||||||
{season.status === "pre_draft" ? "Upcoming draft order" : "Current draft order"}
|
<CardTitle>Draft Order</CardTitle>
|
||||||
</CardDescription>
|
<CardDescription>
|
||||||
|
{season.status === "pre_draft"
|
||||||
|
? "Upcoming draft order"
|
||||||
|
: "Current draft order"}
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button asChild size="sm">
|
||||||
|
<Link to={`/leagues/${league.id}/draft/${season.id}`}>
|
||||||
|
Enter Draft Room
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Button asChild size="sm">
|
</CardHeader>
|
||||||
<Link to={`/leagues/${league.id}/draft/${season.id}`}>
|
<CardContent>
|
||||||
Enter Draft Room
|
<div className="space-y-2">
|
||||||
</Link>
|
{draftSlots.map((slot: any, index: number) => {
|
||||||
</Button>
|
const ownerName = slot.team.ownerId
|
||||||
</div>
|
? ownerMap[slot.team.ownerId]
|
||||||
</CardHeader>
|
: null;
|
||||||
<CardContent>
|
return (
|
||||||
<div className="space-y-2">
|
<div
|
||||||
{draftSlots.map((slot: any, index: number) => {
|
key={slot.id}
|
||||||
const ownerName = slot.team.ownerId ? ownerMap[slot.team.ownerId] : null;
|
className="flex items-center gap-3 py-2 border-b last:border-0"
|
||||||
return (
|
>
|
||||||
<div key={slot.id} className="flex items-center gap-3 py-2 border-b last:border-0">
|
<div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
|
||||||
<div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground font-bold text-xs">
|
{index + 1}
|
||||||
{index + 1}
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="font-medium text-sm truncate">
|
||||||
|
{slot.team.name}
|
||||||
|
</p>
|
||||||
|
{ownerName && (
|
||||||
|
<p className="text-xs text-muted-foreground truncate">
|
||||||
|
{ownerName}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
);
|
||||||
<p className="font-medium text-sm truncate">{slot.team.name}</p>
|
})}
|
||||||
{ownerName && (
|
</div>
|
||||||
<p className="text-xs text-muted-foreground truncate">{ownerName}</p>
|
</CardContent>
|
||||||
)}
|
</Card>
|
||||||
</div>
|
)}
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
|
@ -351,30 +367,34 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
|
||||||
{season && (
|
{season && (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted-foreground">Season Status</p>
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Season Status
|
||||||
|
</p>
|
||||||
<p className="font-medium capitalize">
|
<p className="font-medium capitalize">
|
||||||
{season.status.replace("_", " ")}
|
{season.status.replace("_", " ")}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted-foreground">Draft Rounds</p>
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Draft Rounds
|
||||||
|
</p>
|
||||||
<p className="font-medium">{season.draftRounds}</p>
|
<p className="font-medium">{season.draftRounds}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted-foreground">Sports Selected</p>
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Sports Selected
|
||||||
|
</p>
|
||||||
<p className="font-medium">{sportsCount}</p>
|
<p className="font-medium">{sportsCount}</p>
|
||||||
</div>
|
</div>
|
||||||
{(season.status === "active" || season.status === "completed") && (
|
<div>
|
||||||
<div>
|
<p className="text-sm text-muted-foreground">Draft Board</p>
|
||||||
<p className="text-sm text-muted-foreground">Draft Board</p>
|
<Link
|
||||||
<Link
|
to={`/leagues/${league.id}/draft-board/${season.id}`}
|
||||||
to={`/leagues/${league.id}/draft-board/${season.id}`}
|
className="text-blue-600 hover:underline font-medium"
|
||||||
className="text-blue-600 hover:underline font-medium"
|
>
|
||||||
>
|
View Draft Board
|
||||||
View Draft Board
|
</Link>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted-foreground">Flex Spots</p>
|
<p className="text-sm text-muted-foreground">Flex Spots</p>
|
||||||
<p className="font-medium text-primary">
|
<p className="font-medium text-primary">
|
||||||
|
|
@ -383,7 +403,9 @@ export default function LeagueHome({ loaderData }: Route.ComponentProps) {
|
||||||
</div>
|
</div>
|
||||||
{season.draftDateTime && (
|
{season.draftDateTime && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-muted-foreground">Draft Date</p>
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Draft Date
|
||||||
|
</p>
|
||||||
<p className="font-medium">
|
<p className="font-medium">
|
||||||
{format(new Date(season.draftDateTime), "PPP 'at' p")}
|
{format(new Date(season.draftDateTime), "PPP 'at' p")}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue