develop (#45)
Co-authored-by: Juan Pablo Vial <jpvialb@incoviba.cl> Reviewed-on: #45
This commit is contained in:
@ -10,11 +10,6 @@
|
||||
<div class="column">
|
||||
Inmobiliarias
|
||||
</div>
|
||||
{{--<div class="right aligned column">
|
||||
<button class="ui icon button" type="button">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</div>--}}
|
||||
</h2>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui cards">
|
||||
@ -22,11 +17,9 @@
|
||||
<div class="ui card">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
{{$inmobiliaria->abreviacion}}
|
||||
{{--<a href="{{$urls->base}}/inmobiliaria/{{$inmobiliaria->rut}}">
|
||||
</a>--}}
|
||||
{{$inmobiliaria->abreviacion}}
|
||||
</div>
|
||||
<div class="description">{{$inmobiliaria->razon}} {{$inmobiliaria->tipoSociedad->descripcion}}</div>
|
||||
<div class="description">{{$inmobiliaria->razon}} {{$inmobiliaria->tipoSociedad?->descripcion ?? ''}}</div>
|
||||
<div class="meta">{{$inmobiliaria->rut()}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
171
app/resources/views/inmobiliarias/proveedores.blade.php
Normal file
171
app/resources/views/inmobiliarias/proveedores.blade.php
Normal file
@ -0,0 +1,171 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<table class="ui table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nombre</th>
|
||||
<th>Contacto</th>
|
||||
<th class="right aligned">
|
||||
<button class="ui tertiary green icon button" id="add_button">
|
||||
<i class="plus icon"></i>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="proveedores">
|
||||
@foreach ($proveedores as $proveedor)
|
||||
<tr>
|
||||
<td>{{$proveedor->nombre}}</td>
|
||||
<td>{{$proveedor->contacto?->nombreCompleto()}}</td>
|
||||
<td class="right aligned">
|
||||
<button class="ui tertiary icon button" data-proveedor="{{$proveedor->rut}}">
|
||||
<i class="edit icon"></i>
|
||||
</button>
|
||||
<button class="ui tertiary red icon button" data-proveedor="{{$proveedor->rut}}">
|
||||
<i class="remove icon"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@include('inmobiliarias.proveedores.add_modal')
|
||||
|
||||
@include('inmobiliarias.proveedores.edit_modal')
|
||||
@endsection
|
||||
|
||||
@include('layout.body.scripts.rut')
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
const proveedores = {
|
||||
ids: {
|
||||
buttons: {
|
||||
add: '',
|
||||
edit: '',
|
||||
remove: ''
|
||||
},
|
||||
add: {
|
||||
form: '',
|
||||
rut: '',
|
||||
dv: '',
|
||||
nombre: '',
|
||||
razon: '',
|
||||
contacto: {
|
||||
rut: '',
|
||||
dv: '',
|
||||
nombre: '',
|
||||
apellido_paterno: '',
|
||||
apellido_materno: '',
|
||||
email: '',
|
||||
telefono: ''
|
||||
}
|
||||
},
|
||||
proveedores: ''
|
||||
},
|
||||
data: JSON.parse('{!! json_encode($proveedores) !!}'),
|
||||
remove() {
|
||||
return {
|
||||
proveedor: rut => {
|
||||
const url = `{{$urls->api}}/inmobiliarias/proveedor/${rut}/delete`
|
||||
const method = 'delete'
|
||||
return APIClient.fetch(url, {method})
|
||||
.then(response => (response) ? response.json() : null)
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
formatters() {
|
||||
return {
|
||||
rut: value => {
|
||||
return Rut.format(value)
|
||||
},
|
||||
telefono: value => {
|
||||
const phone = value.replace(/[^0-9]/g, '')
|
||||
if (phone.length <= 1) {
|
||||
return phone
|
||||
}
|
||||
return phone.replace(/(\d{2})(\d{3})(\d{4})/, '$1 $2 $3')
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(ids) {
|
||||
this.ids = ids
|
||||
const addModal = new AddModal(this.ids.add, this.formatters())
|
||||
$(this.ids.buttons.add).click(() => {
|
||||
addModal.show()
|
||||
})
|
||||
const editModal = new EditModal(this.ids.edit, this.formatters())
|
||||
$(this.ids.buttons.edit).click((e) => {
|
||||
e.currentTarget.classList.add('loading')
|
||||
e.currentTarget.classList.add('spinner')
|
||||
editModal.show(e.currentTarget.parentNode.dataset.proveedor).then(() => {
|
||||
e.currentTarget.classList.remove('loading')
|
||||
e.currentTarget.classList.remove('spinner')
|
||||
})
|
||||
})
|
||||
$(this.ids.buttons.remove).click((e) => {
|
||||
e.currentTarget.classList.add('loading')
|
||||
e.currentTarget.classList.add('spinner')
|
||||
this.remove().proveedor(e.currentTarget.parentNode.dataset.proveedor).then(() => {
|
||||
e.currentTarget.classList.remove('loading')
|
||||
e.currentTarget.classList.remove('spinner')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
proveedores.setup({
|
||||
buttons: {
|
||||
add: '#add_button',
|
||||
edit: '.edit',
|
||||
remove: '.remove'
|
||||
},
|
||||
add: {
|
||||
modal: '#add_modal',
|
||||
form: 'add_form',
|
||||
rut: '#rut',
|
||||
digito: '#dv',
|
||||
nombre: '#nombre',
|
||||
razon: '#razon',
|
||||
contacto: {
|
||||
rut: '#rut_contacto',
|
||||
digito: '#dv_contacto',
|
||||
nombres: '#nombre_contacto',
|
||||
apellido_paterno: '#apellido_paterno_contacto',
|
||||
apellido_materno: '#apellido_materno_contacto',
|
||||
email: '#email_contacto',
|
||||
telefono: '#telefono_contacto'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
modal: '#edit_modal',
|
||||
form: 'edit_form',
|
||||
rut: '#edit_rut',
|
||||
digito: '#edit_digito',
|
||||
nombre: '#edit_nombre',
|
||||
razon: '#edit_razon',
|
||||
contacto: {
|
||||
rut: '#edit_rut_contacto',
|
||||
digito: '#edit_digito_contacto',
|
||||
nombres: '#edit_nombre_contacto',
|
||||
apellido_paterno: '#edit_apellido_paterno_contacto',
|
||||
apellido_materno: '#edit_apellido_materno_contacto',
|
||||
email: '#edit_email_contacto',
|
||||
telefono: '#edit_telefono_contacto'
|
||||
}
|
||||
},
|
||||
proveedores: '#proveedores'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
@ -0,0 +1,137 @@
|
||||
<div class="ui modal" id="add_modal">
|
||||
<div class="header">Agregar Proveedor</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="add_form">
|
||||
<div class="three wide field">
|
||||
<label for="rut">RUT</label>
|
||||
<div class="ui right labeled input">
|
||||
<input class="right aligned" type="text" id="rut" name="rut" placeholder="RUT" maxlength="10"
|
||||
required/>
|
||||
<div class="ui basic label">-<span id="dv"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide field">
|
||||
<label for="nombre">Nombre</label>
|
||||
<input type="text" id="nombre" name="nombre" placeholder="Nombre" required/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="razon">Razón Social</label>
|
||||
<input type="text" id="razon" name="razon" placeholder="Razón Social" required/>
|
||||
</div>
|
||||
<div class="ui divider">Contacto</div>
|
||||
<div class="three wide field">
|
||||
<label for="rut_contacto">RUT</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" id="rut_contacto" name="rut_contacto" placeholder="RUT" maxlength="10"/>
|
||||
<div class="ui basic label">-<span id="dv_contacto"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="five wide field">
|
||||
<label for="nombre_contacto">Nombre</label>
|
||||
<input type="text" id="nombre_contacto" name="nombre_contacto" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="apellido_paterno_contacto">Apellido Paterno</label>
|
||||
<input type="text" id="apellido_paterno_contacto" name="apellido_paterno_contacto"
|
||||
placeholder="Apellido Paterno"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="apellido_materno_contacto">Apellido Materno</label>
|
||||
<input type="text" id="apellido_materno_contacto" name="apellido_materno_contacto"
|
||||
placeholder="Apellido Materno"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email_contacto">Email</label>
|
||||
<input type="email" id="email_contacto" name="email_contacto" placeholder="Email"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="telefono_contacto">Teléfono</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">+56</div>
|
||||
<input type="text" id="telefono_contacto" name="telefono_contacto" placeholder="Teléfono"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui green approve button">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class AddModal {
|
||||
props
|
||||
|
||||
constructor(props, formatters) {
|
||||
this.props = props
|
||||
this.setup(formatters)
|
||||
}
|
||||
show() {
|
||||
$(this.props.modal).modal('show')
|
||||
}
|
||||
add() {
|
||||
const form = document.getElementById(this.props.form)
|
||||
const data = {
|
||||
rut: form.querySelector(this.props.rut).value.replace(/\D/g, ''),
|
||||
digito: form.querySelector(this.props.digito).textContent,
|
||||
nombre: form.querySelector(this.props.nombre).value,
|
||||
razon: form.querySelector(this.props.razon).value,
|
||||
contacto: {
|
||||
rut: form.querySelector(this.props.contacto.rut).value.replace(/\D/g, ''),
|
||||
digito: form.querySelector(this.props.contacto.digito).textContent,
|
||||
nombres: form.querySelector(this.props.contacto.nombres).value,
|
||||
apellido_paterno: form.querySelector(this.props.contacto.apellido_paterno).value,
|
||||
apellido_materno: form.querySelector(this.props.contacto.apellido_materno).value,
|
||||
email: form.querySelector(this.props.contacto.email).value,
|
||||
telefono: form.querySelector(this.props.contacto.telefono).value.replace(/\D/g, ''),
|
||||
}
|
||||
}
|
||||
const body = new FormData()
|
||||
body.append('proveedores[]', JSON.stringify(data))
|
||||
const url = '{{$urls->api}}/inmobiliarias/proveedores/add'
|
||||
const method = 'post'
|
||||
APIClient.fetch(url, {method, body})
|
||||
.then(response => (response) ? response.json() : null)
|
||||
.then(data => {
|
||||
if (data.success.filter(s => s).length > 0) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
setup(formatters) {
|
||||
$(this.props.modal).modal({
|
||||
onApprove: () => {
|
||||
this.add()
|
||||
}
|
||||
})
|
||||
|
||||
const form = document.getElementById(this.props.form)
|
||||
form.querySelector(this.props.rut).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatters.rut(e.currentTarget.value)
|
||||
form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.rut).value.length > 0) {
|
||||
form.querySelector(this.props.rut).value = formatters.rut(form.querySelector(this.props.rut).value)
|
||||
form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.rut).value)
|
||||
}
|
||||
form.querySelector(this.props.contacto.rut).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatters.rut(e.currentTarget.value)
|
||||
form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.contacto.rut).value.length > 0) {
|
||||
form.querySelector(this.props.contacto.rut).value = formatters.rut(form.querySelector(this.props.contacto.rut).value)
|
||||
form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.contacto.rut).value)
|
||||
}
|
||||
form.querySelector(this.props.contacto.telefono).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatters.telefono(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.contacto.telefono).value.length > 0) {
|
||||
form.querySelector(this.props.contacto.telefono).value = formatters.telefono(form.querySelector(this.props.contacto.telefono).value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
@ -0,0 +1,157 @@
|
||||
<div class="ui modal" id="edit_modal">
|
||||
<div class="header">Editar Proveedor <span class="proveedor"></span></div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="edit_form">
|
||||
<div class="three wide field">
|
||||
<label for="edit_rut">RUT</label>
|
||||
<div class="ui right labeled input">
|
||||
<input class="right aligned" type="text" id="edit_rut" name="rut" placeholder="RUT" maxlength="10"
|
||||
required/>
|
||||
<div class="ui basic label">-<span id="edit_digito"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide field">
|
||||
<label for="edit_nombre">Nombre</label>
|
||||
<input type="text" id="edit_nombre" name="nombre" placeholder="Nombre" required/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_razon">Razón Social</label>
|
||||
<input type="text" id="edit_razon" name="razon" placeholder="Razón Social" required/>
|
||||
</div>
|
||||
<div class="ui divider">Contacto</div>
|
||||
<div class="three wide field">
|
||||
<label for="edit_rut_contacto">RUT</label>
|
||||
<div class="ui right labeled input">
|
||||
<input type="text" id="edit_rut_contacto" name="rut_contacto" placeholder="RUT" maxlength="10" />
|
||||
<div class="ui basic label">-<span id="edit_digito_contacto"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<div class="five wide field">
|
||||
<label for="edit_nombre_contacto">Nombre</label>
|
||||
<input type="text" id="edit_nombre_contacto" name="nombre_contacto" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_apellido_paterno_contacto">Apellido Paterno</label>
|
||||
<input type="text" id="edit_apellido_paterno_contacto" name="apellido_paterno_contacto"
|
||||
placeholder="Apellido Paterno" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_apellido_materno_contacto">Apellido Materno</label>
|
||||
<input type="text" id="edit_apellido_materno_contacto" name="apellido_materno_contacto"
|
||||
placeholder="Apellido Materno" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_email_contacto">Email</label>
|
||||
<input type="email" id="edit_email_contacto" name="email_contacto" placeholder="Email"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit_telefono_contacto">Teléfono</label>
|
||||
<div class="ui left labeled input">
|
||||
<div class="ui basic label">+56</div>
|
||||
<input type="text" id="edit_telefono_contacto" name="telefono_contacto" placeholder="Teléfono"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ui green approve button">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class EditModal {
|
||||
props
|
||||
data
|
||||
constructor(props, formatter) {
|
||||
this.props = props
|
||||
this.setup(formatter)
|
||||
}
|
||||
show(id) {
|
||||
return this.load(id).then(() => {
|
||||
$(this.props.modal).find('.proveedor').html(this.data.nombre)
|
||||
const form = document.getElementById(this.props.form)
|
||||
form.querySelector(this.props.rut).value = this.data.rut
|
||||
form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(this.data.rut)
|
||||
form.querySelector(this.props.nombre).value = this.data.nombre
|
||||
form.querySelector(this.props.razon).value = this.data.razon
|
||||
form.querySelector(this.props.contacto.rut).value = (this.data.contacto) ? this.data.contacto.rut : ''
|
||||
form.querySelector(this.props.contacto.digito).textContent = (this.data.contact) ? Rut.digitoVerificador(this.data.contacto.rut) : ''
|
||||
form.querySelector(this.props.contacto.nombres).value = (this.data.contact) ? this.data.contacto.nombres : ''
|
||||
form.querySelector(this.props.contacto.apellido_paterno).value = (this.data.contact) ? this.data.contacto.apellidoPaterno : ''
|
||||
form.querySelector(this.props.contacto.apellido_materno).value = (this.data.contact) ? this.data.contacto.apellidoMaterno : ''
|
||||
form.querySelector(this.props.contacto.email).value = (this.data.contact) ? this.data.contacto.datos.email : ''
|
||||
form.querySelector(this.props.contacto.telefono).value = (this.data.contact) ? this.data.contacto.datos.telefono : ''
|
||||
|
||||
$(this.props.modal).modal('show')
|
||||
})
|
||||
}
|
||||
load(id) {
|
||||
const url = `{{$urls->api}}/inmobiliarias/proveedor/${id}`
|
||||
return APIClient.fetch(url).then(response => response.json()).then(json => {
|
||||
this.data = json.proveedor
|
||||
})
|
||||
}
|
||||
edit() {
|
||||
const form = document.getElementById(this.props.form)
|
||||
let data = {
|
||||
rut: form.querySelector(this.props.rut).value.replace(/\D/g, ''),
|
||||
digito: form.querySelector(this.props.digito).textContent,
|
||||
nombre: form.querySelector(this.props.nombre).value,
|
||||
razon: form.querySelector(this.props.razon).value,
|
||||
contacto: {
|
||||
rut: form.querySelector(this.props.contacto.rut).value.replace(/\D/g, ''),
|
||||
digito: form.querySelector(this.props.contacto.digito).textContent,
|
||||
nombres: form.querySelector(this.props.contacto.nombres).value,
|
||||
apellido_paterno: form.querySelector(this.props.contacto.apellido_paterno).value,
|
||||
apellido_materno: form.querySelector(this.props.contacto.apellido_materno).value,
|
||||
email: form.querySelector(this.props.contacto.email).value,
|
||||
telefono: form.querySelector(this.props.contacto.telefono).value.replace(/\D/g, ''),
|
||||
}
|
||||
}
|
||||
const body = new FormData()
|
||||
body.append('proveedores[]', JSON.stringify(data))
|
||||
const url = '{{$urls->api}}/inmobiliarias/proveedores/edit'
|
||||
const method = 'post'
|
||||
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
||||
if (json.success.filter(s => s).length > 0) {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
setup(formatter) {
|
||||
$(this.props.modal).modal({
|
||||
onApprove: () => {
|
||||
this.edit()
|
||||
}
|
||||
})
|
||||
|
||||
const form = document.getElementById(this.props.form)
|
||||
form.querySelector(this.props.rut).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatter.rut(e.currentTarget.value)
|
||||
form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.rut).value.length > 0) {
|
||||
form.querySelector(this.props.rut).value = formatter.rut(form.querySelector(this.props.rut).value)
|
||||
form.querySelector(this.props.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.rut).value)
|
||||
}
|
||||
form.querySelector(this.props.contacto.rut).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatter.rut(e.currentTarget.value)
|
||||
form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.contacto.rut).value.length > 0) {
|
||||
form.querySelector(this.props.contacto.rut).value = formatter.rut(form.querySelector(this.props.contacto.rut).value)
|
||||
form.querySelector(this.props.contacto.digito).textContent = Rut.digitoVerificador(form.querySelector(this.props.contacto.rut).value)
|
||||
}
|
||||
form.querySelector(this.props.contacto.telefono).addEventListener('input', (e) => {
|
||||
e.currentTarget.value = formatter.telefono(e.currentTarget.value)
|
||||
})
|
||||
if (form.querySelector(this.props.contacto.telefono).value.length > 0) {
|
||||
form.querySelector(this.props.contacto.telefono).value = formatter.telefono(form.querySelector(this.props.contacto.telefono).value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
Reference in New Issue
Block a user