PoC Grid component

app/Grid/Renderer/TwigBulkActionGridRenderer.php

@@ -0,0 +1,58 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace App\Grid\Renderer;
+
+use Sylius\Bundle\ResourceBundle\Grid\Parser\OptionsParserInterface;
+use Sylius\Component\Grid\Definition\Action;
+use Sylius\Component\Grid\Renderer\BulkActionGridRendererInterface;
+use Sylius\Component\Grid\View\GridViewInterface;
+use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Twig\Environment;
+
+#[AsDecorator(decorates: 'sylius.custom_bulk_action_grid_renderer.twig')]
+final class TwigBulkActionGridRenderer implements BulkActionGridRendererInterface
+{
+    public function __construct(
+        private Environment $twig,
+        private OptionsParserInterface $optionsParser,
+        #[Autowire(param: 'sylius.grid.templates.bulk_action')]
+        private array $bulkActionTemplates = [],
+        private readonly ?RequestStack $requestStack = null,
+    ) {
+    }
+
+    public function renderBulkAction(GridViewInterface $gridView, Action $bulkAction, $data = null): string
+    {
+        $type = $bulkAction->getType();
+        if (!isset($this->bulkActionTemplates[$type])) {
+            throw new \InvalidArgumentException(sprintf('Missing template for bulk action type "%s".', $type));
+        }
+
+        $options = $this->optionsParser->parseOptions(
+            $bulkAction->getOptions(),
+            $this->requestStack?->getCurrentRequest() ?? new Request(),
+            $data,
+        );
+
+        return $this->twig->render($this->bulkActionTemplates[$type], [
+            'grid' => $gridView,
+            'action' => $bulkAction,
+            'data' => $data,
+            'options' => $options,
+        ]);
+    }
+}

app/Grid/Renderer/TwigGridRenderer.php

@@ -0,0 +1,94 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace App\Grid\Renderer;
+
+use Sylius\Bundle\ResourceBundle\Grid\Parser\OptionsParserInterface;
+use Sylius\Component\Grid\Definition\Action;
+use Sylius\Component\Grid\Definition\Field;
+use Sylius\Component\Grid\Definition\Filter;
+use Sylius\Component\Grid\Renderer\GridRendererInterface;
+use Sylius\Component\Grid\View\GridViewInterface;
+use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Twig\Environment;
+
+#[AsDecorator(decorates: 'sylius.custom_grid_renderer.twig')]
+final class TwigGridRenderer implements GridRendererInterface
+{
+    private GridRendererInterface $gridRenderer;
+
+    private Environment $twig;
+
+    private OptionsParserInterface $optionsParser;
+
+    private array $actionTemplates;
+
+    public function __construct(
+        GridRendererInterface $gridRenderer,
+        Environment $twig,
+        OptionsParserInterface $optionsParser,
+        #[Autowire(param: 'sylius.grid.templates.action')]
+        array $actionTemplates = [],
+        private readonly ?RequestStack $requestStack = null,
+    ) {
+        $this->gridRenderer = $gridRenderer;
+        $this->twig = $twig;
+        $this->optionsParser = $optionsParser;
+        $this->actionTemplates = $actionTemplates;
+    }
+
+    public function render(GridViewInterface $gridView, ?string $template = null): string
+    {
+        return $this->gridRenderer->render($gridView, $template);
+    }
+
+    /**
+     * @param mixed $data
+     */
+    public function renderField(GridViewInterface $gridView, Field $field, $data): string
+    {
+        return $this->gridRenderer->renderField($gridView, $field, $data);
+    }
+
+    /**
+     * @param mixed $data
+     */
+    public function renderAction(GridViewInterface $gridView, Action $action, $data = null): string
+    {
+        $type = $action->getType();
+        if (!isset($this->actionTemplates[$type])) {
+            throw new \InvalidArgumentException(sprintf('Missing template for action type "%s".', $type));
+        }
+
+        $options = $this->optionsParser->parseOptions(
+            $action->getOptions(),
+            $this->requestStack?->getCurrentRequest() ?? new Request(),
+            $data,
+        );
+
+        return $this->twig->render($this->actionTemplates[$type], [
+            'grid' => $gridView,
+            'action' => $action,
+            'data' => $data,
+            'options' => $options,
+        ]);
+    }
+
+    public function renderFilter(GridViewInterface $gridView, Filter $filter): string
+    {
+        return $this->gridRenderer->renderFilter($gridView, $filter);
+    }
+}

app/Grid/SpeakerGrid.php

@@ -38,6 +38,7 @@ public static function getName(): string
     public function buildGrid(GridBuilderInterface $gridBuilder): void
     {
         $gridBuilder
+            ->setLimits([10, 25, 50])
             ->addFilter(
                 StringFilter::create('search', ['firstName', 'lastName', 'companyName'])
                     ->setLabel('sylius.ui.search'),
@@ -64,7 +65,12 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
             )
             ->addActionGroup(
                 MainActionGroup::create(
-                    CreateAction::create(),
+                    CreateAction::create()
+                        ->setOptions([
+                            'link' => [
+                                'route' => 'app_admin_speaker_create',
+                            ],
+                        ]),
                 ),
             )
             ->addActionGroup(
@@ -82,15 +88,23 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
                                 ],
                             ],
                         ]),
-                    UpdateAction::create(),
-                    DeleteAction::create(),
-                ),
-            )
-            ->addActionGroup(
-                BulkActionGroup::create(
-                    DeleteAction::create(),
+                    UpdateAction::create()
+                        ->setOptions([
+                            'link' => [
+                                'route' => 'app_admin_speaker_update',
+                                'parameters' => [
+                                    'id' => 'resource.id',
+                                ],
+                            ],
+                        ]),
+//                    DeleteAction::create(),
                 ),
             )
+//            ->addActionGroup(
+//                BulkActionGroup::create(
+//                    DeleteAction::create(),
+//                ),
+//            )
         ;
     }
 

app/Grid/TalkGrid.php

@@ -92,17 +92,17 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
                     CreateAction::create(),
                 ),
             )
-            ->addActionGroup(
-                ItemActionGroup::create(
-                    UpdateAction::create(),
-                    DeleteAction::create(),
-                ),
-            )
-            ->addActionGroup(
-                BulkActionGroup::create(
-                    DeleteAction::create(),
-                ),
-            )
+//            ->addActionGroup(
+//                ItemActionGroup::create(
+//                    UpdateAction::create(),
+//                    DeleteAction::create(),
+//                ),
+//            )
+//            ->addActionGroup(
+//                BulkActionGroup::create(
+//                    DeleteAction::create(),
+//                ),
+//            )
         ;
     }
 

app/Twig/Component/Grid/DataTableComponent.php

@@ -0,0 +1,137 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace App\Twig\Component\Grid;
+
+use Pagerfanta\PagerfantaInterface;
+use Sylius\Component\Grid\Parameters;
+use Sylius\Component\Grid\Provider\ChainProvider;
+use Sylius\Component\Grid\Provider\GridProviderInterface;
+use Sylius\Component\Grid\View\GridViewFactoryInterface;
+use Sylius\Component\Grid\View\GridViewInterface;
+use Sylius\TwigHooks\Twig\Component\HookableComponentTrait;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent(
+    name: 'sylius_grid_data_table',
+    template: '@SyliusBootstrapAdminUi/shared/crud/index/content/grid/data_table.html.twig',
+)]
+final class DataTableComponent
+{
+    use DefaultActionTrait;
+    use HookableComponentTrait;
+
+    #[LiveProp(writable: true)]
+    public ?string $grid = null;
+
+    #[LiveProp(writable: true)]
+    public int $page;
+
+    /** @var array<string, mixed>|null */
+    #[LiveProp(writable: true)]
+    public ?array $criteria = null;
+
+    /** @var array<string, string>|null */
+    #[LiveProp(writable: true)]
+    public ?array $sorting = null;
+
+    #[LiveProp(writable: true)]
+    public ?int $limit = null;
+
+    #[LiveProp(writable: true)]
+    public bool $pushOnBrowserHistory = true;
+
+    private ?Request $request;
+
+    public function __construct(
+        #[Autowire(service: ChainProvider::class)]
+        private readonly GridProviderInterface $gridProvider,
+        private readonly GridViewFactoryInterface $gridViewFactory,
+    ) {
+    }
+
+    public function getResources(): GridViewInterface
+    {
+        if (null === $this->grid) {
+            throw new \RuntimeException('No Grid has been passed to the component.');
+        }
+
+        $gridDefinition = $this->gridProvider->get($this->grid);
+
+        $config = ['page' => $this->page];
+
+        if (null !== $this->criteria) {
+            $config['criteria'] = $this->criteria;
+        }
+
+        if (null !== $this->sorting) {
+            $config['sorting'] = $this->sorting;
+        }
+
+        $gridView = $this->gridViewFactory->create(
+            $gridDefinition,
+            new Parameters($config),
+        );
+
+        $data = $gridView->getData();
+
+        if ($data instanceof PagerfantaInterface) {
+            $data->setCurrentPage($this->page);
+
+            if (null !== $this->limit) {
+                $data->setMaxPerPage($this->limit);
+            }
+        }
+
+        return $gridView;
+    }
+
+    #[LiveAction]
+    public function sortBy(#[LiveArg] string $field, #[LiveArg] string $order): void
+    {
+        $this->sorting = [$field => $order];
+    }
+
+    #[LiveAction]
+    public function updateLimit(#[LiveArg] int $limit): void
+    {
+        $this->page = 1;
+        $this->criteria = null;
+        $this->sorting = null;
+        $this->limit = $limit;
+    }
+
+    #[LiveAction]
+    public function changePage(#[LiveArg] int $page): void
+    {
+        $this->page = $page;
+    }
+
+    #[LiveAction]
+    public function previousPage(): void
+    {
+        --$this->page;
+    }
+
+    #[LiveAction]
+    public function nextPage(): void
+    {
+        ++$this->page;
+    }
+}

assets/app.js

@@ -1 +1,2 @@
+import './bootstrap.js';
 import './scripts/statistics_chart.js';

assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -5,9 +5,9 @@
                 "enabled": true,
                 "fetch": "eager",
                 "autoimport": {
-                    "tom-select/dist/css/tom-select.default.css": true,
+                    "tom-select/dist/css/tom-select.default.css": false,
                     "tom-select/dist/css/tom-select.bootstrap4.css": false,
-                    "tom-select/dist/css/tom-select.bootstrap5.css": false
+                    "tom-select/dist/css/tom-select.bootstrap5.css": true
                 }
             }
         },