96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import { useState } from 'react';
|
||
import { clearAllTransactions } from '../api/transactions';
|
||
|
||
interface Props {
|
||
onClose: () => void;
|
||
onDone: () => void;
|
||
}
|
||
|
||
export function ClearHistoryModal({ onClose, onDone }: Props) {
|
||
const [check1, setCheck1] = useState(false);
|
||
const [check2, setCheck2] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const canConfirm = check1 && check2;
|
||
|
||
const handleConfirm = async () => {
|
||
if (!canConfirm || loading) return;
|
||
setLoading(true);
|
||
setError('');
|
||
try {
|
||
await clearAllTransactions();
|
||
onDone();
|
||
} catch (e) {
|
||
setError(
|
||
e instanceof Error ? e.message : 'Ошибка при очистке истории',
|
||
);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className="modal"
|
||
onMouseDown={(e) => {
|
||
if (e.target === e.currentTarget) onClose();
|
||
}}
|
||
>
|
||
<div className="modal__dialog" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal__header">
|
||
<h2 className="modal__title">Очистить историю операций</h2>
|
||
<button className="modal__close-button" onClick={onClose} aria-label="Закрыть">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="modal__body">
|
||
<p className="danger-note">
|
||
Все транзакции будут безвозвратно удалены. Счета и категории
|
||
сохранятся.
|
||
</p>
|
||
|
||
{error && <div className="alert alert--error">{error}</div>}
|
||
|
||
<div className="field field--checkbox field--flush">
|
||
<label className="field__label field__label--checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={check1}
|
||
onChange={(e) => setCheck1(e.target.checked)}
|
||
/>
|
||
Я хочу очистить историю операций
|
||
</label>
|
||
</div>
|
||
|
||
<div className="field field--checkbox field--flush">
|
||
<label className="field__label field__label--checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={check2}
|
||
onChange={(e) => setCheck2(e.target.checked)}
|
||
/>
|
||
Я понимаю, что действие необратимо и все данные об операциях
|
||
будут потеряны навсегда
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="modal__footer">
|
||
<button
|
||
className="button button--danger modal__action"
|
||
onClick={handleConfirm}
|
||
disabled={!canConfirm || loading}
|
||
>
|
||
{loading ? 'Удаление…' : 'Удалить всё'}
|
||
</button>
|
||
<button className="button button--secondary modal__action" onClick={onClose}>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|