Edit reservations
This commit is contained in:
Juan Pablo Vial
@ -102,6 +102,7 @@
|
||||
</div>
|
||||
|
||||
@include('ventas.reservations.modal.add')
|
||||
@include('ventas.reservations.modal.edit')
|
||||
@include('ventas.reservations.modal.comment')
|
||||
@endsection
|
||||
|
||||
@ -793,6 +794,7 @@
|
||||
this.show.projects()
|
||||
|
||||
this.components.modals.add = new AddReservationModal(configuration.ids.projects)
|
||||
this.components.modals.edit = new EditReservationModal()
|
||||
this.components.modals.comment = new CommentModal()
|
||||
|
||||
const project_id = {{ $project_id ?? 'null' }};
|
||||
|
||||
289
app/resources/views/ventas/reservations/modal/edit.blade.php
Normal file
289
app/resources/views/ventas/reservations/modal/edit.blade.php
Normal file
@ -0,0 +1,289 @@
|
||||
<!-- resources/views/ventas/reservations/modal/edit.blade.php -->
|
||||
<div class="ui modal" id="edit_reservation_modal">
|
||||
<div class="header">
|
||||
Editar Reserva
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form" id="edit_reservation_form">
|
||||
<input type="hidden" name="reservation_id" />
|
||||
<input type="hidden" name="project_id" />
|
||||
|
||||
<div class="three wide required field">
|
||||
<label>Fecha</label>
|
||||
<div class="ui calendar" id="edit_date">
|
||||
<div class="ui icon input">
|
||||
<i class="calendar icon"></i>
|
||||
<input type="text" name="date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>RUT</label>
|
||||
<div class="ui right labeled input" id="edit_rut">
|
||||
<input type="text" name="buyer_rut" placeholder="RUT" readonly />
|
||||
<div class="ui basic label">-<span id="edit_digit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<div class="ui inline loader" id="edit_rut_loader" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fields">
|
||||
<div class="three wide required field">
|
||||
<label>Nombre</label>
|
||||
<input type="text" name="buyer_name" placeholder="Nombre" />
|
||||
</div>
|
||||
<div class="six wide required field">
|
||||
<label>Apellidos</label>
|
||||
<input type="text" name="buyer_last_name" placeholder="Apellido Paterno" />
|
||||
</div>
|
||||
<div class="six wide field">
|
||||
<label></label>
|
||||
<input type="text" name="buyer_last_name2" placeholder="Apellido Materno" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui segment">
|
||||
<h4 class="ui header">Unidades</h4>
|
||||
<div id="edit_units_holder">
|
||||
<!-- Units will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui segment">
|
||||
<h4 class="ui header">Promociones</h4>
|
||||
<div id="edit_promotions_holder">
|
||||
<!-- Promotions will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui error message"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui cancel button">
|
||||
Cancelar
|
||||
</div>
|
||||
<button type="button" class="ui primary button" id="edit_reservation_submit">
|
||||
Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('page_scripts')
|
||||
<script>
|
||||
class EditReservationModal {
|
||||
constructor() {
|
||||
this.ids = {
|
||||
modal: 'edit_reservation_modal',
|
||||
form: 'edit_reservation_form',
|
||||
date: 'edit_date',
|
||||
rut: 'edit_rut',
|
||||
digit: 'edit_digit',
|
||||
rutLoader: 'edit_rut_loader',
|
||||
unitsHolder: 'edit_units_holder',
|
||||
promotionsHolder: 'edit_promotions_holder',
|
||||
submitButton: 'edit_reservation_submit'
|
||||
};
|
||||
|
||||
this.components = {
|
||||
$modal: null,
|
||||
$form: null,
|
||||
$date: null,
|
||||
$submitButton: null
|
||||
};
|
||||
|
||||
this.data = {
|
||||
reservation: null,
|
||||
units: [],
|
||||
promotions: []
|
||||
};
|
||||
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.setupComponents();
|
||||
this.setupEvents();
|
||||
}
|
||||
|
||||
setupComponents() {
|
||||
this.components.$modal = $(`#${this.ids.modal}`);
|
||||
this.components.$form = $(`#${this.ids.form}`);
|
||||
this.components.$date = $(`#${this.ids.date}`);
|
||||
this.components.$submitButton = $(`#${this.ids.submitButton}`);
|
||||
|
||||
// Initialize date picker
|
||||
this.components.$date.calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupEvents() {
|
||||
this.components.$submitButton.on('click', () => this.updateReservation());
|
||||
}
|
||||
|
||||
load(reservationId) {
|
||||
this.components.$modal.modal('show');
|
||||
this.components.$modal.addClass('loading');
|
||||
|
||||
// Use APIClient to fetch the reservation data
|
||||
APIClient.fetch(`/api/reservation/${reservationId}`)
|
||||
.then(response => {
|
||||
if (!response) {
|
||||
throw new Error('No se pudo cargar la reserva');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.reservation) {
|
||||
this.populateForm(data.reservation);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading reservation:', error);
|
||||
this.showError('Error al cargar la reserva');
|
||||
})
|
||||
.finally(() => {
|
||||
this.components.$modal.removeClass('loading');
|
||||
});
|
||||
}
|
||||
|
||||
populateForm(reservation) {
|
||||
// Set basic info
|
||||
this.components.$form.find('[name="reservation_id"]').val(reservation.id);
|
||||
this.components.$form.find('[name="project_id"]').val(reservation.project_id);
|
||||
|
||||
// Set date
|
||||
if (reservation.date) {
|
||||
this.components.$date.calendar('set date', new Date(reservation.date));
|
||||
}
|
||||
|
||||
// Set buyer info
|
||||
if (reservation.buyer) {
|
||||
const buyer = reservation.buyer;
|
||||
this.components.$form.find('[name="buyer_rut"]').val(buyer.rut);
|
||||
this.components.$form.find('[name="buyer_name"]').val(buyer.nombre);
|
||||
this.components.$form.find('[name="buyer_last_name"]').val(buyer.apellido_paterno);
|
||||
this.components.$form.find('[name="buyer_last_name2"]').val(buyer.apellido_materno || '');
|
||||
// Set other buyer fields as needed
|
||||
}
|
||||
|
||||
// Load units
|
||||
this.loadUnits(reservation.units || []);
|
||||
|
||||
// Load promotions if any
|
||||
if (reservation.promotions && reservation.promotions.length > 0) {
|
||||
this.loadPromotions(reservation.promotions);
|
||||
}
|
||||
}
|
||||
|
||||
loadUnits(units) {
|
||||
this.data.units = units;
|
||||
const $holder = $(`#${this.ids.unitsHolder}`);
|
||||
$holder.empty();
|
||||
|
||||
// Render units
|
||||
units.forEach(unit => {
|
||||
const $unit = $(`
|
||||
<div class="field">
|
||||
<div class="ui label">
|
||||
${unit.tipo} - ${unit.numero}
|
||||
<div class="detail">${unit.precio_uf} UF</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$holder.append($unit);
|
||||
});
|
||||
}
|
||||
|
||||
loadPromotions(promotions) {
|
||||
this.data.promotions = promotions;
|
||||
const $holder = $(`#${this.ids.promotionsHolder}`);
|
||||
$holder.empty();
|
||||
|
||||
// Render promotions
|
||||
promotions.forEach(promotion => {
|
||||
const $promo = $(`
|
||||
<div class="field">
|
||||
<div class="ui label">
|
||||
${promotion.nombre}
|
||||
<div class="detail">${promotion.descuento}%</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$holder.append($promo);
|
||||
});
|
||||
}
|
||||
|
||||
updateReservation() {
|
||||
const formData = new FormData(this.components.$form[0]);
|
||||
const reservationId = formData.get('reservation_id');
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
this.components.$submitButton.addClass('loading');
|
||||
|
||||
// Use APIClient to update the reservation
|
||||
APIClient.fetch(`/api/reservation/${reservationId}/edit`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response) {
|
||||
throw new Error('No se pudo actualizar la reserva');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
this.showSuccess('Reserva actualizada correctamente');
|
||||
this.components.$modal.modal('hide');
|
||||
|
||||
// Refresh the reservations list
|
||||
if (window.reservations && typeof window.reservations.refresh === 'function') {
|
||||
window.reservations.refresh();
|
||||
}
|
||||
} else {
|
||||
throw new Error(data.error || 'Error desconocido al actualizar la reserva');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating reservation:', error);
|
||||
this.showError(error.message || 'Error al actualizar la reserva');
|
||||
})
|
||||
.finally(() => {
|
||||
this.components.$submitButton.removeClass('loading');
|
||||
});
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
// You can replace this with your preferred notification system
|
||||
alert('Error: ' + message);
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
// You can replace this with your preferred notification system
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the modal when the page loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.editReservationModal = new EditReservationModal();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user