Skip to content

Add reusable Bootstrap 5 autocomplete-with-create component and backend endpoint traits#13

Draft
gabrielsolomon with Copilot wants to merge 2 commits into
masterfrom
copilot/explore-codebase-auto-complete
Draft

Add reusable Bootstrap 5 autocomplete-with-create component and backend endpoint traits#13
gabrielsolomon with Copilot wants to merge 2 commits into
masterfrom
copilot/explore-codebase-auto-complete

Conversation

Copilot AI commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

This PR introduces a reusable admin form component for searching entities via autocomplete and creating missing entries inline. It standardizes the backend JSON contract and wires a Bootstrap 5 UI/JS implementation that can be dropped into existing abstract form flows.

  • Backend endpoint traits (search + create)

    • Added HasAutocompleteSearchTrait and HasAutocompleteCreateTrait under src/Library/Controllers/Traits/.
    • Exposes generic actions: autocompleteSearchAction() and autocompleteCreateAction().
    • Normalizes request params (q, limit, name by default), success/error payloads, duplicate handling hooks, and response formatting hooks.
    • Includes safe JSON encoding fallback for encoding failures.
  • Reusable Bootstrap 5 field partial

    • Added resources/themes/bootstrap5/views/abstract/modules/item-form/fields/autocomplete_create.php.
    • Provides hidden ID input + visible search input + dropdown results + inline “create new” action.
    • Supports configurable URLs/methods/params/messages/limits and read-only/disabled/required behavior via view variables and data-* attributes.
  • Frontend component integration

    • Added AutocompleteCreateComponent in resources/themes/bootstrap5/assets/scripts/admin/components/AutocompleteCreate.js.
    • Registered component in resources/themes/bootstrap5/assets/scripts/admin/app.js.
    • Implements debounced search, result rendering, keyboard navigation, selection sync (id/label), inline create, error feedback, and Turbo-safe cleanup/rebind behavior.
  • Bootstrap 5 styling

    • Added resources/themes/bootstrap5/assets/sass/ui/_autocomplete-create.scss.
    • Imported in resources/themes/bootstrap5/assets/sass/ui/core.scss.
    • Styles dropdown/results/loading/empty/create-row states to align with existing Bootstrap 5 theme tokens.
  • Tests + docs

    • Added trait-focused unit tests for empty query/name, normal success paths, duplicate conflict, and created response mapping.
    • Extended README with endpoint contract, trait extension points, and field usage expectations.
// Example: controller integration
class TagsController
{
    use \ByTIC\AdminBase\Library\Controllers\Traits\HasAutocompleteSearchTrait;
    use \ByTIC\AdminBase\Library\Controllers\Traits\HasAutocompleteCreateTrait;

    protected function autocompleteSearchFetchRecords(string $query, int $limit): iterable { /* ... */ }
    protected function autocompleteCreatePersistRecord(string $name): mixed { /* ... */ }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants