228 lines
5.0 KiB
Markdown
228 lines
5.0 KiB
Markdown
You are a Senior Full Stack Engineer.
|
|
|
|
Project:
|
|
Training Management System (TMS)
|
|
|
|
Current task:
|
|
Update the Create/Edit Training Record form course field.
|
|
|
|
Requirement:
|
|
Change the course input behavior to a dropdown first, and only show text input when the employee selects "อื่น ๆ".
|
|
|
|
Important constraints:
|
|
|
|
- Do NOT change folder structure.
|
|
- Do NOT change database schema unless absolutely necessary.
|
|
- Do NOT remove existing courseName field.
|
|
- Do NOT break existing create/edit training record flow.
|
|
- Reuse existing Course Master data.
|
|
- Reuse existing Auth.js and Drizzle ORM.
|
|
- Keep Thai UI.
|
|
- Keep responsive/mobile behavior.
|
|
- Minimal-impact changes only.
|
|
|
|
Business behavior:
|
|
|
|
1. Course field should be displayed as a dropdown/select by default.
|
|
|
|
Label:
|
|
|
|
- ชื่อหลักสูตร \*
|
|
|
|
Placeholder:
|
|
|
|
- เลือกหลักสูตร
|
|
|
|
Dropdown options:
|
|
|
|
- Active courses from Course Master
|
|
- Last option must be:
|
|
อื่น ๆ
|
|
|
|
2. Course option display format:
|
|
|
|
If courseCode exists:
|
|
|
|
- courseCode - courseName
|
|
|
|
Example:
|
|
|
|
- IT001 - Cyber Security Awareness
|
|
|
|
If courseCode does not exist:
|
|
|
|
- courseName
|
|
|
|
3. When employee selects a Course Master item:
|
|
|
|
Set:
|
|
|
|
- courseId = selected course id
|
|
- courseName = selected course name
|
|
|
|
Optional auto-fill if data exists:
|
|
|
|
- provider / organizer
|
|
- submittedHours / standardHours
|
|
|
|
Do not show custom text input.
|
|
|
|
4. When employee selects "อื่น ๆ":
|
|
|
|
Behavior:
|
|
|
|
- Hide or replace the dropdown with a text input field.
|
|
- Show text input for custom course name.
|
|
|
|
Text input label:
|
|
|
|
- ชื่อหลักสูตรอื่น ๆ \*
|
|
|
|
Placeholder:
|
|
|
|
- กรอกชื่อหลักสูตร
|
|
|
|
Set:
|
|
|
|
- courseId = null
|
|
- courseName = custom text value
|
|
|
|
Also show a small button/link:
|
|
|
|
- เปลี่ยนกลับไปเลือกจากหลักสูตร
|
|
|
|
When clicked:
|
|
|
|
- Clear custom course name
|
|
- Show dropdown again
|
|
- courseId = selected/default state
|
|
- courseName = ""
|
|
|
|
5. Validation rules:
|
|
|
|
If selected course is from Course Master:
|
|
|
|
- courseId is required or courseName must be derived from selected course.
|
|
|
|
If selected "อื่น ๆ":
|
|
|
|
- custom courseName is required.
|
|
|
|
Thai validation messages:
|
|
|
|
- กรุณาเลือกหลักสูตร
|
|
- กรุณากรอกชื่อหลักสูตร
|
|
- กรุณาระบุจำนวนชั่วโมงอบรม
|
|
|
|
6. Edit mode behavior:
|
|
|
|
If existing record has courseId:
|
|
|
|
- show dropdown selected to that course.
|
|
|
|
If existing record has courseId = null but has courseName:
|
|
|
|
- show custom text input with existing courseName.
|
|
|
|
7. API / Data fetching:
|
|
|
|
Use existing Course Master API/query if available.
|
|
|
|
Course list should only show active courses.
|
|
|
|
Return course fields:
|
|
|
|
- id
|
|
- courseCode
|
|
- name
|
|
- standardHours
|
|
- organizer
|
|
- certificateRequired
|
|
|
|
8. Database behavior:
|
|
|
|
Training record must always save:
|
|
|
|
- courseName
|
|
|
|
Training record should save:
|
|
|
|
- courseId if selected from master
|
|
|
|
Training record should save:
|
|
|
|
- courseId = null if "อื่น ๆ"
|
|
|
|
Do not remove courseName because it is needed for historical reporting.
|
|
|
|
9. UI/UX:
|
|
|
|
Desktop:
|
|
|
|
- Dropdown full width
|
|
- Custom input full width
|
|
|
|
Mobile:
|
|
|
|
- Dropdown/input must fit screen width
|
|
|
|
Use existing UI components:
|
|
|
|
- Select
|
|
- Input
|
|
- Button
|
|
- FormField
|
|
|
|
Do not use complex combobox unless existing project already uses one.
|
|
|
|
10. Files likely involved:
|
|
|
|
- src/features/training-records/components/training-record-form.tsx
|
|
- src/features/training-records/schemas/training-record.ts
|
|
- src/features/training-records/api/types.ts
|
|
- src/features/training-records/server/training-record-data.ts
|
|
- src/app/api/training-records/route.ts
|
|
- src/app/api/training-records/[id]/route.ts
|
|
- src/app/api/courses/route.ts
|
|
- src/features/courses/server/course-data.ts
|
|
|
|
11. Output Review File
|
|
|
|
Create:
|
|
docs/management-change-training-course-dropdown-review.md
|
|
|
|
The file must include:
|
|
|
|
1. Summary
|
|
2. Files Changed
|
|
3. UI Changes
|
|
4. Course Dropdown Behavior
|
|
5. Custom Course Behavior
|
|
6. Edit Mode Behavior
|
|
7. Validation Rules
|
|
8. Database Behavior
|
|
9. Manual Test Checklist
|
|
10. Known Limitations
|
|
|
|
Manual Test Checklist:
|
|
|
|
- Create form shows course dropdown by default.
|
|
- Active Course Master records are shown in dropdown.
|
|
- "อื่น ๆ" appears as the last option.
|
|
- Selecting Course Master saves courseId and courseName.
|
|
- Selecting Course Master auto-fills provider if available.
|
|
- Selecting Course Master auto-fills hours if available.
|
|
- Selecting "อื่น ๆ" changes dropdown to text input.
|
|
- Custom course name is required when "อื่น ๆ" is selected.
|
|
- "เปลี่ยนกลับไปเลือกจากหลักสูตร" works.
|
|
- Edit existing master course shows dropdown selected.
|
|
- Edit existing custom course shows text input.
|
|
- HRD review page still shows course name correctly.
|
|
- Reports still show course name correctly.
|
|
- Mobile layout works.
|
|
|
|
Return:
|
|
|
|
- Complete code changes with file paths.
|
|
- Content of docs/management-change-training-course-dropdown-review.md.
|