interim fix for drop downs
This commit is contained in:
Mark Gregory
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user