Common components

app/resources/views/ventas/reservations/modal/common/scripts/promotions.blade.php

@@ -0,0 +1,100 @@
+@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()
+        }
+        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)
+                    })
+                })
+            }
+        }
+        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