This article is part of the CakeDC Advent Calendar 2024 (December 21th 2024)
The CakeDC Search Filter plugin is a powerful tool for CakePHP applications that provides advanced search functionality with a modern, user-friendly interface. It combines backend flexibility with a Vue.js-powered frontend to create dynamic search filters. Key features include:
- Dynamic filter generation based on database schema
- Multiple filter types for different data types
- Customizable search conditions
- Interactive Vue.js frontend
- AJAX-powered autocomplete functionality
- Seamless integration with CakePHP's ORM
Setup
-
Install the plugin using Composer:
-
Load the plugin in your application's
src/Application.php
: -
Add the search element to your view inside search form:
-
Initialize the Vue.js application:
Filters
Filters are the user interface elements that allow users to interact with the search. The plugin provides several built-in filter types for different data scenarios:
-
BooleanFilter: For Yes/No selections
-
DateFilter: For date-based filtering
-
StringFilter: For text-based searches
-
NumericFilter: For number-based filtering
-
LookupFilter: For autocomplete-based filtering
-
MultipleFilter: For selecting multiple values
-
SelectFilter: For dropdown selections
Criteria Purpose and Usage
Criteria are the building blocks that define how filters operate on your data. They handle the actual query building and data filtering. Key criterion types include:
- AndCriterion: Combines multiple criteria with AND logic
- BoolCriterion: Handles boolean comparisons
- StringCriterion: Handles string matching
- DateCriterion: Manages date comparisons
- DateTimeCriterion: Manages datetime comparisons
- InCriterion: Handles in comparisons
- LookupCriterion: Handles lookup comparisons
- NumericCriterion: Handles numeric comparisons
- OrCriterion: Combines multiple criteria with OR logic
Example of combining criteria:
Filters Usage
Let's walk through a complete example of setting up filters in a controller. This implementation demonstrates how to integrate search filters with our htmx application from previous articles.
Controller Setup
First, we need to initialize the PlumSearch filter component in our controller:
Implementing Search Filters
Here's a complete example of setting up filters in the controller's list method:
Table Configuration
Enable the filterable behavior in your table class:
View Implementation
In your view template, add the necessary assets and initialize the search filter:
JavaScript Integration
Finally, add the necessary JavaScript to handle the search filter initialization and htmx interactions:
The combination of CakePHP's search filter plugin with htmx provides a modern, responsive search experience with minimal JavaScript code.
Frontend Vue App Widgets
The plugin provides several Vue.js widgets for different filter types:
- SearchInput: For basic text input
- SearchInputNumericRange: For basic text input
- SearchSelect, Select2, SearchSelectMultiple: For dropdown selections
- SearchInputDate, SearchInputDateRange: For date picking
- SearchInputDateTime, SearchInputDateTimeRange: For datetime picking
- SearchLookupInput: For autocomplete functionality
- SearchMultiple: For multiple selections
- SearchSelectMultiple: For multiple selections
These widgets are automatically selected based on the filter type you define in your controller.
Custom Filters and Custom Widgets
The CakeDC Search Filter plugin can be extended with custom filters and widgets. Let's walk through creating a custom range filter that allows users to search between two numeric values.
Custom Filter Class
First, create a custom filter class that extends the AbstractFilter:
Custom Criterion Implementation
Create a criterion class to handle the range filtering logic:
Controller Integration
Update your controller to use the custom range filter:
Custom Vue.js Widget
Create a custom Vue.js component for the range input. It consists of two parts, widget template and widget component:
Component Registration
Register the custom widget in the Vue.js app. Implement the register
function to register the custom widget, and the setupTable
function to setup the table after a htmx request.
This implementation creates a custom range filter that allows users to search for records within a specified numeric range. The filter consists of three main components:
- A custom filter class (
RangeFilter
) that defines the filter type and conditions - A custom criterion class (
RangeCriterion
) that implements the filtering logic - A Vue.js component (
RangeInput
) that provides the user interface for entering range values - A registration function to register the custom widget, and the
setupTable
function to setup the table after a htmx request.
Demo Project for Article
The examples used in this article are located at https://github.com/skie/cakephp-htmx/tree/4.0.0 and available for testing.
Conclusion
The CakeDC Search Filter plugin provides a robust solution for implementing advanced search functionality in CakePHP applications. Its combination of flexible backend filtering and modern frontend components makes it an excellent choice for any CakePHP project. The plugin's extensibility allows for customization to meet specific project needs, while its built-in features cover most common search scenarios out of the box.
Whether you need simple text searches or complex multi-criteria filtering, the Search Filter plugin offers the tools to build user-friendly search interfaces.
This article is part of the CakeDC Advent Calendar 2024 (December 21th 2024)