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
|
||||
|
||||
110
app/resources/views/proyectos/brokers/add_modal.blade.php
Normal file
110
app/resources/views/proyectos/brokers/add_modal.blade.php
Normal file
@ -0,0 +1,110 @@
|
||||
<div class="ui modal" id="add_broker_modal">
|
||||
<div class="header">
|
||||
Agregar Operador
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="add_broker_form">
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>RUT</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" name="rut" placeholder="RUT" required />
|
||||
<div class="ui basic label">-<span id="digit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Nombre</label>
|
||||
<input type="text" name="name" placeholder="Nombre" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Razón Social</label>
|
||||
<input type="text" name="legal_name" placeholder="Razón Social" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Contacto</label>
|
||||
<input type="text" name="contact" placeholder="Contacto" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<label>Correo</label>
|
||||
<input type="email" name="email" placeholder="Correo" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Teléfono</label>
|
||||
<input type="text" name="phone" placeholder="Teléfono" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui deny button">
|
||||
Cancelar
|
||||
</div>
|
||||
<div class="ui positive right labeled icon button">
|
||||
Agregar
|
||||
<i class="checkmark icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('layout.body.scripts.rut')
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class AddModal
|
||||
{
|
||||
ids
|
||||
handler
|
||||
constructor(handler)
|
||||
{
|
||||
this.handler = handler
|
||||
this.ids = {
|
||||
modal: handler.ids.modals.add,
|
||||
form: handler.ids.forms.add.base,
|
||||
digit: handler.ids.forms.add.digit
|
||||
}
|
||||
$(`#${this.ids.modal}`).modal({
|
||||
onApprove: () => {
|
||||
const form = document.getElementById(this.ids.form)
|
||||
const data = {
|
||||
rut: form.querySelector('[name="rut"]').value,
|
||||
digit: Rut.digitoVerificador(form.querySelector('[name="rut"]').value),
|
||||
name: form.querySelector('[name="name"]').value,
|
||||
legal_name: form.querySelector('[name="legal_name"]').value,
|
||||
contact: form.querySelector('[name="contact"]').value || '',
|
||||
email: form.querySelector('[name="email"]').value || '',
|
||||
phone: form.querySelector('[name="phone"]').value || ''
|
||||
}
|
||||
this.handler.execute().add(data)
|
||||
}
|
||||
})
|
||||
const value = document.querySelector(`#${this.ids.form} input[name="rut"]`).value
|
||||
this.update().digit(value)
|
||||
this.watch().rut()
|
||||
}
|
||||
update() {
|
||||
return {
|
||||
digit: value => {
|
||||
if (value.length > 3) {
|
||||
document.getElementById(this.ids.digit).textContent = Rut.digitoVerificador(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
watch() {
|
||||
return {
|
||||
rut: () => {
|
||||
document.querySelector(`#${this.ids.form} input[name="rut"]`).addEventListener('input', event => {
|
||||
const value = event.currentTarget.value
|
||||
this.update().digit(value)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user