country selector changed

app/Http/Controllers/Api/CountryController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Country;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\Request;
+
+class CountryController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index(Request $request)
+    {
+        return Country::query()
+                   ->select('id', 'name', 'code')
+                   ->orderBy('name')
+                   ->when(
+                       $request->search,
+                       fn (Builder $query) => $query
+                           ->where('name', 'ilike', "%{$request->search}%")
+                           ->orWhere('code', 'ilike', "%{$request->search}%")
+                   )
+                   ->when(
+                       $request->exists('selected'),
+                       fn (Builder $query) => $query->whereIn('code', $request->input('selected', [])),
+                       fn (Builder $query) => $query->limit(10)
+                   )
+                   ->get()
+                   ->map(function (Country $country) {
+                       $country->flag = asset('vendor/blade-country-flags/4x3-'.$country->code.'.svg');
+
+                       return $country;
+                   });
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Models\Country  $country
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Country $country)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\Country  $country
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Country $country)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Country  $country
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Country $country)
+    {
+        //
+    }
+}

resources/views/livewire/frontend/header.blade.php

@@ -89,13 +89,15 @@
                         placeholder="Land wechseln"
                         wire:model="c"
                         :clearable="false"
-                    >
+                        :searchable="true"
-                        @foreach($countries as $country)
+                        :async-data="route('api.countries.index')"
-                            <x-select.user-option
+                        option-label="name"
-                                src="{{ asset('vendor/blade-country-flags/4x3-'.$country->code.'.svg') }}"
+                        option-value="code"
-                                label="{{ $country->name }}" value="{{ $country->code }}"/>
+                        :template="[
-                        @endforeach
+                            'name'   => 'user-option',
-                    </x-select>
+                            'config' => ['src' => 'flag']
+                        ]"
+                    />
                 </div>
                 @auth
                     <div></div>

resources/views/livewire/frontend/welcome.blade.php

@@ -17,13 +17,15 @@
                         placeholder="Land wechseln"
                         wire:model="c"
                         :clearable="false"
-                    >
+                        :searchable="true"
-                        @foreach($countries as $country)
+                        :async-data="route('api.countries.index')"
-                            <x-select.user-option
+                        option-label="name"
-                                src="{{ asset('vendor/blade-country-flags/4x3-'.$country->code.'.svg') }}"
+                        option-value="code"
-                                label="{{ $country->name }}" value="{{ $country->code }}"/>
+                        :template="[
-                        @endforeach
+                            'name'   => 'user-option',
-                    </x-select>
+                            'config' => ['src' => 'flag']
+                        ]"
+                    />
                 </div>
             </div>
             <div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">

routes/api.php

@@ -23,6 +23,12 @@ Route::middleware('auth:sanctum')
          return $request->user();
      });
 
+Route::middleware([])
+    ->as('api.')
+     ->group(function () {
+         Route::resource('countries', \App\Http\Controllers\Api\CountryController::class);
+     });
+
 Route::get('/lnurl-auth-callback', function (\Illuminate\Http\Request $request) {
     if (lnurl\auth($request->k1, $request->sig, $request->key)) {
         // find User by $wallet_public_key