Я пытаюсь добавить функцию сортировки с помощью перетаскивания в приложение списка дел, используя этот эпизод GoRails .
Использование gem 'acts_as_list' и gem 'jquery-ui-rails' У меня так, что элементы можно перетаскивать, поэтому с точки зрения пользователя все работает нормально.
Проблема в том, чтоновая позиция не сохраняется в базе данных, поэтому после нажатия кнопки «Обновить» ордер возвращается к своей предыдущей позиции.
Единственный сложный момент в моем приложении - это то, что это происходит для нескольких различных элементов div нана одной странице (есть отдельные списки для одноразовых, ежедневных, еженедельных и ежемесячных заданий).У меня есть базовая структура, подобная этой, для моей index страницы показа (где все это происходит):
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">One-Time Tasks</h2>
<p class="text-center color-neutral">These tasks are here to stay, until you complete them.</p>
<div id="onetime-todo"><%= render partial: 'items', locals: { task: @one_time } %></div>
<div id="onetime-done"><%= render partial: 'done', locals: { task: @one_time_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Daily</h2>
<p class="text-center color-neutral">These automatically uncheck at night so you have a fresh list in the morning.</p>
<div id="daily-todo"><%= render partial: 'items', locals: { task: @daily } %></div>
<div id="daily-done"><%= render partial: 'done', locals: { task: @daily_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Weekly</h2>
<p class="text-center color-neutral">These automatically uncheck Sunday night so you get a new list each Monday morning.</p>
<div id="weekly-todo"><%= render partial: 'items', locals: { task: @weekly } %></div>
<div id="weekly-done"><%= render partial: 'done', locals: { task: @weekly_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Monthly</h2>
<p class="text-center color-neutral">These automatically uncheck on the last day of the month so you start with a clean list each 1st.</p>
<div id="monthly-todo"><%= render partial: 'items', locals: { task: @monthly } %></div>
<div id="monthly-done"><%= render partial: 'done', locals: { task: @monthly_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
А затем магия перетаскивания происходит в частичном _items.html.erb:
<div class="to-do-list taskWrapper" data-url="<%= sort_tasks_path %>">
<% task.each do |task| %>
<%= link_to task, id: dom_id(task) do %>
<p>
<%= fa_icon "bars", class: "color-neutral-light", style: "margin-right: 5px;" %>
<%= link_to check_task_path(task), method: :post, remote: true do %>
<%= fa_icon "square-o", style: "margin-right: 5px;" %>
<% end %>
<span id="task-show-hide">
<span class="font-serif">
<%= task.name %>
</span>
<span>
<%= link_to task_path(task), method: :delete, remote: true do %>
<%= fa_icon "remove", id: (task.id.to_s + "task"), style: "margin-left: 5px" %>
<% end %>
</span>
</span>
</p>
<% end %> <!-- dom id wrapper -->
<% end %> <!-- task each -->
</div>
<script>
$(document).ready(function() {
$('.content-box').matchHeight();
$('.taskWrapper').sortable({
update: function(e, ui) {
Rails.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize'),
});
}
});
});
</script>
Мои подходящие tasks_controller методы:
def set_variables
@user_tasks = Task.where(user_id: current_user.id)
@one_time = Task.where(frequency: "OneTime", completed: false, user_id: current_user.id).order(:position)
@one_time_done = Task.where(frequency: "OneTime", completed: true, user_id: current_user.id).order(:position)
@daily = Task.where(frequency: "Daily", completed: false, user_id: current_user.id).order(:position)
@daily_done = Task.where(frequency: "Daily", completed: true, user_id: current_user.id).order(:position)
@weekly = Task.where(frequency: "Weekly", completed: false, user_id: current_user.id).order(:position)
@weekly_done = Task.where(frequency: "Weekly", completed: true, user_id: current_user.id).order(:position)
@monthly = Task.where(frequency: "Monthly", completed: false, user_id: current_user.id).order(:position)
@monthly_done = Task.where(frequency: "Monthly", completed: true, user_id: current_user.id).order(:position)
end
def sort
params[:task].each_with_index do |id, index|
Task.where(id: id).update_all(position: index + 1)
end
head :ok
end
И наконец, мой журнал сервера показывает это:
Started PATCH "/tasks/sort" for 127.0.0.1 at 2018-10-20 11:16:06 -0700
Processing by TasksController#sort as */*
Parameters: {"task"=>["2", "8"]}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
Task Update All (0.2ms) UPDATE "tasks" SET "position" = 1 WHERE "tasks"."id" = ? [["id", 2]]
↳ app/controllers/tasks_controller.rb:27
Task Update All (0.1ms) UPDATE "tasks" SET "position" = 2 WHERE "tasks"."id" = ? [["id", 8]]
↳ app/controllers/tasks_controller.rb:27
Completed 200 OK in 3ms (ActiveRecord: 0.5ms)
Пока чтоэто не дает мне никаких ошибок (консоль или рельсы) в localhost, но на Heroku выдает FATAL -- : [cd6ed1ad-4095-4eb2-9f28-201ec2e74c19] 1: <div class="to-do-list taskWrapper" data-url="<%= sort_tasks_path %>">
Может кто-нибудь помочь мне получить это без ошибок и сохранение в базе данных?