127 lines
6.3 KiB
PHP
127 lines
6.3 KiB
PHP
<div class="ui modal" id="edit_promotion_modal">
|
|
<div class="header">
|
|
Editar Promoción - <span class="description"></span>
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form" id="edit_promotion_form">
|
|
<input type="hidden" name="id" />
|
|
<div class="field">
|
|
<label for="description">Descripción</label>
|
|
<input type="text" id="description" name="description" placeholder="Descripción" required />
|
|
</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="type">Tipo</label>
|
|
<select id="type" name="type" class="ui select dropdown" required>
|
|
<option value="1">Valor Fijo</option>
|
|
<option value="2">Valor Variable</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="value">Valor</label>
|
|
<input type="text" id="value" name="value" placeholder="Valor" required />
|
|
</div>
|
|
</div>
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="edit_start_date">Fecha de Inicio</label>
|
|
<div class="ui calendar" id="edit_start_date">
|
|
<div class="ui left icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="edit_start_date" placeholder="Fecha de Inicio" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="edit_end_date">Fecha de Término</label>
|
|
<div class="ui calendar" id="edit_end_date">
|
|
<div class="ui left icon input">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" name="edit_end_date" placeholder="Fecha de Término" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="valid_range">Válido por N Días Después del Término</label>
|
|
<input type="text" id="valid_range" name="valid_range" placeholder="Válido por N Días" value="7" required />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui black deny button">
|
|
Cancelar
|
|
</div>
|
|
<div class="ui positive right labeled icon button">
|
|
Editar
|
|
<i class="checkmark icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
class EditModal {
|
|
ids = {
|
|
modal: '#edit_promotion_modal',
|
|
}
|
|
modal
|
|
promotions
|
|
|
|
constructor(data) {
|
|
this.promotions = data
|
|
this.modal = $(this.ids.modal)
|
|
this.modal.find('.ui.dropdown').dropdown()
|
|
this.modal.find('.ui.calendar').calendar(calendar_date_options)
|
|
this.modal.modal({
|
|
onApprove: () => {
|
|
const form = document.getElementById('edit_promotion_form')
|
|
const type = $(form.querySelector('[name="type"]')).dropdown('get value')
|
|
const start_date = $(form.querySelector('#edit_start_date')).calendar('get date')
|
|
const end_date = $(form.querySelector('#edit_end_date')).calendar('get date')
|
|
let valid_until = null
|
|
if (end_date !== null) {
|
|
valid_until = new Date(end_date)
|
|
valid_until.setDate(valid_until.getDate() + parseInt(form.querySelector('[name="valid_range"]').value))
|
|
}
|
|
const data = {
|
|
id: form.querySelector('[name="id"]').value,
|
|
description: form.querySelector('[name="description"]').value,
|
|
type,
|
|
value: form.querySelector('[name="value"]').value,
|
|
start_date: [start_date.getFullYear(), start_date.getMonth() + 1, start_date.getDate()].join('-'),
|
|
end_date: end_date === null ? null : [end_date.getFullYear(), end_date.getMonth() + 1, end_date.getDate()].join('-'),
|
|
valid_until: valid_until === null ? null : [valid_until.getFullYear(), valid_until.getMonth() + 1, valid_until.getDate()].join('-'),
|
|
}
|
|
promotions.execute().edit(data)
|
|
}
|
|
})
|
|
}
|
|
load(promotion_id) {
|
|
const promotion = this.promotions.find(promotion => promotion.id === parseInt(promotion_id))
|
|
const form = document.getElementById('edit_promotion_form')
|
|
form.reset()
|
|
form.querySelector('[name="id"]').value = promotion.id
|
|
form.querySelector('[name="description"]').value = promotion.description
|
|
form.querySelector('[name="type"]').value = promotion.type
|
|
form.querySelector('[name="value"]').value = promotion.amount
|
|
const start_date_parts = promotion.start_date.split('-')
|
|
const start_date = new Date(start_date_parts[0], start_date_parts[1] - 1, start_date_parts[2])
|
|
$('#edit_start_date').calendar('set date', start_date)
|
|
if (promotion.end_date !== null) {
|
|
const end_date_parts = promotion.end_date.split('-')
|
|
const end_date = new Date(end_date_parts[0], end_date_parts[1] - 1, end_date_parts[2])
|
|
$('#edit_end_date').calendar('set date', end_date)
|
|
|
|
if (promotion.valid_until !== null) {
|
|
const valid_until_parts = promotion.valid_until.split('-')
|
|
const valid_until = new Date(valid_until_parts[0], valid_until_parts[1] - 1, valid_until_parts[2])
|
|
form.querySelector('[name="valid_range"]').value = valid_until.getDate() - end_date.getDate()
|
|
}
|
|
}
|
|
|
|
this.modal.modal('show')
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|