Poder editar la direccion de un proyecto

This commit is contained in:
Juan Pablo Vial
2025-02-24 18:15:16 -03:00
parent 894d09ea6f
commit c1528d667a
6 changed files with 252 additions and 3 deletions

View File

@ -15,7 +15,7 @@
<table class="ui striped table">
<tr>
<td>Dirección</td>
<td>{{$proyecto->direccion()}}</td>
<td>{{$proyecto->direccion()}} <a href="#" id="edit_direccion_button"><i class="small edit icon"></i></a></td>
</tr>
<tr>
<td>Inmobiliaria</td>
@ -137,6 +137,7 @@
</div>
@endsection
@include('proyectos.show.edit_direccion')
@include('layout.body.scripts.chartjs')
@push('page_scripts')
@ -485,6 +486,11 @@
ventas.setup({id_ventas: '#ventas', id_stock: '#stock', id_proyeccion: '#proyeccion',
id_chart_general: '#chart_venta_general', id_chart_tipologias: '#chart_venta_tipologia',
id_chart_velocidad: '#chart_venta_velocidad'})
document.getElementById('edit_direccion_button').addEventListener('click', event => {
event.preventDefault()
$('#edit_direccion_modal').modal('show')
})
})
</script>
@endpush

View File

@ -0,0 +1,136 @@
<div class="ui modal" id="edit_direccion_modal">
<div class="header">
Editar Dirección
</div>
<div class="content">
<form class="ui form" id="edit_direccion_form">
<input type="hidden" name="id" />
<div class="fields">
<div class="field">
<label>Calle</label>
<input type="text" name="calle" value="{{ $proyecto->direccion()->calle }}" />
</div>
<div class="field">
<label>Número</label>
<input type="text" name="numero" value="{{ $proyecto->direccion()->numero }}" />
</div>
<div class="field">
<label>Extra</label>
<input type="text" name="extra" value="{{ $proyecto->direccion()->extra }}" />
</div>
</div>
<div class="fields">
<div class="field">
<label>Comuna</label>
<div class="ui search selection dropdown" id="comuna">
<input type="hidden" name="comuna" />
<i class="dropdown icon"></i>
<div class="default text">Comuna</div>
<div class="menu"></div>
</div>
</div>
<div class="field">
<label>Región</label>
<div class="ui search selection dropdown" id="region">
<input type="hidden" name="region" />
<i class="dropdown icon"></i>
<div class="default text">Región</div>
<div class="menu"></div>
</div>
</div>
</div>
</form>
</div>
<div class="actions">
<div class="ui black deny button">
Cancelar
</div>
<div class="ui green ok button">
Guardar
</div>
</div>
</div>
@push('page_scripts')
<script>
function submitForm() {
const form = document.getElementById('edit_direccion_form')
const body = new FormData(form)
const url = '{{$urls->api}}/direccion/{{ $proyecto->direccion()->id }}/edit'
const method = 'post'
APIClient.fetch(url, {method, body}).then(response => {
if (response.ok) {
return response.json().then(json => {
if (json.success) {
window.location.reload()
}
})
}
})
}
function fetchComunas(region_id) {
const url = `{{ $urls->api }}/region/${region_id}/comunas`
APIClient.fetch(url).then(response => {
if (!response.ok) {
return;
}
return response.json().then(json => {
const dropdown = $('#comuna')
const values = []
json.comunas.forEach(comuna => {
values.push({
name: comuna.descripcion,
value: comuna.id,
text: comuna.descripcion
})
})
dropdown.dropdown('change values', values)
if (json.region_id === {{ $proyecto->direccion()->comuna->provincia->region->id }}) {
dropdown.dropdown('set selected', {{ $proyecto->direccion()->comuna->id }})
}
})
})
}
function fetchRegiones() {
const url = '{{ $urls->api }}/regiones'
APIClient.fetch(url).then(response => {
if (!response.ok) {
return;
}
return response.json().then(json => {
const dropdown = $('#region')
const values = []
json.regiones.forEach(region => {
values.push({
name: region.descripcion,
value: region.id,
text: region.descripcion
})
})
dropdown.dropdown({
values,
onChange: (value, text, $choice) => {
fetchComunas(value)
}
})
$('#comuna').dropdown()
dropdown.dropdown('set selected', {{ $proyecto->direccion()->comuna->provincia->region->id }})
})
})
}
$(document).ready(function() {
fetchRegiones()
$('#edit_direccion_modal').modal({
onApprove: function() {
submitForm()
}
})
document.getElementById('edit_direccion_form').addEventListener('submit', event => {
event.preventDefault()
submitForm()
return false
})
})
</script>
@endpush