OP-462: Page preview functionality

features/admin/adding_block.feature

@@ -180,3 +180,16 @@ Feature: Adding blocks
         And I try to add it
         Then I should be notified that "Code, Name" fields are too long
 
+    @ui @javascript
+    Scenario: Adding block with template
+        Given there is an existing template named "Homepage" with "Block" type that contains "Textarea, Single media" content elements
+        When I go to the create block page
+        And I fill the code with "intro"
+        And I fill the name with "Intro"
+        And I select "Homepage" template
+        And I click button to use this template
+        And I confirm that I want to use this template
+        And I add it
+        Then I should be notified that the block has been created
+        And I should see newly created "Textarea" content element in Content elements section
+        And I should see newly created "Single media" content element in Content elements section

features/admin/adding_template.feature

@@ -9,13 +9,21 @@ Feature: Adding cms templates
         And I am logged in as an administrator
 
     @ui
-    Scenario: Creating template
+    Scenario: Creating template with type page
         When I go to the create template page
         And I fill the name with "Test template"
         And I choose "Page" in Type field
         And I add it
         Then I should be notified that the template has been created
 
+    @ui
+    Scenario: Creating template with type block
+        When I go to the create template page
+        And I fill the name with "Test template"
+        And I choose "Block" in Type field
+        And I add it
+        Then I should be notified that the template has been created
+
     @ui @javascript
     Scenario: Creating template with content elements
         When I go to the create template page

spec/Menu/ContentManagementMenuBuilderSpec.php

@@ -65,6 +65,11 @@ public function it_build_menu(
         $cmsRootMenuItem->setLabel('bitbag_sylius_cms_plugin.ui.media')->willReturn($cmsRootMenuItem);
         $cmsRootMenuItem->setLabelAttribute('icon', 'file')->shouldBeCalled();
 
+        $menu->getChildren()->willReturn(['marketing' => $cmsRootMenuItem]);
+        $menu->getChild('bitbag_cms')->willReturn($cmsRootMenuItem);
+
+        $menu->setChildren(['marketing' => $cmsRootMenuItem, 'bitbag_cms' => $cmsRootMenuItem])->willReturn($menu);
+
         $this->buildMenu($menuBuilderEvent);
     }
 }

src/Entity/Page.php

@@ -29,11 +29,11 @@ class Page implements PageInterface
         __construct as protected initializeTranslationsCollection;
     }
 
-    protected ?int $id;
+    protected ?int $id = null;
 
     protected ?string $code = null;
 
-    protected ?string $name;
+    protected ?string $name = null;
 
     protected ?\DateTimeImmutable $publishAt;
 

src/Entity/PageTranslation.php

@@ -18,7 +18,7 @@ class PageTranslation extends AbstractTranslation implements PageTranslationInte
 
     protected ?string $slug = null;
 
-    protected ?string $title;
+    protected ?string $title = null;
 
     protected ?string $metaKeywords;
 

src/Form/Type/BlockType.php

@@ -72,6 +72,10 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'multiple' => true,
                 'help' => 'bitbag_sylius_cms_plugin.ui.display_for_taxons.help',
             ])
+            ->add('template', TemplateBlockAutocompleteChoiceType::class, [
+                'label' => false,
+                'mapped' => false,
+            ])
         ;
     }
 

src/Form/Type/TemplateBlockAutocompleteChoiceType.php

@@ -0,0 +1,19 @@
+<?php
+
+/*
+ * This file was created by developers working at BitBag
+ * Do you need more information about us and what we do? Visit our https://bitbag.io website!
+ * We are hiring developers from all over the world. Join us and start your new, exciting adventure and become part of us: https://bitbag.io/career
+*/
+
+declare(strict_types=1);
+
+namespace BitBag\SyliusCmsPlugin\Form\Type;
+
+final class TemplateBlockAutocompleteChoiceType extends AbstractTemplateAutocompleteChoiceType
+{
+    public function getBlockPrefix(): string
+    {
+        return 'bitbag_template_block_autocomplete_choice';
+    }
+}

src/Form/Type/TemplateType.php

@@ -28,6 +28,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'label' => 'bitbag_sylius_cms_plugin.ui.type',
                 'choices' => [
                     'bitbag_sylius_cms_plugin.ui.page' => 'page',
+                    'bitbag_sylius_cms_plugin.ui.block' => 'block',
                 ],
             ])
             ->add('contentElements', CollectionType::class, [

src/Menu/ContentManagementMenuBuilder.php

@@ -10,6 +10,7 @@
 
 namespace BitBag\SyliusCmsPlugin\Menu;
 
+use Knp\Menu\ItemInterface;
 use Sylius\Bundle\UiBundle\Menu\Event\MenuBuilderEvent;
 
 final class ContentManagementMenuBuilder
@@ -62,5 +63,29 @@ public function buildMenu(MenuBuilderEvent $menuBuilderEvent): void
             ->setLabel('bitbag_sylius_cms_plugin.ui.media')
             ->setLabelAttribute('icon', 'file')
         ;
+
+        $this->reorderMenu($menu, 'bitbag_cms', 'marketing');
+    }
+
+    private function reorderMenu(ItemInterface $menu, string $newItemKey, string $targetItemKey): void
+    {
+        $menuItems = $menu->getChildren();
+
+        $newMenuItem = $menu->getChild($newItemKey);
+        unset($menuItems[$newItemKey]);
+
+        $targetPosition = array_search($targetItemKey, array_keys($menuItems), true);
+
+        if (null !== $newMenuItem && false !== $targetPosition) {
+            $menuItems = array_slice($menuItems, 0, $targetPosition + 1, true) +
+                [$newItemKey => $newMenuItem] +
+                array_slice($menuItems, $targetPosition + 1, null, true);
+
+            $menuItems = array_filter($menuItems, static function ($item) {
+                return $item instanceof ItemInterface;
+            });
+
+            $menu->setChildren($menuItems);
+        }
     }
 }

src/Renderer/ContentElement/ProductsCarouselByTaxonContentElementRenderer.php

@@ -35,8 +35,12 @@ public function render(ContentConfigurationInterface $contentConfiguration): str
     {
         $taxonCode = $contentConfiguration->getConfiguration()['products_carousel_by_taxon'];
 
-        /** @var TaxonInterface $taxon */
+        /** @var TaxonInterface|null $taxon */
         $taxon = $this->taxonRepository->findOneBy(['code' => $taxonCode]);
+        if (null === $taxon) {
+            return '';
+        }
+
         $products = $this->productRepository->findByTaxon($taxon);
 
         return $this->twig->render('@BitBagSyliusCmsPlugin/Shop/ContentElement/index.html.twig', [

src/Renderer/ContentElement/ProductsCarouselContentElementRenderer.php

@@ -33,6 +33,9 @@ public function render(ContentConfigurationInterface $contentConfiguration): str
         $configuration = $contentConfiguration->getConfiguration();
         $productsCodes = $configuration['products_carousel']['products'];
         $products = $this->productRepository->findBy(['code' => $productsCodes]);
+        if (empty($products)) {
+            return '';
+        }
 
         return $this->twig->render('@BitBagSyliusCmsPlugin/Shop/ContentElement/index.html.twig', [
             'content_element' => '@BitBagSyliusCmsPlugin/Shop/ContentElement/_products_carousel.html.twig',

src/Renderer/ContentElement/ProductsGridByTaxonContentElementRenderer.php

@@ -35,8 +35,12 @@ public function render(ContentConfigurationInterface $contentConfiguration): str
     {
         $taxonCode = $contentConfiguration->getConfiguration()['products_grid_by_taxon'];
 
-        /** @var TaxonInterface $taxon */
+        /** @var TaxonInterface|null $taxon */
         $taxon = $this->taxonRepository->findOneBy(['code' => $taxonCode]);
+        if (null === $taxon) {
+            return '';
+        }
+
         $products = $this->productRepository->findByTaxon($taxon);
 
         return $this->twig->render('@BitBagSyliusCmsPlugin/Shop/ContentElement/index.html.twig', [

src/Renderer/ContentElement/SingleMediaContentElementRenderer.php

@@ -33,6 +33,10 @@ public function supports(ContentConfigurationInterface $contentConfiguration): b
     public function render(ContentConfigurationInterface $contentConfiguration): string
     {
         $code = $contentConfiguration->getConfiguration()['single_media'];
+        if (null === $code) {
+            return '';
+        }
+
         $media = [
             'renderedContent' => $this->renderMediaRuntime->renderMedia($code),
             'entity' => $this->mediaRepository->findOneBy(['code' => $code]),

src/Resources/assets/admin/js/bitbag/bitbag-template.js

@@ -9,19 +9,20 @@ export class HandleTemplate {
         $(document).ready(() => {
             const cmsLoadTemplate = $('[data-bb-cms-load-template]');
             const cmsPageTemplate = $('#bitbag_sylius_cms_plugin_page_template');
+            const cmsBlockTemplate = $('#bitbag_sylius_cms_plugin_block_template');
 
             cmsLoadTemplate.on('click', function (e) {
                 e.preventDefault();
 
-                if (!cmsPageTemplate.val()) {
+                if (!cmsPageTemplate.val() && !cmsBlockTemplate.val()) {
                     return;
                 }
 
                 $('#load-template-confirmation-modal').modal('show');
             });
 
-            $('#load-template-confirmation-button').on('click', function (e) {
-                const templateId = cmsPageTemplate.val();
+            $('#load-template-confirmation-button').on('click', function () {
+                const templateId = cmsPageTemplate.val() ?? cmsBlockTemplate.val();
                 if (!templateId) {
                     return;
                 }
@@ -34,9 +35,6 @@ export class HandleTemplate {
                 $.ajax({
                     url: endpointUrl,
                     type: 'GET',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    },
                     success: function(data) {
                         if (data.status === 'success') {
                             $('[id^="bitbag_sylius_cms_plugin_"][id$="contentElements"]')
@@ -47,7 +45,9 @@ export class HandleTemplate {
                                 $('[data-form-collection="add"]').trigger('click');
                             });
 
-                            const elements = $('[id^="bitbag_sylius_cms_plugin_page_contentElements_"][id$="_type"]');
+                            const elements = $('[id^="bitbag_sylius_cms_plugin_"][id*="_contentElements_"][id$="_type"]').filter(function() {
+                                return /_page_|_block_/.test(this.id);
+                            });
 
                             $.each(data.content, function (index, element) {
                                 elements.eq(index).val(element.type);

src/Resources/config/routing/admin/template.yml

@@ -16,7 +16,7 @@ bitbag_sylius_cms_plugin_admin_template:
     type: sylius.resource
 
 bitbag_sylius_cms_plugin_admin_ajax_template_page_by_name_phrase:
-    path: /ajax/templates/search
+    path: /ajax/templates/page/search
     methods: [GET]
     defaults:
         _format: json
@@ -30,7 +30,22 @@ bitbag_sylius_cms_plugin_admin_ajax_template_page_by_name_phrase:
                     phrase: $phrase
                     type: page
 
-bitbag_sylius_cms_plugin_admin_ajax_template_page_by_id:
+bitbag_sylius_cms_plugin_admin_ajax_template_block_by_name_phrase:
+    path: /ajax/templates/block/search
+    methods: [GET]
+    defaults:
+        _format: json
+        _controller: bitbag_sylius_cms_plugin.controller.template::indexAction
+        _sylius:
+            serialization_groups: [Autocomplete]
+            permission: true
+            repository:
+                method: findTemplatesByNamePart
+                arguments:
+                    phrase: $phrase
+                    type: block
+
+bitbag_sylius_cms_plugin_admin_ajax_template_by_id:
     path: /ajax/templates/id
     methods: [GET]
     defaults:
@@ -43,7 +58,7 @@ bitbag_sylius_cms_plugin_admin_ajax_template_page_by_id:
                 method: find
                 arguments: [id: $id]
 
-bitbag_sylius_cms_plugin_admin_ajax_template_page_content_by_id:
+bitbag_sylius_cms_plugin_admin_ajax_template_content_by_id:
     path: /ajax/templates/content/{id}
     methods: [GET]
     defaults:

src/Resources/views/Block/Crud/_form.html.twig

@@ -1,5 +1,6 @@
 {% from '@BitBagSyliusCmsPlugin/Macro/translationForm.html.twig' import translationForm %}
 {% form_theme form '@BitBagSyliusCmsPlugin/Form/theme.html.twig' %}
+{% include '@BitBagSyliusCmsPlugin/Modal/_loadTemplateConfirmation.html.twig' %}
 
 <div class="ui two column stackable grid">
     <div class="column">
@@ -22,6 +23,7 @@
     <div class="column">
         <div class="ui segment">
             <h4 class="ui dividing header">{{ 'bitbag_sylius_cms_plugin.ui.content_elements.title'|trans }}</h4>
+            {% include '@BitBagSyliusCmsPlugin/Template/form.html.twig' with {ajax_url: path('bitbag_sylius_cms_plugin_admin_ajax_template_content_by_id', {'id': 'REPLACE_ID'}) } %}
             <div class="ui one column stackable grid">
                 <div class="column">
                     {{ form_row(form.contentElements) }}

src/Resources/views/Form/theme.html.twig

@@ -13,7 +13,11 @@
 {% endblock %}
 
 {% block bitbag_template_page_autocomplete_choice_row %}
-    {{ form_row(form, {'remote_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_page_by_name_phrase'), 'load_edit_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_page_by_id')}) }}
+    {{ form_row(form, {'remote_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_page_by_name_phrase'), 'load_edit_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_by_id')}) }}
+{% endblock %}
+
+{% block bitbag_template_block_autocomplete_choice_row %}
+    {{ form_row(form, {'remote_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_block_by_name_phrase'), 'load_edit_url': path('bitbag_sylius_cms_plugin_admin_ajax_template_by_id')}) }}
 {% endblock %}
 
 {% block bitbag_media_autocomplete_choice_row %}

src/Resources/views/Page/Crud/_form.html.twig

@@ -15,6 +15,10 @@
             {{ form_row(form.channels) }}
             {{ form_row(form.collections) }}
             {{ form_row(form.publishAt) }}
+            <a href="#" data-bb-cms-preview-btn class="ui labeled button icon primary bitbag-cms-resource-preview" data-url="{{ path('bitbag_sylius_cms_plugin_admin_page_preview', {'id': form.vars.data.id}) }}">
+                <i class="eye icon"></i>
+                {{ 'bitbag_sylius_cms_plugin.ui.preview'|trans }}
+            </a>
         </div>
         <div class="ui segment">
             <h4 class="ui dividing header">{{ 'bitbag_sylius_cms_plugin.ui.seo'|trans }}</h4>
@@ -24,19 +28,7 @@
     <div class="column">
         <div class="ui segment">
             <h4 class="ui dividing header">{{ 'bitbag_sylius_cms_plugin.ui.content_elements.title'|trans }}</h4>
-            <div class="ui segment">
-                <h5 class="ui header">{{ 'bitbag_sylius_cms_plugin.ui.use_page_template'|trans }}</h5>
-                <div class="ui two column stackable grid">
-                    <div class="column">
-                        {{ form_row(form.template) }}
-                    </div>
-                    <div class="column">
-                        <a href="#" class="ui labeled icon button" data-bb-cms-load-template="{{ path('bitbag_sylius_cms_plugin_admin_ajax_template_page_content_by_id', {'id': 'REPLACE_ID'}) }}">
-                            <i class="sign-in alternate icon"></i> {{ 'bitbag_sylius_cms_plugin.ui.use_this_template'|trans }}
-                        </a>
-                    </div>
-                </div>
-            </div>
+            {% include '@BitBagSyliusCmsPlugin/Template/form.html.twig' with {ajax_url: path('bitbag_sylius_cms_plugin_admin_ajax_template_content_by_id', {'id': 'REPLACE_ID'}) } %}
             <div class="ui one column stackable grid">
                 <div class="column">
                     {{ form_row(form.contentElements) }}

src/Resources/views/Template/form.html.twig

@@ -0,0 +1,13 @@
+<div class="ui segment">
+    <h5 class="ui header">{{ 'bitbag_sylius_cms_plugin.ui.use_page_template'|trans }}</h5>
+    <div class="ui two column stackable grid">
+        <div class="column">
+            {{ form_row(form.template) }}
+        </div>
+        <div class="column">
+            <a href="#" class="ui labeled icon button" data-bb-cms-load-template="{{ ajax_url }}">
+                <i class="sign-in alternate icon"></i> {{ 'bitbag_sylius_cms_plugin.ui.use_this_template'|trans }}
+            </a>
+        </div>
+    </div>
+</div>

tests/Behat/Context/Ui/Admin/BlockContext.php

@@ -406,6 +406,30 @@ public function iShouldSeeEmptyListOfBlocks(): void
         $this->resolveCurrentPage()->isEmpty();
     }
 
+    /**
+     * @Then I select :templateName template
+     */
+    public function iSelectTemplate(string $templateName): void
+    {
+        $this->resolveCurrentPage()->selectTemplate($templateName);
+    }
+
+    /**
+     * @Then I click button to use this template
+     */
+    public function iClickButtonToUseThisTemplate(): void
+    {
+        $this->resolveCurrentPage()->useTemplate();
+    }
+
+    /**
+     * @Then I confirm that I want to use this template
+     */
+    public function iConfirmThatIWantToUseThisTemplate(): void
+    {
+        $this->resolveCurrentPage()->confirmUseTemplate();
+    }
+
     /**
      * @return IndexPageInterface|CreatePageInterface|UpdatePageInterface|SymfonyPageInterface
      */