From c7f0ef6fcde4f0309ab89194608fd9dd7b07f7ba Mon Sep 17 00:00:00 2001
From: maikhel <mlecicki@gmail.com>
Date: Thu, 18 Jul 2024 12:02:43 +0200
Subject: [PATCH] Create new board columns with Turbo Streams

---
 app/controllers/board_columns_controller.rb     |  1 +
 app/views/board_columns/_form.html.erb          |  3 +--
 app/views/board_columns/create.turbo_stream.erb |  9 +++++++++
 app/views/board_columns/new.html.erb            | 10 +++++++---
 app/views/boards/show.html.erb                  |  5 +++--
 5 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 app/views/board_columns/create.turbo_stream.erb

diff --git a/app/controllers/board_columns_controller.rb b/app/controllers/board_columns_controller.rb
index 0a059dc..07a96c3 100644
--- a/app/controllers/board_columns_controller.rb
+++ b/app/controllers/board_columns_controller.rb
@@ -15,6 +15,7 @@ def create
     respond_to do |format|
       if @board_column.save
         format.html { redirect_to board_url(@board), notice: "BoardColumn was successfully created." }
+        format.turbo_stream
       else
         format.html { render :new, status: :unprocessable_entity }
       end
diff --git a/app/views/board_columns/_form.html.erb b/app/views/board_columns/_form.html.erb
index 354ed17..18a6119 100644
--- a/app/views/board_columns/_form.html.erb
+++ b/app/views/board_columns/_form.html.erb
@@ -8,8 +8,7 @@
   <% end %>
 
   <div class="form-group">
-    <%= form.label :name %>
-    <%= form.text_field :name, class: 'form-control' %>
+    <%= form.text_field :name, placeholder: 'Column name', class: 'form-control' %>
   </div>
 
   <div class="actions mt-2 text-center">
diff --git a/app/views/board_columns/create.turbo_stream.erb b/app/views/board_columns/create.turbo_stream.erb
new file mode 100644
index 0000000..3cfc161
--- /dev/null
+++ b/app/views/board_columns/create.turbo_stream.erb
@@ -0,0 +1,9 @@
+<%= turbo_stream.remove dom_id(BoardColumn.new) %>
+
+<%= turbo_stream.append dom_id(@board, 'columns') do %>
+  <%= render 'board_columns/board_column', board_column: @board_column %>
+<% end %>
+
+<%= turbo_stream.append dom_id(@board, 'columns') do %>
+  <%= turbo_frame_tag dom_id(BoardColumn.new) %>
+<% end %>
diff --git a/app/views/board_columns/new.html.erb b/app/views/board_columns/new.html.erb
index c2b9080..c15bf5d 100644
--- a/app/views/board_columns/new.html.erb
+++ b/app/views/board_columns/new.html.erb
@@ -1,7 +1,11 @@
 <h1 class="text-primary-dark-500">New Board Column</h1>
 
 <div class="row w-100 justify-content-center mt-3">
-  <div class="col-6">
-    <%= render 'form' %>
-  </div>
+  <%= turbo_frame_tag dom_id(@board_column) do %>
+    <div class = 'board-column'>
+      <div class="border border-primary-grey-200 bg-light p-2">
+        <%= render 'form' %>
+      </div>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb
index e3691b9..30436ec 100644
--- a/app/views/boards/show.html.erb
+++ b/app/views/boards/show.html.erb
@@ -6,16 +6,17 @@
         <%= @board.name %>
       </h1>
       <div>
-        <%= link_to 'New Column', new_board_board_column_path(@board), class: 'btn btn-outline-primary' %>
+        <%= link_to 'New Column', new_board_board_column_path(@board), data: { turbo_frame: dom_id(BoardColumn.new) }, class: 'btn btn-outline-primary' %>
       </div>
     </div>
   </div>
 </div>
 
 <div class="board-container">
-  <div class="board-scroll p-3" data-controller="sortable" data-sortable-group-value="<%= @board.id %>" data-sortable-url-value="<%= card_path(":id") %>">
+  <div id= <%= dom_id(@board, 'columns') %> class="board-scroll p-3" data-controller="sortable" data-sortable-group-value="<%= @board.id %>" data-sortable-url-value="<%= card_path(":id") %>">
     <% @board_columns.each do |board_column| %>
       <%= render partial: 'board_columns/board_column', locals: { board_column: board_column } %>
     <% end %>
+    <%= turbo_frame_tag dom_id(BoardColumn.new) %>
   </div>
 </div>