feature/cierres (#25)
Varios cambios Co-authored-by: Juan Pablo Vial <jpvialb@incoviba.cl> Reviewed-on: #25
This commit is contained in:
100
app/resources/views/ventas/promotions/add_modal.blade.php
Normal file
100
app/resources/views/ventas/promotions/add_modal.blade.php
Normal file
@ -0,0 +1,100 @@
|
||||
<div class="ui modal" id="add_promotion_modal">
|
||||
<div class="header">
|
||||
Agregar Promoción
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="add_promotion_form">
|
||||
<div class="field">
|
||||
<label for="description">Descripción</label>
|
||||
<input type="text" id="description" name="description" placeholder="Descripción" required />
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="type">Tipo</label>
|
||||
<select id="type" name="type" class="ui select dropdown" required>
|
||||
<option value="1">Valor Fijo</option>
|
||||
<option value="2">Valor Variable</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="value">Valor</label>
|
||||
<input type="text" id="value" name="value" placeholder="Valor" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="start_date">Fecha de Inicio</label>
|
||||
<div class="ui calendar" id="start_date">
|
||||
<div class="ui left icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="start_date" placeholder="Fecha de Inicio" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="end_date">Fecha de Término</label>
|
||||
<div class="ui calendar" id="end_date">
|
||||
<div class="ui left icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="end_date" placeholder="Fecha de Término" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="valid_range">Válido por N Días Después del Término</label>
|
||||
<input type="text" id="valid_range" name="valid_range" placeholder="Válido por N Días" value="7" required />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui black deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Agregar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class AddModal {
|
||||
ids = {
|
||||
modal: '#add_promotion_modal',
|
||||
}
|
||||
modal
|
||||
|
||||
constructor() {
|
||||
this.modal = $(this.ids.modal)
|
||||
this.modal.find('.ui.dropdown').dropdown()
|
||||
this.modal.find('.ui.calendar').calendar(calendar_date_options)
|
||||
this.modal.modal({
|
||||
onApprove: () => {
|
||||
const form = document.getElementById('add_promotion_form')
|
||||
const type = $(form.querySelector('[name="type"]')).dropdown('get value')
|
||||
const start_date = $(form.querySelector('#start_date')).calendar('get date')
|
||||
const end_date = $(form.querySelector('#end_date')).calendar('get date')
|
||||
let valid_until = null
|
||||
if (end_date !== null) {
|
||||
valid_until = new Date(end_date)
|
||||
valid_until.setDate(valid_until.getDate() + parseInt(form.querySelector('[name="valid_range"]').value))
|
||||
}
|
||||
const data = {
|
||||
description: form.querySelector('[name="description"]').value,
|
||||
type,
|
||||
value: form.querySelector('[name="value"]').value,
|
||||
start_date: [start_date.getFullYear(), start_date.getMonth() + 1, start_date.getDate()].join('-'),
|
||||
end_date: end_date === null ? null : [end_date.getFullYear(), end_date.getMonth() + 1, end_date.getDate()].join('-'),
|
||||
valid_until: valid_until === null ? null : [valid_until.getFullYear(), valid_until.getMonth() + 1, valid_until.getDate()].join('-'),
|
||||
}
|
||||
promotions.execute().add(data)
|
||||
}
|
||||
})
|
||||
}
|
||||
show() {
|
||||
this.modal.modal('show')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
22
app/resources/views/ventas/promotions/base.blade.php
Normal file
22
app/resources/views/ventas/promotions/base.blade.php
Normal file
@ -0,0 +1,22 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_title')
|
||||
@hasSection('promotions_title')
|
||||
Promoción - @yield('promotions_title')
|
||||
@else
|
||||
Promociones
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h2 class="ui header">
|
||||
@hasSection('promotions_header')
|
||||
Promoción - @yield('promotions_header')
|
||||
@else
|
||||
Promociones
|
||||
@endif
|
||||
</h2>
|
||||
@yield('promotions_content')
|
||||
</div>
|
||||
@endsection
|
126
app/resources/views/ventas/promotions/edit_modal.blade.php
Normal file
126
app/resources/views/ventas/promotions/edit_modal.blade.php
Normal file
@ -0,0 +1,126 @@
|
||||
<div class="ui modal" id="edit_promotion_modal">
|
||||
<div class="header">
|
||||
Editar Promoción - <span class="description"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="edit_promotion_form">
|
||||
<input type="hidden" name="id" />
|
||||
<div class="field">
|
||||
<label for="description">Descripción</label>
|
||||
<input type="text" id="description" name="description" placeholder="Descripción" required />
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="type">Tipo</label>
|
||||
<select id="type" name="type" class="ui select dropdown" required>
|
||||
<option value="1">Valor Fijo</option>
|
||||
<option value="2">Valor Variable</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="value">Valor</label>
|
||||
<input type="text" id="value" name="value" placeholder="Valor" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label for="edit_start_date">Fecha de Inicio</label>
|
||||
<div class="ui calendar" id="edit_start_date">
|
||||
<div class="ui left icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="edit_start_date" placeholder="Fecha de Inicio" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_end_date">Fecha de Término</label>
|
||||
<div class="ui calendar" id="edit_end_date">
|
||||
<div class="ui left icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="edit_end_date" placeholder="Fecha de Término" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="valid_range">Válido por N Días Después del Término</label>
|
||||
<input type="text" id="valid_range" name="valid_range" placeholder="Válido por N Días" value="7" required />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui black deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Editar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class EditModal {
|
||||
ids = {
|
||||
modal: '#edit_promotion_modal',
|
||||
}
|
||||
modal
|
||||
promotions
|
||||
|
||||
constructor(data) {
|
||||
this.promotions = data
|
||||
this.modal = $(this.ids.modal)
|
||||
this.modal.find('.ui.dropdown').dropdown()
|
||||
this.modal.find('.ui.calendar').calendar(calendar_date_options)
|
||||
this.modal.modal({
|
||||
onApprove: () => {
|
||||
const form = document.getElementById('edit_promotion_form')
|
||||
const type = $(form.querySelector('[name="type"]')).dropdown('get value')
|
||||
const start_date = $(form.querySelector('#edit_start_date')).calendar('get date')
|
||||
const end_date = $(form.querySelector('#edit_end_date')).calendar('get date')
|
||||
let valid_until = null
|
||||
if (end_date !== null) {
|
||||
valid_until = new Date(end_date)
|
||||
valid_until.setDate(valid_until.getDate() + parseInt(form.querySelector('[name="valid_range"]').value))
|
||||
}
|
||||
const data = {
|
||||
id: form.querySelector('[name="id"]').value,
|
||||
description: form.querySelector('[name="description"]').value,
|
||||
type,
|
||||
value: form.querySelector('[name="value"]').value,
|
||||
start_date: [start_date.getFullYear(), start_date.getMonth() + 1, start_date.getDate()].join('-'),
|
||||
end_date: end_date === null ? null : [end_date.getFullYear(), end_date.getMonth() + 1, end_date.getDate()].join('-'),
|
||||
valid_until: valid_until === null ? null : [valid_until.getFullYear(), valid_until.getMonth() + 1, valid_until.getDate()].join('-'),
|
||||
}
|
||||
promotions.execute().edit(data)
|
||||
}
|
||||
})
|
||||
}
|
||||
load(promotion_id) {
|
||||
const promotion = this.promotions.find(promotion => promotion.id === parseInt(promotion_id))
|
||||
const form = document.getElementById('edit_promotion_form')
|
||||
form.reset()
|
||||
form.querySelector('[name="id"]').value = promotion.id
|
||||
form.querySelector('[name="description"]').value = promotion.description
|
||||
form.querySelector('[name="type"]').value = promotion.type
|
||||
form.querySelector('[name="value"]').value = promotion.amount
|
||||
const start_date_parts = promotion.start_date.split('-')
|
||||
const start_date = new Date(start_date_parts[0], start_date_parts[1] - 1, start_date_parts[2])
|
||||
$('#edit_start_date').calendar('set date', start_date)
|
||||
if (promotion.end_date !== null) {
|
||||
const end_date_parts = promotion.end_date.split('-')
|
||||
const end_date = new Date(end_date_parts[0], end_date_parts[1] - 1, end_date_parts[2])
|
||||
$('#edit_end_date').calendar('set date', end_date)
|
||||
|
||||
if (promotion.valid_until !== null) {
|
||||
const valid_until_parts = promotion.valid_until.split('-')
|
||||
const valid_until = new Date(valid_until_parts[0], valid_until_parts[1] - 1, valid_until_parts[2])
|
||||
form.querySelector('[name="valid_range"]').value = valid_until.getDate() - end_date.getDate()
|
||||
}
|
||||
}
|
||||
|
||||
this.modal.modal('show')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
310
app/resources/views/ventas/promotions/show.blade.php
Normal file
310
app/resources/views/ventas/promotions/show.blade.php
Normal file
@ -0,0 +1,310 @@
|
||||
@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
|
288
app/resources/views/ventas/promotions/show/add_modal.blade.php
Normal file
288
app/resources/views/ventas/promotions/show/add_modal.blade.php
Normal file
@ -0,0 +1,288 @@
|
||||
<div class="ui modal" id="add_connection_modal">
|
||||
<div class="header">
|
||||
Agregar
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="add_connection_form">
|
||||
<input type="hidden" name="promotion_id" value="{{$promotion->id}}" />
|
||||
<div class="field" id="type">
|
||||
<label>Tipo</label>
|
||||
@foreach (['Proyecto' => 'project', 'Operador' => 'broker', 'Tipo' => 'type', 'Línea' => 'line', 'Unidad' => 'unit'] as $type => $value)
|
||||
<div class="ui radio checkbox type" data-tab="{{ $value }}">
|
||||
<input type="radio" name="type" value="{{$value}}" @if ($value === 'project') checked="checked"@endif />
|
||||
<label>{{$type}}</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="ui active tab segment" data-tab="project">
|
||||
<div class="field">
|
||||
<label>Proyecto</label>
|
||||
<div class="ui search multiple selection dropdown" id="project">
|
||||
<input type="hidden" name="project[]" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Proyecto</div>
|
||||
<div class="menu">
|
||||
@foreach ($projects as $project)
|
||||
<div class="item" data-value="{{$project->id}}">{{$project->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui tab segment" data-tab="broker">
|
||||
<div class="field">
|
||||
<label>Operador</label>
|
||||
<div class="ui search multiple selection dropdown" id="broker">
|
||||
<input type="hidden" name="broker[]" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Operador</div>
|
||||
<div class="menu">
|
||||
@foreach ($brokers as $broker)
|
||||
<div class="item" data-value="{{$broker->rut}}">{{$broker->name}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui tab segment" data-tab="type">
|
||||
<div class="fields">
|
||||
<div class="six wide field">
|
||||
<label>Proyecto</label>
|
||||
<div class="ui search selection dropdown" id="type_project">
|
||||
<input type="hidden" name="type_project" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Proyecto</div>
|
||||
<div class="menu">
|
||||
@foreach ($projects as $project)
|
||||
<div class="item" data-value="{{$project->id}}">{{$project->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label>Tipo</label>
|
||||
<div class="ui search multiple selection dropdown" id="unit_type">
|
||||
<input type="hidden" name="unit_type[]" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Tipo</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui tab segment" data-tab="line">
|
||||
<div class="fields">
|
||||
<div class="six wide field">
|
||||
<label>Proyecto</label>
|
||||
<div class="ui search selection dropdown" id="line_project">
|
||||
<input type="hidden" name="line_project" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Proyecto</div>
|
||||
<div class="menu">
|
||||
@foreach ($projects as $project)
|
||||
<div class="item" data-value="{{$project->id}}">{{$project->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label>Línea</label>
|
||||
<div class="ui search multiple selection dropdown" id="line">
|
||||
<input type="hidden" name="line[]" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Línea</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui tab segment" data-tab="unit">
|
||||
<div class="fields">
|
||||
<div class="six wide field">
|
||||
<label>Proyecto</label>
|
||||
<div class="ui search selection dropdown" id="unit_project">
|
||||
<input type="hidden" name="unit_project" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Proyecto</div>
|
||||
<div class="menu">
|
||||
@foreach ($projects as $project)
|
||||
<div class="item" data-value="{{$project->id}}">{{$project->descripcion}}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label>Unidad</label>
|
||||
<div class="ui search multiple selection dropdown" id="unit">
|
||||
<input type="hidden" name="unit[]" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text">Unidad</div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui black deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Guardar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class AddModal {
|
||||
ids
|
||||
modal
|
||||
units = []
|
||||
constructor() {
|
||||
this.ids = {
|
||||
form: 'add_connection_form',
|
||||
modal: 'add_connection_modal',
|
||||
radios: '#type .ui.radio.checkbox.type',
|
||||
type_project: 'type_project',
|
||||
unit_type: 'unit_type',
|
||||
line_project: 'line_project',
|
||||
line: 'line',
|
||||
unit_project: 'unit_project',
|
||||
unit: 'unit',
|
||||
broker: 'broker'
|
||||
}
|
||||
this.modal = $(`#${this.ids.modal}`).modal({
|
||||
onApprove: () => {
|
||||
const form = document.getElementById(this.ids.form)
|
||||
const body = new FormData(form)
|
||||
const url = `{{$urls->api}}/ventas/promotion/{{$promotion->id}}/connections/add`
|
||||
const method = 'post'
|
||||
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
if (json.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
$(`#${this.ids.form} ${this.ids.radios}`).checkbox({
|
||||
fireOnInit: true,
|
||||
onChecked: () => {
|
||||
$(`#${this.ids.form} ${this.ids.radios}`).each((index, radio) => {
|
||||
if ($(radio).checkbox('is checked')) {
|
||||
const tab = radio.dataset.tab
|
||||
$.tab('change tab', tab)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
$('.ui.dropdown').dropdown()
|
||||
|
||||
const typeProject = $(`#${this.ids.type_project}`)
|
||||
typeProject.dropdown('clear', false)
|
||||
typeProject.dropdown({
|
||||
onChange: (value, text, $choice) => {
|
||||
this.draw().types(value)
|
||||
}
|
||||
})
|
||||
const lineProject = $(`#${this.ids.line_project}`)
|
||||
lineProject.dropdown('clear', false)
|
||||
lineProject.dropdown({
|
||||
onChange: (value, text, $choice) => {
|
||||
this.draw().lines(value)
|
||||
}
|
||||
})
|
||||
const unitProject = $(`#${this.ids.unit_project}`)
|
||||
unitProject.dropdown('clear', false)
|
||||
unitProject.dropdown({
|
||||
onChange: (value, text, $choice) => {
|
||||
this.draw().units(value)
|
||||
}
|
||||
})
|
||||
}
|
||||
show() {
|
||||
this.modal.modal('show')
|
||||
}
|
||||
draw() {
|
||||
return {
|
||||
types: project_id => {
|
||||
this.load().units(project_id).then(() => {
|
||||
const values = []
|
||||
this.units[project_id].forEach(unit => {
|
||||
const tipo = unit.proyecto_tipo_unidad.tipo_unidad
|
||||
if (values.find(value => value.value === tipo.id)) return
|
||||
const label = `${tipo.descripcion.charAt(0).toUpperCase() + tipo.descripcion.slice(1)}`
|
||||
values.push( {
|
||||
value: tipo.id,
|
||||
text: label,
|
||||
name: label
|
||||
} )
|
||||
})
|
||||
$(`#${this.ids.unit_type}`).dropdown('change values', values)
|
||||
})
|
||||
},
|
||||
lines: project_id => {
|
||||
this.load().units(project_id).then(() => {
|
||||
const values = []
|
||||
this.units[project_id].forEach(unit => {
|
||||
const tipo = unit.proyecto_tipo_unidad.tipo_unidad
|
||||
const linea = unit.proyecto_tipo_unidad
|
||||
if (values.find(value => value.value === linea.id)) return
|
||||
let name = linea.nombre
|
||||
if (!linea.nombre.includes(tipo.descripcion.charAt(0).toUpperCase() + tipo.descripcion.slice(1))) {
|
||||
name = `${tipo.descripcion.charAt(0).toUpperCase() + tipo.descripcion.slice(1)} ${name}`
|
||||
}
|
||||
const label = `${name} - ${linea.tipologia}`
|
||||
values.push( {
|
||||
value: linea.id,
|
||||
text: label,
|
||||
name: label
|
||||
} )
|
||||
})
|
||||
$(`#${this.ids.line}`).dropdown('change values', values)
|
||||
})
|
||||
},
|
||||
units: project_id => {
|
||||
this.load().units(project_id).then(() => {
|
||||
const values = this.units[project_id].map(unit => {
|
||||
const tipo = unit.proyecto_tipo_unidad.tipo_unidad.descripcion
|
||||
const label = `${tipo.charAt(0).toUpperCase() + tipo.slice(1)} - ${unit.descripcion}`
|
||||
return {
|
||||
value: unit.id,
|
||||
text: label,
|
||||
name: label
|
||||
}
|
||||
})
|
||||
$(`#${this.ids.unit}`).dropdown('change values', values)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
load() {
|
||||
return {
|
||||
units: project_id => {
|
||||
if (typeof this.units[project_id] !== 'undefined' && this.units[project_id].length > 0) {
|
||||
return new Promise( resolve => resolve(this.units[project_id]) )
|
||||
}
|
||||
const url = `{{ $urls->api }}/proyecto/${project_id}/unidades`
|
||||
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
||||
if (json.unidades.length === 0) {
|
||||
throw new Error('No se encontraron unidades')
|
||||
}
|
||||
const units = []
|
||||
Object.values(json.unidades).forEach(unidades => {
|
||||
unidades.forEach(unit => {
|
||||
units.push(unit)
|
||||
})
|
||||
})
|
||||
this.units[project_id] = units
|
||||
return units
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
Reference in New Issue
Block a user