# 画面設計書 5-コレクションフィルター画面

## 概要

本ドキュメントは、Decap CMS のコレクションフィルター画面の画面設計書である。ネストコレクションのフィルターパスに基づいてエントリ一覧を絞り込んで表示する画面の仕様を定義する。

### 本画面の処理概要

**業務上の目的・背景**：ネストコレクション（階層構造を持つコレクション）において、特定のディレクトリパス配下のエントリのみを表示するためのフィルター機能を提供する。例えば、ドキュメントのカテゴリごとにフォルダ分けされたコンテンツを、特定カテゴリのフォルダ配下のみに絞り込んで管理できる。

**画面へのアクセス方法**：コレクション一覧画面のサイドバーにあるNestedCollectionコンポーネントのツリーノードをクリックすると、`/collections/:name/filter/:filterTerm*`のURLに遷移してこの画面が表示される。

**主要な操作・処理内容**：
1. フィルター条件に基づいてエントリ一覧を絞り込み表示する
2. エントリをクリックしてエントリ編集画面に遷移する
3. 「New」ボタンから新規エントリ作成画面に遷移する（filterTermがクエリパラメータとして付加される）
4. サイドバーでコレクションやフィルターパスを切り替える

**画面遷移**：
- 遷移元：コレクション一覧画面（ネストコレクションフィルター）
- 遷移先：エントリ編集画面（エントリ選択）、エントリ新規作成画面（新規作成ボタン）、コレクション一覧画面（サイドバーでコレクション切り替え）

**権限による表示制御**：コレクション設定の`create`フラグがfalseの場合、新規作成ボタンは非表示。ネストコレクション（`nested`設定あり）のコレクションでのみこのルートが意味を持つ。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 7 | エントリ読み込み | 主機能 | フィルター条件に基づくエントリの読み込みと表示 |
| 22 | コレクション表示 | 主機能 | フィルター適用後のエントリ一覧表示。filterTermパラメータに基づくフィルタリング |
| 23 | ネストコレクション | 補助機能 | ネストコレクションのフィルタリングパスに基づくツリー構造のナビゲーション |

## 画面種別

一覧（フィルター適用）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/collections/:name/filter/:filterTerm*` | フィルター適用コレクション一覧 |

## 入出力項目

### URLパラメータ

| パラメータ名 | 型 | 説明 |
|-------------|-----|------|
| name | string | コレクション名 |
| filterTerm | string | フィルターパス（ワイルドカード `*` 付きで可変長パスをサポート） |

## 表示項目

| 項目名 | 表示条件 | 説明 |
|--------|---------|------|
| サイドバー | 常時 | NestedCollectionでフィルターパスに応じたツリー表示 |
| コレクションラベル | 常時 | 選択中コレクションのlabel |
| 新規作成ボタン | collection.create === true | 「New {collectionLabel}」ボタン。filterTermがpath付きで付加 |
| コントロール群 | 常時 | ソート・フィルター・グループ・表示スタイルの切り替え |
| エントリ一覧 | 常時 | filterTermでフィルタリングされたEntriesCollectionの表示 |

## イベント仕様

### 1-エントリ選択

1. エントリ一覧からエントリをクリック
2. React Routerにより`/collections/:name/entries/:slug`に遷移

### 2-新規作成ボタン押下

1. CollectionTopの新規作成ボタンをクリック
2. `/collections/:name/new?path={filterTerm}`に遷移（Collection.js 行105-110）
3. エントリ新規作成画面でpathパラメータに基づいてファイルパスが設定される

### 3-フィルターパス変更

1. サイドバーのNestedCollectionでツリーノードをクリック
2. `/collections/:name/filter/{newFilterTerm}`に遷移
3. EntriesCollectionが新しいfilterTermで再描画

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| フィルターパス変更 | Redux State (entries) | SELECT | filterTermに基づくエントリの絞り込み表示 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|---------|
| collection.collectionTop.newButton | 情報 | 新規作成ボタン「New {collectionLabel}」 | create=trueのコレクション |

## 例外処理

| 例外条件 | 処理内容 | 画面表示 |
|---------|---------|---------|
| 存在しないフィルターパス | 空のエントリ一覧を表示 | エントリなしの状態表示 |
| ネストコレクション未設定のコレクション | ルーティングは一致するがフィルターが機能しない | 通常のコレクション一覧と同様の表示 |

## 備考

- この画面はCollectionコンポーネントの通常モード（isSearchResults=false）で、filterTermパラメータが設定されている状態である。
- filterTermはURLのワイルドカードパラメータ（`:filterTerm*`）で取得され、スラッシュ区切りの可変長パスをサポートする（App.js 行235-239）。
- 新規エントリ作成時にfilterTermがpathクエリパラメータとして付加されることで、ネストコレクション内の適切なディレクトリにエントリが作成される。
- EntriesCollectionにfilterTermが渡され、エントリのフィルタリングが行われる（Collection.js 行65-67）。

---

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

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

### 推奨読解順序

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

filterTermの取得方法とEntriesCollectionへの渡し方を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | mapStateToProps（行161）のfilterTerm取得。renderEntriesCollection（行63-67）でのfilterTerm渡し |

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

App.jsのフィルタールーティング定義を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | App.js | `packages/decap-cms-core/src/components/App/App.js` | 行235-239の`/collections/:name/filter/:filterTerm*`ルーティング |

#### Step 3: ネストコレクションの仕組みを理解する

NestedCollectionコンポーネントのツリー表示とフィルターパス生成を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | NestedCollection.js | `packages/decap-cms-core/src/components/Collection/NestedCollection.js` | ツリーノードのクリックによるフィルターパス遷移 |
| 3-2 | Sidebar.js | `packages/decap-cms-core/src/components/Collection/Sidebar.js` | renderLink（行85-109）でのNestedCollection描画条件 |

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

```
App.js (Route: /collections/:name/filter/:filterTerm*)
    |
    +-- Collection (filterTerm=URLパラメータ)
            |
            +-- Sidebar (filterTerm=URLパラメータ)
            |       +-- NestedCollection (filterTerm対応のツリー表示)
            |
            +-- CollectionMain
                    +-- CollectionTop (newEntryUrl + ?path=filterTerm)
                    +-- CollectionControls
                    +-- EntriesCollection (filterTerm=URLパラメータ)
```

### データフロー図

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

URLパラメータ        ──▶  Collection.mapStateToProps          ──▶  画面表示
(:name, :filterTerm)      |                                       |
                          +-- collections.get(name)               +-- NestedCollectionツリー
                          +-- filterTerm取得                      +-- CollectionTop + 新規作成ボタン
                                                                  +-- EntriesCollection(フィルタ済)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Collection.js | `packages/decap-cms-core/src/components/Collection/Collection.js` | ソース | フィルター画面のメインコンポーネント |
| NestedCollection.js | `packages/decap-cms-core/src/components/Collection/NestedCollection.js` | ソース | ネストコレクションのツリー表示 |
| Sidebar.js | `packages/decap-cms-core/src/components/Collection/Sidebar.js` | ソース | サイドバーコンポーネント |
| EntriesCollection.js | `packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js` | ソース | フィルタリングされたエントリ一覧の描画 |
| App.js | `packages/decap-cms-core/src/components/App/App.js` | ソース | ルーティング定義 |
