feat: implement reorder functionality for invoice items#72
feat: implement reorder functionality for invoice items#72buddhsen-tripathi wants to merge 1 commit into
Conversation
|
@buddhsen-tripathi is attempting to deploy a commit to the Invoicely OSS Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughInvoiceItemsSection now renders invoice items with drag-and-drop reordering using motion/react Reorder components. The component pulls ChangesInvoice Items Drag-and-Drop Reordering
🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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
🧹 Nitpick comments (1)
apps/web/src/app/(dashboard)/create/invoice/invoiceHelpers/invoice-items-section.tsx (1)
127-139: ⚡ Quick winMove
getSingleMoveinto the helper section and declare it withfunction.This is a pure helper, so it should follow the repo convention instead of being a
constarrow placed betweenInvoiceItemsSectionandHandleItemModal.As per coding guidelines,
**/*.{ts,tsx,js,jsx}: Structure files: exported component, subcomponents, helpers, static content, typesandUse the 'function' keyword for pure functions`.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4e723c01-8f22-4a7c-9a0a-b38af880f268
📒 Files selected for processing (1)
apps/web/src/app/(dashboard)/create/invoice/invoiceHelpers/invoice-items-section.tsx
| <Reorder.Group | ||
| axis="y" | ||
| values={fields.map((field) => field.id)} | ||
| onReorder={onReorder} | ||
| className="flex flex-col gap-2" | ||
| > | ||
| {fields.map((field, index) => ( | ||
| <div className="bg-muted/50 flex w-full flex-row justify-between gap-2 rounded-md p-3" key={field.id}> | ||
| <Reorder.Item | ||
| value={field.id} | ||
| key={field.id} | ||
| className="bg-muted/50 flex w-full cursor-grab flex-row justify-between gap-2 rounded-md p-3 active:cursor-grabbing" | ||
| > | ||
| <div className="flex w-full flex-row gap-2"> | ||
| <div className="text-muted-foreground grid h-full place-items-center"> | ||
| <GripVerticalIcon className="size-4" /> | ||
| </div> |
There was a problem hiding this comment.
Add a keyboard-accessible reorder path.
This makes reordering pointer-only: the rows are not focusable reorder controls, the grip is only visual, and there are no move buttons. Keyboard users can't complete the reorder task from this UI.
There was a problem hiding this comment.
Pull request overview
This PR adds drag-and-drop reordering for invoice line items in the invoice creation flow (closes #71) by integrating motion/react’s Reorder components into the invoice items list UI.
Changes:
- Wrapped the invoice items list in
Reorder.Groupand each row inReorder.Itemto enable drag-and-drop ordering. - Added a visual drag handle icon (
GripVerticalIcon) per item. - Introduced
getSingleMoveto translatemotion’s reordered id list into a singlereact-hook-formuseFieldArray.move()operation.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Reorder.Item | ||
| value={field.id} | ||
| key={field.id} | ||
| className="bg-muted/50 flex w-full cursor-grab flex-row justify-between gap-2 rounded-md p-3 active:cursor-grabbing" | ||
| > | ||
| <div className="flex w-full flex-row gap-2"> | ||
| <div className="text-muted-foreground grid h-full place-items-center"> | ||
| <GripVerticalIcon className="size-4" /> | ||
| </div> |
This pull request adds drag-and-drop reordering functionality to the invoice items section, allowing users to rearrange invoice items interactively. It uses the
motionlibrary'sReordercomponents and updates the UI to include a drag handle icon. The code also introduces a helper function to efficiently determine the moved item during a reorder operation.Invoice item reordering functionality:
Reorder.GroupandReorder.Itemfrom themotionlibrary to enable drag-and-drop reordering of invoice items in the UI (invoice-items-section.tsx). [1] [2] [3]GripVerticalIcon) to each invoice item for improved user experience during reordering (invoice-items-section.tsx). [1] [2]onReorderhandler and a helper functiongetSingleMoveto compute and apply the correct item movement in the form state (invoice-items-section.tsx). [1] [2]Closes #71