# 画面設計書 29-カードステップ編集画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおけるカードステップ編集画面の設計を記述したものです。カードステップ編集画面は、カードのステップ（サブタスク）の内容を編集するためのインライン形式のUIコンポーネントです。

### 本画面の処理概要

**業務上の目的・背景**：タスク管理において、サブタスク（ステップ）の内容を修正したり、不要になったステップを削除したりする必要があります。この画面により、ステップの内容編集と削除を効率的に行えます。

**画面へのアクセス方法**：カードステップ詳細画面からステップ内容をクリックすると、この編集画面がTurbo Frameとして表示されます。URLは `/cards/:card_id/steps/:id/edit` です。

**主要な操作・処理内容**：
1. ステップ内容の編集（テキスト入力）
2. 編集の保存
3. 編集のキャンセル
4. ステップの削除

**画面遷移**：
- 遷移元：カードステップ詳細画面（ステップ内容クリック）
- 遷移先：カードステップ詳細画面（保存/キャンセル後）

**権限による表示制御**：ログインユーザーのみアクセス可能です。カードにアクセス権限があるユーザーのみ操作可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 43 | ステップ編集 | 主機能 | ステップの内容や完了状態を編集 |
| 44 | ステップ削除 | 補助機能 | ステップを削除 |

## 画面種別

編集（インライン）

## URL/ルーティング

| HTTPメソッド | URL | コントローラー#アクション |
|-------------|-----|------------------------|
| GET | `/cards/:card_id/steps/:id/edit` | `cards/steps#edit` |
| PATCH | `/cards/:card_id/steps/:id` | `cards/steps#update` |
| DELETE | `/cards/:card_id/steps/:id` | `cards/steps#destroy` |

## 入出力項目

| 項目名 | 入出力 | データ型 | 必須 | 説明 |
|-------|-------|---------|-----|------|
| content | 入力 | String | 必須 | ステップの内容 |

## 表示項目

| 項目名 | データソース | 説明 |
|-------|-------------|------|
| 完了チェックボックス | step.completed | 表示のみ（disabled） |
| コンテンツ入力欄 | step.content | 編集可能なテキストフィールド |
| 保存ボタン | 固定 | チェックマークアイコン |
| キャンセルリンク | 固定 | 非表示（ESCキーで発動） |
| 削除ボタン | 固定 | ゴミ箱アイコン |

## イベント仕様

### 1-保存ボタンクリック

保存ボタンをクリックすると、ステップの内容が更新されます。

**処理内容**：
1. フォーム送信でPATCHリクエスト
2. `@step.update!(step_params)`で内容を更新
3. Turbo Streamで応答し、詳細画面に戻る

### 2-キャンセル（ESCキー）

ESCキーを押すと、編集がキャンセルされ、詳細画面に戻ります。

**処理内容**：
1. `keydown.esc->form#cancel`でキャンセルリンクをクリック
2. `card_step_path`へGETリクエスト（Turbo Frame）
3. 詳細画面を再表示

### 3-削除ボタンクリック

削除ボタンをクリックすると、ステップが削除されます。

**処理内容**：
1. `card_step_path`へDELETEリクエスト
2. `@step.destroy!`でステップを削除
3. Turbo Streamでステップ要素を削除

### 4-フォーカス時のテキスト選択

入力欄にフォーカスが当たると、テキストが全選択されます。

**処理内容**：
1. `focus->form#select`でテキスト全選択

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | steps | SELECT | ステップ情報の取得 |
| 保存 | steps | UPDATE | contentの更新 |
| 保存 | cards | UPDATE | updated_atの更新（touch） |
| 削除 | steps | DELETE | ステップの削除 |
| 削除 | cards | UPDATE | updated_atの更新（touch） |

### テーブル別更新項目詳細

#### steps

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | content | 入力された内容 | 必須項目 |
| UPDATE | updated_at | 現在時刻 | 自動更新 |
| DELETE | - | id = params[:id] | ステップの削除 |

#### cards

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | updated_at | 現在時刻 | steps belongs_to :card, touch: true |

## メッセージ仕様

| 種別 | 条件 | メッセージ |
|------|------|----------|
| プレースホルダー | 入力欄 | Name this step... |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| カードが存在しない | 404エラーページを表示 |
| ステップが存在しない | 404エラーページを表示 |
| カードへのアクセス権限がない | 404エラーページを表示 |
| 内容が空 | バリデーションエラー（required属性で防止） |

## 備考

- Turbo Frameで読み込まれ、`turbo_frame_tag @step`でフレームを識別します
- 入力欄には`autofocus`が設定され、画面表示時に自動的にフォーカスされます
- `1p-ignore`属性により、1Passwordの自動入力が無効化されています
- `hide-focus-ring`クラスでフォーカスリングが非表示になっています
- 完了チェックボックスは編集中は無効（disabled）です
- キャンセルリンクは視覚的に非表示（hidden）で、ESCキーで発動します
- 保存ボタンは`btn--positive`、削除ボタンは`btn--negative`クラスでスタイリングされています

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、ステップ機能に関連するモデル構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | step.rb | `app/models/step.rb` | Stepモデル、contentのバリデーション |
| 1-2 | schema.rb | `db/schema.rb` | stepsテーブル（705-715行目） |

**読解のコツ**: contentカラムには`presence: true`バリデーションがあり、空のステップは作成できません。

#### Step 2: エントリーポイントを理解する

処理の起点となるコントローラーを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | steps_controller.rb | `app/controllers/cards/steps_controller.rb` | edit/update/destroyアクションの処理 |

**主要処理フロー**:
1. **18-19行目**: `edit` - 編集画面の表示
2. **21-27行目**: `update` - ステップの更新
3. **30-36行目**: `destroy` - ステップの削除

#### Step 3: ビューテンプレートを理解する

画面の表示内容を構成するビューファイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | edit.html.erb | `app/views/cards/steps/edit.html.erb` | 編集フォームのUI |

**主要処理フロー**:
- **1行目**: `turbo_frame_tag @step` - Turbo Frameの定義
- **3-11行目**: フォーム部分（チェックボックス、入力欄、保存ボタン）
- **11行目**: キャンセルリンク（hidden）
- **13-16行目**: 削除ボタン

### プログラム呼び出し階層図

```
GET /cards/:card_id/steps/:id/edit
    |
    +-- Cards::StepsController#edit
           |
           +-- set_step (before_action)
           |
           +-- render 'cards/steps/edit'

PATCH /cards/:card_id/steps/:id
    |
    +-- Cards::StepsController#update
           |
           +-- set_step (before_action)
           +-- @step.update!(step_params)
           |
           +-- respond_to turbo_stream / json

DELETE /cards/:card_id/steps/:id
    |
    +-- Cards::StepsController#destroy
           |
           +-- set_step (before_action)
           +-- @step.destroy!
           |
           +-- respond_to turbo_stream / json
```

### データフロー図

```
[入力]                    [処理]                           [出力]

フォーム入力             StepsController                   Turbo Stream
content ──────────────▶ update ──────────────────────▶ steps UPDATE
                              |
                              ▼
                        step.update!(content:)

削除ボタン               StepsController                   Turbo Stream
    ─────────────────▶ destroy ─────────────────────▶ steps DELETE
                              |                            (要素削除)
                              ▼
                        step.destroy!
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| steps_controller.rb | `app/controllers/cards/steps_controller.rb` | ソース | ステップ機能コントローラー |
| card_scoped.rb | `app/controllers/concerns/card_scoped.rb` | ソース | カード取得の共通処理 |
| edit.html.erb | `app/views/cards/steps/edit.html.erb` | テンプレート | ステップ編集画面のビュー |
| step.rb | `app/models/step.rb` | ソース | Stepモデル |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義 |
| schema.rb | `db/schema.rb` | 設定 | データベーススキーマ |
