feat: add sort option to station search form

app/Livewire/Public/StationSearch.php

@@ -19,6 +19,9 @@ class StationSearch extends Component
     #[Validate('required|integer|min:1|max:20')]
     public int $radius = 5;
 
+    #[Validate('required|string|in:price,distance,updated,brand')]
+    public string $sort = 'price';
+
     public array $results = [];
 
     public array $meta = [];
@@ -42,7 +45,7 @@ class StationSearch extends Component
                     'postcode' => $this->search,
                     'fuel_type' => $this->fuelType,
                     'radius' => $radiusKm,
-                    'sort' => 'price',
+                    'sort' => $this->sort,
                 ]);
         } catch (ConnectionException) {
             $this->apiError = 'Unable to fetch stations. Please try again.';

resources/views/livewire/public/station-search.blade.php

@@ -41,6 +41,15 @@
                 </flux:select>
             </div>
 
+            <div class="w-full sm:w-40">
+                <flux:select wire:model="sort" name="sort" label="Sort by">
+                    <flux:select.option value="price">Cheapest first</flux:select.option>
+                    <flux:select.option value="distance">Nearest first</flux:select.option>
+                    <flux:select.option value="updated">Recently updated</flux:select.option>
+                    <flux:select.option value="brand">Brand A–Z</flux:select.option>
+                </flux:select>
+            </div>
+
             <div>
                 <flux:button type="submit" variant="primary" wire:loading.attr="disabled">
                     <span wire:loading.remove wire:target="findStations">Search</span>

tests/Feature/Livewire/StationSearchTest.php

@@ -24,6 +24,7 @@ it('validates search is required', function () {
 it('validates fuelType is required', function () {
     Livewire::test(StationSearch::class)
         ->set('search', 'SW1A 1AA')
+        ->set('fuelType', '')
         ->call('findStations')
         ->assertHasErrors(['fuelType' => 'required']);
 });