diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: empty participant fields show red error, no save until filled

Browse Source
This commit is contained in:
Diana Dolgolyova
2026-03-24 22:34:12 +03:00
parent b22e4c5d39
commit 0ae8f57cde
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/admin/_components/FormField.tsx
View File

@@ -45,36 +45,54 @@ export function ParticipantLimits({
onMinChange: (v: number) => void; onMinChange: (v: number) => void;
onMaxChange: (v: number) => void; onMaxChange: (v: number) => void;
}) { }) {
const [minLocal, setMinLocal] = useState(min); const [minStr, setMinStr] = useState(String(min));
const [maxLocal, setMaxLocal] = useState(max); const [maxStr, setMaxStr] = useState(String(max));
const maxError = maxLocal > 0 && minLocal > 0 && maxLocal < minLocal; const minLocal = parseInt(minStr) || 0;
const maxLocal = parseInt(maxStr) || 0;
const minEmpty = minStr === "";
const maxEmpty = maxStr === "";
const maxError = (maxLocal > 0 && minLocal > 0 && maxLocal < minLocal) || minEmpty || maxEmpty;
function handleMin(v: number) { function handleMin(raw: string) {
setMinLocal(v); setMinStr(raw);
const newMaxError = maxLocal > 0 && v > maxLocal; if (raw === "") return;
if (!newMaxError) onMinChange(v); const v = parseInt(raw) || 0;
const curMax = parseInt(maxStr) || 0;
if (curMax > 0 && v > curMax) return;
onMinChange(v);
} }
function handleMax(v: number) { function handleMax(raw: string) {
setMaxLocal(v); setMaxStr(raw);
const newMaxError = v > 0 && minLocal > 0 && v < minLocal; if (raw === "") return;
if (!newMaxError) onMaxChange(v); const v = parseInt(raw) || 0;
const curMin = parseInt(minStr) || 0;
if (v > 0 && v < curMin) return;
onMaxChange(v);
} }
const errorMsg = minEmpty || maxEmpty
? "Поле не может быть пустым"
: maxLocal > 0 && minLocal > maxLocal
? "Макс. не может быть меньше мин."
: null;
return ( return (
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<label className="block text-sm text-neutral-400 mb-1.5">Мин. участников</label> <label className="block text-sm text-neutral-400 mb-1.5">Мин. участников</label>
<input type="number" min={0} value={minLocal} onChange={(e) => handleMin(parseInt(e.target.value) || 0)} <input type="number" min={0} value={minStr} onChange={(e) => handleMin(e.target.value)}
className={`${inputCls} ${maxError ? "!border-red-500/50" : ""}`} /> className={`${inputCls} ${minEmpty ? "!border-red-500/50" : ""}`} />
<p className="text-[10px] text-neutral-600 mt-1">Если записей меньше — занятие можно отменить</p> <p className={`text-[10px] mt-1 ${minEmpty ? "text-red-400" : "text-neutral-600"}`}>
{minEmpty ? "Поле не может быть пустым" : "Если записей меньше — занятие можно отменить"}
</p>
</div> </div>
<div> <div>
<label className="block text-sm text-neutral-400 mb-1.5">Макс. участников</label> <label className="block text-sm text-neutral-400 mb-1.5">Макс. участников</label>
<input type="number" min={0} value={maxLocal} onChange={(e) => handleMax(parseInt(e.target.value) || 0)} <input type="number" min={0} value={maxStr} onChange={(e) => handleMax(e.target.value)}
className={`${inputCls} ${maxError ? "!border-red-500/50" : ""}`} /> className={`${inputCls} ${maxEmpty || (maxLocal > 0 && minLocal > maxLocal) ? "!border-red-500/50" : ""}`} />
<p className={`text-[10px] mt-1 ${maxError ? "text-red-400" : "text-neutral-600"}`}> <p className={`text-[10px] mt-1 ${errorMsg && !minEmpty ? "text-red-400" : "text-neutral-600"}`}>
{maxError ? "Макс. не может быть меньше мин." : "0 = без лимита. При заполнении — лист ожидания"} {maxEmpty ? "Поле не может быть пустым" : maxLocal > 0 && minLocal > maxLocal ? "Макс. не может быть меньше мин." : "0 = без лимита. При заполнении — лист ожидания"}
</p> </p>
</div> </div>
</div> </div>