[BootstrapAdminUi & AdminUI] Add default show page (#60)

Sylius · Sep 24, 2024 · 10fc3c9 · 10fc3c9
2 parents 9fd038a + ad96d58
commit 10fc3c9
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 9 deletions.
diff --git a/app/Entity/Book.php b/app/Entity/Book.php
@@ -23,6 +23,7 @@
 use Sylius\Resource\Metadata\Create;
 use Sylius\Resource\Metadata\Delete;
 use Sylius\Resource\Metadata\Index;
+use Sylius\Resource\Metadata\Show;
 use Sylius\Resource\Metadata\Update;
 use Symfony\Component\Validator\Constraints\NotBlank;
 
@@ -37,6 +38,7 @@
         new Index(grid: BookGrid::class),
         new Delete(),
         new BulkDelete(),
+        new Show(),
     ],
 )]
 #[SyliusCrudRoutes(

diff --git a/config/packages/twig_hooks.yaml b/config/packages/twig_hooks.yaml
@@ -3,3 +3,6 @@ twig_hooks:
         'app.base':
             content:
                 template: 'base/content.html.twig'
+        'sylius_admin.common.show.content':
+            page_body:
+                template: 'book/show/content/page_body.html.twig'
diff --git a/src/AdminUi/templates/base.html.twig b/src/AdminUi/templates/base.html.twig
@@ -16,7 +16,7 @@
 </head>
 <body class="{% block body_class %}{% endblock %}">
 <div class="page">
-    {% block content %}{% endblock %}
+    {% block body %}{% endblock %}
 </div>
 
 {% block javascripts %}

diff --git a/src/AdminUi/templates/crud/create.html.twig b/src/AdminUi/templates/crud/create.html.twig
@@ -9,7 +9,7 @@
 
 {% block title %}{{ header|trans }} | {{ parent() }}{% endblock %}
 
-{% block content %}
+{% block body %}
     {% hook 'create' with { _prefixes: prefixes, resource, metadata, configuration, form } %}
 {% endblock %}
 

diff --git a/src/AdminUi/templates/crud/index.html.twig b/src/AdminUi/templates/crud/index.html.twig
@@ -9,7 +9,7 @@
 
 {% block title %}{{ header|trans }} {{ parent() }}{% endblock %}
 
-{% block content %}
+{% block body %}
     {% hook 'index' with { _prefixes: prefixes, metadata, resources } %}
 {% endblock %}
 

diff --git a/src/AdminUi/templates/crud/show.html.twig b/src/AdminUi/templates/crud/show.html.twig
@@ -0,0 +1,24 @@
+{% extends '@SyliusAdminUi/base.html.twig' %}
+
+{% set prefixes = [
+    'sylius_admin.%resource_name%'|replace({'%resource_name%': resource_name|default(metadata.name)}),
+    'sylius_admin.common'
+] %}
+
+{% set header = metadata.applicationName ~ '.ui.' ~ metadata.pluralName %}
+
+{% block title %}{{ header|trans }} | {{ parent() }}{% endblock %}
+
+{% block body %}
+    {% hook 'show' with { _prefixes: prefixes, resource, metadata, configuration } %}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    {% hook 'show#stylesheets' with { _prefixes: prefixes } %}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {% hook 'show#javascripts' with { _prefixes: prefixes } %}
+{% endblock %}
diff --git a/src/AdminUi/templates/crud/update.html.twig b/src/AdminUi/templates/crud/update.html.twig
@@ -9,7 +9,7 @@
 
 {% block title %}{{ header|trans }} | {{ parent() }}{% endblock %}
 
-{% block content %}
+{% block body %}
     {% hook 'update' with { _prefixes: prefixes, resource, metadata, configuration, form } %}
 {% endblock %}
 

diff --git a/src/BootstrapAdminUi/config/app/twig_hooks/common/show.php b/src/BootstrapAdminUi/config/app/twig_hooks/common/show.php
@@ -0,0 +1,53 @@
+<?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 Symfony\Component\DependencyInjection\Loader\Configurator;
+
+return static function (ContainerConfigurator $container): void {
+    $container->extension('twig_hooks', [
+        'hooks' => [
+            'sylius_admin.common.show' => [
+                'sidebar' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/sidebar.html.twig',
+                ],
+                'content' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content.html.twig',
+                ],
+            ],
+
+            'sylius_admin.common.show.content' => [
+                'flashes' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/flashes.html.twig',
+                ],
+                'header' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header.html.twig',
+                ],
+            ],
+
+            'sylius_admin.common.show.content.header' => [
+                'breadcrumbs' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/show/content/header/breadcrumbs.html.twig',
+                ],
+                'title_block' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block.html.twig',
+                ],
+            ],
+
+            'sylius_admin.common.show.content.header.title_block' => [
+                'title' => [
+                    'template' => '@SyliusBootstrapAdminUi/shared/crud/show/content/header/title_block/title.html.twig',
+                ],
+            ],
+        ],
+    ]);
+};
diff --git a/src/BootstrapAdminUi/templates/shared/crud/show/content/header/breadcrumbs.html.twig b/src/BootstrapAdminUi/templates/shared/crud/show/content/header/breadcrumbs.html.twig
@@ -0,0 +1,38 @@
+{% from '@SyliusBootstrapAdminUi/shared/helper/breadcrumbs.html.twig' import breadcrumbs %}
+
+{% set configuration = hookable_metadata.context.configuration %}
+{% set resource = hookable_metadata.context.resource %}
+{% set metadata = hookable_metadata.context.metadata %}
+
+{% set resource_index = metadata.applicationName~'.ui.'~metadata.pluralName %}
+{% set index_url = path(
+    configuration.vars.index.route.name|default(configuration.getRouteName('index')),
+    configuration.vars.index.route.parameters|default(configuration.vars.route.parameters|default({}))
+) %}
+
+{% set rendered_field_prefix = hookable_metadata.configuration.rendered_field_prefix|default(null) %}
+{% set field_name = hookable_metadata.configuration.rendered_field|default('') %}
+{% set rendered_field = rendered_field_prefix ~ (attribute(resource, field_name) is defined ? attribute(resource, field_name) : null) %}
+
+{% set action = hookable_metadata.configuration.action|default(false)
+    ? { name: hookable_metadata.configuration.action, active: false }
+    : {}
+%}
+
+{% set resource_show_name = rendered_field|default(resource.translations[app.locale].name|default(resource.code|default(resource.id))) %}
+
+{% if action is defined and action.name is defined %}
+    {% set show_url = path(configuration.getRouteName('show'), { id: resource.id }) %}
+    {% set resource_show = { name: resource_show_name, url: show_url} %}
+{% else %}
+    {% set resource_show = { name: resource_show_name, active: true} %}
+{% endif %}
+
+{% set dashboard_path = hookable_metadata.context.routing.dashboard_path|default('/admin') %}
+
+{{ breadcrumbs([
+    { name: 'sylius.ui.dashboard', url: dashboard_path, active: false },
+    { name: resource_index, url: index_url, active: false },
+    resource_show,
+    action
+]) }}
diff --git a/src/BootstrapAdminUi/templates/shared/crud/show/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/show/content/header/title_block/title.html.twig
@@ -0,0 +1,18 @@
+{% import '@SyliusBootstrapAdminUi/shared/helper/header.html.twig' as header %}
+
+{% if hookable_metadata.context.metadata is defined and hookable_metadata.context.configuration is defined %}
+    {% set configuration = hookable_metadata.context.configuration %}
+    {% set metadata = hookable_metadata.context.metadata %}
+
+    {% set singular_name = hookable_metadata.configuration.resource_name|default(metadata.applicationName ~ '.ui.' ~ _context.metadata.name) %}
+    {% set header = hookable_metadata.configuration.header|default(null) %}
+{% else %}
+    {% set singular_name = hookable_metadata.configuration.resource_name %}
+    {% set header = hookable_metadata.configuration.header %}
+{% endif %}
+
+<div class="col-12 col-md-6">
+    <div class="d-md-flex gap-2 align-items-center">
+        {{ header.h1(header is not null ? header|trans : 'sylius.ui.show'|trans ~ ' ' ~ singular_name|trans) }}
+    </div>
+</div>
diff --git a/src/BootstrapAdminUi/templates/shared/crud/update/content/header/breadcrumbs.html.twig b/src/BootstrapAdminUi/templates/shared/crud/update/content/header/breadcrumbs.html.twig
@@ -17,12 +17,12 @@
 {% set resource_edit_name = rendered_field|default(resource.translations[app.locale].name|default(resource.code|default(resource.id))) %}
 {% set show_route_name = configuration.vars.index.route.name|default(configuration.getRouteName('show')) %}
 
-{#{% if sylius_route_exists(show_route_name) %}#}
-{#    {% set show_url = path(show_route_name, { id: resource.id }) %}#}
-{#    {% set resource_edit = { name: resource_edit_name, url: show_url} %}#}
-{#{% else %}#}
+{% if sylius_route_exists(show_route_name) %}
+    {% set show_url = path(show_route_name, { id: resource.id }) %}
+    {% set resource_edit = { name: resource_edit_name, url: show_url} %}
+{% else %}
     {% set resource_edit = { name: resource_edit_name, active: true} %}
-{#{% endif %}#}
+{% endif %}
 
 {% set dashboard_path = hookable_metadata.context.routing.dashboard_path|default('/admin') %}
 

diff --git a/templates/book/show/content/page_body.html.twig b/templates/book/show/content/page_body.html.twig
@@ -0,0 +1,19 @@
+{% set book = hookable_metadata.context.book %}
+
+<div class="page-body">
+    <div class="container-xl">
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title" {{ sylius_test_html_attribute('title') }}>
+                    {{ book.title }}
+                </div>
+            </div>
+            <div class="card-body" {{ sylius_test_html_attribute('author-name') }}>
+                <strong>{{ 'app.ui.author'|trans }}:</strong>
+                {{ book.authorName }}
+            </div>
+        </div>
+    </div>
+</div>
+
+
diff --git a/tests/Functional/BookTest.php b/tests/Functional/BookTest.php
@@ -23,6 +23,26 @@ protected function setUp(): void
         $this->client = self::createClient();
     }
 
+    public function testShowingBook(): void
+    {
+        $book = BookFactory::new()
+            ->withTitle('Shinning')
+            ->withAuthorName('Stephen King')
+            ->create()
+        ;
+
+        $this->client->request('GET', sprintf('/admin/books/%s', $book->getId()));
+
+        self::assertResponseIsSuccessful();
+
+        // Validate Header
+        self::assertSelectorTextContains('h1.page-title', 'Show Book');
+
+        // Validate page body
+        self::assertSelectorTextContains('[data-test-title]', 'Shinning');
+        self::assertSelectorTextContains('[data-test-author-name]', 'Stephen King');
+    }
+
     public function testBrowsingBooks(): void
     {
         BookFactory::new()

diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
@@ -1,6 +1,7 @@
 app:
     ui:
         admin_users: Admin users
+        author: Author
         authors: Authors
         book: Book
         books: Books