feat: task page#228
Conversation
WalkthroughUpdates task navigation routes and creates a new task detail page. Refactors TaskInfoCard with completion and focus state indicators. Enhances StaffBlock with horizontal scrolling layout and increased avatar borders. Adds motion preset animations to multiple page transitions. Updates navigation labels and routes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TaskList as task/all.vue
participant TaskDetail as task/[taskId]/index.vue
participant Store as Task Store
User->>TaskList: View all tasks
TaskList->>Store: Fetch tasks
Store-->>TaskList: Return tasks
rect rgb(240, 248, 255)
Note over TaskList: Each task wrapped in<br/>NuxtLink to /task/{id}
User->>TaskDetail: Click task
end
TaskDetail->>Store: Get task by ID
Store-->>TaskDetail: Return task
rect rgb(240, 248, 255)
Note over TaskDetail: Compute states &<br/>render completed/focus UI
alt Task completed
TaskDetail->>TaskDetail: Show check + date
else Task in progress
TaskDetail->>TaskDetail: Show loader
end
alt Task focused
TaskDetail->>TaskDetail: Show focus label
end
end
TaskDetail-->>User: Display task details
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes The PR involves multiple cohesive changes across components and pages with moderate logic complexity. TaskInfoCard state logic and the new task detail page require careful review, while motion animation additions and route changes are straightforward. Changes span multiple files but follow consistent patterns (animations) and UI updates, creating moderate heterogeneity. Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/atrium-telegram/app/components/TaskInfoCard.vue (1)
7-30: Code duplication flagged in task detail page.These completed and focused state UI blocks are duplicated in
apps/atrium-telegram/app/pages/task/[taskId]/index.vue(lines 7-30). See the detailed refactoring suggestion in that file's review.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/atrium-telegram/app/components/StaffBlock.vue(2 hunks)apps/atrium-telegram/app/components/TaskInfoCard.vue(2 hunks)apps/atrium-telegram/app/composables/useNavigation.ts(1 hunks)apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue(1 hunks)apps/atrium-telegram/app/pages/flow/[itemId]/index.vue(1 hunks)apps/atrium-telegram/app/pages/navigation.vue(1 hunks)apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue(1 hunks)apps/atrium-telegram/app/pages/task/[taskId]/index.vue(1 hunks)apps/atrium-telegram/app/pages/task/all.vue(1 hunks)apps/atrium-telegram/app/pages/task/my.vue(1 hunks)apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (13)
apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue (1)
3-3: LGTM! Consistent animation pattern applied.The addition of the
motion-preset-slide-leftclass provides a consistent entrance animation, aligning with similar updates across other pages in this PR.apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue (1)
3-3: LGTM! Animation enhancement applied.The motion class addition is consistent with the PR's objective of adding entrance animations to page transitions.
apps/atrium-telegram/app/pages/partner/[partnerId]/index.vue (1)
3-3: LGTM! Entrance animation added.Consistent with the animation pattern applied throughout this PR.
apps/atrium-telegram/app/pages/flow/[itemId]/index.vue (1)
3-3: LGTM! Animation class applied consistently.The motion preset enhancement aligns with the broader UI animation improvements in this PR.
apps/atrium-telegram/app/components/StaffBlock.vue (2)
2-3: Good UX improvement with horizontal scrolling layout.The refactor from a wrapping layout to horizontal scrolling provides a better user experience for displaying staff members. The snap points and overflow management create smooth, mobile-friendly scrolling behavior.
13-13: Avatar border enhancement improves visual hierarchy.Increasing the border thickness from
border-2toborder-3makes online status more prominent and improves avatar visibility in the horizontal scroll layout.apps/atrium-telegram/app/pages/task/my.vue (1)
63-65: LGTM! Page metadata properly configured.The page metadata name
my-taskscorrectly aligns with the route name defined inapps/atrium-telegram/app/composables/useNavigation.ts, ensuring proper navigation matching.apps/atrium-telegram/app/pages/navigation.vue (1)
61-62: Navigation item update is correct and verified.The route change to
/task/alland icon update toi-lucide-list-todoappropriately distinguish the "all tasks" view from the "my tasks" view. The corresponding/task/allpage exists atapps/atrium-telegram/app/pages/task/all.vue.apps/atrium-telegram/app/composables/useNavigation.ts (1)
20-21: Route restructuring verified - old/tasksroute has been successfully removed.The old
/tasksroute is completely gone from the codebase:
- No
pages/tasks/directory exists- New task routes properly configured at
/task/my,/task/all, and/task/[taskId]- Route name
my-tasksmatches page metadata- No old route references remain in atrium-telegram
Note: No redirect rule configured from
/tasksto/task/my. Users with bookmarked old URLs will encounter 404s rather than redirects—confirm this aligns with your versioning strategy.apps/atrium-telegram/app/pages/task/all.vue (1)
60-67: LGTM! Navigation implementation is clean and correct.The NuxtLink wrapper properly enables navigation to individual task detail pages while maintaining the card display. The route structure aligns with the new task detail page at
/task/[taskId].apps/atrium-telegram/app/pages/task/[taskId]/index.vue (1)
102-102: Consider error handling for missing tasks.If
taskIddoesn't match any task in the store, the page will render with mostly empty sections. Consider adding explicit handling for this case.Suggestions:
- Redirect to task list if task not found
- Display a user-friendly error message
- Show a loading state while the task store is being populated
// Example approach const task = computed(() => taskStore.tasks.find((t) => t.id === params.taskId)) // In template or with a watcher watchEffect(() => { if (!task.value && taskStore.tasks.length > 0) { navigateTo('/task/my') } })apps/atrium-telegram/app/components/TaskInfoCard.vue (2)
7-20: Completed state logic is correct.The conditional rendering properly shows either the completion state (with check icon and timestamp) or the loading spinner based on
isCompleted. The use of optional chaining fortask.completedAtis appropriate.
22-30: Focused state implementation looks good.The
isFocusedcomputed property correctly checks if the current task matches the performer's focused task, and the UI appropriately highlights this state with the goal icon and label.Also applies to: 65-65
| <div v-if="isCompleted" class="flex flex-row gap-1 items-center text-primary"> | ||
| <UIcon | ||
| name="i-lucide-check" | ||
| class="shrink-0 size-8 text-primary" | ||
| /> | ||
| <p v-if="task?.completedAt" class="text-base/5 font-semibold"> | ||
| {{ format(new Date(task.completedAt), 'd MMMM yyyy в HH:mm', { locale: ru }) }} | ||
| </p> | ||
| </div> | ||
| <UIcon | ||
| v-else | ||
| name="i-lucide-loader-circle" | ||
| class="shrink-0 size-8 text-muted/50 motion-preset-spin motion-duration-4000" | ||
| /> | ||
|
|
||
| <div v-if="isFocused" class="flex flex-row items-center gap-1.5 text-primary"> | ||
| <UIcon | ||
| name="i-lucide-goal" | ||
| class="shrink-0 size-8 motion-preset-seesaw" | ||
| /> | ||
| <p class="max-w-22 text-sm/4 font-bold"> | ||
| В Фокусе | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
Significant code duplication with TaskInfoCard.vue.
The completed state UI (lines 7-15) and focused state UI (lines 22-30) are duplicated verbatim from TaskInfoCard.vue. This duplication extends to the date formatting logic and icon configuration.
Consider extracting these state indicator blocks into a reusable component (e.g., TaskStatusIndicators.vue) that both the card and detail page can use.
Example refactor:
<!-- TaskStatusIndicators.vue -->
<template>
<div class="flex flex-row gap-2 items-center">
<UAvatar :src="performer?.avatarUrl ?? undefined" class="size-8" />
<div v-if="isCompleted" class="flex flex-row gap-1 items-center text-primary">
<UIcon name="i-lucide-check" class="shrink-0 size-8 text-primary" />
<p v-if="completedAt" class="text-base/5 font-semibold">
{{ format(new Date(completedAt), 'd MMMM yyyy в HH:mm', { locale: ru }) }}
</p>
</div>
<UIcon
v-else
name="i-lucide-loader-circle"
class="shrink-0 size-8 text-muted/50 motion-preset-spin motion-duration-4000"
/>
<div v-if="isFocused" class="flex flex-row items-center gap-1.5 text-primary">
<UIcon name="i-lucide-goal" class="shrink-0 size-8 motion-preset-seesaw" />
<p class="max-w-22 text-sm/4 font-bold">В Фокусе</p>
</div>
</div>
</template>Then use it in both files:
<TaskStatusIndicators
:performer="performer"
:is-completed="isCompleted"
:completed-at="task?.completedAt"
:is-focused="isFocused"
/>1 participant
Summary by CodeRabbit
New Features
UI/UX Improvements