Estou implementando um sorteable que apresenta três colunas e nessas colunas respectivos itens que pode ser trocado de coluna, a gosto do usuário. Esse dados pego no json via ajax que atualiza as colunas, quando é feito o sorteio a nova ordem é salva automaticamente via ajax novamente. Acontece que estou tendo o retrabalho por inexperiência de ter que tratar esses dados quando recebo o objeto via ajax inseri-los nos seus devidos lugares com seus valores, e novamente quando o sorteio é feito, dessa vez pegando os dados dos campos para tratá-los e devolvê-los quando é feito o update no sortable. Minha pergunta é será que o meu código pode ser refatorado? Será que posso trabalhar de uma forma global só com o objeto vindo do java , tratá-lo quando for inserir e fazer o update no sorteio? Segue meu código, agradeço desde já!
<script>
var placeholder = '<li class="span2 well placeholder tile groupLi" style="display:block;">Arraste um item aqui.</li>';
$(document).ready(function(){
sortable();
function formatCurrency(){
Number.prototype.format = function(n, x, s, c) {
var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
num = this.toFixed(Math.max(0, ~~n));
return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
};
};
function sortable() {
$.ajax({
url: 'obterGrupos',
beforeSend: function(){},
success: function(retorno){
var totalEss = 0;
var totalImp = 0;
var totalSup = 0;
$.each(retorno, function(index, obj){
formatCurrency();
var valorFormatado = 'R$ ' + obj.valorDespesa.format(2, 3, '.', ',');
var text = "<li class='list-group-item bg-blue-grey-200 ui-sortable-handle' id='" + obj.id + "'>" +
"<i class='icon wb-move' aria-hidden='true font-size-16'></i><span class='itemDescricao'" + obj.descricaoDespesa +
"</span><span class='float-right valorItem'> " + obj.valorDespesa + " </span></li>";
if(obj.grupoDespesas.nomeGrupoDespesas == "Essencial"){
$('ul#Essencial').append(text);
var idEss = $('#Essencial').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countEss').text(idEss);
var valor = obj.valorDespesa;
totalEss = totalEss += valor;
} else if(obj.grupoDespesas.nomeGrupoDespesas == "Importante"){
$('ul#Importante').append(text);
var idImp = $('#Importante').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countImp').text(idImp);
var valor = obj.valorDespesa;
totalImp = totalImp + valor;
}else{
$('ul#Superfluo').append(text);
var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countSup').text(idSup);
var valor = obj.valorDespesa;
totalSup = totalSup + valor;
}
});
$('.valorEssencial').text('R$ ' + totalEss.format(2, 3, '.', ','));
$('.valorImportante').text('R$ ' + totalImp.format(2, 3, '.', ','));
$('.valorSuperfluo').text('R$ ' + totalSup.format(2, 3, '.', ','));
},
error: function(){}
});
$( "#Essencial, #Importante, #Superfluo" ).sortable({
items: "li:not(.placeholder)",
connectWith: ".connectGroup",
cursor: 'move',
cursorAt: { left: 20 },
tolerance: 'pointer',
revert: 'invalid',
placeholder: 'span2 well placeholder tile',
start: function(event, ui) {
},
receive: function(event, ui) {
var urlData = ui.sender[0].id + '/' + this.id + '/' + ui.item[0].id;
$.get( "despesasNomeId/" + urlData)
.fail(function( urlData ) {
})
.always(function( urlData ) {
console.log("Tudo certo");
});
},
update : function( event, ui){
var idEss = $('#Essencial').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countEss').text(idEss);
var idImp = $('#Importante').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countImp').text(idImp);
var idSup = $('#Superfluo').children().not(".ui-sortable-helper").not(".groupLi").length;
$('.countSup').text(idSup);
if($('#Essencial').children().length == 0){
$('ul#Essencial').append(placeholder);
} else if ($('#Importante').children().length == 0){
$('ul#Importante').append(placeholder);
}else if ($('#Superfluo').children().length == 0){
$('ul#Superfluo').append(placeholder);
}
},
}).disableSelection();
};
})
</script>
