331 lines
11 KiB
TypeScript
331 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import Card from '@/components/ui/Card';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import type { LeagueAdminScheduleViewModel } from '@/lib/view-models/LeagueAdminScheduleViewModel';
|
|
import type { LeagueSeasonSummaryViewModel } from '@/lib/view-models/LeagueSeasonSummaryViewModel';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
|
|
import { useParams } from 'next/navigation';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
|
|
export default function LeagueAdminSchedulePage() {
|
|
const params = useParams();
|
|
const leagueId = params.id as string;
|
|
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const { leagueService, leagueMembershipService } = useServices();
|
|
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [membershipLoading, setMembershipLoading] = useState(true);
|
|
|
|
const [seasons, setSeasons] = useState<LeagueSeasonSummaryViewModel[]>([]);
|
|
const [seasonId, setSeasonId] = useState<string>('');
|
|
|
|
const [schedule, setSchedule] = useState<LeagueAdminScheduleViewModel | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [track, setTrack] = useState('');
|
|
const [car, setCar] = useState('');
|
|
const [scheduledAtIso, setScheduledAtIso] = useState('');
|
|
|
|
const [editingRaceId, setEditingRaceId] = useState<string | null>(null);
|
|
const isEditing = editingRaceId !== null;
|
|
|
|
const publishedLabel = schedule?.published ? 'Published' : 'Unpublished';
|
|
|
|
const selectedSeasonLabel = useMemo(() => {
|
|
const selected = seasons.find((s) => s.seasonId === seasonId);
|
|
return selected?.name ?? seasonId;
|
|
}, [seasons, seasonId]);
|
|
|
|
const loadSchedule = async (leagueIdToLoad: string, seasonIdToLoad: string) => {
|
|
setLoading(true);
|
|
try {
|
|
const vm = await leagueService.getAdminSchedule(leagueIdToLoad, seasonIdToLoad);
|
|
setSchedule(vm);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function checkAdmin() {
|
|
setMembershipLoading(true);
|
|
try {
|
|
await leagueMembershipService.fetchLeagueMemberships(leagueId);
|
|
} finally {
|
|
const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
|
|
setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
|
|
setMembershipLoading(false);
|
|
}
|
|
}
|
|
|
|
checkAdmin();
|
|
}, [leagueId, currentDriverId, leagueMembershipService]);
|
|
|
|
useEffect(() => {
|
|
async function loadSeasons() {
|
|
const loaded = await leagueService.getLeagueSeasonSummaries(leagueId);
|
|
setSeasons(loaded);
|
|
|
|
if (loaded.length > 0) {
|
|
const active = loaded.find((s) => s.status === 'active') ?? loaded[0];
|
|
setSeasonId(active?.seasonId ?? '');
|
|
}
|
|
}
|
|
|
|
if (isAdmin) {
|
|
loadSeasons();
|
|
}
|
|
}, [leagueId, isAdmin, leagueService]);
|
|
|
|
useEffect(() => {
|
|
if (!isAdmin) return;
|
|
if (!seasonId) return;
|
|
|
|
loadSchedule(leagueId, seasonId);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [leagueId, seasonId, isAdmin]);
|
|
|
|
const handlePublishToggle = async () => {
|
|
if (!schedule) return;
|
|
|
|
if (schedule.published) {
|
|
const vm = await leagueService.unpublishAdminSchedule(leagueId, seasonId);
|
|
setSchedule(vm);
|
|
return;
|
|
}
|
|
|
|
const vm = await leagueService.publishAdminSchedule(leagueId, seasonId);
|
|
setSchedule(vm);
|
|
};
|
|
|
|
const handleAddOrSave = async () => {
|
|
if (!seasonId) return;
|
|
|
|
if (!scheduledAtIso) return;
|
|
|
|
if (!isEditing) {
|
|
const vm = await leagueService.createAdminScheduleRace(leagueId, seasonId, {
|
|
track,
|
|
car,
|
|
scheduledAtIso,
|
|
});
|
|
setSchedule(vm);
|
|
|
|
setTrack('');
|
|
setCar('');
|
|
setScheduledAtIso('');
|
|
return;
|
|
}
|
|
|
|
const vm = await leagueService.updateAdminScheduleRace(leagueId, seasonId, editingRaceId, {
|
|
...(track ? { track } : {}),
|
|
...(car ? { car } : {}),
|
|
...(scheduledAtIso ? { scheduledAtIso } : {}),
|
|
});
|
|
|
|
setSchedule(vm);
|
|
setEditingRaceId(null);
|
|
};
|
|
|
|
const handleEdit = (raceId: string) => {
|
|
if (!schedule) return;
|
|
|
|
const race = schedule.races.find((r) => r.id === raceId);
|
|
if (!race) return;
|
|
|
|
setEditingRaceId(raceId);
|
|
setTrack('');
|
|
setCar('');
|
|
setScheduledAtIso(race.scheduledAt.toISOString());
|
|
};
|
|
|
|
const handleDelete = async (raceId: string) => {
|
|
const confirmed = window.confirm('Delete this race?');
|
|
if (!confirmed) return;
|
|
|
|
const vm = await leagueService.deleteAdminScheduleRace(leagueId, seasonId, raceId);
|
|
setSchedule(vm);
|
|
};
|
|
|
|
if (membershipLoading) {
|
|
return (
|
|
<Card>
|
|
<div className="py-6 text-sm text-gray-400">Loading…</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (!isAdmin) {
|
|
return (
|
|
<Card>
|
|
<div className="text-center py-12">
|
|
<h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
|
|
<p className="text-sm text-gray-400">Only league admins can manage the schedule.</p>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Schedule Admin</h1>
|
|
<p className="text-sm text-gray-400">Create, edit, and publish season races.</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm text-gray-300" htmlFor="seasonId">
|
|
Season
|
|
</label>
|
|
{seasons.length > 0 ? (
|
|
<select
|
|
id="seasonId"
|
|
value={seasonId}
|
|
onChange={(e) => setSeasonId(e.target.value)}
|
|
className="bg-iron-gray text-white px-3 py-2 rounded"
|
|
>
|
|
{seasons.map((s) => (
|
|
<option key={s.seasonId} value={s.seasonId}>
|
|
{s.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
id="seasonId"
|
|
value={seasonId}
|
|
onChange={(e) => setSeasonId(e.target.value)}
|
|
className="bg-iron-gray text-white px-3 py-2 rounded"
|
|
placeholder="season-id"
|
|
/>
|
|
)}
|
|
<p className="text-xs text-gray-500">Selected: {selectedSeasonLabel}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm text-gray-300">
|
|
Status: <span className="font-medium text-white">{publishedLabel}</span>
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={handlePublishToggle}
|
|
disabled={!schedule}
|
|
className="px-3 py-1.5 rounded bg-primary-blue text-white disabled:opacity-50"
|
|
>
|
|
{schedule?.published ? 'Unpublish' : 'Publish'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="border-t border-charcoal-outline pt-4 space-y-3">
|
|
<h2 className="text-lg font-semibold text-white">{isEditing ? 'Edit race' : 'Add race'}</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="track" className="text-sm text-gray-300">
|
|
Track
|
|
</label>
|
|
<input
|
|
id="track"
|
|
value={track}
|
|
onChange={(e) => setTrack(e.target.value)}
|
|
className="bg-iron-gray text-white px-3 py-2 rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="car" className="text-sm text-gray-300">
|
|
Car
|
|
</label>
|
|
<input
|
|
id="car"
|
|
value={car}
|
|
onChange={(e) => setCar(e.target.value)}
|
|
className="bg-iron-gray text-white px-3 py-2 rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<label htmlFor="scheduledAtIso" className="text-sm text-gray-300">
|
|
Scheduled At (ISO)
|
|
</label>
|
|
<input
|
|
id="scheduledAtIso"
|
|
value={scheduledAtIso}
|
|
onChange={(e) => setScheduledAtIso(e.target.value)}
|
|
className="bg-iron-gray text-white px-3 py-2 rounded"
|
|
placeholder="2025-01-01T12:00:00.000Z"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleAddOrSave}
|
|
className="px-3 py-1.5 rounded bg-primary-blue text-white"
|
|
>
|
|
{isEditing ? 'Save' : 'Add race'}
|
|
</button>
|
|
|
|
{isEditing && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingRaceId(null)}
|
|
className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-charcoal-outline pt-4 space-y-3">
|
|
<h2 className="text-lg font-semibold text-white">Races</h2>
|
|
|
|
{loading ? (
|
|
<div className="py-4 text-sm text-gray-400">Loading schedule…</div>
|
|
) : schedule?.races.length ? (
|
|
<div className="space-y-2">
|
|
{schedule.races.map((race) => (
|
|
<div
|
|
key={race.id}
|
|
className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
|
|
>
|
|
<div className="min-w-0">
|
|
<p className="text-white font-medium truncate">{race.name}</p>
|
|
<p className="text-xs text-gray-400 truncate">{race.scheduledAt.toISOString()}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleEdit(race.id)}
|
|
className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleDelete(race.id)}
|
|
className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="py-4 text-sm text-gray-500">No races yet.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |