feat: add flow item comment action#205
Conversation
WalkthroughIntroduces comment creation via a Drawer on the flow item page, adds a comment form component posting to an API, updates ItemCard icon/avatar logic with a new flow item type, adjusts navigation to data-driven buttons with haptics, and adds static placeholder pages for agreements, kitchens, and partners. Updates database type definitions. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant FlowItemPage as Flow Item Page
participant UDrawer as Drawer
participant Form as CreateFlowItemComment
participant API as POST /api/flow/id/{itemId}/comment
participant Stores as Flow/User Stores
participant UI as UI
User->>FlowItemPage: Click "Message" button
FlowItemPage->>UDrawer: Open
UDrawer->>Form: Render with itemId
User->>Form: Enter text, Submit
Form->>API: Send comment (Authorization)
API-->>Form: Success/Failure
alt Success
Form->>Stores: Update flow/user
Stores-->>UI: State updated
Form-->>UDrawer: emit submitted/success
UDrawer->>FlowItemPage: Close drawer
else Error
Form-->>User: Haptic error feedback
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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: 0
🧹 Nitpick comments (6)
apps/atrium-telegram/app/pages/partner/index.vue (1)
1-7: Consider adding i18n for hardcoded text.The title "Партнеры" and placeholder text "Чуть позже" are hardcoded in Russian. For consistency with other parts of the app (e.g., line 27 in CreateFlowItemComment.vue uses
$t('common.send')), consider extracting these strings to translation files.apps/atrium-telegram/app/pages/agreement/index.vue (1)
1-7: Consider adding i18n for hardcoded text.Similar to the partner page, the title "Реестр договоров" and placeholder text "Чуть позже" are hardcoded. Consider using translation keys for consistency across the application.
apps/atrium-telegram/app/pages/kitchen/index.vue (1)
1-7: Consider adding i18n for hardcoded text.Consistent with the other placeholder pages, the title "Кухни" and placeholder text "Чуть позже" should be extracted to translation files for maintainability.
apps/atrium-telegram/app/pages/navigation.vue (2)
25-44: Use const instead of ref for static data.The
itemsarray is static and never changes at runtime. Usingref()adds unnecessary reactivity overhead. Consider using a plainconstinstead:-const items = ref([ +const items = [ { label: 'Реестр договоров', to: '/agreement', icon: 'i-lucide-list-checks', onClick: () => vibrate(), }, // ... -]) +]
25-44: Extract hardcoded labels to i18n.Navigation labels are hardcoded in Russian. For consistency and maintainability, consider using translation keys (e.g.,
$t('navigation.agreements'),$t('navigation.partners'),$t('navigation.kitchens')).apps/atrium-telegram/app/components/form/CreateFlowItemComment.vue (1)
49-72: Consider adding user-facing error feedback.The error handling logs to console and triggers haptic feedback, but doesn't display an error message to the user. Consider adding a toast notification or inline error display to inform users when comment submission fails.
Example:
+const toast = useToast() + async function onSubmit(event: FormSubmitEvent<CreateFlowItemComment>) { emit('submitted') try { await $fetch(`/api/flow/id/${itemId}/comment`, { method: 'POST', headers: { Authorization: `tma ${userStore.initDataRaw}`, }, body: event.data, }) await Promise.all([ flowStore.update(), userStore.update(), ]) vibrate('success') emit('success') } catch (error) { console.error(error) + toast.add({ + title: 'Ошибка при отправке комментария', + color: 'red', + }) vibrate('error') } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/atrium-telegram/app/components/flow/ItemCard.vue(2 hunks)apps/atrium-telegram/app/components/form/CreateFlowItemComment.vue(1 hunks)apps/atrium-telegram/app/pages/agreement/index.vue(1 hunks)apps/atrium-telegram/app/pages/flow/[itemId]/index.vue(3 hunks)apps/atrium-telegram/app/pages/kitchen/index.vue(1 hunks)apps/atrium-telegram/app/pages/navigation.vue(1 hunks)apps/atrium-telegram/app/pages/partner/index.vue(1 hunks)packages/database/src/types/entities.ts(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 (6)
apps/atrium-telegram/app/components/flow/ItemCard.vue (2)
63-75: LGTM! Clean icon mapping implementation.The
getIconNamefunction provides clear, type-safe icon mapping for all flow item types, including the newly addedpartner_maintenance. The switch statement handles all cases with an appropriate default fallback.
5-5: Avatar visibility correctly restricted to user posts.The updated condition
item.userId && item.type === 'user_post'ensures avatars only render for user-authored posts, which aligns with the newpartner_maintenancetype that may not have an associated userId.packages/database/src/types/entities.ts (1)
34-37: LGTM! Type expansion aligns with UI updates.The addition of
'partner_maintenance'toFlowItemTypeis properly integrated with the icon mapping in ItemCard.vue (line 67-68) and follows the existing type union pattern.apps/atrium-telegram/app/pages/flow/[itemId]/index.vue (2)
64-83: LGTM! Clean Drawer integration for comment submission.The Drawer pattern effectively wraps the comment form, and the dual event handlers (
@submittedand@success) ensure the drawer closes appropriately regardless of the submission outcome. The button properly triggers both vibration and drawer opening.
109-109: Clean state management for drawer visibility.The
isDrawerOpenedref provides straightforward, single-purpose state control for the Drawer component.apps/atrium-telegram/app/components/form/CreateFlowItemComment.vue (1)
1-30: LGTM! Clean form structure with proper validation.The form implementation follows Vue best practices with schema-based validation, proper state management, and appropriate UX (disabled submit button when text is empty). The integration with the Drawer pattern via emitted events is well-designed.
1 participant
Summary by CodeRabbit