Country / Company updates

js/app.js

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