Add search input to filter ReportBuilder column selection

[SimonBarrettACT]

Problem

The ReportBuilder's column selection panel displays all available fields as checkboxes in a grid layout. Reports with many columns (e.g. the Employees report has 50+ columns across 6 sections) make it difficult to locate a specific field — users must visually scan the entire grid.

Proposed Solution

Add an Alpine.js-powered search input above the column checkboxes that filters the visible fields client-side as the user types.

View Changes (resources/views/report-editor.blade.php)

1. Extend the existing x-data object to include a search property:

-<div x-data="{open: true }" x-cloak
+<div x-data="{open: true, search: '' }" x-cloak

2. Add a search input inside the x-show="open" block, above the column sections:

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

3. Add x-show to each section wrapper that hides the section heading + grid when no columns in that section match the search term. Build a JS array literal from the section's column labels and use .some():

<div x-show="[{!! collect($columns)->map(fn ($column) => "'" . e($column['label']) . "'")->implode(',') !!}].some(label => label.toLowerCase().includes(search.toLowerCase()))">
    <h6 class="...">{{ $section }}</h6>
    <div class="grid ...">
        ...
    </div>
</div>

4. Add x-show to each individual column checkbox div that hides the column when its label doesn't match:

<div class="flex items-center mb-4" x-show="'{{ e($column['label']) }}'.toLowerCase().includes(search.toLowerCase())">
    ...
</div>

Backend Changes (WithReportBuilder trait)

Add a configurable property following the same pattern as $enableGroupBy:

public bool $enableColumnSearch = true;

The view should wrap the search input in a conditional:

@if($this->enableColumnSearch)
    <div class="mb-4">
        <input type="text" x-model="search" placeholder="Search columns..." ... />
    </div>
@endif

Consuming apps can disable the search by setting public bool $enableColumnSearch = false; on their ReportBuilder subclass.

Behaviour Details

• Purely client-side — Alpine.js handles all filtering, no Livewire round-trips
• Case-insensitive matching against column labels
• Sections hide entirely when none of their columns match
• Already-selected columns remain selected even when hidden by the filter (they stay in the selectedColumns array, just not visible)
• Empty search shows all columns (every string .includes('') returns true)

Testing

• Feature test: verify the search input HTML (x-model="search") and per-column x-show attributes are rendered when enableColumnSearch is true, and absent when false
• Browser test (Pest browser plugin): verify typing in the search field hides non-matching columns and clearing restores them

Reference Implementation

A working app-level implementation exists in ACT-Training/people#2877 using the published view override, which can serve as a reference.

---

Triage Notes

• Type: Enhancement
• Severity: Low — cosmetic/UX improvement, no functionality is broken
• Effort: Small (< half day) — straightforward Alpine.js + Blade changes, one property addition
• Component(s): WithReportBuilder trait, report-editor.blade.php view
• Relevant files:
  • src/Support/Concerns/WithReportBuilder.php — add $enableColumnSearch property
  • resources/views/report-editor.blade.php — add search input, x-show filtering on sections and columns
• Risk: Low — purely additive, client-side only filtering, no changes to query logic or data flow. Existing behaviour unchanged when search is empty or disabled.