Create new board columns with Turbo Streams

visualitypl · Jul 18, 2024 · c7f0ef6 · c7f0ef6
1 parent 2dd1e68
commit c7f0ef6
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>