施肥計画編集画面に四捨五入トグル機能を追加

- calcMatrix(計算値)+ adjusted(確定値)の2層構成に変更
- 肥料列ヘッダーに ≈(青)/ ↩(琥珀)トグルボタンを追加
- 四捨五入後は元の計算値をグレーで参照表示
- docker-compose.yml に WATCHPACK_POLLING=true を追加(Windowsホットリロード修正)
- マスタードキュメント(文書13)を新 UI 仕様に更新

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Akira
2026-03-01 13:40:38 +09:00
parent 8ac3a00737
commit cfd67e0d55
3 changed files with 177 additions and 65 deletions

View File

@@ -289,27 +289,40 @@ GET /api/plans/crops/
2. **圃場選択**: 品種選択後に候補圃場が自動取得(`candidate_fields` API。チップ形式で追加/解除。候補外の圃場は「全圃場から追加」で手動選択
3. **肥料追加**: 「+肥料を追加」で肥料マスタからドロップダウン選択
4. **自動計算**: 各肥料に方式per_tan/even/nitrogenとパラメータを設定し「計算」ボタンでマトリクスに反映上書き確認あり
5. **手動調整**: マトリクス表のセルを直接編集
6. **保存**: 「保存」ボタンで entries を一括送信
5. **四捨五入**: 肥料列ヘッダーの `≈` ボタン(青)を押すと袋数を整数に丸める。押した後は `↩` ボタン(琥珀色)に変わり、押すと元の計算値に戻る
6. **手動調整**: マトリクス表のセルを直接編集
7. **保存**: 「保存」ボタンで entries を一括送信
#### マトリクスの表示仕様
- 自動計算直後: セルに計算値(小数)がそのまま表示される(編集可)
- `≈` ボタン押下後: セルの入力値が整数に丸められ、元の計算値が薄いグレーで参照表示される
- `↩` ボタン押下: 整数値を破棄し、元の計算値に戻る(参照グレー表示も消える)
- 編集中に計算を再実行すると、その肥料列の `adjusted``roundedColumns` がリセットされる
#### State 構成
```typescript
// 基本情報
const [planName, setPlanName] = useState('')
const [planYear, setPlanYear] = useState(currentYear)
const [name, setName] = useState('')
const [year, setYear] = useState(currentYear)
const [varietyId, setVarietyId] = useState<number | ''>('')
// 圃場・肥料
const [selectedFields, setSelectedFields] = useState<FieldInfo[]>([])
const [selectedFields, setSelectedFields] = useState<Field[]>([])
const [planFertilizers, setPlanFertilizers] = useState<Fertilizer[]>([])
// 自動計算設定(肥料ごと)
const [calcSettings, setCalcSettings] = useState<CalcSetting[]>([])
// CalcSetting: { fertilizer_id, method: 'per_tan'|'even'|'nitrogen', param: string }
// マトリクスfieldId → fertilizerId → 袋数文字列)
const [matrix, setMatrix] = useState<Record<number, Record<number, string>>>({})
// マトリクス 2層構成fieldId → fertilizerId → 袋数文字列)
const [calcMatrix, setCalcMatrix] = useState<Matrix>({}) // 自動計算値(参照用・変更不可表示)
const [adjusted, setAdjusted] = useState<Matrix>({}) // ユーザー確定値(保存対象)
const [roundedColumns, setRoundedColumns] = useState<Set<number>>(new Set()) // ↩ トグル管理
// effectiveValue(fieldId, fertId) で保存値を決定:
// adjusted[field][fert] があればそれを優先、なければ calcMatrix[field][fert]
```
---
@@ -425,6 +438,14 @@ plans アプリの `DefaultRouter(r'', PlanViewSet)` が `plans/get-crops-with-v
PUT 時は entries を全削除→再作成する「全置換」方式。
部分更新は非対応PATCH でも entries がある場合は全置換)。
### Next.js ホットリロードが効かない問題Windows + Docker
Windows 環境では Docker ボリュームマウント経由のファイル変更が inotify で検知されず、
フロントエンドのホットリロードが動かない。
**対策**: `docker-compose.yml` の frontend 環境変数に `WATCHPACK_POLLING: "true"` を追加。
ポーリング方式に切り替えることでファイル変更を検知できるようになる。
---
## 将来の拡張(スコープ外)