Create new boards with Turbo Streams

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

Hide file tree

Showing 6 changed files with 58 additions and 43 deletions.
diff --git a/app/controllers/boards_controller.rb b/app/controllers/boards_controller.rb
@@ -22,6 +22,7 @@ def create
     respond_to do |format|
       if @board.save
         format.html { redirect_to boards_url, notice: "Board was successfully created." }
+        format.turbo_stream
       else
         format.html { render :new, status: :unprocessable_entity }
       end

diff --git a/app/views/boards/_board.html.erb b/app/views/boards/_board.html.erb
@@ -0,0 +1,31 @@
+<div id= <%= dom_id(board) %> class="col-3 my-3">
+  <div class="card border border-primary-grey-200">
+    <%= turbo_frame_tag dom_id(board, :edit) do %>
+      <div class="card-header bg-primary-grey-200">
+        <div class="d-flex justify-content-between align-items-center">
+          <h5 class="card-title mb-0">
+            <%= link_to board.name, board, data: { turbo_frame: '_top'}, class: 'link-underline link-underline-opacity-0' %>
+          </h5>
+          <div class="d-flex gap-2">
+            <%= link_to edit_board_path(board), class: 'text-default' do %>
+              <i class="fa-solid fa-pencil text-primary-dark-600"></i>
+            <% end %>
+            <%= link_to board, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'text-danger' do %>
+              <i class="fa-solid fa-trash text-primary-dark-600"></i>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    <div class="card-body bg-primary-grey-100">
+      <div class="card-text">
+        <p>
+        <%= "Columns: #{board.board_columns.size}" %>
+        </p>
+        <p>
+        <%= "Cards: #{board.board_columns.joins(:cards).count}" %>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/boards/_form.html.erb b/app/views/boards/_form.html.erb
@@ -2,18 +2,23 @@
   <% if @board.errors.any? %>
     <% @board.errors.full_messages.each do |message| %>
       <p class="text-center text-orange-600">
-        <%= message %>
+      <%= message %>
       </p>
     <% end %>
   <% end %>
 
-  <div class="form-group my-2">
-    <%= form.label :name %>
-    <%= form.text_field :name, class: 'form-control' %>
-  </div>
+  <div class="row">
+    <div class="col">
+      <div class="form-group my-2">
+        <%= form.text_field :name, placeholder: 'Board name', class: 'form-control' %>
+      </div>
+    </div>
 
-  <div class="actions mt-2 text-center">
-    <%= link_to 'Cancel', boards_path, class: 'btn btn-outline-info' %>
-    <%= form.submit 'Save', class: 'btn btn-outline-primary' %>
+    <div class="col d-flex align-items-end">
+      <div class="actions mb-2 text-center">
+        <%= link_to 'Cancel', boards_path, class: 'btn btn-outline-info' %>
+        <%= form.submit 'Save', class: 'btn btn-outline-primary' %>
+      </div>
+    </div>
   </div>
 <% end %>
diff --git a/app/views/boards/create.turbo_stream.erb b/app/views/boards/create.turbo_stream.erb
@@ -0,0 +1,6 @@
+<%= turbo_stream.append 'boards' do %>
+  <%= render 'boards/board', board: @board %>
+<% end %>
+<%= turbo_stream.update dom_id(Board.new) do %>
+  <%= link_to 'New Board', new_board_path, class: 'btn btn-outline-primary' %>
+<% end %>
diff --git a/app/views/boards/index.html.erb b/app/views/boards/index.html.erb
@@ -5,43 +5,15 @@
       Boards
     </h1>
     <div>
-      <%= link_to 'New Board', new_board_path, class: 'btn btn-outline-primary' %>
+      <%= turbo_frame_tag dom_id(Board.new) do %>
+        <%= link_to 'New Board', new_board_path, class: 'btn btn-outline-primary' %>
+      <% end %>
     </div>
   </div>
 </div>
 
-<div class="row w-100">
+<div class="row w-100" id='boards'>
   <% @boards.each do |board| %>
-    <div id= <%= dom_id(board) %> class="col-3 my-3">
-      <div class="card border border-primary-grey-200">
-        <%= turbo_frame_tag dom_id(board, :edit) do %>
-          <div class="card-header bg-primary-grey-200">
-            <div class="d-flex justify-content-between align-items-center">
-              <h5 class="card-title mb-0">
-                <%= link_to board.name, board, data: { turbo_frame: '_top'}, class: 'link-underline link-underline-opacity-0' %>
-              </h5>
-              <div class="d-flex gap-2">
-                <%= link_to edit_board_path(board), class: 'text-default' do %>
-                  <i class="fa-solid fa-pencil text-primary-dark-600"></i>
-                <% end %>
-                <%= link_to board, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'text-danger' do %>
-                  <i class="fa-solid fa-trash text-primary-dark-600"></i>
-                <% end %>
-              </div>
-            </div>
-          </div>
-        <% end %>
-        <div class="card-body bg-primary-grey-100">
-          <div class="card-text">
-            <p>
-              <%= "Columns: #{board.board_columns.size}" %>
-            </p>
-            <p>
-              <%= "Cards: #{board.board_columns.joins(:cards).count}" %>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+    <%= render partial: 'boards/board', locals: { board: board } %>
   <% end %>
 </div>
diff --git a/app/views/boards/new.html.erb b/app/views/boards/new.html.erb
@@ -1,7 +1,7 @@
 <h1 class="text-primary-dark-500">New Board</h1>
 
 <div class="row w-100 justify-content-center mt-3">
-  <div class="col-6">
+  <%= turbo_frame_tag dom_id(@board) do %>
     <%= render 'form' %>
-  </div>
+  <% end %>
 </div>