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

resources/views/livewire/cities/create.blade.php

@@ -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>

resources/views/livewire/venues/create.blade.php

@@ -11,10 +11,16 @@ new
 class extends Component {
     use SeoTrait;
 
+    public $country = 'de';
     public string $name = '';
     public ?int $city_id = null;
     public string $street = '';
 
+    public function mount(): void
+    {
+        $this->country = request()->route('country', config('app.domain_country'));
+    }
+
     public function createVenue(): void
     {
         $validated = $this->validate([
@@ -36,7 +42,10 @@ class extends Component {
     public function with(): array
     {
         return [
-            'cities' => City::query()->with('country')->orderBy('name')->get(),
+            'cities' => City::query()
+                ->with('country')
+                ->whereHas('country', fn($query) => $query->where('countries.code', $this->country))
+                ->orderBy('name')->get(),
         ];
     }
 }; ?>
@@ -53,15 +62,15 @@ class extends Component {
             <div class="space-y-6">
                 <flux:input label="{{ __('Name') }}" wire:model="name" required/>
 
-                <flux:select label="{{ __('City') }}" wire:model="city_id" required>
-                    <option value="">{{ __('Select a city') }}</option>
+                <flux:select placeholder="{{ __('Wähle die Stadt aus...') }}" variant="listbox" searchable
+                             label="{{ __('City') }}" wire:model="city_id" required>
                     @foreach($cities as $city)
-                        <option value="{{ $city->id }}">
+                        <flux:select.option value="{{ $city->id }}">
                             {{ $city->name }}
                             @if($city->country)
                                 ({{ $city->country->name }})
                             @endif
-                        </option>
+                        </flux:select.option>
                     @endforeach
                 </flux:select>
 

resources/views/livewire/venues/index.blade.php

@@ -27,6 +27,7 @@ class extends Component {
                 ->when($this->search, fn($query)
                     => $query->where('name', 'ilike', '%'.$this->search.'%'),
                 )
+                ->whereHas('city.country', fn($query) => $query->where('countries.code', $this->country))
                 ->orderBy('name')
                 ->paginate(15),
         ];