Change order page.

Fix bug.

app/views/admin/web_resources/order.html.erb

@@ -1,21 +1,36 @@
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "admin/web_links" %>
 <% end %>
+<style>
+	.icons-list-2 {
+    cursor: all-scroll;
+  }
+  .position-text-div {
+    cursor: text;
+    margin: -8px;
+    padding: 8px;
+	}
+	.position-text-div:hover {
+    background: aqua;
+	}
+</style>
 <div class="order-edit-notification"><%= t("web_link.please_save") %></div>
 <table width="100%" id="web_resource_order_table" class="table table-striped" class="web_soursce_table">
 	<thead>
 		<tr>
+			<th></th>
 			<th><%= t("web_link.position") %></th>
 			<th><%= t("web_link.link") %></th>
 	</thead>
 	<tbody>
 		<% @links.each_with_index do |link,i| %>
-			<tr>
+			<tr data-index="<%=i%>">
+				<td><span class="brand"><i class="icons-list-2"></i></span></td>
 				<td class="position-text">
 					<div class="position-text-div" data-value="<%= (i + 1).to_s %>"><%= (i + 1).to_s  %></div>
 				</td>
 				<td>
-					<div class="link-text-id" data-link-id="<%= link.id.to_s %>"><%= link.title %></div>
+					<div class="link-text-id" data-link-id="<%= link.id.to_s %>"><%= link.title.html_safe %></div>
 				</td>
 			</tr>
 		<% end %>
@@ -74,10 +89,10 @@
 			allRows = table_element.rows;
 		for(i = 1; i < allRows.length; i++){
 			var thisRow = allRows[i],
-				text = thisRow.cells[0].textContent.trim(),
+				text = thisRow.cells[1].textContent.trim(),
 				hash = {};
 			hash.index = parseInt(text);
-			text = thisRow.cells[1].innerHTML.trim();
+			text = thisRow.cells[2].innerHTML.trim();
 			if(text != "&nbsp;"){
 				hash.link = text;
 			}
@@ -92,8 +107,8 @@
 		for(i = 0;i < data.length; i++){
 			var thisRow = allRows[i + 1],
 				current_value = i + 1;
-			thisRow.cells[0].innerHTML = "<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>";
+			thisRow.cells[1].innerHTML = "<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>";
-			thisRow.cells[1].innerHTML = data[i].link;
+			thisRow.cells[2].innerHTML = data[i].link;
 		}
 		$("#web_resource_order_table div.position-text-div").on("click",makeEditable);
 	}
@@ -120,3 +135,65 @@
 	$("#web_resource_order_table div.position-text-div").on("click",makeEditable);
 
 </script>
+<script>
+	var th_width = {};
+	$(document).ready(function(){
+		$( ".table tbody" ).each(function(i,tbody){
+			var table = $(tbody).parents("table").eq(0);
+			table.data("index",i);
+			th_width[i] = [];
+			table.find("thead th").each(function(j,th){
+				th_width[i].push($(th).outerWidth(true));
+			})
+		})
+		$( ".table tbody" ).sortable({
+	    revert: true,
+	    axis: "y",
+	    handle: ".brand",
+	    start: function(event, ui){
+	    	var item = ui.item;
+	      var target = $(event.target);
+	      var index = target.parents(".table").eq(0).data("index");
+	      item.css("width",target.width());
+	      item.find("td").each(function(i,td){
+	      	$(td).width(th_width[index][i]);
+	      })
+	    },
+	    stop: function(event, ui) {
+	    	var item = ui.item;
+	    	item.css("width","");
+	    	item.find("td").css("width","");
+	    },
+	    update: function(event, ui) {
+	    	var item = ui.item;
+	      var org_index = item.data("index");
+	      console.log(org_index);
+	      var new_index = item.index();
+	      var indices = [org_index,new_index].sort();
+	      var table = item.parents(".table").eq(0);
+	      table.find("tbody tr").each(function(i,tr){
+	      	if(i >= indices[0] &&  i <= indices[1]){
+	      		var position_text_div = $(tr).find(".position-text-div");
+	      		position_text_div.text(i+1).data("value",i+1);
+	      		$(tr).data("index",i);
+	      	}
+	      	if(i > indices[1]){
+	      		return;
+	      	}
+	      })
+	      $("#save-order-button").removeClass("disabled");
+	      $(".order-edit-notification").slideDown();
+	    }
+	  });
+	})
+  $(window).resize(function(){
+  	th_width = {};
+		$( ".table tbody" ).each(function(i,tbody){
+			var table = $(tbody).parents("table").eq(0);
+			th_width[i] = [];
+			table.find("thead th").each(function(j,th){
+				th_width[i].push($(th).outerWidth(true));
+			})
+		})
+  })
+</script>

web_resource.gemspec

@@ -2,6 +2,8 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "web_resource/version"
+bundle_update_flag = ARGV[0]=='update' || ARGV[0]=='install'
+if bundle_update_flag
   app_path = File.expand_path(__dir__)
   template_path = ENV['PWD'] + '/app/templates'
   all_template = Dir.glob(template_path+'/*/')
@@ -18,6 +20,7 @@ all_template.each do |folder|
       end
     end
   end
+end
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "web_resource"