Convert the Inventory index page to sylius/twig-hooks

src/Sylius/Bundle/AdminBundle/Resources/config/app/template_events.yaml

@@ -4,6 +4,7 @@
 imports:
     - { resource: 'template_events/*.yaml' }
     - { resource: 'template_events/**/*.yaml' }
+    - { resource: 'twig_hooks/**/*.yaml' }
 
 sylius_ui:
     events:

src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/inventory/index.yaml

@@ -0,0 +1,13 @@
+twig_hooks:
+    hooks:
+        'sylius_admin.inventory.index.content.header':
+            breadcrumbs:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Header/_breadcrumbs.html.twig'
+                configuration:
+                    title: 'sylius.ui.inventory'
+
+        'sylius_admin.inventory.index.content.header.title_block':
+            title:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/Header/TitleBlock/_title.html.twig'
+                configuration:
+                    title: 'sylius.ui.inventory'

src/Sylius/Bundle/AdminBundle/Resources/config/app/twig_hooks/shared/crud/index.yaml

@@ -0,0 +1,47 @@
+twig_hooks:
+    hooks:
+        'sylius_admin.shared.crud.index':
+            sidebar:
+                template: '@SyliusAdmin/Shared/Crud/Common/_sidebar.html.twig'
+            navbar:
+                template: '@SyliusAdmin/Shared/Crud/Common/_navbar.html.twig'
+            content:
+                template: '@SyliusAdmin/Shared/Crud/Common/_content.html.twig'
+
+        'sylius_admin.shared.crud.index.content':
+            flashes:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/_flashes.html.twig'
+            header:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/_header.html.twig'
+            grid:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/_grid.html.twig'
+
+        'sylius_admin.shared.crud.index.content.header':
+            breadcrumbs:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Header/_breadcrumbs.html.twig'
+            title_block:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/Header/_titleBlock.html.twig'
+
+        'sylius_admin.shared.crud.index.content.header.title_block':
+            title:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/Header/TitleBlock/_title.html.twig'
+            actions:
+                template: '@SyliusAdmin/Shared/Crud/Common/Content/Header/TitleBlock/_actions.html.twig'
+        
+        'sylius_admin.shared.crud.index.content.grid':
+            filters:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/_filters.html.twig'
+            data_table:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/_dataTable.html.twig'
+            no_data_block:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/_noResults.html.twig'
+
+        'sylius_admin.shared.crud.index.content.grid.no_results':
+            image:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/NoResults/_image.html.twig'
+            title:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/NoResults/_title.html.twig'
+            subtitle:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/NoResults/_subtitle.html.twig'
+            action:
+                template: '@SyliusAdmin/Shared/Crud/Index/Content/Grid/NoResults/_action.html.twig'

src/Sylius/Bundle/AdminBundle/Resources/config/routing/inventory.yml

@@ -4,13 +4,7 @@ sylius_admin_inventory_index:
     defaults:
         _controller: sylius.controller.product_variant::indexAction
         _sylius:
-            template: "@SyliusAdmin/Shared/Crud/index.html.twig"
+            template: "@SyliusAdmin/Inventory/Crud/index.html.twig"
             grid: sylius_admin_inventory
             section: admin
             permission: true
-            vars:
-                icon: history
-                templates:
-                    breadcrumb: "@SyliusAdmin/Inventory/Index/_breadcrumb.html.twig"
-                header: sylius.ui.inventory
-                subheader: sylius.ui.manage_inventory

src/Sylius/Bundle/AdminBundle/Resources/views/Inventory/Crud/index.html.twig

@@ -0,0 +1,3 @@
+{% extends '@SyliusAdmin/Shared/Crud/index.html.twig'  %}
+
+{% set resource_name = 'inventory' %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Common/Content/Header/TitleBlock/_actions.html.twig

@@ -1,5 +1,7 @@
 {% import '@SyliusAdmin/Shared/Helper/dropdown.html.twig' as _dropdown %}
 
+{% set resources = hookable_data.resources %}
+
 <div class="col-12 col-md-auto ms-auto d-print-none">
     {% if resources.definition.actionGroups.main is defined %}
         {% for action in resources.definition.getEnabledActions('main') %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Common/Content/Header/TitleBlock/_title.html.twig

@@ -1,6 +1,8 @@
 {% import '@SyliusAdmin/Shared/Helper/header.html.twig' as _header %}
 
-{% set header = configuration.vars.header|default(metadata.applicationName~'.ui.'~metadata.pluralName) %}
+{% set metadata = hookable_data.metadata %}
+
+{% set header = hookable_configuration.title|default(metadata.applicationName~'.ui.'~metadata.pluralName) %}
 
 <div class="col-12 col-md-6">
     <div class="d-md-flex gap-2 align-items-center">

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Common/Content/Header/_titleBlock.html.twig

@@ -1,12 +1,11 @@
-{% set main_event = twig_event_name(_context.main_event, 'title_block') %}
+{% set main_hook = hook_name(hookable_data.parent_main_hook, 'title_block') %}
-{% set fallback_event = twig_event_name(_context.fallback_event|default(null), 'title_block') %}
+{% set fallback_hook = hook_name(hookable_data.parent_fallback_hook, 'title_block') %}
 
 <div class="row g-2 mt-2">
-    {{ twig_event(
+    {% hook [main_hook, fallback_hook] with {
-        [main_event, fallback_event],
+        parent_main_hook: main_hook,
-        _context|merge({
+        parent_fallback_hook: fallback_hook,
-            main_event: main_event,
+        metadata: hookable_data.metadata,
-            fallback_event: fallback_event,
+        resources: hookable_data.resources,
-        })
+    } %}
-    ) }}
 </div>

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Common/Content/_header.html.twig

@@ -1,14 +1,13 @@
-{% set main_event = _context.main_event ~ '.header' %}
+{% set main_hook = hook_name(hookable_data.parent_main_hook, 'header') %}
-{% set fallback_event = _context.fallback_event ~ '.header' %}
+{% set fallback_hook = hook_name(hookable_data.parent_fallback_hook, 'header') %}
 
-<div class="page-header" {% if _context.sticky_header|default(true) %}data-sticky-header{% endif %}>
+<div class="page-header" {% if hookable_configuration.sticky_header|default(true) %}data-sticky-header{% endif %}>
     <div class="container-xl">
-        {{ twig_event(
+        {% hook [main_hook, fallback_hook] with {
-            [main_event, fallback_event],
+            parent_main_hook: main_hook,
-            _context|merge({
+            parent_fallback_hook: fallback_hook,
-                main_event: main_event,
+            metadata: hookable_data.metadata,
-                fallback_event: fallback_event,
+            resources: hookable_data.resources,
-            })
+        } %}
-        ) }}
     </div>
 </div>

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Common/_content.html.twig

@@ -1,12 +1,9 @@
-{% set main_event = twig_event_name(_context.main_event, 'content') %}
+{% set main_hook = hook_name(hookable_data.parent_main_hook, 'content') %}
-{% set fallback_event = twig_event_name(_context.fallback_event|default(null), 'content') %}
+{% set fallback_hook = hook_name(hookable_data.parent_fallback_hook, 'content') %}
 
 <div class="page-wrapper">
-    {{ twig_event(
+    {% hook [main_hook, fallback_hook] with hookable_data|merge({
-        [main_event, fallback_event],
+        parent_main_hook: main_hook,
-        _context|merge({
+        parent_fallback_hook: fallback_hook,
-            main_event: main_event,
+    }) %}
-            fallback_event: fallback_event,
-        })
-    ) }}
 </div>

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Index/Content/Grid/_dataTable.html.twig

@@ -1,7 +1,7 @@
 {% import '@SyliusAdmin/Shared/Helper/table.html.twig' as _table %}
 {% import '@SyliusAdmin/Shared/Helper/pagination.html.twig' as _pagination %}
 
-{% set grid = _context.resources %}
+{% set grid = hookable_data.resources %}
 {% set data = grid.data %}
 {% set definition = grid.definition %}
 

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Index/Content/Grid/_filters.html.twig

@@ -1,6 +1,8 @@
 {% import "@SyliusAdmin/Shared/Helper/accordion.html.twig" as _accordion %}
 {% import "@SyliusAdmin/Shared/Helper/button.html.twig" as _button %}
 
+{% set resources = hookable_data.resources %}
+
 {% set path = path(app.request.attributes.get('_route'), app.request.attributes.all('_route_params')) %}
 {% set areCriteriaSet = app.request.query.has('criteria') %}
 

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Index/Content/Grid/_noResults.html.twig

@@ -1,16 +1,15 @@
-{% set main_event = _context.main_event ~ '.no_results' %}
+{% set main_hook = hook_name(hookable_data.parent_main_hook, 'no_results') %}
-{% set fallback_event = _context.fallback_event ~ '.no_results' %}
+{% set fallback_hook = hook_name(hookable_data.parent_fallback_hook, 'no_results') %}
+
+{% set resources = hookable_data.resources %}
 
 {% if resources.data|length == 0 %}
     <div class="card">
         <div class="empty">
-            {{ twig_event(
+            {% hook [main_hook, fallback_hook] with hookable_data|merge({
-                [main_event, fallback_event],
+                parent_main_hook: main_hook,
-                _context|merge({
+                parent_fallback_hook: fallback_hook,
-                    main_event: main_event,
+            }) %}
-                    fallback_event: fallback_event,
-                })
-            ) }}
         </div>
     </div>
 {% endif %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Index/Content/Header/_breadcrumbs.html.twig

@@ -1,6 +1,9 @@
 {% import '@SyliusAdmin/Shared/Helper/breadcrumbs.html.twig' as _breadcrumbs %}
 
+{% set metadata = hookable_data.metadata %}
+{% set title = hookable_configuration.title|default(metadata.applicationName~'.ui.'~metadata.pluralName) %}
+
 {{ _breadcrumbs.default([
     { 'name': 'Dashboard', 'url': path('sylius_admin_dashboard'), 'active': false },
-    { 'name': metadata.applicationName~'.ui.'~metadata.pluralName, 'active': true },
+    { 'name': title, 'active': true },
 ]) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/Index/Content/_grid.html.twig

@@ -1,14 +1,11 @@
-{% set main_event = main_event ~ '.grid' %}
+{% set main_hook = hook_name(hookable_data.parent_main_hook, 'grid') %}
-{% set fallback_event = fallback_event ~ '.grid' %}
+{% set fallback_hook = hook_name(hookable_data.parent_fallback_hook, 'grid') %}
 
 <div class="page-body">
     <div class="container-xl">
-        {{ twig_event(
+        {% hook [main_hook, fallback_hook] with hookable_data|merge({
-            [main_event, fallback_event],
+            parent_main_hook: main_hook,
-            _context|merge({
+            parent_fallback_hook: fallback_hook,
-                main_event: main_event,
+        }) %}
-                fallback_event: fallback_event,
-            })
-        ) }}
     </div>
 </div>

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Crud/index.html.twig

@@ -1,31 +1,27 @@
 {% extends '@SyliusAdmin/Shared/Layout/base.html.twig' %}
 
-{% set main_event = metadata.applicationName ~ '.admin.' ~ metadata.name ~ '.index' %}
+{% set fallback_hook = hook_name(_self) %}
-{% set fallback_event = metadata.applicationName ~ '.admin.' ~ 'index' %}
+{% set main_hook = fallback_hook|replace({'shared.crud': resource_name|default(metadata.name)}) %}
 
-{% set header = configuration.vars.header|default(metadata.applicationName ~ '.ui.' ~ metadata.pluralName) %}
+{% set header = hookable_configuration.header.text|default(metadata.applicationName ~ '.ui.' ~ metadata.pluralName) %}
 
 {% block title %}{{ header|trans }} | {{ parent() }}{% endblock %}
 
 {% block body %}
-    {{ twig_event(
+    {% hook [main_hook, fallback_hook] with {
-        [main_event, fallback_event],
+        parent_main_hook: main_hook,
-        {
+        parent_fallback_hook: fallback_hook,
-            main_event: main_event,
+        metadata,
-            fallback_event: fallback_event,
+        resources,
-            resources: _context.resources,
+    } %}
-            metadata: _context.metadata,
-            configuration: _context.configuration,
-        }
-    ) }}
 {% endblock %}
 
 {% block stylesheets %}
     {{ parent() }}
-    {{ twig_event([main_event ~ '.stylesheets', fallback_event ~ '.stylesheets']) }}
+    {% hook [main_hook ~ '#stylesheets', fallback_hook ~ '#stylesheets'] %}
 {% endblock %}
 
 {% block javascripts %}
     {{ parent() }}
-    {{ twig_event([main_event ~ '.javascripts', fallback_event ~ '.javascripts']) }}
+    {% hook [main_hook ~ '#javascripts', fallback_hook ~ '#javascripts'] %}
 {% endblock %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Layout/base.html.twig

@@ -1,3 +1,5 @@
+{% set generic_hook = hook_name(_self) %}
+
 <!DOCTYPE html>
 <html lang="{{ app.request.locale }}">
     <head>
@@ -11,6 +13,7 @@
         {{ encore_entry_link_tags('admin-entry', null, 'admin') }}
         {% block stylesheets %}
             {{ twig_event('sylius.admin.common.stylesheets') }}
+            {% hook generic_hook ~ '#stylesheets' %}
         {% endblock %}
     </head>
     <body class="{% block body_class %}{% endblock %}">
@@ -23,6 +26,7 @@
         {{ encore_entry_script_tags('admin-entry', null, 'admin') }}
         {% block javascripts %}
             {{ twig_event('sylius.admin.common.javascripts') }}
+            {% hook generic_hook ~ '#javascripts' %}
         {% endblock %}
     </body>
 </html>

symfony.lock

@@ -577,6 +577,9 @@
     "sylius/theme-bundle": {
         "version": "v1.4.2"
     },
+    "sylius/twig-hooks": {
+        "version": "dev-main"
+    },
     "symfony/asset": {
         "version": "v4.1.3"
     },