Merge pull request #4 from monsieurbiz/feature/text-with-image-ui-ele…

…ment

feat(ui-element): Add TextWithImageUiElement

composer.json

@@ -7,7 +7,8 @@
     "require": {
         "php": "^8.2",
         "sylius/sylius": ">=1.12 <1.14",
-        "monsieurbiz/sylius-rich-editor-plugin": "^2.8"
+        "monsieurbiz/sylius-rich-editor-plugin": "^2.8",
+        "monsieurbiz/sylius-media-manager-plugin": "^1.1"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.16",

src/Form/Type/ImageType.php

@@ -0,0 +1,48 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[email protected]>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusUiElementsPlugin\Form\Type;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageType as RichEditorImageType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class ImageType extends AbstractType
+{
+    /**
+     * @inheritdoc
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        if (!$options['with_link']) {
+            $builder->remove('link');
+        }
+        if (!$options['with_alignment']) {
+            $builder->remove('align');
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'with_link' => true,
+            'with_alignment' => true,
+        ]);
+        $resolver->setAllowedTypes('with_link', ['null', 'bool']);
+        $resolver->setAllowedTypes('with_alignment', ['null', 'bool']);
+    }
+
+    public function getParent(): string
+    {
+        return RichEditorImageType::class;
+    }
+}

src/Form/Type/UiElement/TextWithImageUiElementType.php

@@ -0,0 +1,72 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[email protected]>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusUiElementsPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use MonsieurBiz\SyliusUiElementsPlugin\Form\Type\ImageType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.text_with_image_ui_element',
+    icon: 'indent',
+    title: 'monsieurbiz_ui_elements.ui_element.text_with_image_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.text_with_image_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/text_with_image_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Front/UiElement/text_with_image_ui_element.html.twig',
+    ),
+    tags: [],
+)]
+class TextWithImageUiElementType extends AbstractType
+{
+    public const IMAGE_POSITION_LEFT = 'left';
+
+    public const IMAGE_POSITION_RIGHT = 'right';
+
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('content', WysiwygType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.content',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('image', ImageType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.field.image',
+                'required' => true,
+                'with_link' => false,
+                'with_alignment' => false,
+            ])
+            ->add('imageAlign', ChoiceType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.alignment',
+                'required' => true,
+                'choices' => [
+                    'monsieurbiz_ui_elements.ui_element.text_with_image_ui_element.fields.image_align.choices.left' => self::IMAGE_POSITION_LEFT,
+                    'monsieurbiz_ui_elements.ui_element.text_with_image_ui_element.fields.image_align.choices.right' => self::IMAGE_POSITION_RIGHT,
+                ],
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+        ;
+    }
+}

src/Resources/translations/messages.en.yaml

@@ -10,7 +10,8 @@ monsieurbiz_ui_elements:
             link: "Link"
             label: "Label"
             type: "Type"
-            withDot: "With dot ?"
+            content: "Content"
+            image: "Image"
     errors:
         not_valid_url: "This value is not a valid URL (absolute or relative) or a valid hashtag."
     ui_element:
@@ -42,3 +43,11 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Add key figure"
                 delete_element: "Delete key figure"
+        text_with_image_ui_element:
+            title: "Text with image"
+            description: "Text with image"
+            fields:
+                image_align:
+                    choices:
+                        left: "Left"
+                        right: "Right"

src/Resources/translations/messages.fr.yaml

@@ -10,7 +10,8 @@ monsieurbiz_ui_elements:
             link: "Lien"
             label: "Libellé"
             type: "Type"
-            withDot: "Avec point ?"
+            content: "Contenu"
+            image: "Image"
     errors:
         not_valid_url: "Cette valeur n'est pas une URL valide (absolue ou relative) ou un hashtag valide."
     ui_element:
@@ -42,3 +43,11 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Ajouter un chiffre clé"
                 delete_element: "Supprimer un chiffre clé"
+        text_with_image_ui_element:
+            title: "Texte avec image"
+            description: "Texte avec image"
+            fields:
+                image_align:
+                    choices:
+                        left: "Gauche"
+                        right: "Droite"

src/Resources/views/Admin/UiElement/text_with_image_ui_element.html.twig

@@ -0,0 +1,25 @@
+{#
+UI Element template
+type: text_with_image_ui_element
+element fields:
+    - content
+    - image
+        - image
+        - alt
+        - title
+    - imageAlign
+#}
+
+<div class="ui">
+    <div class="content">
+        {{ element.content|raw }}
+    </div>
+    <img src="{{ element.image.image }}" alt="{{ element.image.alt ?? '' }}" title="{{ element.image.title ?? '' }}" class="ui image">
+    <div class="extra content">
+        <ul>
+            <li>
+                {{ 'monsieurbiz_ui_elements.common.fields.alignment'|trans }} : {{ element.imageAlign }}
+            </li>
+        </ul>
+    </div>
+</div>

src/Resources/views/Shop/UiElement/text_with_image_ui_element.html.twig

@@ -0,0 +1,25 @@
+{#
+UI Element template
+type: text_with_image_ui_element
+element fields:
+    - content
+    - image
+        - image
+        - alt
+        - title
+    - imageAlign
+#}
+
+<div class="ui">
+    <div class="content">
+        {{ element.content|raw }}
+    </div>
+    <img src="{{ element.image.image }}" alt="{{ element.image.alt ?? '' }}" title="{{ element.image.title ?? '' }}" class="ui image">
+    <div class="extra content">
+        <ul>
+            <li>
+                {{ 'monsieurbiz_ui_elements.common.fields.alignment'|trans }} : {{ element.imageAlign }}
+            </li>
+        </ul>
+    </div>
+</div>