施肥計画・肥料マスタのエラーをインライン表示に変更
alert() で表示していたバリデーションエラー・保存エラー・削除エラーを 赤いインラインバナーで表示するように変更。 ブラウザがダイアログをブロックしても確実にユーザーに通知できるようにした。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -66,6 +66,7 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
|
||||
|
||||
const [loading, setLoading] = useState(!isNew);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
// ─── 初期データ取得
|
||||
useEffect(() => {
|
||||
@@ -286,9 +287,10 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
|
||||
|
||||
// ─── 保存(adjusted 優先、なければ calc 値を使用)
|
||||
const handleSave = async () => {
|
||||
if (!name.trim()) return alert('計画名を入力してください');
|
||||
if (!varietyId) return alert('品種を選択してください');
|
||||
if (selectedFields.length === 0) return alert('圃場を1つ以上選択してください');
|
||||
setSaveError(null);
|
||||
if (!name.trim()) { setSaveError('計画名を入力してください'); return; }
|
||||
if (!varietyId) { setSaveError('品種を選択してください'); return; }
|
||||
if (selectedFields.length === 0) { setSaveError('圃場を1つ以上選択してください'); return; }
|
||||
|
||||
const entries: { field_id: number; fertilizer_id: number; bags: number }[] = [];
|
||||
selectedFields.forEach((field) => {
|
||||
@@ -303,8 +305,9 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
|
||||
});
|
||||
});
|
||||
|
||||
if (entries.length === 0) {
|
||||
if (!confirm('袋数が1件も入力されていません。このまま保存しますか?\n(後から編集画面で袋数を入力できます)')) return;
|
||||
if (entries.length === 0 && planFertilizers.length > 0) {
|
||||
setSaveError('袋数が1件も入力されていません。計算ボタンを押すか、直接数値を入力してください');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
@@ -315,12 +318,11 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
|
||||
} else {
|
||||
await api.put(`/fertilizer/plans/${planId}/`, payload);
|
||||
}
|
||||
alert('保存しました');
|
||||
router.push('/fertilizer');
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: unknown } };
|
||||
console.error(err);
|
||||
alert('保存に失敗しました: ' + JSON.stringify(err.response?.data));
|
||||
setSaveError('保存に失敗しました: ' + JSON.stringify(err.response?.data));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
@@ -390,6 +392,15 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* エラーバナー */}
|
||||
{saveError && (
|
||||
<div className="mb-4 flex items-start gap-2 bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 text-sm">
|
||||
<span className="font-bold shrink-0">⚠</span>
|
||||
<span>{saveError}</span>
|
||||
<button onClick={() => setSaveError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600">✕</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 基本情報 */}
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-4 flex flex-wrap gap-4 items-end">
|
||||
<div className="flex-1 min-w-48">
|
||||
|
||||
Reference in New Issue
Block a user