Home Using gem bookmark_system with drag-and-drop
Reply: 0

Using gem bookmark_system with drag-and-drop

user4960
1#
user4960 Published in May 27, 2018, 3:36 am

I am trying to do something similar to: https://gorails.com/episodes/sortable-drag-and-drop?autoplay=1

I am using a gem to bookmark items and create a list: https://github.com/pmviva/bookmark_system

I have the "user" model as act_as_bookmarker and "article" as act_as_bookmarkee

bookmarks table:

create_table "bookmarks", force: :cascade do |t|
t.integer  "bookmarkee_id"
t.string   "bookmarkee_type"
t.integer  "bookmarker_id"
t.string   "bookmarker_type"
t.datetime "created_at",      null: false
t.datetime "updated_at",      null: false
t.integer  "position"
end

Routes:

resources :bookmarks do
collection do
  patch :sort
end
end
get 'user/:id/bookmarks', to: "bookmarks#index", as: "bookmarks_index"

From here I am struggling to create the list of itens that I want, in the bookmarks controller I am not sure how to get the all the itens that are "Article" and list them by position. (you can see what I tried so far in the #)

BookmarksController:

def index
@user = User.with_deleted.find_by_username(params[:id])
#@articles = @user.bookmarkees_by(Article).order(:position)
#@articles = Article.all
#@articles = Bookmark.where(bookmarkee_type = `Article`)
end

In the index.html.erb I am trying the following:

<div id="articles-bookmark-list" class="list-group" data-url="<%= sort_bookmarks_path %>" >
  <% @articles.each do |article| %>
    <% if @user.bookmarks?(article) %>
      <%= link_to "#{article.title}", article, class: "list-group-item", id: dom_id(article) %>
    <% end %>
  <% end %>
</div>

So to resume this is where I am stuck (must likely because my know how is lacking here, fyi I am pretty new using rails and I am doing courses to learn more):

  • in the BookmarksController: I am not sure how to grab the itens that are "Article" and order them by "position" which is a column in my joint table (table bookmarks, also the sort method is still missing I will add it next)
  • In the Index: I am not sure how to list the itens correctly by grabbing the itens that are Article from the bookmarks table.

I really appreciate any help or any tutorial/example that you know/did before.

-------------------------------------------------------------------------

More details: I was able to do this wrongly by adding a position in the articles table, it was working perfectly but what I want is to create something like a "personal bookmark list", so each user has its own list. By adding the position column to the articles table every user was updating that position column which caused the articles to be sorted by position but at the end these articles were ordered by position but in a "shared" list. This bookmarks table will solve this by having user_id, article_id and position. So I can then show only the articles for that specific user_id and that user will be able only to update those articles position.

This is how I have this working with the position in the articles table(wrong table):

ArticlesController:

def articles_bookmark_list
@user = User.with_deleted.find_by_username(params[:id])
@articles = Article.order(:position)
end
def sort 
  params[:article].each_with_index do |id, index|
    Article.where(id: id).update_all(position: index + 1)
  end 
  head :ok
end

Routes:

resources :articles do
    collection do
      patch :sort
    end
end
get 'user/:id/articles_bookmark_list', to: "articles#articles_bookmark_list", as: "articles_bookmark_list"

articles_bookmark_list.html.erb:

<div id="bookmarks" class="results-blocks col-xs-12 col-xs-offset-0">
  <div class="panel panel-info bookmarks-table">
    <!-- Default panel contents -->
    <div class="panel-heading" align="center">
       <strong><h4>Bookmarked Wikis</h3></strong>
    </div>
    <!-- Table -->
   <div id="articles-bookmark-list" class="list-group" data-url="<%= sort_articles_path %>" >
      <% @articles.each do |article| %>
          <% if @user.bookmarks?(article) %>
            <%= link_to "#{article.title}", article, class: "list-group-item", id: dom_id(article) %>
          <% end %>
      <% end %>
    </div>
  </div>
</div>

articles.js:

document.addEventListener("turbolinks:load", function() {

  $("#articles-bookmark-list").sortable({
    update: function(e, ui) {
      $.ajax({
        url: $(this).data("url"),
        type: "PATCH",
        data: $(this).sortable('serialize'),
      });
    }
  });

});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.304473 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO