fix: participant limits — red error when max < min, no save on invalid, shows 0
This commit is contained in:
@@ -45,17 +45,37 @@ 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 [maxLocal, setMaxLocal] = useState(max);
|
||||||
|
const maxError = maxLocal > 0 && minLocal > 0 && maxLocal < minLocal;
|
||||||
|
|
||||||
|
function handleMin(v: number) {
|
||||||
|
setMinLocal(v);
|
||||||
|
const newMaxError = maxLocal > 0 && v > maxLocal;
|
||||||
|
if (!newMaxError) onMinChange(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMax(v: number) {
|
||||||
|
setMaxLocal(v);
|
||||||
|
const newMaxError = v > 0 && minLocal > 0 && v < minLocal;
|
||||||
|
if (!newMaxError) onMaxChange(v);
|
||||||
|
}
|
||||||
|
|
||||||
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={min} onChange={(e) => onMinChange(parseInt(e.target.value) || 0)} className={inputCls} />
|
<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>
|
<p className="text-[10px] text-neutral-600 mt-1">Если записей меньше — занятие можно отменить</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={max} onChange={(e) => onMaxChange(parseInt(e.target.value) || 0)} className={inputCls} />
|
<input type="number" min={0} value={maxLocal} onChange={(e) => handleMax(parseInt(e.target.value) || 0)}
|
||||||
<p className="text-[10px] text-neutral-600 mt-1">0 = без лимита. При заполнении — лист ожидания</p>
|
className={`${inputCls} ${maxError ? "!border-red-500/50" : ""}`} />
|
||||||
|
<p className={`text-[10px] mt-1 ${maxError ? "text-red-400" : "text-neutral-600"}`}>
|
||||||
|
{maxError ? "Макс. не может быть меньше мин." : "0 = без лимита. При заполнении — лист ожидания"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user