mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

interim fix for drop downs

Browse Source
This commit is contained in:
Mark Gregory
2026-07-07 11:57:02 +01:00
parent fd63173736
commit 9cc2ce530e
9 changed files with 520 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Company/Resources/views/_form.blade.php
+199 -24
View File
@@ -1,13 +1,13 @@
@csrf
<div class="grid gap-6 md:grid-cols-2">
<div class="grid gap-6 lg:grid-cols-2">
<div>
<label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
<input
id="name"
name="name"
value="{{ old('name', $company->name) }}"
class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
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"
required
>
@error('name')
@@ -23,7 +23,7 @@
name="billing_email"
value="{{ old('billing_email', $company->billing_email) }}"
placeholder="billing@example.com"
class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
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"
>
@error('billing_email')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@@ -35,7 +35,7 @@
<select
id="status"
name="status"
class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
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"
required
>
<option value="active" @selected(old('status', $company->status) === 'active')>Active</option>
@@ -47,25 +47,26 @@
@enderror
</div>
<div class="wms-form-field wms-select2-field">
<div>
<label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
<div class="mt-2">
<select
id="country_id"
name="country_id"
data-wms-select2
data-placeholder="Search and select country"
class="wms-country-select w-full"
>
<option value="">Search and select country</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
{{ $country->effective_name ?? $country->name }}
</option>
@endforeach
</select>
</div>
<p class="mt-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">Start typing to filter the country list.</p>
<select
id="country_id"
name="country_id"
data-company-country-select2
data-placeholder="Search and select country"
class="wms-country-select mt-2 w-full"
>
<option value=""></option>
@foreach($countries as $country)
<option
value="{{ $country->id }}"
data-code="{{ $country->alpha2 }}"
@selected(old('country_id', $company->address?->country_id) == $country->id)
>
{{ $country->display_name ?? $country->common_name ?? $country->name }}
</option>
@endforeach
</select>
@error('country_id')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
@@ -73,14 +74,188 @@
</div>
<div class="mt-8 flex flex-wrap items-center gap-3 border-t border-zinc-200 pt-6 dark:border-zinc-800">
<button class="inline-flex items-center justify-center rounded-xl bg-green-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-green-600/20 transition hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:bg-green-500 dark:text-white dark:hover:bg-green-400 dark:focus:ring-offset-zinc-900">
<button class="rounded-xl bg-green-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm shadow-green-950/20 transition hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40">
Save company
</button>
<a
href="{{ $company->exists ? route('platform.companies.show', $company) : route('platform.companies.index') }}"
class="rounded-xl border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
class="rounded-xl border border-zinc-300 px-5 py-2.5 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
>
Cancel
</a>
</div>
@once
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
.wms-country-select.select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.wms-country-select + .select2-container {
display: block !important;
width: 100% !important;
margin-top: 0.5rem !important;
}
.wms-country-select + .select2-container .select2-selection--single {
height: 3rem !important;
min-height: 3rem !important;
display: flex !important;
align-items: center !important;
border-radius: 0.75rem !important;
border: 1px solid rgb(63 63 70) !important;
background: rgb(9 9 11) !important;
box-shadow: none !important;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}
.wms-country-select + .select2-container .select2-selection--single .select2-selection__rendered {
width: 100% !important;
height: 3rem !important;
line-height: 3rem !important;
padding-left: 1rem !important;
padding-right: 2.75rem !important;
color: rgb(244 244 245) !important;
font-size: 0.875rem !important;
}
.wms-country-select + .select2-container .select2-selection--single .select2-selection__placeholder {
color: rgb(161 161 170) !important;
}
.wms-country-select + .select2-container .select2-selection--single .select2-selection__arrow {
height: 3rem !important;
right: 0.75rem !important;
top: 0 !important;
}
.wms-country-select + .select2-container .select2-selection--single .select2-selection__arrow b {
border-color: rgb(161 161 170) transparent transparent transparent !important;
}
.wms-country-select + .select2-container .select2-selection--single .select2-selection__clear {
margin-right: 0.5rem !important;
color: rgb(161 161 170) !important;
font-size: 1rem !important;
font-weight: 700 !important;
}
.wms-country-select + .select2-container.select2-container--focus .select2-selection--single,
.wms-country-select + .select2-container.select2-container--open .select2-selection--single {
border-color: rgb(59 130 246) !important;
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.28) !important;
}
.select2-container--open .select2-dropdown.wms-country-select2-dropdown,
.wms-country-select2-dropdown {
border: 1px solid rgb(63 63 70) !important;
border-radius: 0.875rem !important;
overflow: hidden !important;
background: rgb(24 24 27) !important;
box-shadow: 0 20px 35px -15px rgb(0 0 0 / 0.7) !important;
}
.wms-country-select2-dropdown .select2-search--dropdown {
padding: 0.75rem !important;
border-bottom: 1px solid rgb(63 63 70) !important;
background: rgb(24 24 27) !important;
}
.wms-country-select2-dropdown .select2-search__field {
min-height: 2.5rem !important;
border-radius: 0.75rem !important;
border: 1px solid rgb(63 63 70) !important;
background: rgb(9 9 11) !important;
padding: 0.5rem 0.75rem !important;
color: rgb(244 244 245) !important;
outline: none !important;
}
.wms-country-select2-dropdown .select2-results__option {
padding: 0.7rem 0.9rem !important;
color: rgb(228 228 231) !important;
font-size: 0.875rem !important;
}
.wms-country-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
background: rgb(37 99 235) !important;
color: white !important;
}
.wms-country-select2-dropdown .select2-results__option--selected {
background: rgb(22 101 52) !important;
color: white !important;
}
</style>
<script>
(function () {
function loadScript(src, callback) {
var existing = document.querySelector('script[src="' + src + '"]');
if (existing) {
existing.addEventListener('load', callback, { once: true });
callback();
return;
}
var script = document.createElement('script');
script.src = src;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}
function initCompanyCountrySelect2() {
if (!window.jQuery || !window.jQuery.fn || !window.jQuery.fn.select2) {
return;
}
window.jQuery('[data-company-country-select2]').each(function () {
var select = window.jQuery(this);
if (select.hasClass('select2-hidden-accessible')) {
return;
}
select.select2({
width: '100%',
placeholder: select.data('placeholder') || 'Search and select country',
allowClear: true,
dropdownAutoWidth: false,
dropdownCssClass: 'wms-country-select2-dropdown',
selectionCssClass: 'wms-country-select2-selection'
});
});
}
window.initialiseCompanyCountrySelect2 = initCompanyCountrySelect2;
function bootCompanyCountrySelect2() {
if (window.jQuery && window.jQuery.fn && window.jQuery.fn.select2) {
initCompanyCountrySelect2();
return;
}
loadScript('https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js', function () {
loadScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', initCompanyCountrySelect2);
});
}
document.addEventListener('DOMContentLoaded', bootCompanyCountrySelect2);
document.addEventListener('livewire:navigated', bootCompanyCountrySelect2);
bootCompanyCountrySelect2();
})();
</script>
@endonce