# 画面設計書 59-チーム編集画面

## 概要

本ドキュメントは、Chatwootのチーム編集画面の設計書です。既存チームの基本情報を編集する画面です。

### 本画面の処理概要

既存チームの基本情報（名前、説明、自動割り当て設定）を編集する画面です。編集後はメンバー編集画面へ遷移します。

**業務上の目的・背景**：チームの役割や責任範囲が変更された場合、チーム名や説明を更新する必要があります。また、自動割り当て設定を変更することで、会話ルーティングの動作を調整できます。

**画面へのアクセス方法**：設定メニュー > チーム > 対象チームの設定ボタン押下

**主要な操作・処理内容**：
1. 既存チームの情報をフォームに表示
2. チーム名の編集（必須）
3. チーム説明の編集（任意）
4. 自動割り当て設定のオン/オフ
5. 「次へ」ボタン押下でチーム更新、メンバー編集画面へ遷移

**画面遷移**：
- 遷移元: チーム一覧画面
- 遷移先: チームメンバー編集画面（settings_teams_edit_members）

**権限による表示制御**：管理者（administrator）のみがこの画面にアクセス可能

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | チーム管理 | 主機能 | 既存チームの編集 |

## 画面種別

編集（ウィザード形式の第1ステップ）

## URL/ルーティング

- パス: `/app/accounts/:accountId/settings/teams/:teamId/edit`
- ルート名: `settings_teams_edit`
- 権限: administrator

## 入出力項目

| 項目名 | 型 | 必須 | 説明 | バリデーション |
|--------|------|------|------|--------------|
| title (name) | String | Yes | チーム名 | 必須 |
| description | String | No | チーム説明 | なし |
| allowAutoAssign | Boolean | No | 自動割り当て有効化 | なし |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| teamData.name | String | 現在のチーム名（初期値） |
| teamData.description | String | 現在のチーム説明（初期値） |
| teamData.allow_auto_assign | Boolean | 現在の自動割り当て設定（初期値） |

## イベント仕様

### 1-フォーム送信（updateTeam）

**トリガー**: 「次へ」ボタン押下

**処理フロー**:
1. Vuelidateによるバリデーション実行
2. バリデーションエラーがあれば処理中断
3. URLパラメータから`teamId`を取得
4. `store.dispatch('teams/update', { id, ...data })`を実行
5. 成功時: `settings_teams_edit_members`へ遷移
6. 失敗時: エラーメッセージをアラート表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| チーム更新 | teams | UPDATE | 既存チームを更新 |

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

#### teams

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name | フォーム入力値 | 必須 |
| UPDATE | description | フォーム入力値 | 任意 |
| UPDATE | allow_auto_assign | チェックボックスの値 | |

## メッセージ仕様

| 種別 | キー | 表示条件 | メッセージ内容 |
|------|------|----------|--------------|
| エラー | TEAMS_SETTINGS.TEAM_FORM.ERROR_MESSAGE | チーム更新失敗時 | チーム更新エラー |
| エラー | バリデーションエラー | 入力値が無効な場合 | フォームにエラーメッセージ表示 |

## 例外処理

| 例外状況 | 対応処理 |
|----------|----------|
| チーム名未入力 | バリデーションエラーメッセージを表示、送信ボタン無効化 |
| API通信エラー | `useAlert()`でエラーメッセージをトースト表示 |
| チームデータ未取得 | Spinnerコンポーネントを表示 |
| 権限不足 | ルートガードにより画面アクセス自体をブロック |

## 備考

- TeamFormコンポーネントを共有使用（新規作成・編集共通）
- teamDataはVuexストアから取得（`teams/getTeam`ゲッター）
- データ取得中はSpinnerを表示
- showTeamForm computedでフォーム表示条件を制御

---

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

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

### 推奨読解順序

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

チームのデータ取得と更新を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | actions.js | `app/javascript/dashboard/store/modules/teams/actions.js` | updateアクション |
| 1-2 | teams.js | `app/javascript/dashboard/api/teams.js` | APIクライアント |

**読解のコツ**: `TeamsAPI.update()`はPATCHリクエストを送信し、更新されたチームオブジェクトを返す。

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

Vueコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | EditTeam.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue` | メインコンポーネント |
| 2-2 | TeamForm.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue` | 共通フォームコンポーネント |

**主要処理フロー**:
1. **EditTeam L22-24**: `teamData`でVuexストアからチームデータを取得
2. **EditTeam L25-28**: `showTeamForm`でフォーム表示条件を判定
3. **EditTeam L35-53**: `updateTeam()`メソッドでチーム更新処理
4. **EditTeam L44-49**: 成功時にメンバー編集画面へ遷移

#### Step 3: ルーティング設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | teams.routes.js | `app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js` | 編集ウィザードのルート定義 |

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

```
EditTeam.vue (コンポーネント)
    │
    ├─ computed: teamData
    │      └─ getters['teams/getTeam'](teamId)
    │
    ├─ computed: showTeamForm
    │      └─ teamData.id && !uiFlags.isFetching
    │
    └─ TeamForm.vue (子コンポーネント)
           │
           ├─ formData prop
           │      └─ teamData (既存データを渡す)
           │
           └─ handleSubmit()
                  │
                  └─ onSubmit(data)
                         │
                         ▼
                  updateTeam(data) [EditTeam.vue]
                         │
                         ├─ store.dispatch('teams/update', { id, ...data })
                         │      └─ TeamsAPI.update()
                         │             └─ PATCH /api/v1/accounts/:id/teams/:teamId
                         │
                         └─ router.replace({ name: 'settings_teams_edit_members' })
```

### データフロー図

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

route.params.teamId
        │
        ▼
getters['teams/getTeam']
        │
        ▼
teamData ────────────────▶ TeamForm (formData prop)
(既存チームデータ)                  │
                                   ▼
                            フォーム表示
                            (初期値セット)
                                   │
                            ユーザー編集
                                   │
                                   ▼
                            handleSubmit()
                                   │
                                   ▼
                            updateTeam(data)
                                   │
                                   ▼
                            store.dispatch('teams/update')
                                   │
                                   ▼
                            TeamsAPI.update()
                                   │
                                   ▼
                            router.replace()
                            (メンバー編集画面へ)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| EditTeam.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue` | ソース | メインコンポーネント |
| TeamForm.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue` | ソース | フォームコンポーネント |
| teams.routes.js | `app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js` | ソース | ルーティング定義 |
| actions.js | `app/javascript/dashboard/store/modules/teams/actions.js` | ソース | Vuexアクション |
| teams.js | `app/javascript/dashboard/api/teams.js` | ソース | APIクライアント |
| Spinner.vue | `app/javascript/shared/components/Spinner.vue` | ソース | ローディングスピナー |
| SettingsSubPageHeader.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/SettingsSubPageHeader.vue` | ソース | ヘッダーコンポーネント |
