207 lines
6.5 KiB
Plaintext
207 lines
6.5 KiB
Plaintext
<style>
|
|
.icons-list-2 {
|
|
cursor: all-scroll;
|
|
}
|
|
legend{
|
|
width: auto;
|
|
text-align: center;
|
|
padding: 0 1em;
|
|
}
|
|
.position-text-div {
|
|
cursor: text;
|
|
margin: -8px;
|
|
padding: 8px;
|
|
}
|
|
.position-text-div:hover {
|
|
background: aqua;
|
|
}
|
|
</style>
|
|
<%= form_for @property , :url => {:action => "update_fields_display_order"}, html: {class: "form-horizontal main-forms"} do |f| %>
|
|
<% p_hire_fields = @property.p_hire_fields_enabled.map{|rf| [rf.id.to_s,rf]}.to_h %>
|
|
<fieldset>
|
|
<legend><%= @property.title %></legend>
|
|
<div class="control-group">
|
|
<label class="control-label" for="enable_fields_sort"><%=t("property_hire.enable_fields_sort")%></label>
|
|
<div class="controls">
|
|
<%= f.check_box :enable_fields_sort, :id=>"enable_fields_sort" %>
|
|
</div>
|
|
</div>
|
|
<div id="fields_sort_block" class="<%= 'hide' unless f.object.enable_fields_sort %>">
|
|
<table width="100%" id="property_order_table" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th><%= t("property_hire.sort_number") %></th>
|
|
<th><%= t("property_hire.field_name") %></th>
|
|
</thead>
|
|
<tbody>
|
|
<% @property.custom_field_names.each_with_index do |field_name,i| %>
|
|
<% p_hire_field = nil
|
|
if field_name.include?("p_hire_fields")
|
|
p_hire_field = p_hire_fields[field_name.sub("p_hire_fields.",'')]
|
|
next if p_hire_field.nil?
|
|
end %>
|
|
<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>
|
|
<% if p_hire_field %>
|
|
<%= p_hire_field.title %>
|
|
<% else %>
|
|
<%= @property.custom_text(field_name) %>
|
|
<% end %>
|
|
<%= hidden_field_tag "#{f.object_name}[custom_field_names][]", field_name %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="form-actions">
|
|
<% referer = request.referer rescue nil %>
|
|
<% referer = get_referer_url if referer.blank? || request.host != URI.parse(URI.encode(referer)).host %>
|
|
<%= f.submit t('submit'), class: 'btn btn-primary' %>
|
|
<input type="hidden" name="referer_url" value="<%= referer %>">
|
|
<%= link_to t('cancel'), referer, :class=>"btn" %>
|
|
</div>
|
|
</fieldset>
|
|
<% end %>
|
|
<script>
|
|
$("#enable_fields_sort").click(function(){
|
|
$("#fields_sort_block").toggleClass("hide");
|
|
update_table_cache_width();
|
|
})
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
var makeEditable = function(){
|
|
var input_box = $("<input type='text'/>"),
|
|
el = $(this);
|
|
input_box.addClass("editable-input");
|
|
input_box.val(el.data("value"));
|
|
input_box.attr("data-old-id",el.data("value"));
|
|
input_box.on("blur",function(){
|
|
putBackdiv($(this));
|
|
});
|
|
input_box.on("keypress",function(e){
|
|
if(e.keyCode == 13 || e.keyCode == 27){
|
|
putBackdiv($(this),e.keyCode);
|
|
}
|
|
})
|
|
el.parent().html(input_box);
|
|
input_box.focus();
|
|
}
|
|
|
|
var putBackdiv = function(el,keyCode){
|
|
current_value = parseInt((el.val() == "" ? el.data("old-id") : el.val())),
|
|
old_value = parseInt(el.data("old-id"));
|
|
if(isNaN(current_value) || keyCode == 27){
|
|
current_value = old_value;
|
|
}
|
|
if(old_value != current_value){
|
|
var new_index_value = (current_value > old_value ? current_value + 1 : current_value - 1),
|
|
div = $("<div class='position-text-div' data-value='" + current_value + "'>" + new_index_value + "</div>");
|
|
div.on("click",makeEditable);
|
|
el.parent().html(div);
|
|
sortTable(el.data("old-id"),current_value);
|
|
}else{
|
|
var div = $("<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>");
|
|
div.on("click",makeEditable);
|
|
el.parent().html(div);
|
|
}
|
|
}
|
|
var sortTable = function(changed_index,changed_to){
|
|
var table_element = document.getElementById("property_order_table"),
|
|
data = [],
|
|
allRows = table_element.rows;
|
|
for(i = 1; i < allRows.length; i++){
|
|
var thisRow = allRows[i],
|
|
text = thisRow.cells[1].textContent.trim(),
|
|
hash = {};
|
|
hash.index = parseInt(text);
|
|
text = thisRow.cells[2].innerHTML.trim();
|
|
if(text != " "){
|
|
hash.property = text;
|
|
}
|
|
data.push(hash);
|
|
}
|
|
data = data.sort(function(a,b){return a.index - b.index});
|
|
renderSortedTable(data,table_element);
|
|
}
|
|
var renderSortedTable = function(data,table_element){
|
|
var allRows = table_element.rows;
|
|
for(i = 0;i < data.length; i++){
|
|
var thisRow = allRows[i + 1],
|
|
current_value = i + 1;
|
|
thisRow.cells[1].innerHTML = "<div class='position-text-div' data-value='" + current_value + "'>" + current_value + "</div>";
|
|
thisRow.cells[2].innerHTML = data[i].property;
|
|
}
|
|
$("#property_order_table div.position-text-div").on("click",makeEditable);
|
|
}
|
|
$("#property_order_table div.position-text-div").on("click",makeEditable);
|
|
</script>
|
|
<script>
|
|
window.update_table_cache_width = 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));
|
|
})
|
|
})
|
|
}
|
|
var th_width = {};
|
|
$(document).ready(function(){
|
|
update_table_cache_width();
|
|
$( ".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;
|
|
}
|
|
})
|
|
}
|
|
});
|
|
})
|
|
$(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> |