WMS/resources/js/app.js

require('flatpickr');

import '@fortawesome/fontawesome-free/css/all.min.css';
import Chart from 'chart.js/auto';
import $ from 'jquery';

window.$ = $;
window.jQuery = $;

import 'select2';
import 'select2/dist/css/select2.min.css';

const chartColours = [
    'rgb(8, 145, 178)',
    'rgb(37, 99, 235)',
    'rgb(79, 70, 229)',
    'rgb(14, 116, 144)',
];

/**
 * Parse JSON attribute safely.
 *
 * @param {HTMLElement} element
 * @param {string} attribute
 * @param {Array} fallback
 * @returns {*}
 */
function parseJsonAttribute(element, attribute, fallback = []) {
    try {
        return JSON.parse(
            element.getAttribute(attribute) || JSON.stringify(fallback)
        );
    } catch (error) {
        return fallback;
    }
}

/**
 * Render dashboard charts.
 *
 * @returns {void}
 */
function renderWmsCharts() {
    document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
        if (canvas.dataset.rendered === 'true') {
            return;
        }

        const type = canvas.getAttribute('data-wms-chart');
        const labels = parseJsonAttribute(canvas, 'data-labels');
        const series = parseJsonAttribute(canvas, 'data-series');
        const values = parseJsonAttribute(canvas, 'data-values');

        const datasets = series.length
            ? series.map((item, index) => ({
                label: item.label,
                data: item.data,
                backgroundColor:
                    chartColours[index % chartColours.length],
                borderColor:
                    chartColours[index % chartColours.length],
                borderWidth: 2,
                borderRadius: 8,
            }))
            : [
                {
                    label: 'Total',
                    data: values,
                    backgroundColor: chartColours,
                    borderColor: 'rgb(255,255,255)',
                    borderWidth: 2,
                },
            ];

        new Chart(canvas, {
            type,
            data: {
                labels,
                datasets,
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: document.documentElement.classList.contains(
                                'dark'
                            )
                                ? '#e4e4e7'
                                : '#3f3f46',
                            boxWidth: 12,
                            boxHeight: 12,
                        },
                    },
                },
                scales:
                    type === 'doughnut'
                        ? {}
                        : {
                            x: {
                                ticks: {
                                    color:
                                        document.documentElement.classList.contains(
                                            'dark'
                                        )
                                            ? '#d4d4d8'
                                            : '#52525b',
                                },
                                grid: {
                                    color:
                                        'rgba(113,113,122,0.18)',
                                },
                            },
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    precision: 0,
                                    color:
                                        document.documentElement.classList.contains(
                                            'dark'
                                        )
                                            ? '#d4d4d8'
                                            : '#52525b',
                                },
                                grid: {
                                    color:
                                        'rgba(113,113,122,0.18)',
                                },
                            },
                        },
            },
        });

        canvas.dataset.rendered = 'true';
    });
}


function livewireComponentFor(element) {
    const componentRoot = element.closest('[wire\:id]');

    if (!componentRoot || !window.Livewire) {
        return null;
    }

    return window.Livewire.find(componentRoot.getAttribute('wire:id'));
}

function setLivewireProperty(element, model, value) {
    const component = livewireComponentFor(element);

    if (!component || !model) {
        return;
    }

    component.set(model, value === '' ? null : value);
}

/**
 * Initialise Select2 controls.
 *
 * @returns {void}
 */
function initialiseSelect2() {
    if (!window.jQuery?.fn?.select2) {
        return;
    }

    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
        const $select = $(this);

        if ($select.hasClass('select2-hidden-accessible')) {
            $select.select2('destroy');
        }

        const isMultiple = $select.prop('multiple');

        $select.select2({
            width: '100%',
            allowClear: !isMultiple,
            closeOnSelect: !isMultiple,
            dropdownAutoWidth: true,
            placeholder:
                $select.data('placeholder') ||
                $select.find('option[value=""]').first().text() ||
                (isMultiple ? 'Select options' : 'Select option'),
        });

        $select.off('change.select2-livewire');

        $select.on('change.select2-livewire', function () {
            setLivewireProperty(this, this.dataset.wireModel, $select.val());

            this.dispatchEvent(
                new Event('change', {
                    bubbles: true,
                })
            );
        });
    });
}

/**
 * Boot page UI.
 *
 * @returns {void}
 */
function bootUi() {
    renderWmsCharts();
    initialiseSelect2();
}

document.addEventListener('DOMContentLoaded', bootUi);

document.addEventListener('livewire:navigated', bootUi);

document.addEventListener('livewire:init', () => {
    Livewire.hook('morphed', () => {
        initialiseSelect2();
    });
});