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 select2Factory from 'select2';
import 'select2/dist/css/select2.min.css';
import '../css/wms-select2.css';

if (typeof select2Factory === 'function') {
    select2Factory(window, $);
}

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) {
    if (!element || !window.Livewire) {
        return null;
    }

    let componentRoot = null;

    try {
        componentRoot = element.closest('[wire\\:id]');
    } catch (error) {
        componentRoot = null;
    }

    if (!componentRoot) {
        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(root = document) {
    if (!window.jQuery?.fn?.select2) {
        return;
    }

    const $root = root instanceof window.Element ? $(root) : $(document);
    const selector = 'select[data-helpdesk-select2], select[data-wms-select2], select.wms-select2-control';

    $root.find(selector).add($root.is(selector) ? $root : $()).each(function () {
        const select = this;
        const $select = $(select);

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

        const isMultiple = $select.prop('multiple');
        const placeholder =
            $select.data('placeholder') ||
            $select.find('option[value=""]').first().text() ||
            (isMultiple ? 'Select options' : 'Select option');

        if (!isMultiple && $select.find('option[value=""]').length === 0) {
            $select.prepend(new Option('', '', false, false));
        }

        $select.select2({
            theme: 'wms',
            width: '100%',
            allowClear: !isMultiple,
            closeOnSelect: !isMultiple,
            dropdownAutoWidth: false,
            placeholder,
            sorter(data) {
                return data.sort((first, second) => first.text.localeCompare(second.text, undefined, {
                    sensitivity: 'base',
                    ignorePunctuation: true,
                }));
            },
        });

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

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

document.addEventListener('DOMContentLoaded', bootUi);
window.addEventListener('load', bootUi);
window.addEventListener('pageshow', bootUi);

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

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

const select2Observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (node instanceof window.Element) {
                initialiseSelect2(node);
            }
        });
    });
});

select2Observer.observe(document.documentElement, {
    childList: true,
    subtree: true,
});