Support changing area left-to-right order

[vnugent]

Use case

By default areas are shown by alphabetical order. For many climbing areas it makes sense to list crags by their physical location, for example, as you follow the access trail.

---

Context

We do have code for drag-n-drop'ing climbs built by another contributor a while back. It's currently not in use to due to recent refactoring of the climb and area page layout to support the editing feature.

Crag Table (drag n drop to reorder climbs - currently not in use)
https://github.com/OpenBeta/open-tacos/blob/develop/src/components/crag/cragTable.tsx

Library (already added to package.json)
https://github.com/atlassian/react-beautiful-dnd

Suggestions

Unlike its cousin, the climb object, area doesn't have a leftToRightIndex field that can be used for sorting. I can help adding it to the backend.

I'd add the sorting and drag-n-drop code to AreaCRUD component:
https://github.com/OpenBeta/open-tacos/blob/develop/src/components/edit/AreaCRUD.tsx#L43

[tedgeving]

I'd be willing to take a look a this one if it is still open.

[vnugent]

Thanks @tedgeving. I've assigned it to you and added additional context to the issue. I can help with the backend portion.

[tedgeving]

@vnugent
this commit is a WIP the drag and drop component is working.

1. Need some assistance adding leftToRightIndex to the component data on the backend.
2. What component should handle saving the newly ordered routes? Little confused on how that works in the app?

[vnugent]

I created OpenBeta/openbeta-graphql#221 to track the backend work. I'll see if someone can help or I'll look into doing it myself.

Can you open a PR with what you current have? (label it WIP) I'll comment on the code.

A rough outline for the next steps:

1. Add the new field (TBD), leftToRight to the GQL query that feeds the data to the crag page
   https://github.com/OpenBeta/open-tacos/blob/develop/src/pages/crag/%5Bid%5D.tsx#L156
2. Update the corresponding Typescript declarations
3. Make sure we pass the new prop all the way down to cragSummary component and AreaCRUD.
   4.Sort the list based on the new leftToRight prop
4. Wire the list to react-hook-form

I think we can just create a PR to get the new DnD feature in and do all the data wiring in a follow up PR.

[vnugent]

FYI the backend now supports setting area sorting index.

[glassbead0]

I love this feature of ordering areas! Just tracking down the current progress and I see the backend work is done, and looks like the frontend is still a WIP.

I'm curious if it makes sense to implement the area sorting UI using the same CSV Power Editor that is used for route sorting (cut/paste areas in the order you want), instead of a drag and drop. While I think drag and drop is just fine, it does create inconsistency. I have limited time to help with this (and no experience yet with the tech stack), but if I do get time I will start looking at code to see if I can help at all.

[zichongkao]

Completed in #696