Updated the helpdesk module

2026-06-14 14:11:31 +01:00
parent 1c9ed1a537
commit de458cc010
9 changed files with 423 additions and 333 deletions
@@ -1,30 +1,117 @@
-@script
-    <script>
-        const initialiseHelpdeskSelect2 = function () {
-            if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) {
+@once
+    <style>
+        .select2-container { width: 100% !important; }
+        .select2-container--default .select2-selection--single {
+            min-height: 2.75rem;
+            border-radius: 0.75rem;
+            border-color: rgb(63 63 70);
+            background: rgb(9 9 11);
+            color: rgb(244 244 245);
+            display: flex;
+            align-items: center;
+        }
+        .select2-container--default .select2-selection--single .select2-selection__rendered {
+            color: rgb(244 244 245);
+            line-height: 2.75rem;
+            padding-left: 0.85rem;
+        }
+        .select2-container--default .select2-selection--single .select2-selection__arrow {
+            height: 2.75rem;
+        }
+        .select2-dropdown {
+            border-color: rgb(63 63 70);
+            background: rgb(24 24 27);
+            color: rgb(244 244 245);
+        }
+        .select2-container--default .select2-results__option--highlighted[aria-selected] {
+            background: rgb(37 99 235);
+            color: white;
+        }
+        .select2-container--default .select2-results__option[aria-selected=true] {
+            background: rgb(39 39 42);
+            color: white;
+        }
+        .select2-search__field {
+            background: rgb(9 9 11);
+            color: rgb(244 244 245);
+            border-color: rgb(63 63 70) !important;
+        }
+    </style>
+@endonce
+
+<script>
+    (function () {
+        function loadScript(src, callback) {
+            const existing = document.querySelector('script[src="' + src + '"]');
+            if (existing) {
+                existing.addEventListener('load', callback, { once: true });
+                if (existing.dataset.loaded === '1') callback();
                return;
            }

-            window.jQuery('[data-helpdesk-select2], [data-helpdesk-select]').each(function () {
-                const element = window.jQuery(this);
+            const script = document.createElement('script');
+            script.src = src;
+            script.onload = function () {
+                script.dataset.loaded = '1';
+                callback();
+            };
+            document.head.appendChild(script);
+        }

-                if (element.data('select2')) {
+        function loadStyle(href) {
+            if (document.querySelector('link[href="' + href + '"]')) return;
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            document.head.appendChild(link);
+        }
+
+        function initialiseHelpdeskSelects() {
+            if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) return;
+
+            window.jQuery('[data-helpdesk-select2]').each(function () {
+                const select = window.jQuery(this);
+
+                if (select.data('select2')) {
+                    select.select2('destroy');
+                }
+
+                select.select2({
+                    width: '100%',
+                    placeholder: this.querySelector('option[value=""]')?.textContent || 'Select option',
+                    allowClear: true
+                });
+
+                select.off('change.helpdesk').on('change.helpdesk', function () {
+                    this.dispatchEvent(new Event('change', { bubbles: true }));
+                    this.dispatchEvent(new Event('input', { bubbles: true }));
+                });
+            });
+        }
+
+        function bootHelpdeskSelects() {
+            loadStyle('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
+
+            const bootSelect2 = function () {
+                if (window.jQuery && window.jQuery.fn && window.jQuery.fn.select2) {
+                    initialiseHelpdeskSelects();
                    return;
                }

-                element.select2({
-                    width: '100%',
-                    theme: 'default'
-                });
+                loadScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', initialiseHelpdeskSelects);
+            };

-                element.on('change', function () {
-                    this.dispatchEvent(new Event('input', { bubbles: true }));
-                    this.dispatchEvent(new Event('change', { bubbles: true }));
-                });
-            });
-        };
+            if (window.jQuery) {
+                bootSelect2();
+                return;
+            }

-        initialiseHelpdeskSelect2();
-        document.addEventListener('livewire:navigated', initialiseHelpdeskSelect2);
-    </script>
-@endscript
+            loadScript('https://code.jquery.com/jquery-3.7.1.min.js', bootSelect2);
+        }
+
+        document.addEventListener('DOMContentLoaded', bootHelpdeskSelects);
+        document.addEventListener('livewire:navigated', bootHelpdeskSelects);
+        document.addEventListener('livewire:updated', bootHelpdeskSelects);
+        bootHelpdeskSelects();
+    })();
+</script>