interim fix for drop downs

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
@@ -18,11 +18,11 @@ class CompanyController extends Controller
{
return view('company::index', [
'companies' => Company::query()
->with(['address.country', 'country'])
->with(['address.country'])
->withCount(['users', 'warehouses', 'licenseKeys', 'divisions'])
->latest('id')
->paginate(20),
'countries' => $this->countries(),
'countries' => $this->countriesForSelect(),
]);
}
@@ -36,7 +36,7 @@ class CompanyController extends Controller
'status' => 'active',
'timezone' => 'Europe/London',
]),
'countries' => $this->countries(),
'countries' => $this->countriesForSelect(),
]);
}
@@ -45,7 +45,10 @@ class CompanyController extends Controller
*/
public function store(Request $request)
{
$company = Company::create($this->validated($request));
$validated = $this->validated($request);
$company = Company::create($validated['company']);
$this->syncAddressCountry($company, $validated['country_id']);
return redirect()
->route('platform.companies.index')
@@ -73,7 +76,7 @@ class CompanyController extends Controller
'recentUsers' => $company->users()->latest('id')->limit(5)->get(),
'recentWarehouses' => $company->warehouses()->latest('id')->limit(5)->get(),
'recentLicenseKeys' => $company->licenseKeys()->latest('id')->limit(5)->get(),
'countries' => Country::query()->active()->orderBy('sort_order')->orderBy('name')->get(['id', 'alpha2', 'name', 'display_name', 'common_name']),
'countries' => $this->countriesForSelect(),
'companyUsers' => $company->users()->orderBy('name')->get(['id', 'name', 'email', 'company_id']),
'unassignedWarehouses' => $company->warehouses()->whereNull('division_id')->orderBy('name')->get(),
]);
@@ -85,8 +88,8 @@ class CompanyController extends Controller
public function edit(Company $company)
{
return view('company::edit', [
'company' => $company->loadMissing(['address.country', 'country']),
'countries' => $this->countries(),
'company' => $company->loadMissing('address.country'),
'countries' => $this->countriesForSelect(),
]);
}
@@ -95,7 +98,10 @@ class CompanyController extends Controller
*/
public function update(Request $request, Company $company)
{
$company->update($this->validated($request, $company));
$validated = $this->validated($request, $company);
$company->update($validated['company']);
$this->syncAddressCountry($company, $validated['country_id']);
return redirect()
->route('platform.companies.show', $company)
@@ -122,20 +128,44 @@ class CompanyController extends Controller
'name' => ['required', 'string', 'max:255'],
'billing_email' => ['nullable', 'email', 'max:255'],
'status' => ['required', Rule::in(['active', 'suspended', 'inactive'])],
'country_id' => ['nullable', Rule::exists('countries', 'id')->where('is_active', true)],
'country_id' => ['nullable', 'integer', Rule::exists('countries', 'id')],
]);
$data['slug'] = Str::slug($data['name']);
$data['timezone'] = $company?->timezone ?: 'Europe/London';
return $data;
return [
'company' => [
'name' => $data['name'],
'billing_email' => $data['billing_email'] ?? null,
'status' => $data['status'],
'slug' => Str::slug($data['name']),
'timezone' => $company?->timezone ?: 'Europe/London',
],
'country_id' => $data['country_id'] ?? null,
];
}
private function countries()
private function countriesForSelect()
{
return Country::query()
->active()
->ordered()
->get(['id', 'alpha2', 'name', 'display_name', 'common_name', 'sort_order']);
->orderByRaw("LOWER(COALESCE(NULLIF(display_name, ''), NULLIF(common_name, ''), name)) ASC")
->get(['id', 'alpha2', 'name', 'display_name', 'common_name']);
}
private function syncAddressCountry(Company $company, ?int $countryId): void
{
if ($countryId === null) {
$company->address()?->delete();
return;
}
$company->address()->updateOrCreate(
[],
[
'country_id' => $countryId,
'label' => 'Registered address',
'is_primary' => true,
]
);
}
}
+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
+100 -45
View File
@@ -30,57 +30,86 @@
</a>
</div>
<form method="POST" action="{{ route('platform.companies.store') }}" class="mt-6 grid gap-5 lg:grid-cols-12 lg:items-end">
<form method="POST" action="{{ route('platform.companies.store') }}" class="mt-6">
@csrf
<div class="lg:col-span-3">
<label for="quick_company_name" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Company</label>
<input
id="quick_company_name"
name="name"
value="{{ old('name') }}"
placeholder="Company name"
class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
required
>
</div>
<div class="grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,1.15fr)_minmax(12rem,.75fr)_minmax(18rem,1.15fr)_auto] xl:items-end">
<div>
<label for="quick_company_name" class="block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Company</label>
<input
id="quick_company_name"
name="name"
value="{{ old('name') }}"
placeholder="Company name"
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')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<div class="lg:col-span-3">
<label for="quick_billing_email" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Billing email</label>
<input
id="quick_billing_email"
name="billing_email"
value="{{ old('billing_email') }}"
placeholder="billing@example.com"
type="email"
class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
>
</div>
<div>
<label for="quick_billing_email" class="block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Billing email</label>
<input
id="quick_billing_email"
name="billing_email"
value="{{ old('billing_email') }}"
placeholder="billing@example.com"
type="email"
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>
@enderror
</div>
<div class="lg:col-span-2">
<label for="quick_status" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Status</label>
<select id="quick_status" name="status" class="h-11 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required>
<option value="active" @selected(old('status', 'active') === 'active')>Active</option>
<option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
<option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
</select>
</div>
<div>
<label for="quick_status" class="block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Status</label>
<select
id="quick_status"
name="status"
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', 'active') === 'active')>Active</option>
<option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
<option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
</select>
@error('status')
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
<div class="wms-select2-field lg:col-span-3">
<label for="quick_country_id" class="mb-2 block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Country</label>
<select id="quick_country_id" name="country_id" data-wms-select2 data-placeholder="Search country" class="wms-country-select w-full">
<option value="">Search country</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
{{ $country->effective_name ?? $country->name }}
</option>
@endforeach
</select>
</div>
<div>
<label for="quick_country_id" class="block text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Country</label>
<select
id="quick_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') == $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
</div>
<button class="inline-flex h-11 items-center justify-center rounded-xl bg-green-600 px-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:hover:bg-green-400 dark:focus:ring-offset-zinc-900 lg:col-span-1">
Create
</button>
<button class="h-12 rounded-xl bg-green-600 px-6 text-sm font-bold text-white shadow-sm shadow-green-950/20 transition hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40">
Create
</button>
</div>
</form>
</div>
<div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-800">
@@ -183,4 +212,30 @@
{{ $companies->links() }}
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
$('[data-company-country-select2]').select2({
width: '100%',
placeholder: 'Search and select country',
allowClear: true,
dropdownAutoWidth: false,
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
});
</script>
@endpush
</x-layouts::app>
+7 -1
View File
@@ -1,6 +1,12 @@
latest: 1.2.0
latest: 1.2.1
versions:
- version: 1.2.1
date: 2026-07-07
changes:
- Replaced company country inputs with a shared Select2-enhanced dropdown populated by the Countries module.
- Aligned the company create forms and changed the primary create/save action to green.
- Stored the selected country on the company address relationship during create and update.
- version: 1.2.0
date: 2026-07-02
changes:
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "Company",
"alias": "company",
"version": "1.2.0",
"version": "1.2.1",
"description": "",
"keywords": [],
"priority": 0,