Kanban boards

[adrianthedev]

I started working on this. Only did "10%" and the complexity is quite high. Will continue to work on it.

Approach

I recommend we use the items in Must have's to create the initial iteration and add nice to have's later. It's very important to put this into people's hands and get feedback as soon as possible.

### To validate
- [ ] Maybe delegated types would work nicely here? (this would enable multi-resource boards)

### Must have's
- [ ] Give an array with the columns or select a column for the record and let it take the distinct values
- [ ] Render the records as cards on columns
- [ ] Initially render just a few items on a column and add a button to render more
- [ ] Enable the user to move records from one column to another
- [ ] The move action will trigger a `record.update(ATTRIBUTE: COLUMN_NAME)` action
- [ ] Give the user the ability to override that update action through a lambda
- [ ] Add record count to columns
- [ ] Give the user a DSL to add a few specific fields (title, description, tiny_text (can be used for comments count), badge)

### Nice to have's
- [ ] Collapse columns
- [ ] add cover image to cards based on a record column (or from the `record` DSL)
- [ ] Auto eager load items when the user gets to the end of the column
- [ ] Give the user the ability to insert partials. Maybe through resource tools?
- [ ] Give the user a DSL to add some basic fields (text, status, badge)
- [ ] "Move card to the top of the pile" action
- [ ] breadcrumbs in settings
- [ ] Configuratble icons and icon colors for each type

Proposed DSL

self.kanban_view = {
  column: :status, # the DB column on which the columns to be rendered
  # OR
  columns: -> { [:to_do, :in_progress, :done] }, # give an array of column names
  move_action: -> { record.update status: value },
  record: {
    title: :name, # The record's name will be used
    description: :description, # The record's description will be used
  },
  # OR
  record: -> {
    # In this block you have access to the `record`, `params`, `current_user`, and many more items
    {
      title: record.name, # the title of the card to be displayed
      description: record.description, # some text to be displayed under the title
      tiny_text: "...",
      badge: record.assignee.name
    }
  }
}

Proof of concept

https://github.com/avo-hq/avo/assets/1334409/7c7ced40-8388-41f8-8247-afb75183a0ab

Screenshots

Screenshots

   

### Resources
- [ ] https://medium.com/le-wagon-tokyo/tutorial-build-a-drag-n-drop-kanban-board-on-rails-with-sortablejs-c6affa5642cf
- [ ] https://www.colby.so/posts/turbo-8-morphing-refreshes-on-rails
- [ ] https://github.com/basecamp/turbo-8-morphing-demo/tree/page-refreshes
- [ ] https://jonsully.net/blog/turbo-8-page-refreshes-morphing-explained-at-length/
- [ ] https://dev.37signals.com/a-happier-happy-path-in-turbo-with-morphing/
- [ ] https://github.com/thoughtbot/hotwire-example-template/compare/hotwire-example-kanban?utm_source=kaspth&utm_medium=email&utm_campaign=how-to-approach-modelling-a-kanban-board-in-rails
- [ ] Hotwire cookbook (Andrea Rocca) Kanban section
- [ ] https://github.com/adrianthedev/hotwire-example-template/pull/1/files
- [ ] https://dev.to/drnic/broadcasting-custom-turbo-actions-like-settitle-morph-and-more-3e22
- [ ] https://www.pluralsight.com/resources/blog/guides/ruby-on-rails-nested-attributes

[github-actions[bot]]

This issue has been marked as stale because there was no activity for the past 15 days.