From e1f132fa7bc9c9c6b236ec5c526283b07b8ad0fb Mon Sep 17 00:00:00 2001 From: Mark Gregory Date: Tue, 7 Jul 2026 13:24:22 +0100 Subject: [PATCH] interim fix for drop downs, BROKEN FIX, interinm fix --- .../Company/Resources/views/_form.blade.php | 3 +- .../Company/Resources/views/index.blade.php | 3 +- resources/css/app.css | 167 ++++++++++++++++++ resources/js/app.js | 44 +++-- 4 files changed, 201 insertions(+), 16 deletions(-) diff --git a/Modules/Company/Resources/views/_form.blade.php b/Modules/Company/Resources/views/_form.blade.php index a5bf21dc..08a1cf43 100644 --- a/Modules/Company/Resources/views/_form.blade.php +++ b/Modules/Company/Resources/views/_form.blade.php @@ -53,8 +53,9 @@ id="country_id" name="country_id" data-wms-select2 + data-company-country-select2 data-placeholder="Search and select a country" - class="w-full" + class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" > @foreach ($countries as $country) diff --git a/Modules/Company/Resources/views/index.blade.php b/Modules/Company/Resources/views/index.blade.php index 1f3661a6..50c76931 100644 --- a/Modules/Company/Resources/views/index.blade.php +++ b/Modules/Company/Resources/views/index.blade.php @@ -85,8 +85,9 @@ id="quick_country_id" name="country_id" data-wms-select2 + data-company-country-select2 data-placeholder="Search and select country" - class="w-full" + class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" > @foreach($countries as $country) diff --git a/resources/css/app.css b/resources/css/app.css index 5a7ff4d3..7fa64d0d 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1529,3 +1529,170 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar { color: rgb(165 243 252); } } + + +/* WMS professional Select2 fields ------------------------------------------------- + These rules are intentionally global because company, warehouse, country and + helpdesk forms all use the same Select2 control pattern. */ +@layer components { + .wms-select2-field select[data-wms-select2], + .wms-select2-field select[data-company-country-select2] { + margin-top: 0.5rem; + height: 3rem; + width: 100%; + border-radius: 0.75rem; + border: 1px solid rgb(212 212 216); + background-color: white; + padding-left: 1rem; + padding-right: 2.5rem; + font-size: 0.875rem; + font-weight: 500; + color: rgb(24 24 27); + box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); + } + + .dark .wms-select2-field select[data-wms-select2], + .dark .wms-select2-field select[data-company-country-select2] { + border-color: rgb(63 63 70); + background-color: rgb(9 9 11); + color: white; + } + + .wms-select2-field .select2-container { + margin-top: 0.5rem; + width: 100% !important; + display: block; + } + + .wms-select2-field .select2-container--default .select2-selection--single, + .select2-container--default.wms-select2-dropdown-owner .select2-selection--single { + height: 3rem; + min-height: 3rem; + border-radius: 0.75rem; + border: 1px solid rgb(212 212 216); + background: white; + box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); + outline: none; + transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; + } + + .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered { + height: 3rem; + padding-left: 1rem; + padding-right: 3rem; + color: rgb(24 24 27); + font-size: 0.875rem; + font-weight: 600; + line-height: 3rem; + } + + .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder { + color: rgb(113 113 122); + font-weight: 500; + } + + .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear { + height: 3rem; + margin-right: 2rem; + color: rgb(113 113 122); + font-size: 1.1rem; + line-height: 3rem; + } + + .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow { + top: 0; + right: 0.75rem; + height: 3rem; + width: 1.75rem; + } + + .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single, + .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single { + border-color: rgb(37 99 235); + box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22); + } + + .select2-container--open { + z-index: 99999; + } + + .select2-container--default .select2-dropdown { + overflow: hidden; + border: 1px solid rgb(63 63 70); + border-radius: 0.875rem; + background: white; + box-shadow: 0 24px 60px rgb(15 23 42 / 0.26); + } + + .select2-container--default .select2-search--dropdown { + padding: 0.75rem; + } + + .select2-container--default .select2-search--dropdown .select2-search__field { + min-height: 2.75rem; + border-radius: 0.75rem; + border: 1px solid rgb(212 212 216); + background: white; + padding: 0 0.875rem; + color: rgb(24 24 27); + font-size: 0.875rem; + outline: none; + } + + .select2-container--default .select2-search--dropdown .select2-search__field:focus { + border-color: rgb(37 99 235); + box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22); + } + + .select2-container--default .select2-results__option { + padding: 0.75rem 1rem; + color: rgb(24 24 27); + font-size: 0.875rem; + font-weight: 600; + } + + .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { + background: rgb(37 99 235); + color: white; + } + + .select2-container--default .select2-results__option--selected { + background: rgb(239 246 255); + color: rgb(30 64 175); + } + + .dark .wms-select2-field .select2-container--default .select2-selection--single { + border-color: rgb(63 63 70); + background: rgb(9 9 11); + } + + .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered { + color: white; + } + + .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder, + .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear { + color: rgb(161 161 170); + } + + .dark .select2-container--default .select2-dropdown { + border-color: rgb(63 63 70); + background: rgb(24 24 27); + color: white; + } + + .dark .select2-container--default .select2-search--dropdown .select2-search__field { + border-color: rgb(63 63 70); + background: rgb(9 9 11); + color: white; + } + + .dark .select2-container--default .select2-results__option { + color: rgb(244 244 245); + } + + .dark .select2-container--default .select2-results__option--selected { + background: rgb(30 58 138 / 0.55); + color: rgb(191 219 254); + } +} diff --git a/resources/js/app.js b/resources/js/app.js index ee6d0713..776ad753 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -3,12 +3,13 @@ require('flatpickr'); import '@fortawesome/fontawesome-free/css/all.min.css'; import Chart from 'chart.js/auto'; import $ from 'jquery'; +import select2 from 'select2/dist/js/select2.full.js'; +import 'select2/dist/css/select2.min.css'; window.$ = $; window.jQuery = $; -import 'select2'; -import 'select2/dist/css/select2.min.css'; +select2(window, $); const chartColours = [ 'rgb(8, 145, 178)', @@ -167,32 +168,47 @@ function initialiseSelect2() { return; } - $('[data-helpdesk-select2], [data-wms-select2]').each(function () { - const $select = $(this); + $('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () { + const select = this; + const $select = $(select); if ($select.hasClass('select2-hidden-accessible')) { - $select.select2('destroy'); + 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) { + $select.prepend(new Option('', '', false, false)); + } $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'), + dropdownAutoWidth: false, + placeholder, + dropdownParent: $('body'), + sorter: function (data) { + return data.sort(function (a, b) { + return (a.text || '').localeCompare(b.text || '', undefined, { + sensitivity: 'base', + numeric: true, + }); + }); + }, }); - $select.off('change.select2-livewire'); + $select.off('change.wms-select2-livewire'); - $select.on('change.select2-livewire', function () { - setLivewireProperty(this, this.dataset.wireModel, $select.val()); + $select.on('change.wms-select2-livewire', function () { + setLivewireProperty(select, select.dataset.wireModel, $select.val()); - this.dispatchEvent( + select.dispatchEvent( new Event('change', { bubbles: true, })