# 画面設計書 61-自動化ルール一覧画面

## 概要

本ドキュメントは、Chatwootの自動化ルール一覧画面の設計仕様を記述したものです。

### 本画面の処理概要

本画面は、アカウント内で設定されている自動化ルール（Automation Rules）の一覧を表示し、ルールの作成・編集・削除・複製・有効/無効切り替えを管理するための画面です。

**業務上の目的・背景**：カスタマーサポート業務において、会話の自動振り分け、自動ラベル付け、自動応答などの反復的なタスクを自動化することで、エージェントの作業効率を向上させ、対応品質を均一化する必要があります。本画面は、これらの自動化ルールを一元的に管理するためのインターフェースを提供します。

**画面へのアクセス方法**：ダッシュボードの左サイドバーから「設定」を選択し、「自動化」メニューをクリックしてアクセスします。URLパスは `/app/accounts/:accountId/settings/automation/list` です。

**主要な操作・処理内容**：
1. 自動化ルールの一覧表示（名前、説明、有効状態、作成日）
2. 新規自動化ルールの作成（モーダルダイアログで実行）
3. 既存ルールの編集（モーダルダイアログで実行）
4. ルールの削除（確認ダイアログ付き）
5. ルールの複製（クローン機能）
6. ルールの有効/無効切り替え（トグルスイッチ）

**画面遷移**：
- 遷移元：設定ホーム画面、サイドバーメニュー
- 遷移先：なし（モーダル内で操作完結）

**権限による表示制御**：管理者（administrator）権限を持つユーザーのみがアクセス可能です。一般エージェントはこの画面にアクセスできません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 73 | オートメーションルール作成・管理 | 主機能 | 自動化ルールの一覧表示 |
| 74 | ルールクローン | 補助機能 | 既存ルールの複製 |

## 画面種別

一覧

## URL/ルーティング

| 項目 | 値 |
|------|-----|
| パス | `/app/accounts/:accountId/settings/automation/list` |
| ルート名 | `automation_list` |
| コンポーネント | `app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue` |
| 権限 | `administrator` |
| フィーチャーフラグ | `AUTOMATIONS` |

## 入出力項目

### 入力項目（新規作成/編集モーダル）

| 項目名 | 項目ID | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| ルール名 | name | string | 必須 | 自動化ルールの名称 |
| 説明 | description | string | 任意 | ルールの説明文 |
| イベント名 | event_name | string | 必須 | トリガーとなるイベント |
| 条件 | conditions | array | 必須 | ルールが適用される条件 |
| アクション | actions | array | 必須 | 実行されるアクション |
| 有効フラグ | active | boolean | 必須 | ルールの有効/無効状態 |

## 表示項目

### 一覧テーブル

| 項目名 | 項目ID | 型 | 説明 |
|--------|--------|-----|------|
| ルール名 | name | string | 自動化ルールの名称 |
| 説明 | description | string | ルールの説明文 |
| 有効状態 | active | boolean | トグルスイッチで表示 |
| 作成日 | created_on | datetime | `LLL d, yyyy` 形式で表示 |

### アクションボタン

| ボタン名 | アイコン | 説明 |
|---------|---------|------|
| 編集 | i-lucide-pen | ルールを編集 |
| 複製 | i-lucide-copy-plus | ルールを複製 |
| 削除 | i-lucide-trash-2 | ルールを削除 |

## イベント仕様

### 1-ルール追加ボタン押下

ヘッダー部の「+ Add Automation Rule」ボタンをクリックすると、新規作成用のモーダルダイアログが表示されます。

**処理フロー**：
1. `openAddPopup()` が呼び出される
2. `showAddPopup` が `true` に設定される
3. `AddAutomationRule` コンポーネントがモーダル内に表示される

### 2-ルール編集ボタン押下

一覧の各行にある編集ボタンをクリックすると、編集用のモーダルダイアログが表示されます。

**処理フロー**：
1. `openEditPopup(automation)` が呼び出される
2. 選択された自動化ルールが `selectedAutomation` に格納される
3. `showEditPopup` が `true` に設定される
4. `EditAutomationRule` コンポーネントがモーダル内に表示される

### 3-ルール削除ボタン押下

一覧の各行にある削除ボタンをクリックすると、確認ダイアログが表示されます。

**処理フロー**：
1. `openDeletePopup(automation)` が呼び出される
2. 選択された自動化ルールが `selectedAutomation` に格納される
3. `showDeleteConfirmationPopup` が `true` に設定される
4. 確認後、`confirmDeletion()` が呼び出される
5. `store.dispatch('automations/delete', id)` でAPIを呼び出し
6. 成功時：成功メッセージを表示
7. 失敗時：エラーメッセージを表示

### 4-ルール複製ボタン押下

一覧の各行にある複製ボタンをクリックすると、選択したルールのコピーが作成されます。

**処理フロー**：
1. `cloneAutomation({ id })` が呼び出される
2. `store.dispatch('automations/clone', id)` でAPIを呼び出し
3. 成功後、`store.dispatch('automations/get')` で一覧を再取得
4. 成功時：成功メッセージを表示
5. 失敗時：エラーメッセージを表示

### 5-有効/無効トグル切り替え

一覧の各行にあるトグルスイッチを操作すると、ルールの有効/無効状態が切り替わります。

**処理フロー**：
1. `toggleAutomation({ id, name, status })` が呼び出される
2. 確認ダイアログが表示される（有効化/無効化に応じたメッセージ）
3. 確認後、`store.dispatch('automations/update', { id, active: !status })` でAPIを呼び出し
4. 成功時：成功メッセージを表示
5. 失敗時：エラーメッセージを表示

### 6-新規作成/編集フォーム送信

モーダル内のフォームを送信すると、ルールが作成または更新されます。

**処理フロー**：
1. `submitAutomation(payload, mode)` が呼び出される
2. `mode` に応じて `automations/create` または `automations/update` アクションをディスパッチ
3. 成功時：成功メッセージを表示し、モーダルを閉じる
4. 失敗時：エラーメッセージを表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ルール一覧取得 | automation_rules | SELECT | アカウントに紐づく全ルールを取得 |
| ルール作成 | automation_rules | INSERT | 新しい自動化ルールを作成 |
| ルール更新 | automation_rules | UPDATE | 既存ルールの情報を更新 |
| ルール削除 | automation_rules | DELETE | 指定されたルールを削除 |
| ルール複製 | automation_rules | INSERT | 既存ルールをコピーして新規作成 |

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

#### automation_rules

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | シーケンス自動採番 | 主キー |
| INSERT | name | フォーム入力値 | ルール名 |
| INSERT | description | フォーム入力値 | 説明文 |
| INSERT | event_name | フォーム入力値 | トリガーイベント |
| INSERT | conditions | JSON形式のフォーム入力値 | 条件配列 |
| INSERT | actions | JSON形式のフォーム入力値 | アクション配列 |
| INSERT | active | true（デフォルト） | 有効フラグ |
| INSERT | account_id | Current.account.id | アカウントID |
| INSERT | created_at | 現在日時 | 作成日時 |
| INSERT | updated_at | 現在日時 | 更新日時 |
| UPDATE | name, description, conditions, actions, active | フォーム入力値 | 編集時 |
| UPDATE | updated_at | 現在日時 | 更新日時 |
| DELETE | - | WHERE id = :id | 指定IDのレコードを削除 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示タイミング |
|-------------|------|---------------|---------------|
| AUTOMATION.ADD.API.SUCCESS_MESSAGE | 成功 | ルール作成成功 | ルール作成成功時 |
| AUTOMATION.ADD.API.ERROR_MESSAGE | エラー | ルール作成失敗 | ルール作成失敗時 |
| AUTOMATION.EDIT.API.SUCCESS_MESSAGE | 成功 | ルール更新成功 | ルール更新成功時 |
| AUTOMATION.EDIT.API.ERROR_MESSAGE | エラー | ルール更新失敗 | ルール更新失敗時 |
| AUTOMATION.DELETE.API.SUCCESS_MESSAGE | 成功 | ルール削除成功 | ルール削除成功時 |
| AUTOMATION.DELETE.API.ERROR_MESSAGE | エラー | ルール削除失敗 | ルール削除失敗時 |
| AUTOMATION.CLONE.API.SUCCESS_MESSAGE | 成功 | ルール複製成功 | ルール複製成功時 |
| AUTOMATION.CLONE.API.ERROR_MESSAGE | エラー | ルール複製失敗 | ルール複製失敗時 |
| AUTOMATION.TOGGLE.ACTIVATION_SUCCESFUL | 成功 | ルール有効化成功 | 有効化成功時 |
| AUTOMATION.TOGGLE.DEACTIVATION_SUCCESFUL | 成功 | ルール無効化成功 | 無効化成功時 |
| AUTOMATION.DELETE.CONFIRM.MESSAGE | 確認 | 削除確認メッセージ | 削除ボタン押下時 |
| AUTOMATION.LIST.404 | 情報 | ルールがありません | ルールが0件の場合 |
| AUTOMATION.LOADING | 情報 | 読み込み中 | データ取得中 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| データ取得失敗 | エラーを無視し、空のリストを表示 |
| 作成/更新失敗 | エラーメッセージをアラート表示 |
| 削除失敗 | エラーメッセージをアラート表示 |
| 複製失敗 | エラーメッセージをアラート表示 |
| 権限不足 | 画面にアクセス不可（ルーティングで制御） |

## 備考

- SLA機能が有効な場合（`isSLAEnabled`）、画面マウント時にSLAデータも取得する
- 画面マウント時に関連データ（インボックス、エージェント、連絡先、チーム、ラベル、キャンペーン）も事前取得する
- Enterprise版では監査ログ機能が追加される（`AutomationRule.include_mod_with('Audit::AutomationRule')`）

---

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

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

### 推奨読解順序

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

自動化ルールのデータ構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | automation_rule.rb | `app/models/automation_rule.rb` | モデル定義、バリデーション、条件とアクションの属性を確認 |

**読解のコツ**: `conditions_attributes` と `actions_attributes` メソッドで、利用可能な条件とアクションの種類を確認できます。

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

Vueコンポーネントがエントリーポイントとなります。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue` | 画面の構成、イベントハンドラ、Vuexストアとの連携を確認 |

**主要処理フロー**:
1. **46-57行目**: `onMounted` で関連データを取得
2. **28-30行目**: `computed` プロパティでストアからデータを取得
3. **59-128行目**: 各種イベントハンドラの定義

#### Step 3: Vuex Store層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | automations.js | `app/javascript/dashboard/store/modules/automations.js` | state、getters、actions、mutationsの構造を確認 |

**主要処理フロー**:
- **26-36行目**: `get` アクションでAPI呼び出し
- **37-47行目**: `create` アクションで新規作成
- **48-58行目**: `update` アクションで更新
- **59-69行目**: `delete` アクションで削除
- **70-79行目**: `clone` アクションで複製

#### Step 4: API層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | automation.js | `app/javascript/dashboard/api/automation.js` | APIクライアントの構造、エンドポイントを確認 |

**主要処理フロー**:
- **4-7行目**: `ApiClient` を継承し、`automation_rules` エンドポイントを使用
- **9-11行目**: `clone` メソッドでPOSTリクエスト

#### Step 5: バックエンド層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | automation_rules_controller.rb | `app/controllers/api/v1/accounts/automation_rules_controller.rb` | コントローラのアクション、許可パラメータを確認 |

**主要処理フロー**:
- **7-9行目**: `index` アクションで全ルールを取得
- **13-25行目**: `create` アクションで新規作成（添付ファイル対応）
- **27-41行目**: `update` アクションで更新
- **43-46行目**: `destroy` アクションで削除
- **48-53行目**: `clone` アクションで複製

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

```
Index.vue (エントリーポイント)
    │
    ├─ onMounted()
    │      └─ store.dispatch('automations/get')
    │             └─ AutomationAPI.get()
    │                    └─ GET /api/v1/accounts/:account_id/automation_rules
    │
    ├─ submitAutomation()
    │      └─ store.dispatch('automations/create' or 'automations/update')
    │             └─ AutomationAPI.create() or AutomationAPI.update()
    │
    ├─ deleteAutomation()
    │      └─ store.dispatch('automations/delete')
    │             └─ AutomationAPI.delete()
    │
    ├─ cloneAutomation()
    │      └─ store.dispatch('automations/clone')
    │             └─ AutomationAPI.clone()
    │
    └─ toggleAutomation()
           └─ store.dispatch('automations/update')
                  └─ AutomationAPI.update()
```

### データフロー図

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

ユーザー操作 ────────▶ Index.vue ─────────────▶ 画面表示更新
                           │
                           ▼
                      Vuex Store
                     (automations)
                           │
                           ▼
                      AutomationAPI
                           │
                           ▼
                  Rails Controller
         (automation_rules_controller.rb)
                           │
                           ▼
                    AutomationRule
                       (Model)
                           │
                           ▼
                    PostgreSQL
                 (automation_rules)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue` | ソース | メイン画面コンポーネント |
| AddAutomationRule.vue | `app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue` | ソース | 新規作成モーダル |
| EditAutomationRule.vue | `app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue` | ソース | 編集モーダル |
| AutomationRuleRow.vue | `app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue` | ソース | 一覧行コンポーネント |
| automations.js | `app/javascript/dashboard/store/modules/automations.js` | ソース | Vuexストアモジュール |
| automation.js | `app/javascript/dashboard/api/automation.js` | ソース | APIクライアント |
| automation.routes.js | `app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js` | ソース | ルート定義 |
| automation_rules_controller.rb | `app/controllers/api/v1/accounts/automation_rules_controller.rb` | ソース | Railsコントローラ |
| automation_rule.rb | `app/models/automation_rule.rb` | ソース | モデル定義 |
| SettingsLayout.vue | `app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue` | ソース | 設定画面レイアウト |
| BaseSettingsHeader.vue | `app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue` | ソース | 設定画面ヘッダー |
