Merge pull request #6 from monsieurbiz/feature/logo-collection-ui-ele…

…ment

feat(ui-element): Add LogosUiElement

src/Form/Type/ImageType.php

@@ -36,6 +36,9 @@ public function configureOptions(OptionsResolver $resolver): void
         $resolver->setDefaults([
             'with_link' => true,
             'with_alignment' => true,
+            'attr' => [
+                'class' => 'ui segment',
+            ],
         ]);
         $resolver->setAllowedTypes('with_link', ['null', 'bool']);
         $resolver->setAllowedTypes('with_alignment', ['null', 'bool']);
@@ -45,4 +48,9 @@ public function getParent(): string
     {
         return RichEditorImageType::class;
     }
+
+    public function getBlockPrefix(): string
+    {
+        return 'monsieurbiz_sylius_ui_elements_image';
+    }
 }

src/Form/Type/UiElement/LogosUiElementType.php

@@ -0,0 +1,62 @@
+<?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\SyliusUiElementsPlugin\Form\Type\ImageType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.logos_ui_element',
+    icon: 'images',
+    title: 'monsieurbiz_ui_elements.ui_element.logos_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.logos_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/logos_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Front/UiElement/logos_ui_element.html.twig',
+    ),
+    tags: [],
+)]
+class LogosUiElementType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('title', TextType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.title',
+                'required' => false,
+            ])
+            ->add('logos', CollectionType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.logos',
+                'entry_type' => ImageType::class,
+                'entry_options' => [
+                    'with_link' => false,
+                    'with_alignment' => false,
+                ],
+                'allow_add' => true,
+                'allow_delete' => true,
+                'constraints' => [new Assert\Valid()],
+                'attr' => [
+                    'class' => 'ui segment secondary collection--flex',
+                ],
+            ])
+        ;
+    }
+}

src/Resources/translations/messages.en.yaml

@@ -14,6 +14,7 @@ monsieurbiz_ui_elements:
             author: "Author"
             content: "Content"
             image: "Image"
+            logos: "Logos"
     errors:
         not_valid_url: "This value is not a valid URL (absolute or relative) or a valid hashtag."
     ui_element:
@@ -56,4 +57,9 @@ monsieurbiz_ui_elements:
                     choices:
                         left: "Left"
                         right: "Right"
-
+        logos_ui_element:
+            title: "Logos"
+            description: "Collection of logos"
+            buttons:
+                add_element: "Add logo"
+                delete_element: "Delete logo"

src/Resources/translations/messages.fr.yaml

@@ -14,6 +14,7 @@ monsieurbiz_ui_elements:
             author: "Auteur"
             content: "Contenu"
             image: "Image"
+            logos: "Logos"
     errors:
         not_valid_url: "Cette valeur n'est pas une URL valide (absolue ou relative) ou un hashtag valide."
     ui_element:
@@ -56,3 +57,9 @@ monsieurbiz_ui_elements:
                     choices:
                         left: "Gauche"
                         right: "Droite"
+        logos_ui_element:
+            title: "Logos"
+            description: "Ensemble de logos"
+            buttons:
+                add_element: "Ajouter un logo"
+                delete_element: "Supprimer un logo"

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

@@ -0,0 +1,25 @@
+{#
+UI Element template
+type: logos_ui_element
+element fields:
+    - title
+    - logos
+        - image
+        - alt
+        - title
+#}
+
+<div class="ui">
+    {% if element.title|default('') is not empty %}
+        <div class="ui">
+            <span class="ui huge header">{{ element.title }}</span>
+        </div>
+    {% endif %}
+    <div class="ui grid">
+        {% for logo in element.logos %}
+            <div class="four wide column">
+                <img src="{{ logo.image|imagine_filter('sylius_medium') }}" alt="{{ logo.alt|default('') }}" title="{{ logo.title|default('') }}" width="180">
+            </div>
+        {% endfor %}
+    </div>
+</div>

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

@@ -0,0 +1,25 @@
+{#
+UI Element template
+type: logos_ui_element
+element fields:
+    - title
+    - logos
+        - image
+        - alt
+        - title
+#}
+
+<div class="ui">
+    {% if element.title|default('') is not empty %}
+        <div class="ui">
+            <span class="ui huge header">{{ element.title }}</span>
+        </div>
+    {% endif %}
+    <div class="ui grid">
+        {% for logo in element.logos %}
+            <div class="four wide column">
+                <img src="{{ logo.image|imagine_filter('sylius_medium') }}" alt="{{ logo.alt|default('') }}" title="{{ logo.title|default('') }}" width="180">
+            </div>
+        {% endfor %}
+    </div>
+</div>