From 73e99f62d4c9a6bfec4d13754183722aedbb2e95 Mon Sep 17 00:00:00 2001 From: Akira Date: Wed, 18 Feb 2026 14:24:10 +0900 Subject: [PATCH] =?UTF-8?q?=E5=AF=BE=E5=BF=9C=E8=A1=A8=E3=83=A2=E3=83=BC?= =?UTF-8?q?=E3=83=89=20=E5=AE=9F=E8=A3=85=E3=82=B5=E3=83=9E=E3=83=AA?= =?UTF-8?q?=E3=83=BC=20=E6=96=B0=E8=A6=8F=E3=83=95=E3=82=A1=E3=82=A4?= =?UTF-8?q?=E3=83=AB=20=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=09=E5=86=85?= =?UTF-8?q?=E5=AE=B9=20LinkModal.tsx=09=E5=85=B1=E9=80=9A=E3=82=B3?= =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=A8?= =?UTF-8?q?=E3=81=97=E3=81=A6=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97=EF=BC=88?= =?UTF-8?q?=E5=9C=83=E5=A0=B4=E8=A9=B3=E7=B4=B0=E3=83=BB=E5=AF=BE=E5=BF=9C?= =?UTF-8?q?=E8=A1=A8=E3=81=AE=E4=B8=A1=E6=96=B9=E3=81=A7=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=EF=BC=89=20=E5=A4=89=E6=9B=B4=E3=83=95=E3=82=A1=E3=82=A4?= =?UTF-8?q?=E3=83=AB=20=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=09=E5=A4=89?= =?UTF-8?q?=E6=9B=B4=E5=86=85=E5=AE=B9=20fields/page.tsx=09[=E9=80=9A?= =?UTF-8?q?=E5=B8=B8]=20/=20[=E5=AF=BE=E5=BF=9C=E8=A1=A8]=20=E3=83=88?= =?UTF-8?q?=E3=82=B0=E3=83=AB=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E3=80=82=E5=AF=BE=E5=BF=9C=E8=A1=A8=E3=83=A2=E3=83=BC?= =?UTF-8?q?=E3=83=89=E3=81=A7=E3=81=AF=E5=9C=83=E5=A0=B4=E5=90=8D=E3=83=BB?= =?UTF-8?q?=E9=9D=A2=E7=A9=8D=E3=83=BB=E5=85=B1=E6=B8=88=E6=BC=A2=E5=AD=97?= =?UTF-8?q?=E5=9C=B0=E5=90=8D=E3=83=BB=E4=B8=AD=E5=B1=B1=E9=96=93=E6=89=80?= =?UTF-8?q?=E5=9C=A8=E5=9C=B0=E3=82=92=E6=A8=AA=E4=B8=A6=E3=81=B3=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=80=82=E5=90=84=E8=A1=8C=E3=81=A7=E7=9B=B4=E6=8E=A5?= =?UTF-8?q?+=E8=BF=BD=E5=8A=A0/x=E8=A7=A3=E9=99=A4=E3=81=8C=E5=8F=AF?= =?UTF-8?q?=E8=83=BD=20fields/[id]/page.tsx=09LinkModal=E3=81=AE=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=88=E3=82=92=E5=85=B1=E9=80=9A?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4=2004=5F=E7=94=BB=E9=9D=A2=E8=A8=AD?= =?UTF-8?q?=E8=A8=88=E6=9B=B8.md=09=E7=94=BB=E9=9D=A24=E3=81=AB=E5=AF=BE?= =?UTF-8?q?=E5=BF=9C=E8=A1=A8=E3=83=A2=E3=83=BC=E3=83=89=E3=81=AE=E3=83=AC?= =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=83=BB=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E8=A6=81=E4=BB=B6=E3=82=92=E8=BF=BD=E8=A8=98=2006=5F=E5=B7=AE?= =?UTF-8?q?=E7=95=B0=E3=83=AC=E3=83=9D=E3=83=BC=E3=83=88.md=09E-2=E3=81=AE?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=E7=8A=B6=E6=B3=81=E3=82=92=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=20=E5=AF=BE=E5=BF=9C=E8=A1=A8=E3=83=A2=E3=83=BC=E3=83=89?= =?UTF-8?q?=E3=81=AE=E6=A9=9F=E8=83=BD=20=E4=B8=80=E8=A6=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA:=20=E5=9C=83=E5=A0=B4=E5=90=8D=20/=20=E9=9D=A2?= =?UTF-8?q?=E7=A9=8D(=E5=8F=8D)=20/=20=E5=85=B1=E6=B8=88=EF=BC=88=E8=80=95?= =?UTF-8?q?=E5=9C=B0-=E5=88=86=E7=AD=86=20+=20=E6=BC=A2=E5=AD=97=E5=9C=B0?= =?UTF-8?q?=E5=90=8D=EF=BC=89=20/=20=E4=B8=AD=E5=B1=B1=E9=96=93=EF=BC=88ID?= =?UTF-8?q?=20+=20=E6=89=80=E5=9C=A8=E5=9C=B0=EF=BC=89=20=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E7=B7=A8=E9=9B=86:=20=E5=90=84=E3=82=BB=E3=83=AB?= =?UTF-8?q?=E3=81=AE[+=E8=BF=BD=E5=8A=A0]=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=81=A7=E6=A4=9C=E7=B4=A2=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB?= =?UTF-8?q?=E3=82=92=E9=96=8B=E3=81=84=E3=81=A6=E7=B4=90=E3=81=A5=E3=81=91?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=20=E7=B4=90=E3=81=A5=E3=81=91=E8=A7=A3?= =?UTF-8?q?=E9=99=A4:=20=E5=90=84=E3=83=AC=E3=82=B3=E3=83=BC=E3=83=89?= =?UTF-8?q?=E3=81=AB=E3=83=9B=E3=83=90=E3=83=BC=E3=81=A7=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=81=95=E3=82=8C=E3=82=8B[x]=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=EF=BC=88=E7=A2=BA=E8=AA=8D=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?= =?UTF-8?q?=E3=82=B0=E4=BB=98=E3=81=8D=EF=BC=89=20=E8=A4=87=E6=95=B0?= =?UTF-8?q?=E7=B4=90=E3=81=A5=E3=81=91:=20=E5=90=8C=E4=B8=80=E3=82=BB?= =?UTF-8?q?=E3=83=AB=E5=86=85=E3=81=AB=E6=94=B9=E8=A1=8C=E3=81=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=20=E5=9C=83=E5=A0=B4=E5=90=8D=E3=82=AF=E3=83=AA?= =?UTF-8?q?=E3=83=83=E3=82=AF:=20=E8=A9=B3=E7=B4=B0=E7=94=BB=E9=9D=A2(/fie?= =?UTF-8?q?lds/[id])=E3=81=AB=E9=81=B7=E7=A7=BB=20http://localhost:3000/fi?= =?UTF-8?q?elds=20=E3=81=A7=E3=80=8C=E5=AF=BE=E5=BF=9C=E8=A1=A8=E3=80=8D?= =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E6=8A=BC=E3=81=97=E3=81=A6?= =?UTF-8?q?=E7=A2=BA=E8=AA=8D=E3=81=A7=E3=81=8D=E3=81=BE=E3=81=99=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- document/04_画面設計書.md | 59 +++- .../06_ドキュメントvs実装_差異レポート.md | 29 +- frontend/src/app/fields/[id]/page.tsx | 109 +------ frontend/src/app/fields/page.tsx | 293 ++++++++++++++++-- frontend/src/components/LinkModal.tsx | 109 +++++++ 5 files changed, 433 insertions(+), 166 deletions(-) create mode 100644 frontend/src/components/LinkModal.tsx diff --git a/document/04_画面設計書.md b/document/04_画面設計書.md index 670a36c..2f57dfe 100644 --- a/document/04_画面設計書.md +++ b/document/04_画面設計書.md @@ -286,30 +286,59 @@ ## 画面4: 圃場管理一覧 ### 目的 -圃場マスタの管理（一覧表示、グループ編集、表示順変更、削除） +圃場マスタの管理（一覧表示、グループ編集、表示順変更、削除）。 +**対応表モード**で共済・中山間マスタとの紐づけを一覧確認・直接編集。 -### レイアウト（PC） +### レイアウト（PC）— 通常モード ``` ┌──────────────────────────────────────────────────────────────────┐ │ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │ ├──────────────────────────────────────────────────────────────────┤ │ │ -│ 並び順: [表示順 ▼] [+ 新規作成] │ +│ 並び順: [表示順 ▼] 表示: [通常] [対応表] [+ 新規作成] │ │ │ │ ───────────────────────────────────────────────────────────── │ -│ 順序 圃場名 グループ 住所 面積(反) 面積(m2) 所有者 操作│ +│ 順序 圃場名 グループ 住所 面積 所有者 共済 中山間 操作│ │ ───────────────────────────────────────────────────────────── │ -│ 1 おまけ [口神___▼] 口神ノ川足川... 0.2 200 吉田 ✏️🗑│ -│ 2 口神１反 [口神___▼] 口神ノ川... 1.2 1200 吉田 ✏️🗑│ -│ 3 口神北東 [口神___▼] 口神ノ川... 0.4 400 吉田 ✏️🗑│ -│ 4 口神北中 [南_____▼] 口神ノ川... 0.4 400 吉田 ✏️🗑│ +│ 1 おまけ [口神__▼] 口神ノ川... 0.2反 吉田 1件 - ✏️🗑│ +│ 2 口神１反 [口神__▼] 口神ノ川... 1.2反 吉田 1件 1件 ✏️🗑│ │ │ │ ... (39行) │ -│ │ └──────────────────────────────────────────────────────────────────┘ ``` +### レイアウト（PC）— 対応表モード + +``` +┌──────────────────────────────────────────────────────────────────────────┐ +│ 🌾 KeinaSystem [作付け計画] [圃場管理] [帳票出力] [データ取込] │ +├──────────────────────────────────────────────────────────────────────────┤ +│ │ +│ 並び順: [表示順 ▼] 表示: [通常] [対応表] [+ 新規作成] │ +│ │ +│ ───────────────────────────────────────────────────────────────────── │ +│ 圃場名 面積 共済（漢字地名） 中山間（所在地） │ +│ ───────────────────────────────────────────────────────────────────── │ +│ おまけ 0.2反 1-1 四万十町 足川 351 [×] - │ +│ [+] [+]│ +│ 口神 １反２畝 1.2反 2-2 四万十町 笹ヶ谷 374-1 [×] ID50 笹ヶ谷374 [×]│ +│ [+] [+]│ +│ ソーラーの上 0.8反 21-1 四万十町 大窪 592-1 [×] ID62 大窪592 [×]│ +│ ID61 大窪592 [×]│ +│ [+] [+]│ +│ ───────────────────────────────────────────────────────────────────── │ +│ ... (39行) │ +└──────────────────────────────────────────────────────────────────────────┘ +``` + +**対応表モードの特徴:** +- 各行に圃場名・面積・共済の漢字地名・中山間の所在地を横並び表示 +- 複数紐づけがある場合は同一セル内で改行表示 +- 各紐づけレコードの横に [×] ボタンで紐づけ解除 +- 各セルの末尾に [+] ボタンで紐づけ追加（モーダル表示） +- 通常モードの順序・グループ・削除操作は非表示（対応表モードは紐づけ管理に集中） + ### 機能要件 - [x] 全圃場を一覧表示（テーブル形式） - [x] 表示列: 順序番号、圃場名、グループ名、住所、面積(反)、面積(m2)、所有者、操作 @@ -319,9 +348,15 @@ - [x] [新規作成]ボタン → 画面6へ遷移 - [x] [✏️ 編集]ボタン → 画面5（圃場詳細）へ遷移 - [x] [🗑 削除]ボタン → 確認ダイアログ後に削除 -- [ ] **紐づけ状況列（E-2）** — **未実装** - - [ ] 「共済」列: 紐づけ件数表示（例: 「2件」）。0件の場合は「-」をグレー表示 - - [ ] 「中山間」列: 紐づけ件数表示。0件の場合は「-」をグレー表示 +- [x] **紐づけ状況列（E-2）** — 通常モードに「共済」「中山間」件数列を表示 +- [ ] **対応表モード（E-2）** — **未実装** + - [ ] 表示切替トグル: [通常] [対応表] ボタン + - [ ] 対応表モードの表示列: 圃場名、面積(反)、共済（漢字地名）、中山間（所在地） + - [ ] 共済列: 耕地-分筆 + 漢字地名を表示。複数あれば改行 + - [ ] 中山間列: ID + 大字+字+地番を表示。複数あれば改行 + - [ ] 各紐づけレコードに [×] ボタン（確認ダイアログ付き紐づけ解除） + - [ ] 各セルに [+] ボタン（追加モーダル表示 → 画面5と同じLinkModal） + - [ ] 紐づけなしの場合は「-」をグレー表示 --- diff --git a/document/06_ドキュメントvs実装_差異レポート.md b/document/06_ドキュメントvs実装_差異レポート.md index 66bd185..58c53aa 100644 --- a/document/06_ドキュメントvs実装_差異レポート.md +++ b/document/06_ドキュメントvs実装_差異レポート.md @@ -224,28 +224,15 @@ ### E-2: 対応付け可視化・紐づけ管理機能 - **背景**: 3つのODSデータファイル（吉田農地台帳 → Field、水稲共済細目用 → OfficialKyosaiField、中山間 → OfficialChusankanField）間のM:N対応関係を確認・編集する手段がない -- **現状**: 圃場詳細画面に共済/中山間の読み取り専用テーブルはある（A-8完了）が、紐づけの追加・解除ができない。面積の整合性チェックもない -- **状態**: 🔜 未着手 +- **状態**: 🚧 一部実装済み -**対応方針（仕様は画面設計書 画面5 に記載済み）:** +**実装済み:** +- ✅ バックエンドAPI 6本（共済/中山間マスタ一覧、紐づけ追加・解除） +- ✅ 圃場詳細画面（/fields/[id]）: +追加ボタン、×解除ボタン、検索付きモーダル、面積参考表示 +- ✅ 圃場一覧 通常モード: 「共済」「中山間」件数列 -1. **圃場詳細画面（/fields/[id]）の拡張**: - - 共済/中山間セクションに [+追加] ボタンを追加 - - 追加モーダル: 全マスタ一覧から検索・選択して紐づけ追加（チェックボックス複数選択） - - 各行に [×] ボタンで紐づけ解除（確認ダイアログ付き） - - 面積参考表示: セクション見出しに合計面積を小さく併記（M:Nの特性上不一致が通常なので、警告は出さない） - -2. **圃場一覧画面（/fields）の拡張**: - - 「共済」「中山間」列を追加し、紐づけ件数を表示 - - 0件の場合は「-」をグレー表示（警告アイコンは使わない） - -3. **必要なバックエンドAPI**: - - `GET /api/kyosai-fields/` — 共済マスタ全件取得 - - `GET /api/chusankan-fields/` — 中山間マスタ全件取得 - - `POST /api/fields/{id}/kyosai-links/` — 共済紐づけ追加 - - `DELETE /api/fields/{id}/kyosai-links/{kyosai_id}/` — 共済紐づけ解除 - - `POST /api/fields/{id}/chusankan-links/` — 中山間紐づけ追加 - - `DELETE /api/fields/{id}/chusankan-links/{chusankan_id}/` — 中山間紐づけ解除 +**未実装:** +- 🔜 圃場一覧「対応表」モード: 漢字地名・所在地を一覧表示し、直接紐づけ追加・解除できる表示モード（仕様は画面設計書 画面4 に記載済み） --- @@ -265,4 +252,4 @@ | C-1〜C-8 | ドキュメント/実装の食い違い修正 | ✅ 全件完了 | | D-1〜D-4 | 不具合修正 | ✅ 全件完了 | | E-1 | PDF帳票再設計 | ✅ 完了 | -| E-2 | 対応付け可視化・紐づけ管理 | 🔜 未着手 | +| E-2 | 対応付け可視化・紐づけ管理 | 🚧 一部実装済み（対応表モード未実装） | diff --git a/frontend/src/app/fields/[id]/page.tsx b/frontend/src/app/fields/[id]/page.tsx index b85a586..9eb81e4 100644 --- a/frontend/src/app/fields/[id]/page.tsx +++ b/frontend/src/app/fields/[id]/page.tsx @@ -5,113 +5,8 @@ import { useRouter, useParams } from 'next/navigation'; import { api } from '@/lib/api'; import { Field, OfficialKyosaiField, OfficialChusankanField } from '@/types'; import Navbar from '@/components/Navbar'; -import { ArrowLeft, Save, Plus, X, Search } from 'lucide-react'; - -// --- Link Modal Component --- -function LinkModal({ - title, - items, - alreadyLinkedIds, - renderItem, - searchFilter, - onAdd, - onClose, -}: { - title: string; - items: T[]; - alreadyLinkedIds: Set; - renderItem: (item: T) => React.ReactNode; - searchFilter: (item: T, query: string) => boolean; - onAdd: (ids: number[]) => void; - onClose: () => void; -}) { - const [search, setSearch] = useState(''); - const [selected, setSelected] = useState>(new Set()); - - const filtered = useMemo(() => { - if (!search.trim()) return items; - return items.filter((item) => searchFilter(item, search.trim().toLowerCase())); - }, [items, search, searchFilter]); - - const toggle = (id: number) => { - setSelected((prev) => { - const next = new Set(prev); - if (next.has(id)) next.delete(id); - else next.add(id); - return next; - }); - }; - - return ( -
-
-
-

{title}

- -
- -
-
- - setSearch(e.target.value)} - placeholder="検索..." - className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500" - autoFocus - /> -
-
- -
- {filtered.length === 0 ? ( -

該当する区画がありません

- ) : ( - filtered.map((item) => { - const isLinked = alreadyLinkedIds.has(item.id); - const isSelected = selected.has(item.id); - return ( - - ); - }) - )} -
- -
- -
-
-
- ); -} - -// --- Main Page --- +import LinkModal from '@/components/LinkModal'; +import { ArrowLeft, Save, Plus, X } from 'lucide-react'; export default function EditFieldPage() { const router = useRouter(); const params = useParams(); diff --git a/frontend/src/app/fields/page.tsx b/frontend/src/app/fields/page.tsx index da64fb3..ce83235 100644 --- a/frontend/src/app/fields/page.tsx +++ b/frontend/src/app/fields/page.tsx @@ -1,11 +1,14 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useMemo } from 'react'; import { useRouter } from 'next/navigation'; import { api } from '@/lib/api'; -import { Field } from '@/types'; +import { Field, OfficialKyosaiField, OfficialChusankanField } from '@/types'; import Navbar from '@/components/Navbar'; -import { Plus, Pencil, Trash2, ArrowUp, ArrowDown } from 'lucide-react'; +import LinkModal from '@/components/LinkModal'; +import { Plus, Pencil, Trash2, ArrowUp, ArrowDown, X } from 'lucide-react'; + +type ViewMode = 'normal' | 'mapping'; export default function FieldsPage() { const router = useRouter(); @@ -14,6 +17,13 @@ export default function FieldsPage() { const [deleting, setDeleting] = useState(null); const [uniqueGroups, setUniqueGroups] = useState([]); const [sortOrder, setSortOrder] = useState('group_name,display_order,id'); + const [viewMode, setViewMode] = useState('normal'); + + // Modal state for mapping mode + const [modalFieldId, setModalFieldId] = useState(null); + const [modalType, setModalType] = useState<'kyosai' | 'chusankan' | null>(null); + const [allKyosai, setAllKyosai] = useState([]); + const [allChusankan, setAllChusankan] = useState([]); useEffect(() => { fetchFields(); @@ -34,10 +44,7 @@ export default function FieldsPage() { }; const handleDelete = async (id: number) => { - if (!confirm('この圃場を削除してもよろしいですか？')) { - return; - } - + if (!confirm('この圃場を削除してもよろしいですか？')) return; setDeleting(id); try { await api.delete(`/fields/${id}/`); @@ -52,17 +59,11 @@ export default function FieldsPage() { const handleGroupChange = async (fieldId: number, newGroup: string) => { try { - await api.patch(`/fields/${fieldId}/`, { - group_name: newGroup || null - }); - + await api.patch(`/fields/${fieldId}/`, { group_name: newGroup || null }); if (newGroup && !uniqueGroups.includes(newGroup)) { setUniqueGroups([...uniqueGroups, newGroup].sort()); } - - if (sortOrder !== 'id') { - await fetchFields(); - } + if (sortOrder !== 'id') await fetchFields(); } catch (error) { console.error('Failed to update group:', error); alert('グループの更新に失敗しました'); @@ -72,21 +73,15 @@ export default function FieldsPage() { const handleMoveOrder = async (index: number, direction: 'up' | 'down') => { const newIndex = direction === 'up' ? index - 1 : index + 1; if (newIndex < 0 || newIndex >= fields.length) return; - if (sortOrder !== 'display_order,group_name,id') { setSortOrder('display_order,group_name,id'); return; } - const currentField = fields[index]; const targetField = fields[newIndex]; - - const currentOrder = currentField.display_order ?? 0; - const targetOrder = targetField.display_order ?? 0; - try { - await api.patch(`/fields/${currentField.id}/`, { display_order: targetOrder }); - await api.patch(`/fields/${targetField.id}/`, { display_order: currentOrder }); + await api.patch(`/fields/${currentField.id}/`, { display_order: targetField.display_order ?? 0 }); + await api.patch(`/fields/${targetField.id}/`, { display_order: currentField.display_order ?? 0 }); await fetchFields(); } catch (error) { console.error('Failed to reorder:', error); @@ -94,6 +89,67 @@ export default function FieldsPage() { } }; + // --- Mapping mode link management --- + const openLinkModal = async (fieldId: number, type: 'kyosai' | 'chusankan') => { + try { + if (type === 'kyosai') { + const res = await api.get('/kyosai-fields/'); + setAllKyosai(res.data); + } else { + const res = await api.get('/chusankan-fields/'); + setAllChusankan(res.data); + } + setModalFieldId(fieldId); + setModalType(type); + } catch (err) { + console.error('Failed to fetch master data:', err); + } + }; + + const addLinks = async (ids: number[]) => { + if (!modalFieldId || !modalType) return; + try { + if (modalType === 'kyosai') { + await api.post(`/fields/${modalFieldId}/kyosai-links/`, { kyosai_field_ids: ids }); + } else { + await api.post(`/fields/${modalFieldId}/chusankan-links/`, { chusankan_field_ids: ids }); + } + await fetchFields(); + } catch (err) { + console.error('Failed to add links:', err); + } + }; + + const removeKyosaiLink = async (fieldId: number, kyosaiId: number) => { + if (!confirm('この共済区画の紐づけを解除しますか？')) return; + try { + await api.delete(`/fields/${fieldId}/kyosai-links/${kyosaiId}/`); + await fetchFields(); + } catch (err) { + console.error('Failed to remove kyosai link:', err); + } + }; + + const removeChusankanLink = async (fieldId: number, chusankanId: number) => { + if (!confirm('この中山間区画の紐づけを解除しますか？')) return; + try { + await api.delete(`/fields/${fieldId}/chusankan-links/${chusankanId}/`); + await fetchFields(); + } catch (err) { + console.error('Failed to remove chusankan link:', err); + } + }; + + const currentFieldForModal = modalFieldId ? fields.find((f) => f.id === modalFieldId) : null; + const kyosaiLinkedIds = useMemo(() => { + if (!currentFieldForModal) return new Set(); + return new Set(currentFieldForModal.kyosai_fields.map((k) => k.id)); + }, [currentFieldForModal]); + const chusankanLinkedIds = useMemo(() => { + if (!currentFieldForModal) return new Set(); + return new Set(currentFieldForModal.chusankan_fields.map((c) => c.id)); + }, [currentFieldForModal]); + const isDisplayOrderMode = sortOrder === 'display_order,group_name,id'; if (loading) { @@ -110,10 +166,10 @@ export default function FieldsPage() { return (
-
-
+
+

圃場管理

-
+
+ + {/* View mode toggle */} +
+ + +
+
+ + {/* Link Modal */} + {modalType === 'kyosai' && modalFieldId && ( + ( +
+ {k.k_num}{k.s_num ? `-${k.s_num}` : ''} + {' '}{k.kanji_name} + {k.area.toLocaleString()}m2 + {k.linked_field_names && k.linked_field_names.length > 0 && ( + + ({k.linked_field_names.join(', ')}) + + )} +
+ )} + searchFilter={(k: OfficialKyosaiField, q: string) => + k.kanji_name.toLowerCase().includes(q) || + k.address.toLowerCase().includes(q) || + k.k_num.includes(q) + } + onAdd={addLinks} + onClose={() => { setModalFieldId(null); setModalType(null); }} + /> + )} + {modalType === 'chusankan' && modalFieldId && ( + ( +
+ ID{c.c_id} + {' '}{c.oaza} {c.aza} {c.chiban} + {c.area.toLocaleString()}m2 + {c.linked_field_names && c.linked_field_names.length > 0 && ( + + ({c.linked_field_names.join(', ')}) + + )} +
+ )} + searchFilter={(c: OfficialChusankanField, q: string) => + c.c_id.includes(q) || + c.oaza.toLowerCase().includes(q) || + c.aza.toLowerCase().includes(q) || + c.chiban.includes(q) + } + onAdd={addLinks} + onClose={() => { setModalFieldId(null); setModalType(null); }} + /> + )}
); } diff --git a/frontend/src/components/LinkModal.tsx b/frontend/src/components/LinkModal.tsx new file mode 100644 index 0000000..1380337 --- /dev/null +++ b/frontend/src/components/LinkModal.tsx @@ -0,0 +1,109 @@ +'use client'; + +import { useState, useMemo } from 'react'; +import { X, Search } from 'lucide-react'; + +interface LinkModalProps { + title: string; + items: T[]; + alreadyLinkedIds: Set; + renderItem: (item: T) => React.ReactNode; + searchFilter: (item: T, query: string) => boolean; + onAdd: (ids: number[]) => void; + onClose: () => void; +} + +export default function LinkModal({ + title, + items, + alreadyLinkedIds, + renderItem, + searchFilter, + onAdd, + onClose, +}: LinkModalProps) { + const [search, setSearch] = useState(''); + const [selected, setSelected] = useState>(new Set()); + + const filtered = useMemo(() => { + if (!search.trim()) return items; + return items.filter((item) => searchFilter(item, search.trim().toLowerCase())); + }, [items, search, searchFilter]); + + const toggle = (id: number) => { + setSelected((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + }; + + return ( +
+
+
+

{title}

+ +
+ +
+
+ + setSearch(e.target.value)} + placeholder="検索..." + className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500" + autoFocus + /> +
+
+ +
+ {filtered.length === 0 ? ( +

該当する区画がありません

+ ) : ( + filtered.map((item) => { + const isLinked = alreadyLinkedIds.has(item.id); + const isSelected = selected.has(item.id); + return ( + + ); + }) + )} +
+ +
+ +
+
+
+ ); +}