Day 9 完了
実装内容:
1. backend/apps/fields/views.py - FieldViewSetをModelViewSetに変更（書き込み可能）
2. frontend/src/components/Navbar.tsx - 圃場管理リンク追加
3. frontend/src/app/fields/page.tsx - 圃場一覧画面
4. frontend/src/app/fields/new/page.tsx - 新規作成画面
5. frontend/src/app/fields/[id]/page.tsx - 編集画面
API CRUDテスト結果:
- POST /api/fields/ → 201 Created
- GET /api/fields/ → 200 OK
- PATCH /api/fields/{id}/ → 200 OK
- DELETE /api/fields/{id}/ → 204 No Content
ブラウザで http://localhost:3000/fields から圃場のCRUD操作が可能です。
次の工程に移りますか？
This commit is contained in:
Akira
156
frontend/src/app/fields/page.tsx
Normal file
156
frontend/src/app/fields/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { api } from '@/lib/api';
|
||||
import { Field } from '@/types';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import { Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
|
||||
export default function FieldsPage() {
|
||||
const router = useRouter();
|
||||
const [fields, setFields] = useState<Field[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [deleting, setDeleting] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchFields();
|
||||
}, []);
|
||||
|
||||
const fetchFields = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get('/fields/');
|
||||
setFields(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch fields:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('この圃場を削除してもよろしいですか？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeleting(id);
|
||||
try {
|
||||
await api.delete(`/fields/${id}/`);
|
||||
await fetchFields();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete field:', error);
|
||||
alert('削除に失敗しました');
|
||||
} finally {
|
||||
setDeleting(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navbar />
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">読み込み中...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navbar />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">圃場管理</h1>
|
||||
<button
|
||||
onClick={() => router.push('/fields/new')}
|
||||
className="flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新規作成
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{fields.length === 0 ? (
|
||||
<div className="bg-white rounded-lg shadow p-8 text-center">
|
||||
<p className="text-gray-500">圃場データがありません。「新規作成」ボタンから追加してください。</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
圃場名
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
住所
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
面積(反)
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
面積(m2)
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
所有者
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{fields.map((field) => (
|
||||
<tr key={field.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{field.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm text-gray-500">
|
||||
{field.address || '-'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{field.area_tan || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{field.area_m2 || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{field.owner_name || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => router.push(`/fields/${field.id}`)}
|
||||
className="text-blue-600 hover:text-blue-900 p-1"
|
||||
title="編集"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(field.id)}
|
||||
disabled={deleting === field.id}
|
||||
className="text-red-600 hover:text-red-900 p-1 disabled:opacity-50"
|
||||
title="削除"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user