# 画面設計書 16-クローズドカラム画面

## 概要

本ドキュメントは、Fizzyアプリケーションにおける「クローズドカラム画面」の設計書です。完了（closed）状態のカードを一覧表示する特殊カラム画面の仕様を定義します。

### 本画面の処理概要

本画面では、ボード内でクローズ（完了）状態に設定されたカードをグリッド形式で一覧表示します。「Done」という表示名で、完了したタスクのアーカイブとして機能します。

**業務上の目的・背景**：タスクが完了した場合、カードをクローズしてアクティブなカラムから取り除きます。クローズドカラムは完了タスクの履歴を保持し、過去の作業内容を参照したり、必要に応じてカードを再オープンしたりするための画面を提供します。

**画面へのアクセス方法**：ボード詳細画面の「Done」カラムヘッダーをクリック、または直接URLにアクセスします。URLは `/boards/:board_id/columns/closed` です。

**主要な操作・処理内容**：
1. クローズ済みカードの一覧表示
2. カードのプレビュー表示
3. カードクリックでカード詳細画面へ遷移（再オープン可能）
4. ページネーション（無限スクロール）

**画面遷移**：
- 遷移元：ボード詳細画面
- 遷移先：カード詳細画面、ボード詳細画面（戻るリンク）

**権限による表示制御**：ボードへのアクセス権を持つユーザーのみ閲覧可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | カラム一覧表示 | 主機能 | クローズされたカラムのカード一覧を表示 |

## 画面種別

一覧画面（特殊カラム - クローズド）

## URL/ルーティング

| HTTP Method | URL | Controller#Action |
|-------------|-----|-------------------|
| GET | /boards/:board_id/columns/closed | boards/columns/closeds#show |

## 入出力項目

なし（閲覧専用画面）

## 表示項目

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| ページタイトル | H1見出し | 「Column: Done」固定 |
| 戻るリンク | リンク | ボード詳細画面への戻りリンク（ボード名表示） |
| カード一覧 | グリッド | クローズ済みカードのプレビュー表示 |
| 空メッセージ | テキスト | カードがない場合「No cards here」を表示 |
| ドラッグヒント | テキスト | ドラッグ中「Drag cards here」を表示 |

## イベント仕様

### 1-カードクリック

**トリガー**: カードプレビューをクリック

**処理内容**:
- カード詳細画面（/cards/:number）に遷移
- カード詳細画面で再オープン操作が可能

### 2-ページネーション

**トリガー**: 画面最下部へのスクロール（自動ページネーション）

**処理内容**:
- 次のページのカードを読み込み
- 既存のカード一覧に追加表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | cards | SELECT | クローズ済みカードを取得 |
| 画面表示 | closures | SELECT | クローズ状態の判定と日時取得に使用 |

### 取得条件

クローズ済み（closed）カードの条件:
- `closures`テーブルに関連レコードが存在する
- `recently_closed_first`スコープでクローズ日時の新しい順にソート

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| M001 | 情報 | No cards here | カラムにカードが存在しない場合 |
| M002 | ヒント | Drag cards here | ドラッグ操作中 |

## 例外処理

| 例外種別 | 発生条件 | 処理内容 |
|---------|----------|----------|
| レコード不存在 | 存在しないボードIDでアクセス | HTTPステータス404を返却 |
| アクセス権なし | ボードへのアクセス権がない | HTTPステータス404を返却 |
| 認証エラー | 未ログイン状態でアクセス | ログイン画面にリダイレクト |

## 備考

- 「Done」はクローズ（完了）されたカードの保管場所です
- カードは `recently_closed_first` スコープ（クローズ日時降順）でソートされます
- クローズドカラムのカードはドラッグ操作には通常対応しません（完了状態のため）
- カード詳細画面から再オープン（unclose）操作が可能です
- turbo_frame_tagのIDは `:closed_column` 固定です

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | card.rb | `app/models/card.rb` | Closeableモジュール、closedスコープの定義元を確認 |
| 1-2 | schema.rb | `db/schema.rb` | closuresテーブル（227-237行目）を確認 |

**読解のコツ**: クローズドカラムは`closures`テーブルにレコードが存在するカードを表示する特殊カラムです。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | routes.rb | `config/routes.rb` | 39行目の `resource :closed` を確認 |
| 2-2 | closeds_controller.rb | `app/controllers/boards/columns/closeds_controller.rb` | showアクション、closed/recently_closed_firstスコープの使用を確認 |

**主要処理フロー**:
1. **4-7行目**: `show`アクション - クローズ済みカード取得、ページネーション、ETagキャッシュ
2. **5行目**: `@board.cards.closed.recently_closed_first.preloaded` - カード取得クエリ

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | show.html.erb | `app/views/boards/columns/closeds/show.html.erb` | ページ構造、固定タイトル「Done」を確認 |
| 3-2 | _empty_placeholder.html.erb | `app/views/boards/columns/_empty_placeholder.html.erb` | 空状態の表示 |

**主要処理フロー**:
- **1行目**: ページタイトル設定（「Column: Done」固定）
- **14行目**: turbo_frame_tag :closed_column（固定ID）
- **17行目**: with_automatic_pagination :closed_column

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

```
ブラウザ（GET /boards/:board_id/columns/closed）
    │
    ├─ Boards::Columns::ClosedsController#show
    │      ├─ set_board（BoardScoped concern）
    │      │      └─ Current.user.boards.find(params[:board_id])
    │      ├─ set_page_and_extract_portion_from
    │      │      └─ @board.cards.closed.recently_closed_first.preloaded
    │      └─ fresh_when（ETagキャッシュ）
    │
    └─ app/views/boards/columns/closeds/show.html.erb
           ├─ link_back_to_board(@board)
           ├─ turbo_frame_tag :closed_column
           │      ├─ with_automatic_pagination
           │      │      └─ _previews.html.erb
           │      └─ _empty_placeholder.html.erb（空の場合）
           └─ ページタイトル表示（「Column: Done」）
```

### データフロー図

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

board_id ─────────────▶ ClosedsController#show ─────▶ @board
                                 │
                                 ├─ @board.cards ─────▶ @page.records
                                 │    .closed              │
                                 │    .recently_closed_first│
                                 │    .preloaded           │
                                 │                         │
                                 └─ render ────────────────┘
                                        │
                                        ▼
                                   カードグリッド表示
                                   （クローズ済みカードのみ）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| show.html.erb | `app/views/boards/columns/closeds/show.html.erb` | テンプレート | クローズドカラム画面のメインビュー |
| closeds_controller.rb | `app/controllers/boards/columns/closeds_controller.rb` | コントローラー | showアクションの実装 |
| _previews.html.erb | `app/views/cards/display/_previews.html.erb` | パーシャル | カードコレクションのレンダリング |
| _empty_placeholder.html.erb | `app/views/boards/columns/_empty_placeholder.html.erb` | パーシャル | 空状態表示 |
| card.rb | `app/models/card.rb` | モデル | カードモデル、closed/recently_closed_firstスコープ |
| routes.rb | `config/routes.rb` | 設定 | ルーティング定義 |
