diff --git a/app/Grid/SpeakerGrid.php b/app/Grid/SpeakerGrid.php index 6384256b..5efb36a9 100644 --- a/app/Grid/SpeakerGrid.php +++ b/app/Grid/SpeakerGrid.php @@ -26,38 +26,31 @@ use Sylius\Bundle\GridBundle\Builder\Filter\StringFilter; use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; -use Sylius\Bundle\GridBundle\Grid\ResourceAwareGridInterface; +use Sylius\Component\Grid\Attribute\AsGrid; -final class SpeakerGrid extends AbstractGrid implements ResourceAwareGridInterface +#[AsGrid( + resourceClass: Speaker::class, + name: 'app_speaker', +)] +final class SpeakerGrid extends AbstractGrid { - public static function getName(): string - { - return 'app_speaker'; - } - - public function buildGrid(GridBuilderInterface $gridBuilder): void + public function __invoke(GridBuilderInterface $gridBuilder): void { $gridBuilder - ->addFilter( + ->addOrderBy('firstName', 'asc') + ->withFilters( StringFilter::create('search', ['firstName', 'lastName', 'companyName']) ->setLabel('sylius.ui.search'), ) - ->addOrderBy('firstName', 'asc') - ->addField( + ->withFields( TwigField::create('avatar', 'speaker/grid/field/image.html.twig') ->setPath('.'), - ) - ->addField( StringField::create('firstName') ->setLabel('app.ui.first_name') ->setSortable(true), - ) - ->addField( StringField::create('lastName') ->setLabel('app.ui.last_name') ->setSortable(true), - ) - ->addField( StringField::create('companyName') ->setLabel('app.ui.company_name') ->setSortable(true), @@ -93,9 +86,4 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void ) ; } - - public function getResourceClass(): string - { - return Speaker::class; - } } diff --git a/docs/.gitbook/assets/action-groups.png b/docs/.gitbook/assets/action-groups.png new file mode 100644 index 00000000..67fce5a1 Binary files /dev/null and b/docs/.gitbook/assets/action-groups.png differ diff --git a/docs/grid/actions.md b/docs/grid/actions.md index dbeef042..e7808d0d 100644 --- a/docs/grid/actions.md +++ b/docs/grid/actions.md @@ -1,5 +1,183 @@ # Actions +## Action groups + +
+ +
Action groups
+ +
+ +Actions are classified into four types: + +- main +- item +- subitem +- bulk + +## Built-in actions + +The grid package provides the following built-in actions: + +| Name | Usage | +|------------------|------------| +| create | main | +| update | item, bulk | +| delete | item, bulk | +| show | item | +| apply_transition | item, bulk | + +### Create + +```php +addActionGroup( + MainActionGroup::create( + // Add the "create" action into the "main" action group + CreateAction::create(), + ), + ) + ; + } +} +``` + +### Update + +```php +addActionGroup( + ItemActionGroup::create( + // Add the "update" action into the "item" action group + UpdateAction::create(), + ), + ) + ; + } +} +``` + +### Delete + +```php +addActionGroup( + ItemActionGroup::create( + // Add the "delete" action into the "item" action group + DeleteAction::create(), + ), + ) + ->addActionGroup( + BulkActionGroup::create( + // Add the "delete" action into the "bulk" action group + DeleteAction::create(), + ), + ) + ; + } +} +``` + +### Show + +```php +addActionGroup( + ItemActionGroup::create( + // Add the "show" action into the "item" action group + ShowAction::create(), + ), + ) + ; + } +} +``` + ## Creating a custom Action There are certain cases when built-in action types are not enough. @@ -11,6 +189,7 @@ In this example, we will specify the action button's icon to be `mail` and its colour to be `purple` inside the template. {% code title="@App/Grid/Action/contactSupplier.html.twig" lineNumbers="true" %} + ```twig {% import '@SyliusUi/Macro/buttons.html.twig' as buttons %} @@ -18,18 +197,21 @@ colour to be `purple` inside the template. {{ buttons.default(path, action.label, null, 'mail', 'purple') }} ``` + {% endcode %} Now configure the new action's template like below in `config/packages/sylius_grid.yaml`: {% code title="config/packages/sylius_grid.yaml" lineNumbers="true" %} + ```yaml sylius_grid: templates: action: contactSupplier: "@App/Grid/Action/contactSupplier.html.twig" ``` + {% endcode %} From now on, you can use your new action type in the grid configuration! @@ -40,6 +222,7 @@ suppliers, then you can configure the grid action: {% tabs %} {% tab title="YAML" %} {% code title="config/packages/sylius_grid.yaml" lineNumbers="true" %} + ```yaml sylius_grid: grids: @@ -59,11 +242,13 @@ sylius_grid: parameters: id: resource.id ``` + {% endcode %} {% endtab %} {% tab title="PHP" %} {% code title="config/packages/sylius_grid.php" lineNumbers="true" %} + ```php