Accordion
This commit is contained in:
Juan Pablo Vial
@ -8,17 +8,14 @@
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h2 class="ui header">Listado de Cierres</h2>
|
||||
<table class="ui striped table" id="cierres">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="5">Proyecto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<h4 class="ui dividing header">Proyectos</h4>
|
||||
<div class="ui compact fluid styled accordion" id="cierres_accordion"></div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@include('layout.head.styles.datatables')
|
||||
@include('layout.body.scripts.datatables')
|
||||
|
||||
@push('page_styles')
|
||||
<style>
|
||||
.proyecto, .estado-cierres {
|
||||
@ -51,14 +48,13 @@
|
||||
const date = new Date(this.fecha)
|
||||
const dateFormatter = new Intl.DateTimeFormat('es-CL')
|
||||
const estado = this.estado.titulo.charAt(0).toUpperCase() + this.estado.titulo.slice(1)
|
||||
return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
|
||||
$('<td></td>')
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
return $('<tr></tr>').addClass('cierre ' + this.estado.descripcion)
|
||||
.attr('data-proyecto', this.proyecto_id).attr('data-estado', this.estado.id).append(
|
||||
$('<td></td>').attr('data-order', this.departamento).append(
|
||||
$('<a></a>').attr('href', '{{$urls->base}}/ventas/cierre/' + this.id).html(this.departamento + ' (' + this.tipologia + ')')
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').html(dateFormatter.format(date))
|
||||
$('<td></td>').attr('data-order', this.fecha).html(dateFormatter.format(date))
|
||||
).append(
|
||||
$('<td></td>').html(formatter.format(this.valor) + ' UF (' + formatter.format(this.unitario()) + ' UF/m²)')
|
||||
).append(
|
||||
@ -101,31 +97,35 @@
|
||||
cierre.estado.titulo = data.estado_cierre.tipo_estado_cierre.descripcion
|
||||
this.cierres.push(cierre)
|
||||
}
|
||||
draw(tbody, formatter) {
|
||||
tbody.append(
|
||||
$('<tr></tr>').addClass('estado-cierres ' + this.descripcion).attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).attr('data-status', 'closed').append(
|
||||
$('<th></th>')
|
||||
).append(
|
||||
$('<th></th>').attr('colspan', 4).html(this.title).append(
|
||||
draw(parent, formatter) {
|
||||
const tbody = $('<tbody></tbody>')
|
||||
this.cierres.forEach(cierre => {
|
||||
tbody.append(cierre.draw(formatter))
|
||||
})
|
||||
const table = $('<table></table>').addClass('ui striped table').append(
|
||||
$('<thead></thead>').append(
|
||||
$('<tr></tr>').append(
|
||||
$('<th></th>').html('Departamento')
|
||||
).append(
|
||||
$('<th></th>').html('Fecha')
|
||||
).append(
|
||||
$('<th></th>').html('Valor')
|
||||
).append(
|
||||
$('<th></th>').html('Estado')
|
||||
)
|
||||
)
|
||||
).append(tbody)
|
||||
parent.append(
|
||||
$('<div></div>').addClass('title ' + this.descripcion).append(
|
||||
$('<span></span>').addClass('ui text ' + this.descripcion.replace('positive', 'success')).html(this.title).append(
|
||||
$('<i></i>').addClass('right caret icon')
|
||||
).append(' [' + this.cierres.length + '] ' + formatter.format(this.proporcion()) + '%')
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('content').append(table)
|
||||
)
|
||||
tbody.append(
|
||||
$('<tr></tr>').addClass('cierre').attr('data-proyecto', this.proyecto_id).attr('data-estado', this.id).append(
|
||||
$('<th></th>')
|
||||
).append(
|
||||
$('<th></th>').html('Departamento')
|
||||
).append(
|
||||
$('<th></th>').html('Fecha')
|
||||
).append(
|
||||
$('<th></th>').html('Valor')
|
||||
).append(
|
||||
$('<th></th>').html('Estado')
|
||||
)
|
||||
)
|
||||
this.cierres.forEach(cierre => {
|
||||
tbody.append(cierre.draw(formatter))
|
||||
const dt = new DataTable(table, {
|
||||
order: [[1, 'desc'], [0, 'asc']]
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -172,23 +172,24 @@
|
||||
}
|
||||
this.estados.rechazado.add(data)
|
||||
}
|
||||
draw(tbody, formatter) {
|
||||
tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').addClass('proyecto').attr('data-proyecto', this.id).attr('data-status', 'closed').attr('colspan', 5).html(this.descripcion).append(
|
||||
$('<i></i>').addClass('right caret icon')
|
||||
).append(' [' + this.total + ']')
|
||||
)
|
||||
)
|
||||
draw(parent, formatter) {
|
||||
const accordion = $('<div></div>').addClass('compact accordion')
|
||||
Object.keys(this.estados).forEach(key => {
|
||||
this.estados[key].total = this.total
|
||||
this.estados[key].draw(tbody, formatter)
|
||||
this.estados[key].draw(accordion, formatter)
|
||||
})
|
||||
parent.append(
|
||||
$('<div></div>').addClass('title').html(this.descripcion).append(
|
||||
$('<i></i>').addClass('dropdown icon')
|
||||
).append(' [' + this.total + ']')
|
||||
).append(
|
||||
$('<div></div>').addClass('content').append(accordion)
|
||||
)
|
||||
}
|
||||
}
|
||||
const cierres = {
|
||||
ids: {
|
||||
table: '',
|
||||
accordion: '',
|
||||
},
|
||||
data: {
|
||||
proyectos: []
|
||||
@ -255,105 +256,37 @@
|
||||
draw: function() {
|
||||
return {
|
||||
proyectos: () => {
|
||||
const parent = $(this.ids.table)
|
||||
const accordion = $(this.ids.accordion)
|
||||
accordion.html('')
|
||||
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
||||
const tbody = parent.find('tbody')
|
||||
|
||||
tbody.html('')
|
||||
this.data.proyectos.forEach(proyecto => {
|
||||
proyecto.draw(tbody, formatter)
|
||||
proyecto.draw(accordion, formatter)
|
||||
})
|
||||
tbody.find('.estado-cierres, .cierre').hide()
|
||||
tbody.find('.proyecto').click(this.actions().proyectos().toggle)
|
||||
tbody.find('.estado-cierres').click(this.actions().estados().toggle)
|
||||
},
|
||||
loading: () => {
|
||||
const parent = $(this.ids.table)
|
||||
const tbody = parent.find('tbody')
|
||||
tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').attr('colspan', 5).append(
|
||||
$('<div></div>').addClass('ui basic segment').append(
|
||||
$('<div></div>').addClass('ui active dimmer').append(
|
||||
$('<div></div>').addClass('ui loader')
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('ui fluid placeholder').append(
|
||||
$('<div></div>').addClass('image')
|
||||
)
|
||||
)
|
||||
const accordion = $(this.ids.accordion)
|
||||
accordion.append(
|
||||
$('<div></div>').addClass('ui basic segment').append(
|
||||
$('<div></div>').addClass('ui active dimmer').append(
|
||||
$('<div></div>').addClass('ui loader')
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').addClass('ui fluid placeholder').append(
|
||||
$('<div></div>').addClass('image')
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
actions: function() {
|
||||
return {
|
||||
proyectos: () => {
|
||||
return {
|
||||
open: event => {
|
||||
const th = $(event.currentTarget)
|
||||
const proyecto_id = th.data('proyecto')
|
||||
th.find('.icon').removeClass('right').addClass('down')
|
||||
$(".estado-cierres[data-proyecto='" + proyecto_id + "']").show()
|
||||
th.attr('data-status', 'open')
|
||||
},
|
||||
close: event => {
|
||||
const th = $(event.currentTarget)
|
||||
const proyecto_id = th.data('proyecto')
|
||||
th.find('.icon').removeClass('down').addClass('right')
|
||||
$(".estado-cierres[data-proyecto='" + proyecto_id + "']").hide()
|
||||
$(".cierre[data-proyecto='" + proyecto_id + "']").hide()
|
||||
th.attr('data-status', 'closed')
|
||||
},
|
||||
toggle: event => {
|
||||
const th = $(event.currentTarget)
|
||||
const status = th.attr('data-status')
|
||||
if (status === 'closed') {
|
||||
return this.actions().proyectos().open(event)
|
||||
}
|
||||
return this.actions().proyectos().close(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
estados: () => {
|
||||
return {
|
||||
open: event => {
|
||||
const tr = $(event.currentTarget)
|
||||
const proyecto_id = tr.data('proyecto')
|
||||
const estado_id = tr.data('estado')
|
||||
tr.find('.icon').removeClass('right').addClass('down')
|
||||
$(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").show()
|
||||
tr.attr('data-status', 'open')
|
||||
},
|
||||
close: event => {
|
||||
const tr = $(event.currentTarget)
|
||||
const proyecto_id = tr.data('proyecto')
|
||||
const estado_id = tr.data('estado')
|
||||
tr.find('.icon').removeClass('down').addClass('right')
|
||||
$(".cierre[data-proyecto='" + proyecto_id + "'][data-estado='" + estado_id + "']").hide()
|
||||
tr.attr('data-status', 'closed')
|
||||
},
|
||||
toggle: event => {
|
||||
const tr = $(event.currentTarget)
|
||||
const status = tr.attr('data-status')
|
||||
if (status === 'closed') {
|
||||
return this.actions().estados().open(event)
|
||||
}
|
||||
return this.actions().estados().close(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function() {
|
||||
$(this.ids.accordion).accordion()
|
||||
this.get().proyectos()
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
cierres.ids.table = '#cierres'
|
||||
cierres.ids.accordion = '#cierres_accordion'
|
||||
cierres.setup()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user