Add the Feature of Reordering Shopping List by Moving Up or Down an Item

[ShaneQi]

Proposed change

Adding the feature of recording shopping list (in shopping list card) by adding reorder button, move up button and move down button.

The Core Counterpart PR: home-assistant/core#41565

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

N/A

Additional information

• This PR fixes or closes issue: N/A
• This PR is related to issue: N/A
• Link to documentation pull request: N/A

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [N/A] Documentation added/updated for www.home-assistant.io

[zsarnett]

Would you be comfortable using the Sortable Library to enable Drag and drop? Because I think that would be the better way to do this.

Examples are the Sidebar and the Entity picker for Card editors

[vigonotion]

I would also suggest to use drag and drop, here is the link to a gif of the card editor in action: https://www.home-assistant.io/blog/2020/09/17/release-115/#order-entities-in-lovelace-ui-editor

[ShaneQi]

Would you be comfortable using the Sortable Library to enable Drag and drop? Because I think that would be the better way to do this.

Examples are the Sidebar and the Entity picker for Card editors

@vigonotion @zsarnett

I definitely can look into that.

I thought about drag and drop because that is absolutely way better user experience. But I wasn't confident about pulling it off. (because of some nightmare projects I had in college, long story)

But now you pointed out the examples in HA codebase, I'd be happy to look into it.

[ShaneQi]

@vigonotion @zsarnett

So I took a look at the sidebar drag & drop implementation, and did a prototype with shopping list.

It's actually not as complicated as I thought with help of the lib Sortable.

So I'm going to close this PR and go for drag & drop, stay tuned!