118 lines
4.4 KiB
PHP
118 lines
4.4 KiB
PHP
@push('page_scripts')
|
|
<script>
|
|
class ModalPromotions {
|
|
prefix
|
|
ids = {
|
|
button: '',
|
|
elements: ''
|
|
}
|
|
data = {
|
|
promotions: [],
|
|
selected: []
|
|
}
|
|
components = {
|
|
button: null,
|
|
promotions: null,
|
|
}
|
|
display = {
|
|
button: ''
|
|
}
|
|
|
|
constructor(prefix) {
|
|
this.prefix = prefix
|
|
this.ids = {
|
|
button: `${prefix}_promotion`,
|
|
elements: `${prefix}_promotions`
|
|
}
|
|
this.setup()
|
|
}
|
|
add() {
|
|
const idx = Math.max(this.data.selected.length, 0, Math.max(...this.data.selected) + 1)
|
|
this.data.selected.push(idx)
|
|
this.draw.promotions()
|
|
return idx
|
|
}
|
|
reset() {
|
|
this.data.selected = []
|
|
this.draw.promotions()
|
|
}
|
|
remove(idx) {
|
|
this.data.selected = this.data.selected.filter(promotion => promotion !== idx)
|
|
this.draw.promotions()
|
|
}
|
|
draw = {
|
|
promotion: idx => {
|
|
const promotions = this.data.promotions.map(promotion => {
|
|
return `<div class="item" data-value="${promotion.value}">${promotion.name}</div>`
|
|
})
|
|
return [
|
|
`<div class="fields promotion" data-id="${idx}">`,
|
|
'<div class="three wide field">',
|
|
'<label>Promoción</label>',
|
|
`<div class="ui search selection dropdown">`,
|
|
`<input type="hidden" name="${this.prefix}_promotions[]" />`,
|
|
'<i class="dropdown icon"></i>',
|
|
'<div class="default text">Promoción</div>',
|
|
`<div class="menu">${promotions.join('')}</div>`,
|
|
'</div>',
|
|
'</div>',
|
|
'<div class="two wide field">',
|
|
'<label></label>',
|
|
`<button class="ui red tiny icon button remove_${this.prefix}_promotion" type="button" data-id="${idx}"><i class="trash icon"></i></button>`,
|
|
'</div>',
|
|
'</div>'
|
|
].join('')
|
|
},
|
|
promotions: () => {
|
|
if (this.data.promotions.length === 0) {
|
|
this.components.button.parentElement.style.display = 'none'
|
|
this.components.promotions.innerHTML = ''
|
|
return
|
|
}
|
|
this.components.button.parentElement.style.display = this.display.button
|
|
if (this.data.selected.length === 0) {
|
|
return
|
|
}
|
|
this.components.promotions.innerHTML = this.data.selected.map(idx => {
|
|
return this.draw.promotion(idx)
|
|
}).join('')
|
|
this.components.promotions.querySelectorAll('.dropdown').forEach(dropdown => {
|
|
$(dropdown).dropdown()
|
|
})
|
|
this.components.promotions.querySelectorAll(`.remove_${this.prefix}_promotion`).forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const idx = Number(button.dataset.id)
|
|
this.remove(idx)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
async fill(promotions) {
|
|
if (reservations.locks.promotions !== null) {
|
|
await reservations.locks.promotions
|
|
}
|
|
const idxs = []
|
|
promotions.forEach(promotion => {
|
|
const idx = this.add()
|
|
idxs.push(idx)
|
|
})
|
|
let i = 0
|
|
promotions.forEach(promotion => {
|
|
const idx = idxs[i ++]
|
|
const dropdown = $(this.components.promotions.querySelector(`div.promotion[data-id="${idx}"]`).querySelector('div.dropdown'))
|
|
dropdown.dropdown('set selected', promotion.id)
|
|
})
|
|
}
|
|
setup() {
|
|
this.components.button = document.getElementById(this.ids.button)
|
|
this.components.promotions = document.getElementById(this.ids.elements)
|
|
this.components.button.addEventListener('click', () => {
|
|
this.add()
|
|
})
|
|
this.display.button = this.components.button.parentElement.style.display
|
|
this.draw.promotions()
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|