I'm so proud of this one, it should be premium content!
I've watched all the other youtube videos on this topic and I'm sure this approach is better and more versatile.
Also this video gives great insight into the thought process and debugging required to complete the feature.
Code deliverables:
- Sort Lists
- Sort tasks within List
- Move tasks between Lists
- Persist changes
This functinality was achived thanks to:
- gem RankedModel that stores the order of items in a list
- RequestJS that sends http requests from your javascript to your Rails controller
- SortableJS that provides the seamless sorting functionality
Episode source code: https://github.com/corsego/119-trello-drag-drop-save/commits/main
Based on this blogpost: https://blog.corsego.com/drag-and-drop-stimulus-request-js
0:00 Preview of what we will build, other solutions
1:15 Build the boilerplate app. List has many tasks.
7:25 Install SortableJS to sort List elements in the frontend
11:20 Install gem Ranked Model to track sort order of elements
20:00 Install RequestJS to make requests to Rails controller from StimulusJS
25:45 Updating Sort order works!
26:53 Sort Tasks within a List
32:50 Sort Tasks between Lists
40:05 CSS to stack lists horizontally like Trello
41:40 Final demo. Advanced sorting works!