daboh/todoapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic turbo todo list implementation

Browse Source 
Based on:

https://webcrunch.com/posts/digging-into-turbo-with-ruby-on-rails-7
This commit is contained in:
David Böhm
2024-07-28 23:53:35 +02:00
parent 84e6e43812
commit ea5d597fc7
8 changed files with 72 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/controllers/todos_controller.rb
View File

@@ -1,9 +1,9 @@
class TodosController < ApplicationController
before_action :set_todo, only: %i[ show edit update destroy ]
before_action :set_todo, only: %i[show edit update destroy]
# GET /todos or /todos.json
def index
@todos = Todo.all
@todos = Todo.in_order_of(:status, %w[incomplete complete])
end
# GET /todos/1 or /todos/1.json
@@ -25,11 +25,14 @@ class TodosController < ApplicationController
respond_to do |format|
if @todo.save
format.html { redirect_to todo_url(@todo), notice: "Todo was successfully created." }
format.json { render :show, status: :created, location: @todo }
format.turbo_stream
format.html { redirect_to todo_url(@todo), notice: 'Todo was successfully created.' }
else
format.turbo_stream do
render turbo_stream: turbo_stream.replace("#{helpers.dom_id(@todo)}_form", partial: 'form',
locals: { todo: @todo })
end
format.html { render :new, status: :unprocessable_entity }
format.json { render json: @todo.errors, status: :unprocessable_entity }
end
end
end
@@ -38,11 +41,13 @@ class TodosController < ApplicationController
def update
respond_to do |format|
if @todo.update(todo_params)
format.html { redirect_to todo_url(@todo), notice: "Todo was successfully updated." }
format.json { render :show, status: :ok, location: @todo }
format.html { redirect_to todo_url(@todo), notice: 'Todo was successfully updated.' }
else
format.turbo_stream do
render turbo_stream: turbo_stream.replace("#{helpers.dom_id(@todo)}_form", partial: 'form',
locals: { todo: @todo })
end
format.html { render :edit, status: :unprocessable_entity }
format.json { render json: @todo.errors, status: :unprocessable_entity }
end
end
end
@@ -52,19 +57,20 @@ class TodosController < ApplicationController
@todo.destroy!
respond_to do |format|
format.html { redirect_to todos_url, notice: "Todo was successfully destroyed." }
format.json { head :no_content }
format.turbo_stream { render turbo_stream: turbo_stream.remove("#{helpers.dom_id(@todo)}") }
format.html { redirect_to todos_url, notice: 'Todo was successfully destroyed.' }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_todo
@todo = Todo.find(params[:id])
end
# Only allow a list of trusted parameters through.
def todo_params
params.require(:todo).permit(:title, :status)
end
# Use callbacks to share common setup or constraints between actions.
def set_todo
@todo = Todo.find(params[:id])
end
# Only allow a list of trusted parameters through.
def todo_params
params.require(:todo).permit(:title, :status)
end
end

5
app/models/todo.rb
View File

@@ -1,2 +1,7 @@
class Todo < ApplicationRecord
after_update_commit { broadcast_append_to 'todos' }
validates :title, presence: true
enum status: { incomplete: 0, complete: 1 }
end

4
app/views/layouts/application.html.erb
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Todoapp</title>
<title>Turbo Todos</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
@@ -12,7 +12,7 @@
</head>
<body>
<main class="container mx-auto mt-28 px-5 flex">
<main class="container mx-auto px-4">
<%= yield %>
</main>
</body>

21
app/views/todos/_form.html.erb
View File

@@ -1,4 +1,4 @@
<%= form_with(model: todo, class: "contents") do |form| %>
<%= form_with(model: todo, class: "contents", id: "#{dom_id(todo)}_form") do |form| %>
<% if todo.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
<h2><%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:</h2>
@@ -11,17 +11,14 @@
</div>
<% end %>
<div class="my-5">
<%= form.label :title %>
<%= form.text_field :title, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="mb-6">
<%= form.label :title, class: "sr-only" %>
<div class="relative">
<%= form.text_field :title, class: "block shadow-sm rounded-full border border-gray-200 outline-none px-6 py-4 w-full focus:border-sky-300 focus:outline-none focus:ring-4 focus:ring-sky-50 text-lg placeholder:text-gray-400", placeholder: "Add a new todo" %>
<div class="my-5">
<%= form.label :status %>
<%= form.number_field :status, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="inline">
<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
<div class="absolute top-0 right-0">
<%= form.submit class: "mt-px rounded-full py-4 px-5 bg-sky-500 text-white font-medium cursor-pointer border-2 border-sky-500 hover:bg-sky-600 hover:border-sky-600" %>
</div>
</div>
</div>
<% end %>

25
app/views/todos/_todo.html.erb
View File

@@ -1,12 +1,13 @@
<div id="<%= dom_id todo %>">
<p class="my-5">
<strong class="block font-medium mb-1">Title:</strong>
<%= todo.title %>
</p>
<p class="my-5">
<strong class="block font-medium mb-1">Status:</strong>
<%= todo.status %>
</p>
</div>
<li id="<%= "#{dom_id(todo)}" %>" class="py-3">
<%= turbo_frame_tag dom_id(todo) do %>
<div class="flex items-center justify-center">
<%= link_to todo.title, edit_todo_path(todo), class: "flex-1 #{"line-through opacity-50" if todo.complete?}" %>
<% if todo.complete? %>
<%= button_to "Mark incomplete", todo_path(todo, todo: { status: 'incomplete'}), method: :patch, class: "bg-gray-50 px-3 py-2 rounded inline-flex items-center justify-center text-gray-600" %>
<% else %>
<%= button_to "Mark complete", todo_path(todo, todo: { status: 'complete'}), method: :patch, class: "bg-green-50 px-3 py-2 rounded inline-flex items-center justify-center text-green-600" %>
<% end %>
<%= button_to "Delete", todo_path(todo), method: :delete, class: "bg-red-50 px-3 py-2 rounded inline-flex items-center justify-center text-red-600" %>
</div>
<% end %>
</li>

7
app/views/todos/create.turbo_stream.erb Normal file
View File

@@ -0,0 +1,7 @@
<%= turbo_stream.prepend "todos" do %>
<%= render "todo", todo: @todo %>
<% end %>
<%= turbo_stream.replace "#{dom_id(Todo.new)}_form" do %>
<%= render "form", todo: Todo.new %>
<% end %>

9
app/views/todos/edit.html.erb
View File

@@ -1,8 +1,3 @@
<div class="mx-auto md:w-2/3 w-full">
<h1 class="font-bold text-4xl">Editing todo</h1>
<%= turbo_frame_tag dom_id(@todo) do %>
<%= render "form", todo: @todo %>
<%= link_to "Show this todo", @todo, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%= link_to "Back to todos", todos_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</div>
<% end %>

25
app/views/todos/index.html.erb
View File

@@ -1,21 +1,16 @@
<div class="w-full">
<div class="mx-auto max-w-3xl mt-4 sm:mt-24">
<div class="mb-6">
<h1 class="font-bold text-4xl mb-6">Todos</h1>
</div>
<% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
<% end %>
<% content_for :title, "Todos" %>
<%= render "form", todo: Todo.new %>
<div class="flex justify-between items-center">
<h1 class="font-bold text-4xl">Todos</h1>
<%= link_to "New todo", new_todo_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
</div>
<div id="todos" class="min-w-full">
<% @todos.each do |todo| %>
<%= render todo %>
<p>
<%= link_to "Show this todo", todo, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</p>
<% end %>
</div>
<%= turbo_stream_from "todos" %>
<ul id="todos" class="divide-y list-none">
<%= render @todos %>
</ul>
</div>