Skip to content

Update task card interactivity with Turbo Streams #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fujiwara-e wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update task card interactivity with Turbo Streams #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e9d223
Update task card interactivity with Turbo Streams
fujiwara-e Apr 4, 2026
2703ae7
Fix response for Turbo Frame requests
fujiwara-e Apr 4, 2026
bb76d91
Enhance Turbo Stream responses for task updates and error handling
fujiwara-e Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/assets/stylesheets/tasks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@

.task-card {
margin: 0;
transition: opacity 0.3s ease;
}

.task-state-btn i {
Expand Down
25 changes: 23 additions & 2 deletions app/controllers/tasks_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,22 +75,43 @@ def update
end

respond_to do |format|
format.turbo_stream do
if turbo_frame_request?
render :update
else
redirect_to @task, notice: "タスクを更新しました．"
end
end
format.html { redirect_to @task, notice: "タスクを更新しました．" }
format.json { render :show, status: :ok, location: @task }
end
rescue ActiveRecord::StaleObjectError
flash.now[:danger] = 'このタスクは他のユーザーによって更新されました．'
get_form_data
respond_to do |format|
format.turbo_stream do
if turbo_frame_request?
render turbo_stream: turbo_stream.replace("task_card_#{@task.id}", partial: "tasks/task", locals: { task: @task }), status: :conflict
else
render :edit, status: :conflict
end
end
format.html { render :edit, status: :conflict }
format.json { render json: { error: flash[:error] }, status: :conflict }
format.json { render json: { error: flash.now[:danger] }, status: :conflict }
end
rescue
flash.now[:danger] = 'タスクの更新に失敗しました．'
get_form_data
respond_to do |format|
format.turbo_stream do
if turbo_frame_request?
render turbo_stream: turbo_stream.replace("task_card_#{@task.id}", partial: "tasks/task", locals: { task: @task }), status: :unprocessable_entity
else
render :edit, status: :unprocessable_entity
end
end
format.html { render :edit, status: :unprocessable_entity }
format.json { render json: @document.errors, status: :unprocessable_entity }
format.json { render json: @task.errors, status: :unprocessable_entity }
end
end

Expand Down
18 changes: 9 additions & 9 deletions app/views/tasks/_task.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<div class="card h-100 task-card <%= 'opacity-50' if task.completed? %>">
<div id="task_card_<%= task.id %>" class="card h-100 task-card <%= 'opacity-50' if task.completed? %>">
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-center mb-3 gap-2">
<%= turbo_frame_tag "task_#{task.id}" do %>
<%= turbo_frame_tag "task_state_btn_#{task.id}" do %>
<% if task.completed? %>
<%= button_to task, method: :patch, params: { task: { task_state_id: TaskState.todo.id } }, class: "btn btn-link p-0 border-0 task-state-btn" do %>
<i class="far fa-check-circle" style="color: <%= task.state.color %>;"></i>
<% end %>
<% else %>
<%= button_to task, method: :patch, params: { task: { task_state_id: TaskState.todo.id } }, class: "btn btn-link p-0 border-0 task-state-btn" do %>
<%= button_to task, method: :patch, params: { task: { task_state_id: TaskState.done.id } }, class: "btn btn-link p-0 border-0 task-state-btn" do %>
<i class="far fa-dot-circle" style="color: <%= task.state.color %>;"></i>
<% end %>
<% end %>
<% end %>
<% unless task.completed? %>
<% if task.overdue? %>
<p class="task-deadline task-deadline-overdue">期限切れです！</p>
<% else %>
<p class="task-deadline task-deadline-ongoing"><%= days_to_deadline_as_string task %></p>
<% end %>
<% unless task.completed? %>
<% if task.overdue? %>
<p class="task-deadline task-deadline-overdue">期限切れです！</p>
<% else %>
<p class="task-deadline task-deadline-ongoing"><%= days_to_deadline_as_string task %></p>
<% end %>
<% end %>
<small class="text-muted task-creator-badge">
<i class="bi bi-person-fill"></i>
<%= link_to task.assigner.name, task.assigner, class: "text-muted text-decoration-none" %>
Expand Down
3 changes: 3 additions & 0 deletions app/views/tasks/update.turbo_stream.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<%= turbo_stream.replace "task_card_#{@task.id}" do %>
<%= render partial: "task", locals: { task: @task } %>
<% end %>
Loading