112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { useAddPosition } from '../api/useAddPosition';
|
||
import { useAddPositionForm } from '../model/useAddPositionForm';
|
||
|
||
const inputStyle: React.CSSProperties = {
|
||
padding: '8px 12px',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 'var(--border-radius)',
|
||
fontSize: 14,
|
||
};
|
||
|
||
export function AddPositionForm({ portfolioId }: { portfolioId: number }) {
|
||
const addPosition = useAddPosition(portfolioId);
|
||
const form = useAddPositionForm();
|
||
|
||
function handleAddPosition() {
|
||
if (!form.newSecid.trim() || !parseInt(form.newQty, 10)) return;
|
||
addPosition.mutate(
|
||
{
|
||
secid: form.newSecid.trim().toUpperCase(),
|
||
quantity: parseInt(form.newQty, 10),
|
||
buyPrice: form.newPrice ? parseFloat(form.newPrice) : undefined,
|
||
buyDate: form.newDate || undefined,
|
||
},
|
||
{
|
||
onSuccess: () => {
|
||
form.setShowAddForm(false);
|
||
form.reset();
|
||
},
|
||
},
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
marginTop: 12,
|
||
padding: 16,
|
||
background: 'var(--color-surface)',
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 'var(--border-radius)',
|
||
display: 'flex',
|
||
gap: 12,
|
||
alignItems: 'flex-end',
|
||
}}
|
||
>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
|
||
Тикер
|
||
</label>
|
||
<input
|
||
value={form.newSecid}
|
||
onChange={(e) => form.setNewSecid(e.target.value)}
|
||
placeholder="SBER"
|
||
style={{ ...inputStyle, width: 120 }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
|
||
Количество
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
value={form.newQty}
|
||
onChange={(e) => form.setNewQty(e.target.value)}
|
||
style={{ ...inputStyle, width: 100 }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
|
||
Цена покупки
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
value={form.newPrice}
|
||
onChange={(e) => form.setNewPrice(e.target.value)}
|
||
placeholder="0.00"
|
||
style={{ ...inputStyle, width: 120 }}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
|
||
Дата покупки
|
||
</label>
|
||
<input
|
||
type="date"
|
||
value={form.newDate}
|
||
onChange={(e) => form.setNewDate(e.target.value)}
|
||
style={{ ...inputStyle, width: 150 }}
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={handleAddPosition}
|
||
disabled={addPosition.isPending}
|
||
style={{
|
||
padding: '8px 16px',
|
||
background: 'var(--color-primary)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: 'var(--border-radius)',
|
||
fontSize: 13,
|
||
fontWeight: 600,
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
Добавить
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|