[PoC] Live component data-table

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 readonly Environment $twig,
+        private readonly OptionsParserInterface $optionsParser,
+        #[Autowire(param: 'sylius.grid.templates.bulk_action')]
+        private array $bulkActionTemplates = [],
+        private readonly RequestStack|null $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,79 @@
+<?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
+{
+    public function __construct(
+        private readonly GridRendererInterface $gridRenderer,
+        private readonly Environment $twig,
+        private readonly OptionsParserInterface $optionsParser,
+        #[Autowire(param: 'sylius.grid.templates.action')]
+        private array $actionTemplates = [],
+        private readonly RequestStack|null $requestStack = null,
+    ) {
+    }
+
+    public function render(GridViewInterface $gridView, string|null $template = null): string
+    {
+        return $this->gridRenderer->render($gridView, $template);
+    }
+
+    public function renderField(GridViewInterface $gridView, Field $field, $data): string
+    {
+        return $this->gridRenderer->renderField($gridView, $field, $data);
+    }
+
+    public function renderAction(GridViewInterface $gridView, Action $action, $data = null): string
+    {
+        $type = $action->getType();
+
+        $template = $action->getOptions()['template'] ?? $this->actionTemplates[$type] ?? null;
+
+        if (null === $template) {
+            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($template, [
+            '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'),
@@ -82,8 +83,23 @@ public function buildGrid(GridBuilderInterface $gridBuilder): void
                                 ],
                             ],
                         ]),
-                    UpdateAction::create(),
-                    DeleteAction::create(),
+                    UpdateAction::create()
+                        ->setOptions([
+                            'link' => [
+                                'route' => 'app_admin_speaker_update',
+                                'parameters' => [
+                                    'id' => 'resource.id',
+                                ],
+                            ],
+                        ]),
+                    DeleteAction::create()->setOptions([
+                        'link' => [
+                            'route' => 'app_admin_speaker_delete',
+                            'parameters' => [
+                                'id' => 'resource.id',
+                            ],
+                        ],
+                    ]),
                 ),
             )
             ->addActionGroup(

app/Twig/Component/SpeakerDataTableComponent.php

@@ -0,0 +1,37 @@
+<?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;
+
+use App\Grid\SpeakerGrid;
+use Sylius\TwigComponentGrid\Twig\Component\ComponentWithDataTableTrait;
+use Sylius\TwigHooks\LiveComponent\HookableLiveComponentTrait;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent(
+    name: 'admin_speaker_grid',
+    template: '@SyliusBootstrapAdminUi/shared/components/grid/data_table.html.twig',
+    route: 'sylius_admin_ui_live_component',
+)]
+class SpeakerDataTableComponent
+{
+    use DefaultActionTrait;
+    use HookableLiveComponentTrait;
+    use ComponentWithDataTableTrait;
+
+    protected function getGrid(): string
+    {
+        return SpeakerGrid::class;
+    }
+}

composer.json

@@ -72,6 +72,7 @@
         "psr-4": {
             "Sylius\\AdminUi\\": "src/AdminUi/src/",
             "Sylius\\BootstrapAdminUi\\": "src/BootstrapAdminUi/src/",
+            "Sylius\\TwigComponentGrid\\": "src/TwigComponentGrid/src/",
             "Sylius\\TwigExtra\\": "src/TwigExtra/src/",
             "Sylius\\TwigHooks\\": "src/TwigHooks/src/",
             "Sylius\\UiTranslations\\": "src/UiTranslations/src/"
@@ -95,6 +96,7 @@
     "replace": {
         "sylius/admin-ui": "self.version",
         "sylius/bootstrap-admin-ui": "self.version",
+        "sylius/twig-component-grid": "self.version",
         "sylius/twig-extra": "self.version",
         "sylius/twig-hooks": "self.version",
         "sylius/ui-translations": "self.version"
@@ -109,7 +111,7 @@
     },
     "extra": {
         "symfony": {
-            "require": "7.1.*"
+            "require": "7.2.*"
         }
     },
     "scripts": {

config/bundles.php

@@ -9,6 +9,7 @@
     Sylius\AdminUi\Symfony\SyliusAdminUiBundle::class => ['all' => true],
     Sylius\UiTranslations\Symfony\SyliusUiTranslationsBundle::class => ['all' => true],
     Sylius\BootstrapAdminUi\Symfony\SyliusBootstrapAdminUiBundle::class => ['all' => true],
+    Sylius\TwigComponentGrid\Symfony\SyliusTwigComponentGridBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],

config/sylius/twig_hooks/speaker/index.php

@@ -13,6 +13,9 @@
 
 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
 
+use App\Twig\Component\SpeakerDataTableComponent;
+use App\Twig\Component\SpeakerGridComponent;
+
 return static function (ContainerConfigurator $container): void {
     $container->extension('sylius_twig_hooks', [
         'hooks' => [
@@ -26,6 +29,18 @@
                     ],
                 ],
             ],
+
+            'sylius_admin.speaker.index.content.grid' => [
+                'data_table' => [
+                    'component' => SpeakerDataTableComponent::class,
+                    'props' => [
+                        'page' => '@=_context.page',
+                        'limit' => '@=_context.limit',
+                        'criteria' => '@=_context.criteria',
+                        'sorting' => '@=_context.sorting',
+                    ],
+                ],
+            ],
         ],
     ]);
 };

importmap.php

@@ -45,4 +45,12 @@
     '@symfony/ux-live-component' => [
         'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js',
     ],
+    'tom-select/dist/css/tom-select.bootstrap4.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
+    'tom-select/dist/css/tom-select.bootstrap5.css' => [
+        'version' => '2.4.3',
+        'type' => 'css',
+    ],
 ];

src/AdminUi/config/routes.php

@@ -32,4 +32,10 @@
             'template' => '@SyliusAdminUi/dashboard/index.html.twig',
         ])
     ;
+
+    $routes->add('sylius_admin_ui_live_component', '/_components/{_live_component}/{_live_action}')
+        ->defaults([
+            '_live_action' => 'get',
+        ])
+    ;
 };

src/BootstrapAdminUi/assets/styles/_body.scss

@@ -40,6 +40,13 @@ a.link-reset {
     text-decoration: none;
 }
 
+button.link-reset {
+    border: none;
+    background-color: transparent;
+    text-transform: inherit;
+    font-weight: inherit;
+}
+
 .btn-collapse {
     &.collapsed {
         .icon-chevron-right {

src/BootstrapAdminUi/templates/shared/components/grid/data_table.html.twig

@@ -0,0 +1,55 @@
+{% import '@SyliusBootstrapAdminUi/shared/helper/table.html.twig' as table %}
+{% import '@SyliusBootstrapAdminUi/shared/helper/pagination.html.twig' as pagination %}
+
+{% set resources = hookable_metadata.context.resources|default(this.resources|default(null)) %}
+{% set data = resources.data|default([]) %}
+{% set definition = resources.definition|default(null) %}
+{% set live = attributes is defined %}
+
+<div {{ attributes }}>
+    {% if data|length > 0 %}
+        <div class="card">
+            <div class="card-body border-bottom py-3">
+                <div class="d-flex">
+                    {% if data|length > 0 and definition.actionGroups.bulk is defined and definition.getEnabledActions('bulk')|length > 0 %}
+                        <div class="sylius-grid-nav__bulk">
+                            {% for action in definition.getEnabledActions('bulk') %}
+                                {{ sylius_grid_render_bulk_action(resources, action, null) }}
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                    <div class="ms-auto">
+                        {{ pagination.number_of_results_selector(data, definition.limits, live) }}
+                    </div>
+                </div>
+            </div>
+            <div data-loading>
+                <div class="sylius-loader">
+                    <img src="{{ asset('bundles/syliusbootstrapadminui/images/loader.svg') }}" alt="Loading"/>
+                </div>
+            </div>
+            <div class="table-responsive">
+                <table class="table card-table table-vcenter datatable" {{ sylius_test_html_attribute('grid-table') }}>
+                    <thead>
+                    <tr>
+                        {{ table.headers(resources, resources.definition, app.request.attributes, live) }}
+                    </tr>
+                    </thead>
+                    <tbody {{ sylius_test_html_attribute('grid-table-body') }}>
+                    {% for row in resources.data %}
+                        {{ table.row(resources, resources.definition, row, columns) }}
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            <div class="card-footer d-flex align-items-center">
+                <div class="text-muted">
+                    {{ pagination.results_count(data) }}
+                </div>
+                <div class="ms-auto">
+                    {{ pagination.simple(data, live) }}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+</div>

src/BootstrapAdminUi/templates/shared/crud/index/content/grid.html.twig

@@ -1,3 +1,10 @@
+{% set grid_definition = hookable_metadata.context.resources.definition|default(null) %}
+{% set grid = grid_definition.code|default(null) %}
+{% set page = app.request.query.getInt('page', 1) %}
+{% set limit = app.request.query.has('limit') ? app.request.query.getInt('limit') : grid_definition.limits|first|default(null) %}
+{% set criteria = app.request.query.has('criteria') ? app.request.query.all('criteria') : null %}
+{% set sorting = app.request.query.has('sorting') ? app.request.query.all('sorting') : null %}
+
 <div class="page-body">
     <div class="container-xl">
         {% hook 'grid' %}