ui cleanup

This commit is contained in:
Sebastian 2025-10-16 12:51:33 +02:00
parent 73aea84e8e
commit a19b7883d6
2 changed files with 43 additions and 60 deletions

View file

@ -212,18 +212,27 @@
return signup; return signup;
} }
function cloneSignupConfig(config: TournamentSignupConfig | null | undefined): SignupConfigForm { function cloneSignupConfig(config: TournamentSignupConfig | null | undefined): SignupConfigForm {
if (!config) return createDefaultSignup(); if (!config) return createDefaultSignup();
const signup: SignupConfigForm = { const normalizedSize = Math.max(
mode: config.mode === 'team' ? 'team' : 'solo', 1,
team_size: { Math.floor(
min: config.team_size?.min ?? 1, config.team_size?.max ??
max: config.team_size?.max ?? 1 config.team_size?.min ??
}, 1
entry_fields: (config.entry_fields ?? []).map(cloneSignupField), )
participant_fields: (config.participant_fields ?? []).map(cloneSignupField) );
};
const signup: SignupConfigForm = {
mode: config.mode === 'team' ? 'team' : 'solo',
team_size: {
min: normalizedSize,
max: normalizedSize
},
entry_fields: (config.entry_fields ?? []).map(cloneSignupField),
participant_fields: (config.participant_fields ?? []).map(cloneSignupField)
};
ensureAttendancePlacement(signup); ensureAttendancePlacement(signup);
@ -280,14 +289,15 @@
function setSignupMode(form: TournamentForm, mode: 'solo' | 'team') { function setSignupMode(form: TournamentForm, mode: 'solo' | 'team') {
form.signup.mode = mode; form.signup.mode = mode;
if (mode === 'solo') { if (mode === 'solo') {
form.signup.team_size.min = 1; setTeamSize(form, '1');
form.signup.team_size.max = 1;
form.signup.participant_fields = []; form.signup.participant_fields = [];
} else { } else {
if (form.signup.team_size.min < 1) form.signup.team_size.min = 1; const currentSize = Math.max(
if (form.signup.team_size.max < form.signup.team_size.min) { 1,
form.signup.team_size.max = form.signup.team_size.min; Number.isFinite(form.signup.team_size.min) ? form.signup.team_size.min : 1,
} Number.isFinite(form.signup.team_size.max) ? form.signup.team_size.max : 1
);
setTeamSize(form, String(currentSize));
if (form.signup.participant_fields.length === 0) { if (form.signup.participant_fields.length === 0) {
form.signup.participant_fields = [createSignupField('Spelare')]; form.signup.participant_fields = [createSignupField('Spelare')];
} }
@ -295,12 +305,12 @@
ensureAttendancePlacement(form.signup); ensureAttendancePlacement(form.signup);
} }
function setTeamSize(form: TournamentForm, key: 'min' | 'max', value: string) { function setTeamSize(form: TournamentForm, value: string) {
const parsed = Number.parseInt(value, 10); const parsed = Number.parseInt(value, 10);
const fallback = key === 'min' ? 1 : form.signup.team_size.min; const numeric = Number.isNaN(parsed) ? 1 : Math.max(1, parsed);
const numeric = Number.isNaN(parsed) ? fallback : Math.max(1, parsed); form.signup.team_size.min = numeric;
form.signup.team_size[key] = numeric; form.signup.team_size.max = numeric;
} }
function slugify(value: string) { function slugify(value: string) {
let slug = value let slug = value
@ -404,17 +414,16 @@
}; };
const mode = signup.mode === 'team' ? 'team' : 'solo'; const mode = signup.mode === 'team' ? 'team' : 'solo';
let min = toNumber(signup.team_size.min); let teamSize = toNumber(signup.team_size.min);
let max = toNumber(signup.team_size.max); if (mode === 'team') {
if (max < min) max = min; teamSize = Math.max(teamSize, toNumber(signup.team_size.max));
if (mode === 'solo') { } else {
min = 1; teamSize = 1;
max = 1;
} }
const draft: SignupConfigForm = { const draft: SignupConfigForm = {
mode, mode,
team_size: { min, max }, team_size: { min: teamSize, max: teamSize },
entry_fields: signup.entry_fields.map((field) => ({ ...field })), entry_fields: signup.entry_fields.map((field) => ({ ...field })),
participant_fields: signup.participant_fields.map((field) => ({ ...field })) participant_fields: signup.participant_fields.map((field) => ({ ...field }))
}; };
@ -426,7 +435,7 @@
return { return {
mode, mode,
team_size: { min, max }, team_size: { min: teamSize, max: teamSize },
entry_fields, entry_fields,
participant_fields participant_fields
}; };
@ -1153,9 +1162,9 @@
</select> </select>
</label> </label>
{#if createState.form.signup.mode === 'team'} {#if createState.form.signup.mode === 'team'}
<div class="grid grid-cols-2 gap-3"> <div class="grid gap-3">
<label class="flex flex-col gap-1 text-sm font-medium text-slate-700"> <label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
<span>Min. spelare</span> <span>Spelare per lag</span>
<input <input
type="number" type="number"
min={1} min={1}
@ -1163,22 +1172,6 @@
oninput={(event) => oninput={(event) =>
setTeamSize( setTeamSize(
createState.form, createState.form,
'min',
(event.currentTarget as HTMLInputElement).value
)}
class="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-indigo-500 focus:ring focus:ring-indigo-100 focus:outline-none"
/>
</label>
<label class="flex flex-col gap-1 text-sm font-medium text-slate-700">
<span>Max. spelare</span>
<input
type="number"
min={createState.form.signup.team_size.min}
value={createState.form.signup.team_size.max}
oninput={(event) =>
setTeamSize(
createState.form,
'max',
(event.currentTarget as HTMLInputElement).value (event.currentTarget as HTMLInputElement).value
)} )}
class="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-indigo-500 focus:ring focus:ring-indigo-100 focus:outline-none" class="rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-indigo-500 focus:ring focus:ring-indigo-100 focus:outline-none"

View file

@ -545,17 +545,7 @@
{#if signupConfig.mode === 'team'} {#if signupConfig.mode === 'team'}
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-center justify-between"> <h3 class="text-sm font-semibold tracking-wide text-slate-400 uppercase">Spelare</h3>
<h3 class="text-sm font-semibold tracking-wide text-slate-400 uppercase">Spelare</h3>
<button
type="button"
onclick={addParticipant}
disabled={!canAddParticipant() || signup.submitting}
class="rounded-full border border-indigo-300 px-3 py-1 text-xs font-semibold text-indigo-200 transition hover:border-indigo-400 hover:bg-indigo-500/10 disabled:cursor-not-allowed disabled:opacity-60"
>
Lägg till spelare
</button>
</div>
{#if signup.participants.length > 0} {#if signup.participants.length > 0}
<div class="space-y-4"> <div class="space-y-4">