From 21db2a2cbabcd53a5e43c0175e54535d714585ee Mon Sep 17 00:00:00 2001
From: chris <chris.vilayphiou@gmail.com>
Date: Mon, 7 Oct 2013 15:52:10 +0800
Subject: [PATCH] Drag and drop to reorder users

---
 app/assets/javascripts/lib/items/items.js.erb |   2 +-
 app/assets/javascripts/lib/list-check.js      |  35 ++-
 app/assets/javascripts/lib/member/sort.js.erb |  56 +++++
 app/assets/javascripts/structure.js           |   2 +-
 app/assets/stylesheets/lib/checkbox-card.css  |   8 +
 app/assets/stylesheets/lib/main-list.css      | 200 ------------------
 app/assets/stylesheets/lib/main-list.css.erb  |   7 +
 app/assets/stylesheets/lib/member.css         |  10 +
 app/assets/stylesheets/lib/wrap-nav.css       |   3 +
 .../stylesheets/orbit_bar_bootstrap.css       |   2 +-
 app/controllers/admin/items_controller.rb     |   2 +-
 .../admin/users_new_interface_controller.rb   |  32 ++-
 .../_edit_order_card.html.erb                 |  23 ++
 .../_edit_order_list.html.erb                 |  44 ++++
 .../_index_paginator.html.erb                 |   2 +-
 .../_user_edit_order.html.erb                 |  15 --
 .../users_new_interface/edit_order.html.erb   |  75 ++-----
 .../users_new_interface/update_order.js.erb   |   1 -
 .../update_order_list.js.erb                  |   1 +
 config/routes.rb                              |   6 +-
 lib/tasks/new_ui.rake                         |   2 +-
 21 files changed, 227 insertions(+), 301 deletions(-)
 create mode 100644 app/assets/javascripts/lib/member/sort.js.erb
 delete mode 100644 app/assets/stylesheets/lib/main-list.css
 create mode 100644 app/views/admin/users_new_interface/_edit_order_card.html.erb
 create mode 100644 app/views/admin/users_new_interface/_edit_order_list.html.erb
 delete mode 100644 app/views/admin/users_new_interface/_user_edit_order.html.erb
 delete mode 100644 app/views/admin/users_new_interface/update_order.js.erb
 create mode 100644 app/views/admin/users_new_interface/update_order_list.js.erb

diff --git a/app/assets/javascripts/lib/items/items.js.erb b/app/assets/javascripts/lib/items/items.js.erb
index 608dee021..873ebc20a 100644
--- a/app/assets/javascripts/lib/items/items.js.erb
+++ b/app/assets/javascripts/lib/items/items.js.erb
@@ -43,7 +43,7 @@ $(function(){
     placeholder: 'placeholder',
     startCollapsed: true,
     disableNesting: 'no-nest',
-    stop: function(event, ui) {
+    update: function(event, ui) {
       $.post("<%= Rails.application.routes.url_helpers.admin_update_position_path %>", { id: ui.item.attr('id'), parent_id: (ui.item.parent().closest('li').attr('id') || ui.item.parent().closest('ol').attr('id')), position: ui.item.index() } );
     }
   });
diff --git a/app/assets/javascripts/lib/list-check.js b/app/assets/javascripts/lib/list-check.js
index 74f75f9e7..202e2d536 100644
--- a/app/assets/javascripts/lib/list-check.js
+++ b/app/assets/javascripts/lib/list-check.js
@@ -80,27 +80,22 @@ $(function() {
     _data.actionable ? $('#dialog').modal('show') : "";
     e.preventDefault();
   });
-
-  $("#dialog").on(clickEvent, '.delete-item', function() {
-    var _v = [],
-        _t = $t.attr("rel");
-
-    $("tbody .list-check:checked").each(function() {
-        _v.push(this.value);
+  $('.delete-item').on(clickEvent, function() {
+    var _v = [];
+    $("tbody .list-check").each(function() {
+      this.checked && _v.push("ids[]="+this.value)
     });
-
-    $.ajax({
-      url : _t,
-      type:"get",
-      data : {"ids":_v},
-      dataType : "json",
-      success : function(){
-        actionSuccess(_data.checkAction);
-      }
-    })
-
+    var _t = $t.attr("rel");
+    if(_t.indexOf("?") > -1) {
+      $.ajax(_t + "&" + _v.join("&")).done(function() {
+        actionSuccess(_data.checkAction)
+      });
+    } else {
+      $.ajax(_t + "?" + _v.join("&")).done(function() {
+        actionSuccess(_data.checkAction)
+      });
+    }
     $('#dialog').modal('hide');
     $('.list-active-btn').addClass('disabled').data('actionable', false);
-  })
-
+  });
 });
\ No newline at end of file
diff --git a/app/assets/javascripts/lib/member/sort.js.erb b/app/assets/javascripts/lib/member/sort.js.erb
new file mode 100644
index 000000000..a48af8a38
--- /dev/null
+++ b/app/assets/javascripts/lib/member/sort.js.erb
@@ -0,0 +1,56 @@
+function dragMode() {
+  $('#card-list').sortable({
+    placeholder: "highlight",
+    update: function( event, ui ) {
+      var _userPosition = {};
+      _userPosition.position = $(ui.item).index();
+      _userPosition.id = $(ui.item).data('user-id');
+      $.ajax({
+        url: "<%= Rails.application.routes.url_helpers.update_order_card_admin_users_new_interface_index_path %>",
+        type: 'POST',
+        dataType: 'script',
+        data: {users: _userPosition}
+      });
+    }
+  });
+  $('#card-list').disableSelection();
+}
+
+function typeMode() {
+  var _userPosition = [];
+  $('#list-view tbody tr').each(function(i) {
+    $(this).data('user-index', i);
+  });
+
+  $('#member-list').on(clickEvent, '.edit_position', function(e){
+    var $input = $('<input type="text">'),
+        $cross = $('<a class="btn btn-mini"><i class="icons-cross"/></a>');
+    if($(this).siblings('input').length) {
+      $(this).siblings('input').attr('type', 'text').after($cross);
+    } else {
+      $(this).after($cross);
+      $(this).after($input);
+    }
+    $(this).hide();
+    $input.val($(this).text());
+    e.preventDefault();
+    $cross.click(function(event) {
+      $input.remove();
+      $(this).siblings('a').show().end().remove();
+    });
+  });
+
+  $('.bottomnav').on(clickEvent, '.btn', function(e) {
+    _userPosition = [];
+    $('#member-list tbody input').each(function(i) {
+      _userPosition.push([$(this).val(), $(this).siblings('a').data('user-id')]);
+    });
+    $.ajax({
+      url: "<%= Rails.application.routes.url_helpers.update_order_list_admin_users_new_interface_index_path %>",
+      type: 'POST',
+      dataType: 'script',
+      data: {users: _userPosition}
+    });
+    e.preventDefault();
+  });
+};
\ No newline at end of file
diff --git a/app/assets/javascripts/structure.js b/app/assets/javascripts/structure.js
index 6d1de8359..d18ad196b 100644
--- a/app/assets/javascripts/structure.js
+++ b/app/assets/javascripts/structure.js
@@ -1,5 +1,5 @@
 //= require basic
-//= require lib/jquery-ui-1.10.2.custom.min.js
+//= require jquery.ui.sortable
 //= require lib/jquery.ui.touch-punch.min.js
 //= require lib/jquery.mjs.nestedSortable.js
 //= require lib/items/items
diff --git a/app/assets/stylesheets/lib/checkbox-card.css b/app/assets/stylesheets/lib/checkbox-card.css
index 123c7c843..74e3ca55c 100644
--- a/app/assets/stylesheets/lib/checkbox-card.css
+++ b/app/assets/stylesheets/lib/checkbox-card.css
@@ -125,6 +125,14 @@
 }
 
 
+#list-view .checkbox-card li {
+	-webkit-transition: none;
+	   -moz-transition: none;
+		 -o-transition: none;
+			transition: none;
+}
+
+
 
 /* Responsive */
 @media (max-width: 767px) {
diff --git a/app/assets/stylesheets/lib/main-list.css b/app/assets/stylesheets/lib/main-list.css
deleted file mode 100644
index 057fb2d93..000000000
--- a/app/assets/stylesheets/lib/main-list.css
+++ /dev/null
@@ -1,200 +0,0 @@
-/* Main List */
-.main-list {
-  margin-bottom: 10px;
-}
-.main-list tbody {
-  border: 1px solid #dddddd;
-}
-.main-list thead {
-  border: 1px solid #454545;
-}
-.main-list thead th {
-  vertical-align: middle;
-  background-color: #454545;
-  white-space: nowrap;
-  color: #FFFFFF;
-}
-.main-list tbody tr.disable td {
-  color: #C5C5C5;
-  background-color: #eeeeee;
-}
-.main-list tbody tr.disable td .label-info {
-  background-color: #999999;
-}
-.main-list tbody tr.active td:first-child {
-  position: relative;
-}
-.main-list tbody tr.active td:first-child:before {
-  content: "";
-  width: 0px;
-  height: 0px;
-  left: -21px;
-  top: 50%;
-  margin-top: -6px;
-  position: absolute;
-  border-style: solid;
-  border-width: 6px 0 6px 6px;
-  border-color: transparent transparent transparent #333333;
-}
-.main-list td {
-  background-color: #FFFFFF;
-}
-.main-list td input[type="text"] {
-  margin-bottom: 0;
-  margin-left: -.4em;
-  margin-right: 3px;
-  padding: 0 .3em;
-  width: 4em;
-}
-.main-list td.action {
-  vertical-align: middle;
-  text-align: right;
-}
-.main-list td.preview img {
-  width: 100%;
-}
-.main-list td .banner-link {
-  width: 100px;
-  max-width: 120px;
-  display: inline-block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.main-list td .file-list {
-  display: inline-block;
-  margin: 0 0 -6px;
-}
-.main-list td .file-list:after {
-  content: "";
-  clear: both;
-  display: block;
-  height: 0;
-  visibility: hidden;
-}
-.main-list td .file-type {
-  position: relative;
-  list-style: none;
-  float: left;
-  display: inline-block;
-}
-.main-list td .file-type a {
-  background-color: #A6A6A6;
-  color: #FFFFFF;
-  margin-right: 10px;
-  padding: 2px 5px 2px 3px;
-  border-radius: 3px;
-  text-decoration: none;
-  text-shadow: 0px -1px 0px rgba(100, 100, 100, .6);
-}
-.main-list td .file-type i,
-.main-forms fieldset .input-area .controls .file-type i {
-  width: 16px;
-  height: 16px;
-  margin-bottom: -1px;
-  display: inline-block;
-}
-.main-list td .file-type[class^="type-"] i,
-.main-list td .file-type[class*=" type-"] i,
-.main-forms fieldset .input-area .controls .file-type[class*=" type-"] i,
-.main-forms fieldset .input-area .controls .file-type[class^="type-"] i {
-  background-image: url(/orbit_4.0.1/assets/images/file_type.png);
-}
-.file-type.type-pdf i   {background-position: 0px 0px;}
-.file-type.type-psd i   {background-position: -16px 0px;}
-.file-type.type-ai i    {background-position: -32px 0px;}
-.file-type.type-fla i   {background-position: -48px 0px;}
-.file-type.type-in i    {background-position: -64px 0px;}
-.file-type.type-acc i   {background-position: 0px -16px;}
-.file-type.type-do i    {background-position: -16px -16px;}
-.file-type.type-xl i    {background-position: -32px -16px;}
-.file-type.type-pp i    {background-position: -48px -16px;}
-.file-type.type-zip i   {background-position: -64px -16px;}
-.file-type.type-txt i   {background-position: 0px -32px;}
-.file-type.type-jp i    {background-position: -16px -32px;}
-.file-type.type-gif i   {background-position: -32px -32px;}
-.file-type.type-png i   {background-position: -48px -32px;}
-.file-type.type-audio i {background-position: -64px -32px;}
-
-.main-list td .quick-edit {
-  height: 24px;
-  margin-top: 5px;
-}
-.main-list td .quick-edit .nav {
-  display: none; 
-  margin-bottom: 0;
-}
-.main-list tr:hover .quick-edit .nav {
-  display: block;
-}
-.main-list td .quick-edit .nav > li > a {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  border: 1px dotted #d1d1d1;
-}
-.main-list td .quick-edit .nav > li > a:hover {
-  border: 1px dotted transparent;
-}
-.main-list thead tr.sort-header th a {
-  padding: 8px;
-  margin: -8px;
-  display: block;
-  color: #FFFFFF;
-  text-decoration: none;
-}
-.main-list thead tr.sort-header th.active a {
-  padding-bottom: 4px;
-  border-bottom: 4px solid #08c;
-}
-.main-list .footable-row-detail td {
-  padding: 0;
-  border-top: none;
-}
-.main-list .footable-row-detail td .footable-row-detail-inner {
-  display: none;
-  padding: 8px;
-  position: relative;
-  border-radius: 5px;
-  margin: 0 8px 8px;
-  background-color: #ededed;
-}
-.main-list .footable-row-detail td .footable-row-detail-inner:after {
-  display: block;
-  height: 0px;
-  width: 0px;
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  margin-left: -3px;
-  content: "";
-  border-style: solid;
-  border-width: 0 6px 6px 6px;
-  border-color: transparent transparent #ededed transparent;
-}
-.main-list .footable-row-detail td .footable-row-detail-inner div {
-  margin: 10px 0;
-}
-#preview .preview {
-  margin: 0 auto;
-}
-
-
-/* For Retina */
-@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
-  .main-list td .file-type[class^="type-"] i,
-  .main-list td .file-type[class*=" type-"] i,
-  .main-forms fieldset .input-area .controls .file-type[class*=" type-"] i,
-  .main-forms fieldset .input-area .controls .file-type[class^="type-"] i {
-    background-image: url(/orbit_4.0.1/assets/images/file_type@2x.png);
-    background-size: 80px 48px;
-  }
-}
-
-
-/* Responsive */
-@media (max-width: 480px) {
-  .main-list td .quick-edit .nav {
-    display: block;
-  }
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/lib/main-list.css.erb b/app/assets/stylesheets/lib/main-list.css.erb
index 65987a255..fc7c32532 100644
--- a/app/assets/stylesheets/lib/main-list.css.erb
+++ b/app/assets/stylesheets/lib/main-list.css.erb
@@ -39,6 +39,13 @@
 .main-list td {
   background-color: #FFFFFF;
 }
+.main-list td input[type="text"] {
+  margin-bottom: 0;
+  margin-left: -.4em;
+  margin-right: 3px;
+  padding: 0 .3em;
+  width: 4em;
+}
 .main-list td.action {
   vertical-align: middle;
   text-align: right;
diff --git a/app/assets/stylesheets/lib/member.css b/app/assets/stylesheets/lib/member.css
index 5a9c6cf23..5c94bad18 100644
--- a/app/assets/stylesheets/lib/member.css
+++ b/app/assets/stylesheets/lib/member.css
@@ -10,6 +10,12 @@
 }
 
 /* List */
+#list-view #member-list tr.highlight td {
+	background-color: #FFFAE5;
+}
+#list-view #member-list tr.highlight td:first-child {
+	padding: 0
+}
 #list-view #member-list .gender,
 #list-view #member-list td[class^="gender-"] {
 	width: 5px;
@@ -189,6 +195,10 @@
 #list-view #member-card > li:hover .member-avatar .action {
 	visibility: visible;
 }
+#list-view #member-card .highlight {
+	background-color: #F0F0F0;
+	outline: 1px dashed #9E9E9E;
+}
 #list-view #member-card .member-avatar {
 	width: 150px;
 	height: 150px;
diff --git a/app/assets/stylesheets/lib/wrap-nav.css b/app/assets/stylesheets/lib/wrap-nav.css
index 806222627..202184502 100644
--- a/app/assets/stylesheets/lib/wrap-nav.css
+++ b/app/assets/stylesheets/lib/wrap-nav.css
@@ -29,6 +29,9 @@
 .topnav .btn-group {
   margin-left: 0;
 }
+.topnav .view-switch {
+  margin-left: 10px;
+}
 
 /* Bottom Nav */
 .bottomnav {
diff --git a/app/assets/stylesheets/orbit_bar_bootstrap.css b/app/assets/stylesheets/orbit_bar_bootstrap.css
index 809484e4e..f12e9ad61 100644
--- a/app/assets/stylesheets/orbit_bar_bootstrap.css
+++ b/app/assets/stylesheets/orbit_bar_bootstrap.css
@@ -223,7 +223,7 @@
 
 #orbit-bar {
   margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Chivo";
   font-size: 12px;
   line-height: 20px;
   color: #333333;
diff --git a/app/controllers/admin/items_controller.rb b/app/controllers/admin/items_controller.rb
index 183141e15..7ac1cb1e7 100644
--- a/app/controllers/admin/items_controller.rb
+++ b/app/controllers/admin/items_controller.rb
@@ -28,7 +28,7 @@ class Admin::ItemsController < OrbitBackendController
   def update_position
     item = Item.find(params[:id])
     item.shift_to(params[:parent_id], params[:position].to_i - 1)
-    render :nothing => true
+    render :nothing => true, status: 200
   end
   
 end
diff --git a/app/controllers/admin/users_new_interface_controller.rb b/app/controllers/admin/users_new_interface_controller.rb
index 003f6fadb..9ddb07555 100644
--- a/app/controllers/admin/users_new_interface_controller.rb
+++ b/app/controllers/admin/users_new_interface_controller.rb
@@ -250,11 +250,39 @@ class Admin::UsersNewInterfaceController <  OrbitMemberController
 
   end
 
-  def edit_order
+  def edit_order_card
     @users = User.not_guest_user
+    @type = 'card'
+    render 'edit_order'
   end
 
-  def update_order
+  def edit_order_list
+    @users = User.not_guest_user
+    @type = 'list'
+    render 'edit_order'
+  end
+
+  def update_order_card
+    @error = false
+    if params[:users].present?
+      to_go = params[:users][:position].to_i
+      user_at_position = User.where(position: to_go).first
+      user = User.find(params[:users][:id])
+      if user_at_position
+        if user.position > user_at_position.position
+          user.move_above(user_at_position)
+        else
+          user.move_below(user_at_position)
+        end
+      elsif to_go > User.count
+        user.move_to_bottom
+      end
+    end
+    render nothing: true, status: 200
+  end
+
+  def update_order_list
+    @error = []
     if params[:users].present?
       params[:users].values.sort.each do |pair|
         to_go = pair[0].to_i
diff --git a/app/views/admin/users_new_interface/_edit_order_card.html.erb b/app/views/admin/users_new_interface/_edit_order_card.html.erb
new file mode 100644
index 000000000..76b5804ba
--- /dev/null
+++ b/app/views/admin/users_new_interface/_edit_order_card.html.erb
@@ -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>
\ No newline at end of file
diff --git a/app/views/admin/users_new_interface/_edit_order_list.html.erb b/app/views/admin/users_new_interface/_edit_order_list.html.erb
new file mode 100644
index 000000000..abe8be3e2
--- /dev/null
+++ b/app/views/admin/users_new_interface/_edit_order_list.html.erb
@@ -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>
\ No newline at end of file
diff --git a/app/views/admin/users_new_interface/_index_paginator.html.erb b/app/views/admin/users_new_interface/_index_paginator.html.erb
index 058d8f278..a41ee2f49 100644
--- a/app/views/admin/users_new_interface/_index_paginator.html.erb
+++ b/app/views/admin/users_new_interface/_index_paginator.html.erb
@@ -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 -%>
diff --git a/app/views/admin/users_new_interface/_user_edit_order.html.erb b/app/views/admin/users_new_interface/_user_edit_order.html.erb
deleted file mode 100644
index 35150b5af..000000000
--- a/app/views/admin/users_new_interface/_user_edit_order.html.erb
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/app/views/admin/users_new_interface/edit_order.html.erb b/app/views/admin/users_new_interface/edit_order.html.erb
index 078eb8f2f..c0c35c0e3 100644
--- a/app/views/admin/users_new_interface/edit_order.html.erb
+++ b/app/views/admin/users_new_interface/edit_order.html.erb
@@ -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 %>
\ No newline at end of file
diff --git a/app/views/admin/users_new_interface/update_order.js.erb b/app/views/admin/users_new_interface/update_order.js.erb
deleted file mode 100644
index e9de95668..000000000
--- a/app/views/admin/users_new_interface/update_order.js.erb
+++ /dev/null
@@ -1 +0,0 @@
-$('#list-view table tbody').html("<%= j render partial: 'user_edit_order', collection: @users %>")
\ No newline at end of file
diff --git a/app/views/admin/users_new_interface/update_order_list.js.erb b/app/views/admin/users_new_interface/update_order_list.js.erb
new file mode 100644
index 000000000..f07ed708c
--- /dev/null
+++ b/app/views/admin/users_new_interface/update_order_list.js.erb
@@ -0,0 +1 @@
+$('#order_content').html("<%= j render 'edit_order_list' %>")
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index 843cff3be..dce9252d0 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -215,8 +215,10 @@ Orbit::Application.routes.draw do
         get 'temp_edit'
       end
       collection do
-        get 'edit_order'
-        post 'update_order'
+        get 'edit_order_card'
+        get 'edit_order_list'
+        post 'update_order_card'
+        post 'update_order_list'
       end
       match "edit_passwd" => "users_new_interface#edit_passwd" ,:as => :edit_passwd
     end
diff --git a/lib/tasks/new_ui.rake b/lib/tasks/new_ui.rake
index 84ed715c7..852e99a15 100644
--- a/lib/tasks/new_ui.rake
+++ b/lib/tasks/new_ui.rake
@@ -92,7 +92,7 @@ namespace :new_ui do
   end
 
   task :save_users => :environment do
-    User.all.each(&:save)
+    User.not_guest_user.where(position: nil).each(&:save)
   end
 
 end