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