Building Hotwire Kanban

_card.html.erb

# /views/cards/_card.html.erb

<%= turbo_frame_tag dom_id(@card) do %>
  <div class="card card-body">
    <div><%= @card.title %></div>
  </div>
<% end %>

_column.html.erb

# /views/columns/_column.html.erb

<%= turbo_stream_from "cards" %>
<%= turbo_frame_tag dom_id(column) do %>
  <div class="col-sm border border-secondary">
    <div class="row border border-primary"><%= column.name %></div>
    <div class="row">
      <div class="col-12">
        <%= turbo_frame_tag 'cards' do %>
          <% column.cards.each do |card| %>
            <%= turbo_frame_tag dom_id(card), src: board_column_card_path(@board, column, card) do %>
            <div class="card card-body">
              loading...
            </div>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

boards_show.html.erb

# /views/boards/show.html.erb

<div class="container">
  <p id="notice"><%= notice %></p>
  <%= turbo_stream_from "columns" %>
  <div class="row">
    <%= turbo_frame_tag "columns" do %>
      <%= render @columns %>
    <% end %>
  </div>
</div>

card.rb

class Card < ApplicationRecord
  belongs_to :column

  after_create_commit { broadcast_append_to "cards" }
  after_update_commit { broadcast_replace_to "cards" }
  after_destroy_commit { broadcast_remove_to "cards" }

  validates :title, presence: true
end

cards_show.html.erb

# /views/cards/show.html.erb

<%= render "card", card: @card %>

column.rb

class Column < ApplicationRecord
  belongs_to :board
  has_many :cards, dependent: :destroy

  after_create_commit { broadcast_append_to "columns" }
  # after_update_commit { broadcast_replace_to "columns" }
  after_destroy_commit { broadcast_remove_to "columns" }
end

routes.rb

Rails.application.routes.draw do
  resources :boards do
    resources :columns do
      resources :cards
    end  
  end
  root to: "boards#index"
end