Broker Contact
This commit is contained in:
Juan Pablo Vial
@ -1,119 +1,181 @@
|
||||
@extends('proyectos.brokers.base')
|
||||
|
||||
@section('brokers_content')
|
||||
@include('proyectos.brokers.proyectos')
|
||||
<div id="brokers"></div>
|
||||
<table id="brokers" class="ui table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RUT</th>
|
||||
<th>Nombre</th>
|
||||
<th>Contacto</th>
|
||||
<th>Contratos</th>
|
||||
<th class="right aligned">
|
||||
<button class="ui small tertiary green icon button" id="add_button">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@foreach($brokers as $broker)
|
||||
<tr>
|
||||
<td>{{$broker->rutFull()}}</td>
|
||||
<td>
|
||||
<span
|
||||
@if ($broker->data()?->legalName !== '')
|
||||
data-tooltip="{{ $broker->data()?->legalName }}" data-position="right center"
|
||||
@endif
|
||||
>
|
||||
{{$broker->name}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
@if ($broker->data()?->representative?->email !== '' || $broker->data()?->representative?->phone !== '')
|
||||
data-tooltip="{{ ($broker->data()?->representative?->email !== '') ? "Email: " . $broker->data()?->representative?->email : '' }}{{ ($broker->data()?->representative?->phone !== '') ? ' Teléfono: ' . $broker->data()?->representative?->phone : '' }}" data-position="right center"
|
||||
@endif
|
||||
>
|
||||
{{ $broker->data()?->representative?->name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="ui list">
|
||||
@foreach($broker->contracts() as $contract)
|
||||
<div class="item">
|
||||
<a href="{{$urls->base}}/proyecto/{{$contract->project->id}}">{{$contract->project->descripcion}} ({{$format->percent($contract->commission, 2, true)}})</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</td>
|
||||
<td class="right aligned">
|
||||
<button class="ui small tertiary icon button edit_button" data-index="{{$broker->rut}}">
|
||||
<i class="edit icon"></i>
|
||||
</button>
|
||||
<button class="ui small tertiary red icon button remove_button" data-index="{{$broker->rut}}">
|
||||
<i class="remove icon"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
@include('proyectos.brokers.add_modal')
|
||||
@endsection
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
const brokers = {
|
||||
data: {
|
||||
contracts: {},
|
||||
project_id: null
|
||||
},
|
||||
formatters: {
|
||||
date: new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'}),
|
||||
percent: new Intl.NumberFormat('es-CL', {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2})
|
||||
},
|
||||
draw() {
|
||||
return {
|
||||
brokers: project_id => {
|
||||
$('#projects').hide()
|
||||
const div = document.getElementById('brokers')
|
||||
const table = document.createElement('table')
|
||||
table.classList.add('ui', 'table')
|
||||
table.innerHTML = [
|
||||
"<thead>",
|
||||
"<tr>",
|
||||
"<th>Operador</th>",
|
||||
"<th>Comisión</th>",
|
||||
"<th>Fecha Inicio</th>",
|
||||
"<th class='right aligned'><button class='ui small tertiary green icon button' id='add_button'><i class='plus icon'></i></button></th>",
|
||||
"</tr>",
|
||||
"</thead>"].join('')
|
||||
const tbody = document.createElement('tbody')
|
||||
brokers.data.contracts[project_id].forEach(contract => {
|
||||
const dateParts = contract.current.date.split('-')
|
||||
const date = new Date([dateParts[0], parseInt(dateParts[1]) - 1, dateParts[2]].join('-'))
|
||||
date.setMonth(date.getMonth() + 1)
|
||||
tbody.insertAdjacentHTML('beforeend', [
|
||||
"<tr>",
|
||||
`<td>${contract.broker.name}</td>`,
|
||||
`<td>${brokers.formatters.percent.format(contract.commission)}</td>`,
|
||||
`<td>${brokers.formatters.date.format(date)}</td>`,
|
||||
`<td class="right aligned"><button class="ui small tertiary red icon button remove_button" data-id="${contract.id}"><i class="remove icon"></i></button></td>`,
|
||||
"</tr>"].join(''))
|
||||
})
|
||||
table.append(tbody)
|
||||
div.innerHTML = ''
|
||||
div.append(table)
|
||||
$('#brokers').show()
|
||||
|
||||
}
|
||||
const brokersHandler = {
|
||||
ids: {
|
||||
buttons: {
|
||||
add: 'add_button',
|
||||
edit: 'edit_button',
|
||||
remove: 'remove_button'
|
||||
},
|
||||
modals: {
|
||||
add: '',
|
||||
edit: ''
|
||||
},
|
||||
forms: {
|
||||
add: '',
|
||||
edit: ''
|
||||
}
|
||||
},
|
||||
get() {
|
||||
events() {
|
||||
return {
|
||||
contracts: project_id => {
|
||||
brokers.actions().startSpinner()
|
||||
brokers.data.project_id = project_id
|
||||
const url = `{{$urls->api}}/proyecto/${project_id}/brokers`
|
||||
APIClient.fetch(url).then(response => {
|
||||
if (!response.ok) {
|
||||
return
|
||||
}
|
||||
return response.json().then(json => {
|
||||
brokers.data.contracts[json.proyecto_id] = json.contracts
|
||||
const promises = []
|
||||
json.contracts.forEach(contract => {
|
||||
promises.push(brokers.get().broker(contract.broker_rut).then(broker => {
|
||||
brokers.data.contracts[json.proyecto_id].find(contract => contract.broker_rut === broker.rut).broker = broker
|
||||
}))
|
||||
})
|
||||
Promise.all(promises).then(() => {
|
||||
brokers.draw().brokers(json.proyecto_id)
|
||||
})
|
||||
})
|
||||
}).finally(() => {
|
||||
brokers.actions().stopSpinner()
|
||||
})
|
||||
add: clickEvent => {
|
||||
console.debug(clickEvent)
|
||||
clickEvent.preventDefault()
|
||||
brokersHandler.actions().add()
|
||||
},
|
||||
broker: broker_rut => {
|
||||
const url = `{{$urls->api}}/proyectos/broker/${broker_rut}`
|
||||
return APIClient.fetch(url).then(response => {
|
||||
if (!response.ok) {
|
||||
return
|
||||
}
|
||||
return response.json().then(json => {
|
||||
return json.broker
|
||||
})
|
||||
})
|
||||
edit: clickEvent => {
|
||||
clickEvent.preventDefault()
|
||||
const broker_rut = clickEvent.currentTarget.dataset.index
|
||||
brokersHandler.actions().edit(broker_rut)
|
||||
},
|
||||
delete: clickEvent => {
|
||||
clickEvent.preventDefault()
|
||||
const broker_rut = clickEvent.currentTarget.dataset.index
|
||||
brokersHandler.actions().delete(broker_rut)
|
||||
}
|
||||
}
|
||||
},
|
||||
buttonWatch() {
|
||||
document.getElementById(brokersHandler.ids.buttons.add).addEventListener('click', brokersHandler.events().add)
|
||||
Array.from(document.getElementsByClassName(brokersHandler.ids.buttons.edit)).forEach(button => {
|
||||
button.addEventListener('click', brokersHandler.events().edit)
|
||||
})
|
||||
Array.from(document.getElementsByClassName(brokersHandler.ids.buttons.remove)).forEach(button => {
|
||||
button.addEventListener('click', brokersHandler.events().delete)
|
||||
})
|
||||
},
|
||||
actions() {
|
||||
return {
|
||||
startSpinner: () => {
|
||||
$('#refresh_button').addClass('loading')
|
||||
add: () => {
|
||||
$(`#${brokersHandler.ids.modals.add}`).modal('show')
|
||||
},
|
||||
stopSpinner: () => {
|
||||
$('#refresh_button').removeClass('loading')
|
||||
},
|
||||
refresh: () => {
|
||||
brokers.get().contracts(brokers.data.project_id)
|
||||
},
|
||||
up: () => {
|
||||
$('#brokers').hide()
|
||||
$('#projects').show()
|
||||
brokers.data.project_id = null
|
||||
document.getElementById('brokers').innerHTML = ''
|
||||
edit: broker_rut => {},
|
||||
delete: broker_rut => {
|
||||
brokersHandler.execute().delete(broker_rut)
|
||||
}
|
||||
}
|
||||
},
|
||||
execute() {
|
||||
return {
|
||||
add: data => {
|
||||
const url = '{{$urls->api}}/proyectos/brokers/add'
|
||||
const method = 'post'
|
||||
const body = new FormData()
|
||||
body.append('brokers[]', JSON.stringify(data))
|
||||
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
if (!json.success) {
|
||||
console.error(json.errors)
|
||||
alert('No se pudo agregar operador.')
|
||||
return
|
||||
}
|
||||
window.location.reload()
|
||||
})
|
||||
},
|
||||
edit: (broker_rut, data) => {},
|
||||
delete: broker_rut => {
|
||||
const url = '{{$urls->api}}/proyectos/broker/' + broker_rut
|
||||
const method = 'delete'
|
||||
return APIClient.fetch(url, {method}).then(response => response.json()).then(json => {
|
||||
if (!json.success) {
|
||||
console.error(json.errors)
|
||||
alert('No se pudo eliminar operador.')
|
||||
return
|
||||
}
|
||||
window.location.reload()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(ids) {
|
||||
brokersHandler.ids = ids
|
||||
brokersHandler.buttonWatch()
|
||||
$(`#${brokersHandler.ids.modals.add}`).modal('hide')
|
||||
|
||||
new AddModal(brokersHandler)
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
$('#brokers').hide()
|
||||
brokersHandler.setup({
|
||||
buttons: {
|
||||
add: 'add_button',
|
||||
edit: 'edit_button',
|
||||
remove: 'remove_button'
|
||||
},
|
||||
modals: {
|
||||
add: 'add_broker_modal',
|
||||
edit: 'edit_broker_modal'
|
||||
},
|
||||
forms: {
|
||||
add: {
|
||||
base: 'add_broker_form',
|
||||
digit: 'digit'
|
||||
},
|
||||
edit: {
|
||||
base: 'edit_broker_form'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user