mARTin
d92a8c7210
- Added 'onDelete' and 'onNotes' support to TaskItem. - Implemented hover actions (Delete and Notes icons) for tasks. - Added Notes Modal for editing task markdown content. - Simplified navigation animation to remove blank flash (single-phase slide-in). - Fixed syntax error in updateTask function. - Updated styles for modal and task actions.
69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
---
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- src/components/TaskList.tsx
|
|
- src/components/WeeklyCalendarView.tsx
|
|
- src/app/tasks/page.tsx
|
|
autonomous: true
|
|
gap_closure: true
|
|
---
|
|
|
|
# Plan 02-02: Implement UI Components for Weekly Calendar View
|
|
|
|
## Objective
|
|
Implement the user interface components needed to display and interact with tasks in a weekly calendar view.
|
|
|
|
## Tasks
|
|
|
|
1. **Create TaskList Component**
|
|
- Create `src/components/TaskList.tsx` component
|
|
- Accept array of tasks as props
|
|
- Render list of TaskItem components
|
|
- Handle empty state
|
|
|
|
2. **Create WeeklyCalendarView Component**
|
|
- Create `src/components/WeeklyCalendarView.tsx` component
|
|
- Display tasks grouped by day of the week
|
|
- Implement drag-and-drop functionality between days
|
|
- Add visual indicators for time allocation
|
|
- Include navigation controls for week switching
|
|
|
|
3. **Create Main Tasks Page**
|
|
- Create `src/app/tasks/page.tsx` page component
|
|
- Integrate WeeklyCalendarView component
|
|
- Fetch tasks from API endpoint
|
|
- Display tasks in weekly view
|
|
- Add necessary layout and styling
|
|
|
|
4. **Add Task Form Component**
|
|
- Create `src/components/TaskForm.tsx` form component
|
|
- Allow users to create new tasks
|
|
- Submit new task to API endpoint
|
|
- Handle form validation
|
|
|
|
5. **Add Navigation Controls**
|
|
- Implement previous/next week buttons
|
|
- Display current week range
|
|
- Enable keyboard navigation for weeks
|
|
|
|
6. **Style Components**
|
|
- Apply appropriate CSS/SCSS for layout
|
|
- Ensure responsive design
|
|
- Add visual feedback for drag-and-drop operations
|
|
- Implement time allocation visual indicators
|
|
|
|
## Verification Criteria
|
|
- [ ] TaskList component renders properly
|
|
- [ ] WeeklyCalendarView component displays tasks in weekly grid
|
|
- [ ] Drag-and-drop functionality works between days
|
|
- [ ] Navigation controls enable switching between weeks
|
|
- [ ] Main tasks page renders correctly
|
|
- [ ] Task form allows creation of new tasks
|
|
- [ ] Components are styled appropriately
|
|
|
|
## Must-Haves
|
|
- User can view tasks in a weekly grid view
|
|
- User can navigate between weeks
|
|
- User can drag and drop tasks between days of the week
|
|
- User can see time allocation clearly with visual indicators |