diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index a7c1e142..5b3d8790 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -11,6 +11,7 @@ * [Customizing the menu](cookbook/admin_panel/menu.md) * [Configuring the security access](cookbook/admin_panel/security.md) * [Customizing the page titles](cookbook/admin_panel/page_titles.md) + * [Using autocompletes](cookbook/admin_panel/autocompletes.md) * [How to use in a DDD architecture](cookbook/ddd_architecture.md) * [Architecture overview](cookbook/ddd_architecture/overview.md) * [Resource configuration](cookbook/ddd_architecture/resource_configuration.md) diff --git a/docs/cookbook/admin_panel.md b/docs/cookbook/admin_panel.md index 8e569649..bc912f88 100644 --- a/docs/cookbook/admin_panel.md +++ b/docs/cookbook/admin_panel.md @@ -5,3 +5,4 @@ * [Customizing the menu](admin_panel/menu.md) * [Configuring the security access](admin_panel/security.md) * [Customizing the page titles](admin_panel/page_titles.md) +* [Using autocompletes](admin_panel/autocompletes.md) diff --git a/docs/cookbook/admin_panel/autocompletes.md b/docs/cookbook/admin_panel/autocompletes.md new file mode 100644 index 00000000..68b51dc8 --- /dev/null +++ b/docs/cookbook/admin_panel/autocompletes.md @@ -0,0 +1,166 @@ +# Using autocompletes + +[SyliusBootstrapAdminUi package](../../bootstrap-admin-ui/getting-started.md) uses [Symfony UX](https://ux.symfony.com/) under the hood. +Thus, UX autocomplete is already setup and configured in your admin panel. + +## Configure entity autocomplete route for admin section + +{% tabs %} +{% tab title="YAML" %} +{% code lineNumbers="true" %} +```yaml +# config/routes/ux_autocomplete.yaml +# ... +ux_entity_autocomplete_admin: + path: '/admin/autocomplete/{alias}' + controller: 'ux.autocomplete.entity_autocomplete_controller' +``` +{% endcode %} +{% endtab %} + +{% tab title="PHP" %} +{% code lineNumbers="true" %} +```php +add('ux_entity_autocomplete_admin', '/admin/autocomplete/{alias}') + ->controller('ux.autocomplete.entity_autocomplete_controller') + ; +}; +``` +{% endcode %} +{% endtab %} +{% endtabs %} + +Now you have a new ajax route `ux_entity_autocomplete_admin` for your autocompletes. + +## Add a grid filter with entity autocomplete + +First, you need to create the [entity autocomplete field](https://symfony.com/bundles/ux-autocomplete/current/index.html#usage-in-a-form-with-ajax). + +```php +setDefaults([ + 'class' => Speaker::class, + 'choice_label' => 'fullName', + ]); + } + + public function getParent(): string + { + return BaseEntityAutocompleteType::class; + } +} +``` + +Then you need to create the grid filter. + +```php +entityFilter->apply($dataSource, $name, $data, $options); + } + + public static function getFormType(): string + { + return SpeakerAutocompleteType::class; + } + + public static function getType(): string + { + return self::class; // it will allow to use FQCN instead of a string key. + } +} +``` + +We also need to configure the Twig template for our new grid filter. + +```yaml +# config/packages/sylius_grid.yaml +sylius_grid: + # ... + templates: + filter: + 'App\Grid\Filter\SpeakerFilter': '@SyliusBootstrapAdminUi/shared/grid/filter/entity.html.twig' + +``` + +Now our new grid filtered is configured, we can use it in a grid. + +```php +addFilter( + Filter::create(name: 'speaker', type: SpeakerFilter::class) // We use the new Speaker filter we just created. + ->setLabel('app.ui.speaker') + ->setOptions(['fields' => ['speakers.id']]), + ) + // ... + ; + } + + // ... +} +```