27 lines
1.3 KiB
Markdown
27 lines
1.3 KiB
Markdown
|
I will modify `src/pages/admin/ExamTaskPage.tsx` to optimize the user selection display and the table layout.
|
||
|
|
|
||
|
|
**Implementation Steps:**
|
||
|
|
|
||
|
|
1. **Optimize User Selection (`Select`** **Component):**
|
||
|
|
|
||
|
|
* Add `optionLabelProp="label"` to the `Select` component.
|
||
|
|
|
||
|
|
* Update `Select.Option` to include a `label={user.name}` prop.
|
||
|
|
|
||
|
|
* This ensures that while the dropdown still shows "Name (Phone)" for clarity, the selected tags in the input box will only show "Name", saving significant space.
|
||
|
|
|
||
|
|
2. **Optimize Table Layout (`columns`** **Configuration):**
|
||
|
|
|
||
|
|
* **Task Name & Subject:** Add specific `width` properties (e.g., `200px` and `150px`) and `ellipsis: true` to the "Task Name" and "Exam Subject" columns to give them more space and handle overflow gracefully.
|
||
|
|
|
||
|
|
* **Action Column:** Change the `<Space>` component in the "Action" column to `<Space direction="vertical" size={0}>`. This will stack the "Edit", "Report", and "Delete" buttons vertically, reducing the column's required width. I will also set a fixed, narrower width for this column.
|
||
|
|
|
||
|
|
3. **Verification:**
|
||
|
|
|
||
|
|
* Verify that selected users in the form only show their names.
|
||
|
|
|
||
|
|
* Verify that the table "Action" column is narrower with vertically stacked buttons.
|
||
|
|
|
||
|
|
* Verify that "Task Name" and "Exam Subject" columns are wider.
|
||
|
|
|