311 lines
14 KiB
PHP
311 lines
14 KiB
PHP
@extends('ventas.promotions.base')
|
|
|
|
@section('promotions_title')
|
|
{{ $promotion->description }}
|
|
@endsection
|
|
|
|
@section('promotions_header')
|
|
{{ $promotion->description }}
|
|
@endsection
|
|
|
|
@section('promotions_content')
|
|
<div class="ui card">
|
|
<div class="content">
|
|
<div class="description">
|
|
<p>
|
|
{{ ucwords($promotion->type->name()) }} {{ ($promotion->type === Incoviba\Model\Venta\Promotion\Type::FIXED) ? $format->ufs($promotion->amount) : $format->percent($promotion->amount, 2, true) }}
|
|
</p>
|
|
<p>
|
|
{{ $promotion->startDate->format('d-m-Y') }} -> {!! $promotion->endDate?->format('d-m-Y') ?? '∞' !!}
|
|
</p>
|
|
<p>Válido hasta: {!! $promotion->validUntil?->format('d-m-Y') ?? '∅' !!}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui right aligned basic segment">
|
|
<button class="ui green tertiary icon button" id="add_button">
|
|
<i class="plus icon"></i>
|
|
</button>
|
|
</div>
|
|
<div class="ui top attached tabular menu" id="tables_tab_menu">
|
|
<div class="active item" data-tab="projects_table">Proyectos</div>
|
|
<div class="item" data-tab="brokers_table">Operadores</div>
|
|
<div class="item" data-tab="unit-types_table">Tipos</div>
|
|
<div class="item" data-tab="unit-lines_table">Líneas</div>
|
|
<div class="item" data-tab="units_table">Unidades</div>
|
|
</div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="projects_table"></div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="brokers_table"></div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="unit-types_table"></div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="unit-lines_table"></div>
|
|
<div class="ui bottom attached tab fitted segment" data-tab="units_table"></div>
|
|
@include('ventas.promotions.show.add_modal')
|
|
@endsection
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class ConnectionTable {
|
|
table
|
|
constructor(tab) {
|
|
const parent = document.querySelector(`.ui.tab.segment[data-tab="${tab}"]`)
|
|
this.table = document.createElement('table')
|
|
this.table.className = 'ui table'
|
|
this.table.innerHTML = [
|
|
'<thead>',
|
|
'<tr>',
|
|
'<th>Proyecto</th>',
|
|
'<th>Operador</th>',
|
|
'<th class="center aligned" colspan="3">Unidad</th>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<th colspan="2"></th>',
|
|
'<th>Tipo</th>',
|
|
'<th>Línea</th>',
|
|
'<th>#</th>',
|
|
'<th></th>',
|
|
'</tr>',
|
|
'</thead>',
|
|
'<tbody></tbody>'
|
|
].join("\n")
|
|
parent.appendChild(this.table)
|
|
}
|
|
static fromProjects(data) {
|
|
const table = new ConnectionTable('projects_table')
|
|
data.forEach(project => {
|
|
const row = document.createElement('tr')
|
|
row.innerHTML = [
|
|
`<td>${project.descripcion}</td>`,
|
|
'<td>Todos los Operadores</td>',
|
|
'<td colspan="3">Todas las Unidades</td>',
|
|
`<td class="right aligned">`,
|
|
`<button class="ui red icon button remove_button project" data-id="${project.id}">`,
|
|
'<i class="plus icon"></i>',
|
|
'</button>',
|
|
`</td>`
|
|
].join("\n")
|
|
table.table.querySelector('tbody').appendChild(row)
|
|
})
|
|
document.querySelectorAll('.remove_button.project').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const project_id = button.dataset.id
|
|
promotion.remove().project(project_id)
|
|
})
|
|
})
|
|
}
|
|
static fromBrokers(data) {
|
|
const table = new ConnectionTable('brokers_table')
|
|
data.forEach(broker => {
|
|
const row = document.createElement('tr')
|
|
row.innerHTML = [
|
|
`<td>Todos los Proyectos</td>`,
|
|
`<td>${broker.name}</td>`,
|
|
'<td colspan="3">Todas las Unidades</td>',
|
|
`<td class="right aligned">`,
|
|
`<button class="ui red icon button remove_button broker" data-id="${broker.rut}">`,
|
|
'<i class="plus icon"></i>',
|
|
'</button>',
|
|
`</td>`
|
|
].join("\n")
|
|
table.table.querySelector('tbody').appendChild(row)
|
|
})
|
|
document.querySelectorAll('.remove_button.broker').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const broker_rut = button.dataset.id
|
|
promotion.remove().broker(broker_rut)
|
|
})
|
|
})
|
|
}
|
|
static fromUnitTypes(data) {
|
|
const table = new ConnectionTable('unit-types_table')
|
|
data.forEach(unitType => {
|
|
const row = document.createElement('tr')
|
|
const tipo = unitType.unitType.descripcion
|
|
row.innerHTML = [
|
|
`<td>${unitType.project.descripcion}</td>`,
|
|
'<td>Todos los Operadores</td>',
|
|
`<td colspan="3">Todos l@s ${tipo.charAt(0).toUpperCase() + tipo.slice(1)}s</td>`,
|
|
`<td class="right aligned">`,
|
|
`<button class="ui red icon button remove_button unit-type" data-project="${unitType.project.id}" data-id="${unitType.unitType.id}">`,
|
|
'<i class="plus icon"></i>',
|
|
'</button>',
|
|
`</td>`
|
|
].join("\n")
|
|
table.table.querySelector('tbody').appendChild(row)
|
|
})
|
|
document.querySelectorAll('.remove_button.unit-type').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const project_id = button.dataset.project
|
|
const unit_type_id = button.dataset.id
|
|
promotion.remove().unitType(project_id, unit_type_id)
|
|
})
|
|
})
|
|
}
|
|
static fromUnitLines(data) {
|
|
const table = new ConnectionTable('unit-lines_table')
|
|
data.forEach(unitLine => {
|
|
const row = document.createElement('tr')
|
|
const tipo = unitLine.tipo_unidad.descripcion
|
|
row.innerHTML = [
|
|
`<td>${unitLine.proyecto.descripcion}</td>`,
|
|
'<td>Todos los Operadores</td>',
|
|
`<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
|
|
`<td colspan="2">Todas las unidades de la línea ${unitLine.nombre} - ${unitLine.tipologia}</td>`,
|
|
`<td class="right aligned">`,
|
|
`<button class="ui red icon button remove_button unit-line" data-id="${unitLine.id}">`,
|
|
'<i class="plus icon"></i>',
|
|
'</button>',
|
|
`</td>`
|
|
].join("\n")
|
|
table.table.querySelector('tbody').appendChild(row)
|
|
})
|
|
document.querySelectorAll('.remove_button.unit-line').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const unit_line_id = button.dataset.id
|
|
promotion.remove().unitLine(unit_line_id)
|
|
})
|
|
})
|
|
}
|
|
static fromUnits(data) {
|
|
const table = new ConnectionTable('units_table')
|
|
data.forEach(unit => {
|
|
const row = document.createElement('tr')
|
|
const tipo = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
row.innerHTML = [
|
|
`<td>${unit.proyecto_tipo_unidad.proyecto.descripcion}</td>`,
|
|
`<td>Todos los Operadores</td>`,
|
|
`<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
|
|
`<td>${unit.proyecto_tipo_unidad.nombre} - ${unit.proyecto_tipo_unidad.tipologia}</td>`,
|
|
`<td>${unit.descripcion}</td>`,
|
|
`<td class="right aligned">`,
|
|
`<button class="ui red icon button remove_button unit" data-id="${unit.id}">`,
|
|
'<i class="plus icon"></i>',
|
|
'</button>',
|
|
`</td>`
|
|
].join("\n")
|
|
table.table.querySelector('tbody').appendChild(row)
|
|
})
|
|
document.querySelectorAll('.remove_button.unit').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const unit_id = button.dataset.id
|
|
promotion.remove().unit(unit_id)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
const promotion = {
|
|
ids: {
|
|
table: '',
|
|
button: {
|
|
add: ''
|
|
}
|
|
},
|
|
handlers: {
|
|
add: null
|
|
},
|
|
watch() {
|
|
return {
|
|
add: () => {
|
|
document.getElementById(promotion.ids.button.add).addEventListener('click', clickEvent => {
|
|
clickEvent.preventDefault()
|
|
promotion.handlers.add.show()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
remove() {
|
|
return {
|
|
project: project_id => {
|
|
const url = `{{$urls->api}}/ventas/promotion/{{ $promotion->id }}/connections/project/${project_id}`
|
|
const method = 'delete'
|
|
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
broker: broker_rut => {
|
|
const url = `{{$urls->api}}/ventas/promotion/{{ $promotion->id }}/connections/broker/${broker_rut}`
|
|
const method = 'delete'
|
|
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
unitType: (project_id, unit_type_id) => {
|
|
const url = `{{$urls->api}}/ventas/promotion/{{ $promotion->id }}/connections/unit-type/${project_id}/${unit_type_id}`
|
|
const method = 'delete'
|
|
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
unitLine: unit_line_id => {
|
|
const url = `{{$urls->api}}/ventas/promotion/{{ $promotion->id }}/connections/unit-line/${unit_line_id}`
|
|
const method = 'delete'
|
|
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
},
|
|
unit: unit_id => {
|
|
const url = `{{$urls->api}}/ventas/promotion/{{ $promotion->id }}/connections/unit/${unit_id}`
|
|
const method = 'delete'
|
|
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
execute() {},
|
|
setup(ids) {
|
|
this.ids = ids
|
|
|
|
this.handlers.add = new AddModal()
|
|
$(`#${this.ids.menu} .item`).tab()
|
|
|
|
this.watch().add()
|
|
|
|
@if (count($promotion->projects()) > 0)
|
|
ConnectionTable.fromProjects({!! json_encode($promotion->projects()) !!})
|
|
@else
|
|
ConnectionTable.fromProjects([])
|
|
@endif
|
|
@if (count($promotion->brokers()) > 0)
|
|
ConnectionTable.fromBrokers({!! json_encode($promotion->brokers()) !!})
|
|
@else
|
|
ConnectionTable.fromBrokers([])
|
|
@endif
|
|
@if (count($promotion->unitTypes()) > 0)
|
|
ConnectionTable.fromUnitTypes({!! json_encode($promotion->unitTypes()) !!})
|
|
@else
|
|
ConnectionTable.fromUnitTypes([])
|
|
@endif
|
|
@if (count($promotion->unitLines()) > 0)
|
|
ConnectionTable.fromUnitLines({!! json_encode($promotion->unitLines()) !!})
|
|
@else
|
|
ConnectionTable.fromUnitLines([])
|
|
@endif
|
|
@if (count($promotion->units()) > 0)
|
|
ConnectionTable.fromUnits({!! json_encode($promotion->units()) !!})
|
|
@else
|
|
ConnectionTable.fromUnits([])
|
|
@endif
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
promotion.setup({
|
|
menu: 'tables_tab_menu',
|
|
table: 'connections',
|
|
button: {
|
|
add: 'add_button'
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|