| @@ -0,0 +1,41 @@ | |||||
| --- | |||||
| created: 2026-05-08 | |||||
| status: approved | |||||
| --- | |||||
| # Cascading Channel-Model Selector for User Ratio | |||||
| ## Goal | |||||
| Improve the "Add Ratio" modal in UserRatioSection: select channel first, then pick a model from that channel's supported models via dropdown instead of manual text input. | |||||
| ## Scope | |||||
| Single file: `web/src/components/table/users/modals/UserRatioSection.jsx` | |||||
| No backend changes — the existing `/api/channel/` endpoint already returns the `models` field (comma-separated string) for each channel. | |||||
| ## Design | |||||
| ### Data flow | |||||
| 1. `loadChannels()` fetches channel list, stores two things: | |||||
| - `channelOptions`: `[{ label, value }]` for the channel dropdown (existing) | |||||
| - `channelMap`: `{ [channelId]: channelObject }` for looking up `models` by channel ID (new) | |||||
| 2. When user selects a channel in the form: | |||||
| - Parse `channel.models` by comma into an array | |||||
| - Set `modelOptions` to `[{ label: model, value: model }]` for each model | |||||
| - Clear any previously selected model value | |||||
| 3. Model dropdown uses `modelOptions` with `filter` and `showClear`, disabled when no channel is selected | |||||
| ### Form field order | |||||
| 1. Channel (Select, with search) — existing | |||||
| 2. Model (Select, with search) — changed from Input to Select | |||||
| 3. Ratio (InputNumber) — existing | |||||
| ### What does NOT change | |||||
| - Backend API and data model | |||||
| - Table columns and display | |||||
| - Submit payload format (`model_name`, `channel_id`, `ratio`) | |||||