Skip to content

Commit f2fce68

Browse files
maximehuranmaximehuran
committed
feat(ui elements): manage UI elements
1 parent ca3c8bf commit f2fce68

File tree

11 files changed

+208
-148
lines changed

11 files changed

+208
-148
lines changed

‎src/Form/Type/ArticleType.php‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313

1414
namespace MonsieurBiz\SyliusBlogPlugin\Form\Type;
1515

16-
use MonsieurBiz\SyliusBlogPlugin\Entity\ArticleInterface;
1716
use MonsieurBiz\SyliusBlogPlugin\Entity\Tag;
1817
use MonsieurBiz\SyliusBlogPlugin\Entity\TagInterface;
1918
use MonsieurBiz\SyliusBlogPlugin\Repository\AuthorRepositoryInterface;
@@ -46,9 +45,6 @@ public function __construct(
4645
*/
4746
public function buildForm(FormBuilderInterface $builder, array $options): void
4847
{
49-
/** @var ?ArticleInterface $article */
50-
$article = $builder->getData();
51-
5248
$builder
5349
->add('enabled', CheckboxType::class, [
5450
'required' => false,

‎src/Form/Type/UiElement/ArticlesSelectionUiElementType.php‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
2020
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LinkType;
2121
use Symfony\Component\Form\AbstractType;
22-
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
2322
use Symfony\Component\Form\Extension\Core\Type\TextType;
2423
use Symfony\Component\Form\FormBuilderInterface;
2524
use Symfony\Component\Form\FormInterface;
2625
use Symfony\Component\Form\FormView;
2726
use Symfony\Component\Validator\Constraints as Assert;
27+
use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
2828

2929
#[AsUiElement(
3030
code: 'monsieurbiz_blog.articles_selection_ui_element',
@@ -54,19 +54,25 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
5454
->add('display', ArticlesDisplayType::class, [
5555
'label' => false, // already defined in the ArticlesDisplayType
5656
])
57-
->add('articles', CollectionType::class, [
57+
->add('articles', LiveCollectionType::class, [
5858
'label' => 'monsieurbiz_blog.ui_element.articles_selection_ui_element.fields.articles',
5959
'entry_type' => ArticleSelectionElementType::class,
60-
'prototype_name' => '__article_selection__',
6160
'allow_add' => true,
6261
'allow_delete' => true,
63-
'by_reference' => false,
6462
'delete_empty' => true,
6563
'attr' => [
66-
'class' => 'ui segment secondary collection--flex',
64+
'class' => 'row row-cols-1 row-cols-sm-2',
65+
],
66+
'entry_options' => [
67+
'label' => false,
68+
'attr' => [
69+
'class' => 'p-3 bg-gray-300 border rounded col',
70+
],
6771
],
6872
'constraints' => [
69-
new Assert\Count(['min' => 1]),
73+
new Assert\Count([
74+
'min' => 1,
75+
]),
7076
],
7177
])
7278
->add('buttonLabel', TextType::class, [

‎src/Form/Type/UiElement/CaseStudiesUiElementType.php‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
1818
use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
1919
use Symfony\Component\Form\AbstractType;
20-
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
2120
use Symfony\Component\Form\Extension\Core\Type\TextType;
2221
use Symfony\Component\Form\FormBuilderInterface;
22+
use Symfony\Component\Form\FormInterface;
23+
use Symfony\Component\Form\FormView;
2324
use Symfony\Component\Validator\Constraints as Assert;
25+
use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
2426

2527
#[AsUiElement(
2628
code: 'monsieurbiz_blog.case_studies_ui_element',
@@ -47,16 +49,20 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
4749
'label' => 'monsieurbiz_blog.ui_element.case_studies_ui_element.fields.title',
4850
'required' => false,
4951
])
50-
->add('case_studies', CollectionType::class, [
52+
->add('case_studies', LiveCollectionType::class, [
5153
'label' => 'monsieurbiz_blog.ui_element.case_studies_ui_element.fields.case_studies',
5254
'entry_type' => CaseStudyElementType::class,
53-
'prototype_name' => '__case_study__',
5455
'allow_add' => true,
5556
'allow_delete' => true,
56-
'by_reference' => false,
5757
'delete_empty' => true,
5858
'attr' => [
59-
'class' => 'ui segment secondary collection--flex',
59+
'class' => 'row row-cols-1 row-cols-sm-2',
60+
],
61+
'entry_options' => [
62+
'label' => false,
63+
'attr' => [
64+
'class' => 'p-3 bg-gray-300 border rounded col',
65+
],
6066
],
6167
'constraints' => [
6268
new Assert\Count(['min' => 1]),
@@ -65,4 +71,18 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
6571
])
6672
;
6773
}
74+
75+
/**
76+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
77+
*/
78+
public function finishView(FormView $view, FormInterface $form, array $options): void
79+
{
80+
usort($view['case_studies']->children, function (FormView $articleA, FormView $articleB) {
81+
return match (true) {
82+
!$articleA->offsetExists('position') => -1,
83+
!$articleB->offsetExists('position') => 1,
84+
default => $articleA['position']->vars['data'] <=> $articleB['position']->vars['data']
85+
};
86+
});
87+
}
6888
}

‎src/Resources/views/admin/article/image.html.twig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{% set filter = filter|default('monsieurbiz_blog_image_thumbnail') %}
2+
3+
{% if isThumbnail|default(false) and article.thumbnailImage %}
4+
{% set path = article.thumbnailImage|imagine_filter(filter) %}
5+
{% elseif article.image %}
6+
{% set path = article.image|imagine_filter(filter) %}
7+
{% else %}
8+
{% set path = '' %}
9+
{% endif %}
10+
11+
{% if path is not empty %}
12+
<img src="{{ path }}" alt="{{ article.title }}" class="{{ class|default('')|escape('html_attr') }}">
13+
{% endif %}

‎src/Resources/views/admin/uielement/articles_by_tags.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ element methods:
1414

1515
{% set articles = ui_element.getArticles(element.tags|default([]), element.limit|default(3)) %}
1616

17-
{{ include('@MonsieurBizSyliusBlogPluginAdmin/uielement/articles_cards.html.twig') }}
17+
{{ include('@MonsieurBizSyliusBlogPlugin/Admin/uielement/articles_cards.html.twig') }}

‎src/Resources/views/admin/uielement/articles_cards.html.twig‎

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,101 @@
11
{% if articles|length > 0 %}
22
{% set display = element.display.display %}
3-
<div class="ui two column grid">
3+
<div class="container-fluid">
44
<div class="row">
5-
<div class="column">
5+
<div class="col-md-6">
66
{% if element.title|default('') is not empty %}
7-
<div class="ui huge header">
7+
<h1 class="display-4">
88
{{ element.title }}
9-
</div>
9+
</h1>
1010
{% endif %}
1111
</div>
12-
<div class="right aligned column">
12+
<div class="col-md-6 text-right">
1313
{% if element.buttonUrl|default('') is not empty and element.buttonLabel|default('') is not empty %}
14-
<a class="ui button" href="{{ element.buttonUrl }}">
14+
<a class="btn btn-primary" href="{{ element.buttonUrl }}">
1515
{{ element.buttonLabel }}
1616
</a>
1717
{% endif %}
1818
</div>
1919
</div>
2020
</div>
21+
2122
{% if display == constant('MonsieurBiz\\SyliusBlogPlugin\\Form\\Type\\ArticlesDisplayType::MULTIPLE_WITH_IMAGE') %}
22-
<div class="ui three cards">
23+
<div class="row">
2324
{% for article in articles %}
24-
<div class="ui card">
25-
<div class="image">
26-
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/_image.html.twig' with { 'article' : article, isThumbnail: true } %}
27-
</div>
28-
<div class="content">
29-
<a class="ui header">{{ article.title }}</a>
30-
{% if article.description|default('') is not empty %}
31-
<div>
32-
{{ article.description }}
25+
<div class="col-lg-4 col-md-6 mb-4">
26+
<div class="card h-100">
27+
<div class="card-img-top">
28+
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/image.html.twig' with { 'article' : article, isThumbnail: true } %}
29+
</div>
30+
<div class="card-body d-flex flex-column">
31+
<h5 class="card-title">{{ article.title }}</h5>
32+
{% if article.description|default('') is not empty %}
33+
<p class="card-text">
34+
{{ article.description }}
35+
</p>
36+
{% endif %}
37+
<div class="mt-auto">
38+
<a class="btn btn-primary" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
39+
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
40+
</a>
3341
</div>
34-
{% endif %}
35-
<div class="extra content">
36-
<a class="ui button" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
37-
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
38-
</a>
3942
</div>
4043
</div>
4144
</div>
4245
{% endfor %}
4346
</div>
4447
{% elseif display == constant('MonsieurBiz\\SyliusBlogPlugin\\Form\\Type\\ArticlesDisplayType::MULTIPLE_WITHOUT_IMAGE') %}
45-
<div class="ui three cards">
48+
<div class="row">
4649
{% for article in articles %}
47-
<div class="ui card">
48-
<div class="content">
49-
<a class="ui header">{{ article.title }}</a>
50-
{% if article.description|default('') is not empty %}
51-
<div>
52-
{{ article.description }}
50+
<div class="col-lg-4 col-md-6 mb-4">
51+
<div class="card h-100">
52+
<div class="card-body d-flex flex-column">
53+
<h5 class="card-title">{{ article.title }}</h5>
54+
{% if article.description|default('') is not empty %}
55+
<p class="card-text">
56+
{{ article.description }}
57+
</p>
58+
{% endif %}
59+
<div class="mt-auto">
60+
<a class="btn btn-primary" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
61+
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
62+
</a>
5363
</div>
54-
{% endif %}
55-
<div class="extra content">
56-
<a class="ui button" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
57-
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
58-
</a>
5964
</div>
6065
</div>
6166
</div>
6267
{% endfor %}
6368
</div>
6469
{% elseif display == constant('MonsieurBiz\\SyliusBlogPlugin\\Form\\Type\\ArticlesDisplayType::SINGLE') %}
65-
<div class="ui one cards">
70+
<div class="row justify-content-center">
6671
{% for article in articles %}
67-
<div class="ui card">
68-
<div class="ui two column grid">
69-
<div class="row">
70-
<div class="column">
71-
<div class="ui image">
72-
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/_image.html.twig' with { 'article' : article, isThumbnail: true } %}
72+
<div class="col-12">
73+
<div class="card">
74+
<div class="row no-gutters">
75+
<div class="col-md-6">
76+
<div class="h-100">
77+
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/image.html.twig' with { 'article' : article, isThumbnail: true } %}
7378
</div>
7479
</div>
75-
<div class="content column">
76-
<a class="ui header">{{ article.title }}</a>
77-
{% if article.description|default('') is not empty %}
78-
<div>
79-
{{ article.description }}
80+
<div class="col-md-6">
81+
<div class="card-body d-flex flex-column h-100">
82+
<h5 class="card-title">{{ article.title }}</h5>
83+
{% if article.description|default('') is not empty %}
84+
<p class="card-text">
85+
{{ article.description }}
86+
</p>
87+
{% endif %}
88+
<div class="mt-auto">
89+
<a class="btn btn-primary" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
90+
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
91+
</a>
8092
</div>
81-
{% endif %}
82-
<div class="extra content">
83-
<a class="ui button" href="{{ path('monsieurbiz_case_study_article_show', {'slug': article.slug}) }}">
84-
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
85-
</a>
8693
</div>
8794
</div>
8895
</div>
8996
</div>
9097
</div>
9198
{% endfor %}
9299
</div>
93-
{% endif%}
100+
{% endif %}
94101
{% endif %}

‎src/Resources/views/admin/uielement/case_studies.html.twig‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,32 @@
1313

1414
{% if case_studies|length > 0 %}
1515
{% if element.title|default('') is not empty %}
16-
<div class="ui huge header">
16+
<h1 class="display-4 mb-4">
1717
{{ element.title }}
18-
</div>
18+
</h1>
1919
{% endif %}
2020

21-
<div class="ui cards">
21+
<div class="row">
2222
{% for case_study in case_studies %}
23-
<div class="ui card">
24-
<div class="image">
25-
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/_image.html.twig' with { 'article' : case_study, isThumbnail: true } %}
26-
</div>
27-
<div class="content">
28-
<a class="header">{{ case_study.title }}</a><br />
29-
<div class="extra content">
30-
<a class="ui button" href="{{ path('monsieurbiz_case_study_article_show', {'slug': case_study.slug}) }}">
31-
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
32-
</a>
23+
<div class="col-lg-4 col-md-6 mb-4">
24+
<div class="card h-100">
25+
<div class="card-img-top">
26+
{% include '@MonsieurBizSyliusBlogPlugin/admin/article/image.html.twig' with { 'article' : case_study, isThumbnail: true } %}
27+
</div>
28+
<div class="card-body d-flex flex-column">
29+
<h5 class="card-title">{{ case_study.title }}</h5>
30+
<div class="mt-auto">
31+
<a class="btn btn-primary" href="{{ path('monsieurbiz_case_study_article_show', {'slug': case_study.slug}) }}">
32+
{{ 'monsieurbiz_blog.ui.read_more'|trans }}
33+
</a>
34+
</div>
3335
</div>
3436
</div>
3537
</div>
3638
{% endfor %}
3739
</div>
3840
{% else %}
39-
{{ messages.info('monsieurbiz_blog.ui.no_results_to_display') }}
41+
<div class="alert alert-info" role="alert">
42+
{{ 'monsieurbiz_blog.ui.no_results_to_display'|trans }}
43+
</div>
4044
{% endif %}

‎src/Resources/views/shop/uielement/articles_by_tags.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ element methods:
1414

1515
{% set articles = ui_element.getArticles(element.tags|default([]), element.limit|default(3)) %}
1616

17-
{{ include('@MonsieurBizSyliusBlogPlugin/shop/uielement/articles_cards.html.twig') }}
17+
{{ include('@MonsieurBizSyliusBlogPlugin/Admin/uielement/articles_cards.html.twig') }}

0 commit comments

Comments
 (0)