From d44346543b226eb37d22c7142b2c629d0e2c18dd Mon Sep 17 00:00:00 2001
From: Simon Barrett <simonbarrett@acttraining.org.uk>
Date: Mon, 9 Mar 2026 10:34:26 +0000
Subject: [PATCH] Add search input to filter ReportBuilder column selection

Add Alpine.js-powered client-side search to the report editor's column
selection panel. Users can now type to filter columns by label, with
sections hiding entirely when no columns match. Controlled by a new
$enableColumnSearch property (defaults to true) on WithReportBuilder.

Closes #111

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 resources/views/report-editor.blade.php    | 33 ++++++++------
 src/Support/Concerns/WithReportBuilder.php |  2 +
 tests/ReportEditorColumnSearchTest.php     | 50 ++++++++++++++++++++++
 3 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 tests/ReportEditorColumnSearchTest.php

diff --git a/resources/views/report-editor.blade.php b/resources/views/report-editor.blade.php
index c54627b..77d2a2d 100644
--- a/resources/views/report-editor.blade.php
+++ b/resources/views/report-editor.blade.php
@@ -1,4 +1,4 @@
-<div x-data="{open: true }" x-cloak
+<div x-data="{open: true, search: '' }" x-cloak
      class="m-4 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
 
     @if(!$selectedColumns)
@@ -8,18 +8,27 @@ class="m-4 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-g
     @endif
 
     <div x-show="open">
+        @if($this->enableColumnSearch)
+            <div class="mb-4">
+                <input type="text" x-model="search" placeholder="Search columns..."
+                       class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+            </div>
+        @endif
+
         @foreach($this->availableColumns() as $section => $columns)
-            <h6 class="mb-4 pb-1 text-base font-bold text-gray-600 dark:text-white border-b border-dashed">{{ $section }}</h6>
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
-                @foreach($columns as $columnKey => $column)
-                    <div class="flex items-center mb-4">
-                        <input wire:model.live.debounce.1000ms="selectedColumns" id="{{$column['key']}}" type="checkbox"
-                               value="{{ $column['key'] }}"
-                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                        <label for="{{$column['key']}}"
-                               class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{$column['label']}}</label>
-                    </div>
-                @endforeach
+            <div x-show="[{!! collect($columns)->map(fn ($column) => "'" . e($column['label']) . "'")->implode(',') !!}].some(label => label.toLowerCase().includes(search.toLowerCase()))">
+                <h6 class="mb-4 pb-1 text-base font-bold text-gray-600 dark:text-white border-b border-dashed">{{ $section }}</h6>
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
+                    @foreach($columns as $columnKey => $column)
+                        <div class="flex items-center mb-4" x-show="'{{ e($column['label']) }}'.toLowerCase().includes(search.toLowerCase())">
+                            <input wire:model.live.debounce.1000ms="selectedColumns" id="{{$column['key']}}" type="checkbox"
+                                   value="{{ $column['key'] }}"
+                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                            <label for="{{$column['key']}}"
+                                   class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{$column['label']}}</label>
+                        </div>
+                    @endforeach
+                </div>
             </div>
         @endforeach
 
diff --git a/src/Support/Concerns/WithReportBuilder.php b/src/Support/Concerns/WithReportBuilder.php
index 78d849d..788090f 100644
--- a/src/Support/Concerns/WithReportBuilder.php
+++ b/src/Support/Concerns/WithReportBuilder.php
@@ -30,6 +30,8 @@ trait WithReportBuilder
 
     public bool $enableGroupBy = false;
 
+    public bool $enableColumnSearch = true;
+
     private function findElementByKey(array $array, $targetValue): ?array
     {
         foreach ($array as $value) {
diff --git a/tests/ReportEditorColumnSearchTest.php b/tests/ReportEditorColumnSearchTest.php
new file mode 100644
index 0000000..25a189f
--- /dev/null
+++ b/tests/ReportEditorColumnSearchTest.php
@@ -0,0 +1,50 @@
+<?php
+
+it('has enableColumnSearch property defaulting to true on WithReportBuilder trait', function () {
+    $trait = new class
+    {
+        use ACTTraining\QueryBuilder\Support\Concerns\WithReportBuilder;
+    };
+
+    expect($trait->enableColumnSearch)->toBeTrue();
+});
+
+it('report editor view contains the column search markup', function () {
+    $viewContent = file_get_contents(
+        __DIR__.'/../resources/views/report-editor.blade.php'
+    );
+
+    expect($viewContent)
+        ->toContain('x-model="search"')
+        ->toContain('placeholder="Search columns..."')
+        ->toContain('enableColumnSearch')
+        ->toContain("search: ''");
+});
+
+it('report editor view wraps search input in enableColumnSearch conditional', function () {
+    $viewContent = file_get_contents(
+        __DIR__.'/../resources/views/report-editor.blade.php'
+    );
+
+    expect($viewContent)
+        ->toContain('@if($this->enableColumnSearch)')
+        ->toContain('.toLowerCase().includes(search.toLowerCase())');
+});
+
+it('report editor view adds x-show filtering to individual column checkboxes', function () {
+    $viewContent = file_get_contents(
+        __DIR__.'/../resources/views/report-editor.blade.php'
+    );
+
+    expect($viewContent)
+        ->toContain("x-show=\"'{{ e(\$column['label']) }}'.toLowerCase().includes(search.toLowerCase())\"");
+});
+
+it('report editor view adds x-show filtering to section wrappers', function () {
+    $viewContent = file_get_contents(
+        __DIR__.'/../resources/views/report-editor.blade.php'
+    );
+
+    expect($viewContent)
+        ->toContain('.some(label => label.toLowerCase().includes(search.toLowerCase()))');
+});