Drag and drop to reorder users

This commit is contained in:
chris committed 2013-10-07 15:53:54 +08:00
1 parent 1194bdd9b4
commit 21db2a2cba
21 files changed
+227 -301

No files matched your search

@@ -0,0 +1,23 @@
<div id="list-view">
<div id="member-card" class="mini-layout-body">
<ul id="card-list" class="checkbox-card clearfix">
<% @users.each do |user| %>
<li class="filter-item" data-user-id="<%= user.id %>">
<label>
<div class="user-pic">
<%= show_avatar(user) %>
</div>
<span class="user-name"><%= user.name %></span>
<span><%= user.email %></span>
</label>
</li>
<% end %>
</ul>
</div>
</div>
<script>
$(function() {
dragMode();
});
</script>
@@ -0,0 +1,44 @@
<div id="list-view">
<table id="member-list" class="table main-list">
<thead>
<tr class="sort-header">
<th class="gender"></th>
<th class="span2"><a href="#"><%= t(:position) %></a></th>
<th class="span4"><a href="#"><%= t(:name) %></a></th>
<th><a href="#"><%= t(:email) %></a></th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<%
case user.sex
when 'male'
user_sex = 'gender-man'
when 'female'
user_sex = 'gender-woman'
else
user_sex = 'gender-none'
end
%>
<tr id="<%= dom_id user %>">
<td class="<%= user_sex %>"></td>
<td><%= link_to user.position + 1, '#', class: 'edit_position', 'data-user-id' => user.id %></td>
<td><%= link_to user.name, admin_users_new_interface_path(user) %></td>
<td><%= user.email %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<div class="bottomnav clearfix">
<div class="action pull-right">
<%= link_to t(:update_), '#', class: "btn btn-primary pull-right" %>
</div>
</div>
<script>
$(function() {
typeMode();
});
</script>
@@ -1,7 +1,7 @@
<div class="bottomnav clearfix">
<div class="action pull-right">
<% if is_admin? %>
<%= link_to t(:edit_order), edit_order_admin_users_new_interface_index_path, :class => "btn btn-primary" %>
<%= link_to t(:edit_order), edit_order_list_admin_users_new_interface_index_path, :class => "btn btn-primary" %>
<%= link_to(new_admin_users_new_interface_path,:class=> "btn btn-primary") do %>
<i class="icon-plus"></i><%= t(:add) %>
<% end -%>
@@ -1,15 +0,0 @@
<%
if user_edit_order.sex == 'male'
@user_sex = 'gender-man'
elsif user_edit_order.sex == 'female'
@user_sex = 'gender-woman'
else
@user_sex = 'gender-none'
end
%>
<tr id="<%= dom_id user_edit_order %>">
<td class="<%= @user_sex %>"></td>
<td><%= link_to user_edit_order.position + 1, '#', class: 'edit_position', 'data-user-id' => user_edit_order.id %></td>
<td><%= link_to user_edit_order.name, admin_users_new_interface_path(user_edit_order) %></td>
<td><%= user_edit_order.email %></td>
</tr>
@@ -1,65 +1,30 @@
<% content_for :side_bar do %>
<%= render :partial => 'admin/users_new_interface/side_bar' %>
<% end %>
<% content_for :page_specific_css do -%>
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/member" %>
<% end -%>
<%= stylesheet_link_tag "lib/checkbox-card" %>
<% end %>
<div id="list-view">
<table id="member-list" class="table main-list">
<thead>
<tr class="sort-header">
<th class="gender"></th>
<th class="span2"><a href="#"><%= t(:position) %></a></th>
<th class="span4"><a href="#"><%= t(:name) %></a></th>
<th><a href="#"><%= t(:email) %></a></th>
</tr>
</thead>
<tbody>
<%= render partial: "user_edit_order", collection: @users %>
</tbody>
</table>
</div>
<div class="bottomnav clearfix">
<div class="action pull-right">
<%= link_to t(:update_), '#', class: "btn btn-primary pull-right" %>
<% content_for :right_nav do %>
<div class="view-switch btn-group pull-right" data-toggle="buttons-radio">
<%= link_to content_tag(:i, nil, class: 'icon-list'), edit_order_list_admin_users_new_interface_index_path, class: "btn btn-small#{' active' if @type.eql?('list')}" %>
<%= link_to content_tag(:i, nil, class: 'icon-th'), edit_order_card_admin_users_new_interface_index_path, class: "btn btn-small#{' active' if @type.eql?('card')}" %>
</div>
<% end %>
<div id="order_content">
<% case @type %>
<% when 'card' %>
<%= render 'edit_order_card' %>
<% when 'list' %>
<%= render 'edit_order_list' %>
<% end %>
</div>
<% content_for :page_specific_javascript do %>
<script>
$(function(){
var _userPosition = [];
$('#member-list').on(clickEvent, '.edit_position', function(e){
var $input = $('<input type="text">');
var $cross = $('<a class="btn btn-mini"><i class="icons-cross"/></a>');
$(this).after($cross);
$(this).after($input);
$(this).hide();
$input.val($(this).text()).attr('id', $(this).data('user-id'));
e.preventDefault();
$cross.click(function(event) {
$input.remove();
$(this).siblings('a').show().end().remove();
});
});
$('.bottomnav').on(clickEvent, '.btn', function(e) {
$('#member-list tbody input').each(function() {
_userPosition.push([$(this).val(), $(this).attr('id')])
});
e.preventDefault();
$.ajax({
url: '<%= update_order_admin_users_new_interface_index_path %>',
type: 'POST',
dataType: 'script',
data: {users: _userPosition}
}).done(function() {
_userPosition = [];
console.log(_userPosition)
});
});
});
</script>
<%= javascript_include_tag "jquery.ui.sortable" %>
<%= javascript_include_tag "lib/jquery.ui.touch-punch.min.js" %>
<%= javascript_include_tag "lib/jquery.lite.image.resize.js" %>
<%= javascript_include_tag "lib/member/sort.js.erb" %>
<% end %>
@@ -1 +0,0 @@
$('#list-view table tbody').html("<%= j render partial: 'user_edit_order', collection: @users %>")
@@ -0,0 +1 @@
$('#order_content').html("<%= j render 'edit_order_list' %>")