[Solved]
after some tests discover that actually I was referencing the wrong table, each table and mounted with a different query, so is Ids are different! follows the source code below.
CSS I needed to touch the bootstrap of the datatables and add a new button, because the 'Details-control' was being overwritten
td.sub-details-control {
background: url('../images/details_open.png') no-repeat center center;
cursor: pointer;
width: 18px;
}
tr.shown td.sub-details-control {
background: url('../images/details_close.png') no-repeat center center;
}
BLADE - SCRIPT
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Lista de Movimentações em Lote
</div>
<div class="panel-body">
<table id="users-table" class="table table-condensed">
<thead>
<tr>
<th></th>
<th>Lote</th>
<th>Local Atual</th>
<th>Data da Movimentação</th>
<th>O.S.</th>
<th>Utilizador</th>
<th> </th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script id="details-template" type="text/x-handlebars-template">
<table class="table details-table" id="@{{id}}">
<thead>
<tr>
<th></th>
<th width="10%">ID</th>
<th width="50%">Produto</th>
<th width="30%">Quantidade</th>
<th width="10%"> </th>
</tr>
</thead>
</table>
</script>
<script id="details-template-sub" type="text/x-handlebars-template">
<table class="table sub-details-table" id="sub-@{{id}}-@{{lote_id}}">
<thead>
<tr>
<th width="60%">Produto</th>
<th width="30%">Numero de Serie</th>
<th width="10%"> </th>
</tr>
</thead>
</table>
</script>
<script type="text/javascript">
var template = Handlebars.compile($("#details-template").html());
var templateSub = Handlebars.compile($("#details-template-sub").html());
let subtable;
let subdetalhe = [];
var table = $('#users-table').DataTable({
"language": {
"url": "{{ asset('vendor/laraerp/template/datatables_portuguese-Brasil.json') }}"
},
processing: true,
serverSide: true,
ajax: '{!! route('datatables.lote') !!}',
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{data: 'id', name: 'id'},
{data: 'local', name: 'local'},
{data: 'created_at', name: 'created_at'},
{data: 'DescricaoServico', name: 'DescricaoServico'},
{data: 'nome', name: 'nome'},
{data: 'editar', name: 'editar', orderable: false, searchable: false}
],
order: [[2, 'desc']]
});
// Add event listener for opening and closing details
$('#users-table tbody').on('click', 'td.details-control', function () {
$('#excluiItem').html('')
var tr = $(this).closest('tr');
var row = table.row(tr);
var tableId = row.data().id;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(template(row.data())).show();
initTable(tableId, row.data());
tr.addClass('shown');
tr.next().find('td').addClass('no-padding bg-gray');
}
});
function initTable(tableId, data) {
subtable=$('#'+tableId).DataTable({
processing: true,
serverSide: true,
ajax: data.url,
columns: [
{
"className": 'sub-details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{ data: 'id', name: 'id', visible: false },
{ data: 'descricao', name: 'descricao' },
{ data: 'quantidade', name: 'quantidade' },
{ data: 'excluir', name: 'excluir', orderable: false, searchable: false }
],
"createdRow": function( row, data ) {
if ( !data["controla_serie"]) {
$("td.sub-details-control", row).removeClass("sub-details-control");
}
}
})
$('#'+tableId).on('click', 'td.sub-details-control', function () {
$('#excluiItem').html('')
var tr = $(this).closest('tr');
var row = subtable.row(tr);
var tableId = 'sub-'+row.data().id;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(templateSub(row.data())).show();
initTableSub(tableId, row.data());
tr.addClass('shown');
tr.next().find('td').addClass('no-padding bg-gray');
}
});
}
function initTableSub(tableSubId,data ) {
subdetalhe[data.id] = $('#sub-' + data.id+'-'+data.lote_id).DataTable({
processing: true,
serverSide: true,
destroy: true,
ajax: data.urlSub,
columns: [
{data: 'descricao', name: 'descricao'},
{data: 'numero_serie', name: 'numero_serie'},
{data: 'excluir', name: 'excluir', orderable: false, searchable: false}
]
})
}
</script>
CONTROLLER
follow the functions with the querys in case someone needs to ask any questions about the routes created
public function anyData()
{
$lotes = Lote::query()
->join('historico_patrimonios', 'lotes.id', '=', 'historico_patrimonios.lote_id')
->join('ordens_servicos_internas', 'historico_patrimonios.ordemServico_id', '=', 'ordens_servicos_internas.id')
->join('local_armazenamentos', 'historico_patrimonios.local_destino_id', '=', 'local_armazenamentos.id')
->join('pessoas', 'lotes.pessoa_id', '=', 'pessoas.id')
->select('lotes.id', 'local_armazenamentos.local', 'lotes.created_at', 'ordens_servicos_internas.DescricaoServico', 'pessoas.nome')->distinct();
return DataTables::of($lotes)->addColumn('editar', function ($data) {
$button = "<a href='".route('patrimonioLote.editaMovimentacao', $data->id)."' class='btn btn-success btn-xs' data-toggle='tooltip' title='Adicionar Produtos ao Lote'>
<i class='glyphicon glyphicon-plus'></i> Produto
</a>";
return $button;
})->addColumn('url', function ($data) {
return url('patrimonio/details-lote/' . $data->id);
})->editColumn('created_at', function ($user) {
return $user->created_at->format('d/m/Y');
})->rawColumns(['editar','url'])->make(true);
}
public function getDetailsLote($lote)
{
$itens = MovimentacaoEstoque::query()
->join('produtos', 'movimentacao_estoques.produto_id', '=', 'produtos.id')
->select(['produtos.id', 'produtos.controla_serie', 'produtos.descricao', \DB::raw("'0' as patrimonio_id"), 'movimentacao_estoques.quantidade', 'movimentacao_estoques.lote_id'])->where('movimentacao_estoques.lote_id', $lote)->groupBy('produtos.descricao');
return DataTables::of($itens)->addColumn('urlSub', function ($data) {
return url('patrimonio/details-lote-sub/' . $data->id.'/'.$data->lote_id);
})->addColumn('excluir', function ($data) {
$valida = Produto::query()->select(["controla_serie"])->where('id', $data->id)->get();
if(!$valida->first()->controla_serie == 1) {
$btn = "<a class='btn btn-danger btn-xs' data-id='" . $data->id . "' data-lote-id='" . $data->lote_id . "' data-patrimonio='" . $data->patrimonio_id . "' data-toggle='modal' data-target='#excluirItemMovimentacao'>
<i class='glyphicon glyphicon-trash'></i>
</a>";
}else{
$btn = '';
}
return $btn;
})->rawColumns([ 'urlSub', 'excluir'])->make(true);
}
public function getDetailsLoteSub($produto, $lote)
{
$itensSub = MovimentacaoEstoque::query()
->join('produtos', 'movimentacao_estoques.produto_id', '=', 'produtos.id')
->join('historico_patrimonios', function ($join){
$join->on('movimentacao_estoques.produto_id', '=', 'historico_patrimonios.produto_id');
$join->on('movimentacao_estoques.lote_id', '=', 'historico_patrimonios.lote_id');
})->join('patrimonios', 'patrimonios.id', '=', 'historico_patrimonios.patrimonio_id')
->join('numeros_series', function ($join){
$join->on('patrimonios.numero_serie_id', '=', 'numeros_series.id');
$join->on('patrimonios.produto_id', '=', 'numeros_series.produto_id');
})->select(['produtos.id', 'produtos.descricao', 'numeros_series.numero_serie', 'movimentacao_estoques.lote_id', 'historico_patrimonios.patrimonio_id'])->where('movimentacao_estoques.produto_id', $produto)->where('movimentacao_estoques.lote_id', $lote);
return DataTables::of($itensSub)->addColumn('excluir', function ($data) {
$btn = "<a class='btn btn-danger btn-xs' data-id='".$data->id."' data-lote-id='".$data->lote_id."' data-patrimonio='".$data->patrimonio_id."' data-toggle='modal' data-target='#excluirItemMovimentacao'>
<i class='glyphicon glyphicon-trash'></i>
</a>";
return $btn;
})->rawColumns(['excluir'])->make(true);
}
