Drag & Drop invoice lines
madisvain opened this issue · comments
It should be possible to drag and drop invoice lines.
The UX logic should be as:
https://ant.design/docs/spec/direct#Drag-and-Drop
The fist icon for every line item should be:
When that icon is clicked and dragged the line can be dragged to a different order.
While dragging the icon:
When you save the invoice the lines order is taken into account (this should already be so without modifications).
React library for drag & drop:
https://github.com/atlassian/react-beautiful-dnd
@madisvain
So this means we can reorder the invoices by dragging and dropping the file-clip icon of every invoice line in the above Invoices view?
And the order should be saved always?
Oh, I think I've missed your requirement.
I believe you mean the above. Right? :)
Yes - invoice lines should be possible to re-order :) So the last image is correct.
Lets just add the icon in front of every line:
So it's clear for the user where to click for the re-ordering.
@MLdev-py this is not a very important feature for now. Lets delay the development of this for a little while.
I will prepare a list of things we finalise before we do a public release so we can work on that next.
@madisvain
Implemented by pull request #26
First did this by using react-beautiful-dnd which is implemented in invoices/line-items1.js file.
But this occured a weird effect which seems to be related to redux-form.
So I've changed this by using react-dnd which is implemented in invoices/line-items.js
If you want to see the issue with react-beautiful-dnd, you can just rename the line-items1.js file into line-items.js
Implemented by #27