158 lines
5.2 KiB
PHP
158 lines
5.2 KiB
PHP
<div class="ui modal" id="comment_modal">
|
|
<div class="header">
|
|
Comentar Cierre y <span id="comment_action"></span>
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form" id="comment_form">
|
|
<input type="hidden" name="reservation_id" id="comment_reservation_id" />
|
|
<input type="hidden" name="user_id" id="comment_user_id" />
|
|
<table class="ui collapsing table">
|
|
<tbody>
|
|
<tr>
|
|
<td>Unidades</td>
|
|
<td id="comment_units"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cliente</td>
|
|
<td id="comment_client"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fecha</td>
|
|
<td id="comment_date"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="field">
|
|
<label>Comentario</label>
|
|
<textarea name="comment"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui cancel button">
|
|
Cancelar
|
|
</div>
|
|
<div class="ui green ok button">
|
|
Comentar y Guardar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class CommentModal {
|
|
ids = {
|
|
modal: 'comment_modal',
|
|
action: 'comment_action',
|
|
form: 'comment_form',
|
|
reservation_id: 'comment_reservation_id',
|
|
user_id: 'comment_user_id',
|
|
units: 'comment_units',
|
|
client: 'comment_client',
|
|
date: 'comment_date',
|
|
}
|
|
components = {
|
|
$modal: null,
|
|
action: null,
|
|
form: null,
|
|
reservation: null,
|
|
user: null,
|
|
units: null,
|
|
client: null,
|
|
date: null,
|
|
comment: null,
|
|
}
|
|
data = {
|
|
reservation_id: null,
|
|
url: '',
|
|
action: '',
|
|
method: 'delete',
|
|
reservation_data: {
|
|
units: '',
|
|
client: '',
|
|
date: '',
|
|
}
|
|
}
|
|
constructor() {
|
|
this.ids = {
|
|
modal: 'comment_modal',
|
|
action: 'comment_action',
|
|
form: 'comment_form',
|
|
reservation_id: 'comment_reservation_id',
|
|
user_id: 'comment_user_id',
|
|
units: 'comment_units',
|
|
client: 'comment_client',
|
|
date: 'comment_date',
|
|
}
|
|
this.setup()
|
|
}
|
|
|
|
show({reservation_id, reservation_data, url, action, method}) {
|
|
this.data.reservation_id = reservation_id
|
|
this.data.url = url
|
|
this.data.action = action
|
|
this.data.method = method
|
|
|
|
this.components.action.innerHTML = action
|
|
|
|
const date = new Date(Date.parse(reservation_data.date) + 24 * 60 * 60 * 1000)
|
|
const formatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
|
|
|
|
this.data.reservation_data = {
|
|
units: reservation_data.summary,
|
|
client: reservation_data.buyer.nombreCompleto,
|
|
date: formatter.format(date),
|
|
}
|
|
|
|
this.components.reservation.value = this.data.reservation_id
|
|
this.components.units.innerHTML = this.data.reservation_data.units
|
|
this.components.client.innerHTML = this.data.reservation_data.client
|
|
this.components.date.innerHTML = this.data.reservation_data.date
|
|
this.components.$modal.modal('show')
|
|
}
|
|
hide() {
|
|
this.components.$modal.modal('hide')
|
|
}
|
|
|
|
submit() {
|
|
const url = this.data.url
|
|
const method = this.data.method
|
|
const body = new FormData(this.components.form)
|
|
|
|
return APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
|
|
if (json.success) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
}
|
|
|
|
setup() {
|
|
this.components = {
|
|
$modal: $(`#${this.ids.modal}`),
|
|
action: document.getElementById(this.ids.action),
|
|
form: document.getElementById(this.ids.form),
|
|
reservation: document.getElementById(this.ids.reservation_id),
|
|
user: document.getElementById(this.ids.user_id),
|
|
units: document.getElementById(this.ids.units),
|
|
client: document.getElementById(this.ids.client),
|
|
date: document.getElementById(this.ids.date),
|
|
comment: null,
|
|
}
|
|
this.components.comment = this.components.form.querySelector('textarea[name="comment"]')
|
|
this.components.user.value = '{{ $user->id }}'
|
|
|
|
this.components.$modal.modal({
|
|
onApprove: $element => {
|
|
this.submit()
|
|
}
|
|
})
|
|
this.components.form.addEventListener('submit', event => {
|
|
event.preventDefault()
|
|
this.submit()
|
|
return false
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|