modify my task
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
schema: spec-driven
|
||||
created: 2026-02-28
|
||||
@@ -0,0 +1,79 @@
|
||||
## Context
|
||||
|
||||
此變更旨在修改「我的任務」(My Tasks) 頁面的佈局，使其更接近 Shot Task 頁面的設計。目前 My Tasks 頁面使用專案任務頁面的佈局，但用戶希望它能更像 Shot Task 頁面，以提供更好的視覺一致性和使用體驗。
|
||||
|
||||
現有系統已經具備：
|
||||
- 完整的 My Tasks 功能（使用 project task page layout）
|
||||
- Shot Task 頁面的佈局設計
|
||||
- DataTable 元件
|
||||
- Tailwind CSS 和 shadcn-vue 元件庫
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- 將 My Tasks 頁面的 header 區域改為 Shot Task 風格
|
||||
- 調整資料表格的列配置與 Shot Task 頁面一致
|
||||
- 保持現有的篩選、排序、分頁功能
|
||||
- 確保視覺層級與 Shot Task 頁面一致
|
||||
|
||||
**Non-Goals:**
|
||||
- 不會修改 Shot Task 頁面本身
|
||||
- 不會新增或移除功能（僅改變佈局）
|
||||
- 不會修改 API 端點
|
||||
|
||||
## Decisions
|
||||
|
||||
### 1. 佈局策略：完整採用 Shot Task 風格 vs 混合風格
|
||||
**Decision**: 主要採用 Shot Task 風格，保留 My Tasks 特有的跨專案篩選功能
|
||||
|
||||
**Rationale**:
|
||||
- 用戶明確要求接近 Shot Task 佈局
|
||||
- Shot Task 佈局已驗證且用戶熟悉
|
||||
- My Tasks 的跨專案特性需要在頂部保留專案篩選器
|
||||
|
||||
**Alternative considered**: 完全複製 Shot Task 佈局
|
||||
- 這個方法會失去 My Tasks 的特色（跨專案視圖）
|
||||
|
||||
### 2. Header 設計
|
||||
**Decision**: 使用 Shot Task 的 header 結構，但加上專案篩選下拉選單
|
||||
|
||||
**Rationale**:
|
||||
- Shot Task header 包含標題、篩選器、操作按鈕
|
||||
- My Tasks 需要顯示所有專案的任務，專案篩選是關鍵功能
|
||||
|
||||
### 3. 資料表格欄位
|
||||
**Decision**: 參考 Shot Task 的欄位配置，但加入「專案」欄位
|
||||
|
||||
**Rationale**:
|
||||
- Shot Task 欄位適合任務管理
|
||||
- My Tasks 是跨專案視圖，需要顯示任務所屬專案
|
||||
|
||||
**Risks**:
|
||||
- [Risk] 新舊佈局差異造成用戶困惑 → **Mitigation**: 保持整體結構相似，只調整細節
|
||||
- [Risk] 共用元件修改影響 Shot Task → **Mitigation**: 使用條件式 props 或建立變體元件
|
||||
|
||||
## Migration Plan
|
||||
|
||||
此變更為前端佈局修改，不需要資料遷移。部署步驟：
|
||||
|
||||
1. **修改 MyTasksView 元件**：
|
||||
- 更新 header 區域樣式
|
||||
- 調整 DataTable 欄位配置
|
||||
- 確保與 Shot Task 風格一致
|
||||
|
||||
2. **測試**：
|
||||
- 驗證 My Tasks 頁面顯示正確
|
||||
- 確認篩選、排序功能正常
|
||||
- 檢查與 Shot Task 頁面的視覺一致性
|
||||
|
||||
3. **部署**：
|
||||
- 前端部署後自動生效
|
||||
- 可隨時回滾到舊版佈局
|
||||
|
||||
## Open Questions
|
||||
|
||||
- **Q1**: 是否需要建立可重用的佈局元件供 Shot Task 和 My Tasks 共用？
|
||||
- **建議**: 先直接修改，後續重構時再提取共用元件
|
||||
|
||||
- **Q2**: My Tasks 是否需要顯示與 Shot Task 相同的其他資訊（如進度條）？
|
||||
- **建議**: 先保持基本一致，後續根據需求擴展
|
||||
@@ -0,0 +1,26 @@
|
||||
## Why
|
||||
|
||||
The My Tasks page currently uses the project task page layout, but users have requested that it should more closely resemble the Shot Task page layout for better consistency and improved user experience when working across different task types.
|
||||
|
||||
## What Changes
|
||||
|
||||
- Modify My Tasks page layout to match Shot Task page design patterns
|
||||
- Update header section to use Shot-style project/filter bar
|
||||
- Adjust data table columns and styling to align with Shot Task view
|
||||
- Ensure consistent visual hierarchy and component usage
|
||||
- Maintain existing functionality while improving layout consistency
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `my-task-shot-layout`: Align My Tasks page layout with Shot Task page design
|
||||
|
||||
### Modified Capabilities
|
||||
- `my-tasks-view`: Update layout requirement to use Shot Task style instead of project task page style
|
||||
|
||||
## Impact
|
||||
|
||||
- Frontend: My Tasks view component modifications
|
||||
- UI Components: Potential need for shared layout components between Shot and My Tasks pages
|
||||
- No API changes required (existing endpoints continue to work)
|
||||
- Minimal impact on existing functionality
|
||||
@@ -0,0 +1,34 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: My Tasks page uses Shot Task style header
|
||||
The My Tasks page SHALL use a header layout consistent with the Shot Task page, including title, filter bar, and action buttons.
|
||||
|
||||
#### Scenario: My Tasks header matches Shot Task style
|
||||
- **WHEN** the My Tasks page is rendered
|
||||
- **THEN** the header SHALL contain a title section, filter controls, and action buttons arranged similarly to the Shot Task page
|
||||
|
||||
#### Scenario: Header includes project filter
|
||||
- **WHEN** the My Tasks header is displayed
|
||||
- **THEN** there SHALL be a project dropdown filter to select which project's tasks to view (or all projects)
|
||||
|
||||
### Requirement: My Tasks data table columns match Shot Task configuration
|
||||
The My Tasks page SHALL display task data in columns that align with the Shot Task page table structure, with the addition of a Project column.
|
||||
|
||||
#### Scenario: Table columns follow Shot Task pattern
|
||||
- **WHEN** the My Tasks data table is rendered
|
||||
- **THEN** it SHALL display columns similar to Shot Task (e.g., Name, Status, Priority, Due Date, Assignee) plus a Project column
|
||||
|
||||
#### Scenario: Column ordering is consistent with Shot Task
|
||||
- **WHEN** the columns are displayed
|
||||
- **THEN** they SHALL be ordered to match Shot Task conventions with Project column prominently placed
|
||||
|
||||
### Requirement: My Tasks visual styling matches Shot Task page
|
||||
The My Tasks page SHALL use visual styling (colors, spacing, typography) consistent with the Shot Task page.
|
||||
|
||||
#### Scenario: Visual consistency with Shot Task
|
||||
- **WHEN** the My Tasks page is rendered
|
||||
- **THEN** it SHALL use the same color scheme, spacing, and typography as the Shot Task page
|
||||
|
||||
#### Scenario: Component styling matches Shot Task
|
||||
- **WHEN** UI components (buttons, inputs, dropdowns) are rendered
|
||||
- **THEN** they SHALL use the same styling as corresponding Shot Task components
|
||||
@@ -0,0 +1,55 @@
|
||||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: My Tasks View uses Shot Task page layout instead of project task page layout
|
||||
The system SHALL use the Shot Task page layout and styling for the My Tasks page to ensure visual consistency across the application.
|
||||
|
||||
#### Scenario: My Tasks uses Shot Task layout style
|
||||
- **WHEN** the My Tasks page is rendered
|
||||
- **THEN** it SHALL use the same layout structure as the Shot Task page (header with filters, data table, pagination)
|
||||
|
||||
#### Scenario: My Tasks uses Shot Task visual styling
|
||||
- **WHEN** the My Tasks page components are rendered
|
||||
- **THEN** they SHALL use the same visual styling (colors, spacing, typography) as the Shot Task page
|
||||
|
||||
### Requirement: My Tasks View displays all tasks assigned to the current user across projects
|
||||
The system SHALL provide a My Tasks page that displays a unified list of all tasks assigned to the currently logged-in user, aggregated from all projects where the user has access.
|
||||
|
||||
#### Scenario: User accesses My Tasks page
|
||||
- **WHEN** the user navigates to the My Tasks page (e.g., /my-tasks)
|
||||
- **THEN** the system SHALL display a list of all tasks assigned to the user across all accessible projects
|
||||
|
||||
#### Scenario: My Tasks page shows task details
|
||||
- **WHEN** the My Tasks list is displayed
|
||||
- **THEN** each task item SHALL display at minimum: task name, project name, status, due date, and assignee
|
||||
|
||||
#### Scenario: User can filter tasks by project
|
||||
- **WHEN** the user selects a specific project from the project filter dropdown
|
||||
- **THEN** the list SHALL display only tasks from the selected project
|
||||
|
||||
#### Scenario: User can filter tasks by status
|
||||
- **WHEN** the user selects a specific status from the status filter dropdown
|
||||
- **THEN** the list SHALL display only tasks with the selected status
|
||||
|
||||
#### Scenario: User can sort tasks
|
||||
- **WHEN** the user clicks a column header to sort
|
||||
- **THEN** the list SHALL be sorted by that column in ascending/descending order
|
||||
|
||||
#### Scenario: User clicks on a task
|
||||
- **WHEN** the user clicks on a task row in the My Tasks list
|
||||
- **THEN** the system SHALL navigate to the task detail page in its project (e.g., /projects/{project_id}/tasks/{task_id})
|
||||
|
||||
#### Scenario: User sees only accessible tasks
|
||||
- **WHEN** the My Tasks list is loaded
|
||||
- **THEN** tasks from projects where the user lacks access SHALL NOT be displayed
|
||||
|
||||
#### Scenario: API returns user's tasks
|
||||
- **WHEN** a authenticated user requests GET /api/tasks/my-tasks
|
||||
- **THEN** the system SHALL return a list of tasks assigned to that user
|
||||
|
||||
#### Scenario: API supports project filter
|
||||
- **WHEN** the user requests GET /api/tasks/my-tasks?project_id={id}
|
||||
- **THEN** the system SHALL return only tasks from the specified project
|
||||
|
||||
#### Scenario: API supports status filter
|
||||
- **WHEN** the user requests GET /api/tasks/my-tasks?status={status}
|
||||
- **THEN** the system SHALL return only tasks with the selected status
|
||||
@@ -0,0 +1,32 @@
|
||||
## 1. Research and Analysis
|
||||
|
||||
- [x] 1.1 Review existing Shot Task page layout and component structure
|
||||
- [x] 1.2 Review current My Tasks page implementation
|
||||
- [x] 1.3 Identify shared components and differences between the two layouts
|
||||
|
||||
## 2. Header Implementation
|
||||
|
||||
- [x] 2.1 Update My Tasks header to match Shot Task header structure
|
||||
- [x] 2.2 Add project filter dropdown to header
|
||||
- [x] 2.3 Style header with Shot Task visual patterns (colors, spacing, typography)
|
||||
|
||||
## 3. Data Table Configuration
|
||||
|
||||
- [x] 3.1 Configure DataTable columns to match Shot Task column layout
|
||||
- [x] 3.2 Add Project column to My Tasks table
|
||||
- [x] 3.3 Ensure column ordering is consistent with Shot Task
|
||||
|
||||
## 4. Visual Styling Updates
|
||||
|
||||
- [x] 4.1 Apply Shot Task color scheme to My Tasks page
|
||||
- [x] 4.2 Update typography and spacing to match Shot Task
|
||||
- [x] 4.3 Style buttons, inputs, and dropdowns consistently
|
||||
|
||||
## 5. Testing and Verification
|
||||
|
||||
- [ ] 5.1 Verify My Tasks page displays correctly
|
||||
- [ ] 5.2 Test project filter functionality
|
||||
- [ ] 5.3 Test status filter functionality
|
||||
- [ ] 5.4 Test sorting functionality
|
||||
- [ ] 5.5 Verify visual consistency with Shot Task page
|
||||
- [ ] 5.6 Test navigation to task details
|
||||
Reference in New Issue
Block a user