# 指示書BE — エラー一覧でエラー内容を選ぶ（画面）（2026-10-27） **担当の目安**: Cursor でよい。ただし§5（3画面で共通の下書き）と§6（保存前の検証）は取りこぼしやすいので、 Grok / Composer で進めるなら、§9 の画面確認を省略しないこと。 **前提**: 指示書BD（API）の実装が develop に入っていること。 - `GET /api/error-lists` - `ErrorReportItem` の `error_list_id` / `error_list` / `error_list_selectable` - `PATCH /api/errors/{error_id}/status` の `error_list_id` 契約の正は `d-watch-api.yaml`。決定の記録は D-185（案は §11）。 --- ## 0. ユーザーの要望と決定（2026-10-27） - エラー情報を統計的に取るため、エラー一覧（`/errors`）でエラー内容を選択リストから選べるようにする - 選択肢は `error_lists`（決定稿 131件） - 分類（大分類。日本語は「清掃ロボットエラー」など5種）で絞れる - 見た目の参考は https://copipe-de-ui.net/examples/data-list-2 。次の要素で、条件はすべて同時に効く（AND）: - キーワード入力 - 分類の select - 件数「n件 / 全体」 - 0件のときの文言 - クリアボタン - 保存するのは id（`error_list_id`） - 選べる行の範囲: - 清掃開始失敗（`NOT_STARTED`）の行でも選べる - 制御盤（`D-S_CONTROL_FAILURE`）とセキュリティ（`SECURITY_ON`）の行では選べない - ★画面は `error_type` を見ない。`error_list_selectable` だけを見る★ - 「その他」（`note_required: true` の選択肢。いまは id 131）を選んだら、備考の入力を必須にする - 未選択は空欄。★選んだあとに「未選択」へ戻す操作は作らない★（API が受け付けない） ## 1. 共通ルール（G1〜G4） - **G1**: 文言を足したら `lib/i18n.ts` に JP と EN の両方を入れる - **G2**: 触った箇所の古いコメントを直す - 例: `ErrorsScreen.tsx:45` の「新しい共通部品は作らない」。今回の選択用の窓は、この画面専用の部品として作る。共通部品にはしない - **G3**: 素通りするテストを書かない - **G4**: 完了時に `npx tsc --noEmit`・`npm run lint`・`npx vitest run` の件数と、§9 の画面確認の結果を報告する ## 2. 禁止・罠 - ★エラー内容の文字列（分類名・詳細）を `t()` に通さない★ - 辞書に同じ綴りのキーがあり、誤訳される。例: 「該当するエラーはありません」「清掃中」「清掃キャンセル」「設定」（`lib/i18n.ts`） - JP / EN の切り替えは、`useTheme()` の `lang` を見て `_ja` / `_en` の列を出し分ける - ★その他（id 131）のセルに詳細「該当するエラーはありません」を出さない★ - 一覧が0件のときの文言（`ErrorsScreen.tsx:534`）と同じ文字列で紛らわしい - 英語の詳細は "There are no errors." で、意味も逆になる - `note_required` の選択肢は、セルに大分類名（「その他(該当なし)」/ "OTHER ERROR"）を出す - ~~★列を足さない★~~ ★**2026-10-27 のユーザー指示で取り消し**★（エラー内容は「詳細」の列として備考の左に出す。§12） - ~~表の最小幅は 1130px（`ErrorsScreen.module.css:254`）。列を足すと、D-180 項10 で直した横スクロールが戻る~~ → ★横スクロールを出さない条件（1440×900 で表の最小幅 ≦ 約1130px）は今も守る★。§12 の列幅で ≒1129px - ~~「種類」のセルの2行目に入れる。`COLUMN_COUNT = 8` と `` は変えない~~ → `COLUMN_COUNT = 9` - ★セルの中にパネルを浮かせない★ - 表は `.tableWrap { overflow-x: auto }` と `.card { overflow: hidden }` の中にあるので、浮かせたパネルは端で切れる - 選ぶ操作は窓（モーダル）で行う。作法は `components/features/detail-log/AreaModal.tsx`（`role="dialog"`・`aria-modal`・Escape で閉じる） - アラート（`/alerts`）と D-Sec アラート（`/ds-alerts`）の画面から `error_list_id` を送る経路を作らない（§5） - `git add -A` 禁止 - `docs/decisions.md` に他人の未コミット差分があれば、上書きせずに止まる ## 3. 表示（通常モード・編集モード共通） 「種類」のセルを2行にする。 - 1行目: `error_type`（今のまま。生値） - 2行目: エラー内容。小さめ・薄めの文字、1行、はみ出しは「…」、全文は `title` 2行目に出す文字（★判定は1つの純粋関数にまとめ、テストする★。例 `lib/errors/error-content-label.ts`）: | 行の状態 | 出す文字 | `title` | |---|---|---| | `error_list_selectable` が false | `-` | なし | | `error_list_id` が null | 「未選択」（`t()` を通す。薄い色） | なし | | `error_list_id` はあるが `error_list` が null | 「不明({id})」（`t()` を通し、`{id}` を置き換える） | なし | | `error_list.note_required` が true | 大分類名（`error_category_main_ja` / `_en`） | 「大分類 / 小分類」 | | それ以外 | 詳細（`error_detail_ja` / `_en`） | 「大分類 / 小分類 / 詳細」 | - 編集モードで下書きがあるときは、下書きの id を `GET /error-lists` の選択肢から引いて同じ規則で出す - 下書きの id が選択肢に無いことは起きない（窓で選んだ id だけが入る） ## 4. 編集モードの操作 - 選べる行（`error_list_selectable` が true）では、2行目を★固定幅のボタン★にする - ボタンの文字は §3 の表どおり。未選択なら「選択」 - 押すと選択用の窓が開く - 保存中（`saving`）は押せない - 選べない行は `-` のまま（ボタンを置かない） - 選択肢（`GET /api/error-lists`）の取り方: - 編集モードに初めて入ったときに1回だけ取り、画面の state に持つ - 取得中は、ボタンを押せなくする - 失敗したら、編集中の案内（`.editNotice`）に「エラー内容の選択肢を読み込めませんでした」を出し、ボタンを押せなくする - 対応状況と備考の編集はそのまま使える - 取得の取り消しと、古い応答を捨てる処理は、この画面の既存の書き方（D-183）に合わせる ### 4-1. 選択用の窓（この画面専用の部品。例 `components/features/errors/ErrorContentPicker.tsx`） **窓の作り** - `role="dialog"`・`aria-modal="true"`・`aria-labelledby`（見出し「エラー内容を選ぶ」） - 開いたらキーワード入力にフォーカスを移す。閉じたら、押したボタンにフォーカスを戻す - Escape・背景のクリック・「閉じる」ボタンで、何も変えずに閉じる - 「閉じる」は、画面の「キャンセル」とは役目が違うので文言を分ける **上段** - 分類の select: 「すべての分類」と、選択肢の大分類を id 順に初めて出た順で並べる（`_ja` / `_en`。`t()` に通さない） - キーワード入力: 部分一致・大文字小文字を区別しない - 対象は、今の言語の詳細・小分類・大分類と、もう一方の言語の詳細 - 件数: 「{n}件 / {total}件」 - クリアボタン: キーワードと分類を初期状態に戻す - 上段の要素は固定幅にする（文言の長さで動かない） **下段の一覧** - 縦スクロールする固定の高さにする - 見出しは「大分類 / 小分類」 - 小分類の名前（データ・状態 など）は複数の大分類にまたがるので、小分類だけを見出しにしない - 項目は `