🌍 Scope cities and venues by country, add default country handling, and enhance dropdowns with searchable and flag-based country selection

This commit is contained in:
HolgerHatGarKeineNode
2025-12-05 19:16:17 +01:00
parent 0b6853a6ff
commit 57a21514d1
3 changed files with 38 additions and 8 deletions

View File

@@ -11,6 +11,7 @@ new
class extends Component {
use SeoTrait;
public $country = 'de';
public string $name = '';
public ?int $country_id = null;
public float $latitude = 0;
@@ -18,6 +19,14 @@ class extends Component {
public ?int $population = null;
public ?string $population_date = null;
public function mount(): void
{
$this->country = request()->route('country', config('app.domain_country'));
$this->country_id = Country::query()
->where('code', $this->country)
->value('id');
}
public function createCity(): void
{
$validated = $this->validate([
@@ -59,10 +68,17 @@ class extends Component {
<div class="space-y-6">
<flux:input label="{{ __('Name') }}" wire:model="name" required/>
<flux:select label="{{ __('Country') }}" wire:model="country_id" required>
<option value="">{{ __('Select a country') }}</option>
<flux:select variant="listbox" searchable label="{{ __('Country') }}" wire:model="country_id" required>
<flux:select.option value="">{{ __('Select a country') }}</flux:select.option>
@foreach($countries as $country)
<option value="{{ $country->id }}">{{ $country->name }}</option>
<flux:select.option value="{{ $country->id }}">
<div class="flex items-center space-x-2">
<img alt="{{ str($country->code)->lower() }}"
src="{{ asset('vendor/blade-flags/country-'.str($country->code)->lower().'.svg') }}"
width="24" height="12"/>
<span>{{ $country->name }}</span>
</div>
</flux:select.option>
@endforeach
</flux:select>
</div>
@@ -75,6 +91,10 @@ class extends Component {
<flux:input label="{{ __('Latitude') }}" type="number" step="any" wire:model="latitude" required/>
<flux:input label="{{ __('Longitude') }}" type="number" step="any" wire:model="longitude" required/>
</div>
<div class="my-2">
<flux:link href="https://www.mappr.co/latitude-longitude-finder/">https://www.mappr.co/latitude-longitude-finder/</flux:link>
</div>
</flux:fieldset>
<flux:fieldset>