Skip to content

UX FormCollection #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stakovicz wants to merge 30 commits into from
Closed

UX FormCollection #90

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
ae5d325
UX FormCollection
stakovicz May 3, 2021
c305f0c
Remove hard coded property_name __name__
stakovicz May 4, 2021
5e6dd84
PHP CS Fixer
stakovicz May 4, 2021
eea2313
First jests
stakovicz May 4, 2021
f651d90
Rename CollectionType > UXCollectionType
stakovicz May 6, 2021
cc02076
Rename CollectionType > UXCollectionType
stakovicz May 6, 2021
dceb2cf
DependencyInjection Clean
stakovicz May 6, 2021
dfb54f8
Fix .gitattributes
stakovicz May 6, 2021
9300cda
Move default values
stakovicz May 7, 2021
ec4342a
Predefined theme or not
stakovicz May 23, 2021
b4f40cd
Update src/FormCollection/README.md
stakovicz May 24, 2021
0584757
Update src/FormCollection/README.md
stakovicz May 24, 2021
abd2b8f
Update src/FormCollection/README.md
stakovicz May 24, 2021
3996f3b
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz May 24, 2021
aaa6811
Update src/FormCollection/README.md
stakovicz May 24, 2021
4791ff9
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz May 24, 2021
8539ff9
Split in 4 options
stakovicz May 24, 2021
2d1ed04
Default startIndex value
stakovicz Jun 6, 2021
1e3105d
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz Jul 21, 2021
0a9cc54
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz Jul 21, 2021
94be94c
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz Jul 21, 2021
c805c0e
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz Jul 21, 2021
e56d04b
Fix coding-style-js
stakovicz Nov 6, 2021
7467cee
Prettier
stakovicz Nov 6, 2021
a8c730c
Merge branch 'symfony:2.x' into main
stakovicz Jan 19, 2022
ecd774a
Merge branch 'symfony:2.x' into main
stakovicz May 7, 2022
25d8306
Rebase and refresh the code
stakovicz May 21, 2022
8e5cd8a
fix TU
stakovicz May 21, 2022
3b110f9
change buttons attr
stakovicz May 21, 2022
c36157c
Merge branch 'symfony:2.x' into main
stakovicz Jun 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Split in 4 options
  • Loading branch information
@stakovicz
stakovicz committed Nov 6, 2021
commit 8539ff9354aaecfca4f4b368e8eab7631bc7ae53
23 changes: 13 additions & 10 deletions src/FormCollection/Form/UXCollectionType.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,26 @@ public function getParent()
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'button_add' => [
'text' => '',
'class' => '',
],
'button_delete' => [
'text' => '',
'class' => '',
],
'button_add_text' => 'Add',
'button_add_class' => '',
Copy link
Contributor

@ker0x ker0x Jul 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will renamed this key button_add_attr to allow user to set multiple attributes to the Add button and use the attribute block available in the form_theme to build them. Same for the button_delete_class

Copy link

@zmitic zmitic Jul 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add support for arrays as well here: https://gist.github.com/ker0x/8a1bad79a22f0ebae9ddf28c264dd13f#file-enhancedcollectiontype-php-L42-L44

Copy link
Contributor

@ker0x ker0x Jul 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed it's better, gist updated! Thanks 😉

'button_delete_text' => 'Remove',
'button_delete_class' => '',
]);

$resolver->setAllowedTypes('button_add_text', 'string');
$resolver->setAllowedTypes('button_add_class', 'string');
$resolver->setAllowedTypes('button_delete_text', 'string');
$resolver->setAllowedTypes('button_delete_class', 'string');
}

public function finishView(FormView $view, FormInterface $form, array $options)
{
parent::finishView($view, $form, $options);

$view->vars['button_add'] = $options['button_add'];
$view->vars['button_delete'] = $options['button_delete'];
$view->vars['button_add_text'] = $options['button_add_text'];
$view->vars['button_add_class'] = $options['button_add_class'];
$view->vars['button_delete_text'] = $options['button_delete_text'];
$view->vars['button_delete_class'] = $options['button_delete_class'];
$view->vars['prototype_name'] = $options['prototype_name'];
}

Expand Down
20 changes: 8 additions & 12 deletions src/FormCollection/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,18 +91,14 @@ class BlogFormType extends AbstractType
// ...
->add('comments', UXCollectionType::class, [
Copy link
Member

@weaverryan weaverryan May 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be as helpful as possible, I think we need to show the user a simple CommentType class. And then, use that here with 'entry_type' => CommentType::class`.

Overall, this is how my example looks locally - I think these options are helpful to all show!

'allow_add' => true,
'allow_delete' => true,
'entry_type' => FileType::class,
// ideally UXCollectionType can set this for us
'by_reference' => false,
'entry_options' => [
    // hides the "0", "1", "2" labels on the embedded forms
    'label' => false,
],
'button_add_options' => [
    'label' => '<span class="fa fa-plus"></span>',
    'label_html' => true,
    'class' => 'btn btn-secondary btn-sm'
],
'button_delete_options' => [
    'label' => '<span class="fa fa-times"></span>',
    'label_html' => true,
    'class' => 'btn btn-danger btn-sm'
],

// ...
'button_add' => [
// Default text for the add button (used by predefined theme)
'text' => 'Add',
// Add HTML classes to the add button (used by predefined theme)
'class' => 'btn btn-outline-primary'
],
'button_delete' => [
// Default text for the delete button (used by predefined theme)
'text' => 'Remove',
// Add HTML classes to the add button (used by predefined theme)
'class' => 'btn btn-outline-secondary'
],
// Default text for the add button (used by predefined theme)
'button_add_text' => 'Add',
// Add HTML classes to the add button (used by predefined theme)
'button_add_class' => 'btn btn-outline-primary',
// Default text for the delete button (used by predefined theme)
'button_delete_text' => 'Remove',
// Add HTML classes to the add button (used by predefined theme)
'button_delete_class' => 'btn btn-outline-secondary',
])
// ...
;
Expand Down
6 changes: 3 additions & 3 deletions src/FormCollection/Resources/views/form_theme_div.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{%- block button_add -%}
{%- set attrDataAction = (attr['data-action']|default('') ~ ' ' ~ controllerName ~ '#add')|trim -%}
<button data-action="{{ attrDataAction }}"
Copy link
Contributor

@alexander-schranz alexander-schranz Jan 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be better if we can use the exist button_widget block:

https://github.com/symfony/symfony/blob/41697e78a158156952f8c445512f11bd58f90958/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig#L224

Maybe we can use in the Form Builder the ButtonType and then give it also a special block_prefix so we can go with collection_button_add_widget to overwrite it.

So we could go with:

'button_add_options => [
    'label' => 'app.button_add',
    'label_translation_parameters' => [],
    'attr' => ['class' => '...']
],

This make it possible to use any of the exist button options and would be easier for theming also for future themes.

Copy link
Member

@weaverryan weaverryan May 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, this is interesting. To accomplish this, I think it would be very similar to how prototype is done, which is sort of a "fake field" that is added to the form... without being a real field.

You can see how the prototype is created in buildForm()... but not actually added to the field: https://github.com/symfony/symfony/blob/a05702965e9fc0de7ce77d1641e772e2fbfe9911/src/Symfony/Component/Form/Extension/Core/Type/CollectionType.php#L39-L40

Later, it's added as a view variable: https://github.com/symfony/symfony/blob/a05702965e9fc0de7ce77d1641e772e2fbfe9911/src/Symfony/Component/Form/Extension/Core/Type/CollectionType.php#L91-L101

It would be interesting to do the same thing with both buttons. We would pass button_add_options directly to the $builder->create() call - e.g. how prototype_options are passed here: https://github.com/symfony/symfony/blob/a05702965e9fc0de7ce77d1641e772e2fbfe9911/src/Symfony/Component/Form/Extension/Core/Type/CollectionType.php#L33

class="{{ button_add.class|default('') }}" type="button">{{ button_add.text|default('Add')|trans }}</button>
class="{{ button_add_class }}" type="button">{{ button_add_text|trans }}</button>
{%- endblock button_add -%}

{%- block button_delete -%}
{%- set attrDataAction = (attr['data-action']|default('') ~ ' ' ~ controllerName ~ '#delete')|trim -%}
<button data-action="{{ attrDataAction }}"
class="{{ button_delete.class|default('') }}" type="button">
{{ button_delete.text|default('Remove')|trans }}</button>
class="{{ button_delete_class }}" type="button">
{{ button_delete_text|trans }}</button>
{%- endblock button_delete -%}

{% block ux_collection_widget -%}
Copy link
Member

@weaverryan weaverryan May 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love to NOT need this block. Instead, inside of UxCollectionType, in finishView(), we should (I think) be able to add all of the attributes we need. For example, adding a data-controller attribute should be easy enough... as well as all of the Stimulus "values".

Even the attrDataTarget, I believe, could be added inside finishView. There, you're passed a FormView object, you should be able to iterate over $formView->children to then add the attrDataTarget to each (and you would do the same with $formView->vars['prototype'].

I'm pushing for this because, if we accomplish this, then if the user has already customized their ux_collection_widget block in a form theme, then we are not overriding their work. Also, it would allow me to, for example, do something like this:

<div
    {{ stimulus_controller('symfony/ux-form-collection/collection') }}
    data-prototype="{{ form_row(form.files.vars.prototype)|e('html_attr') }}"
>
    Files:
    <button
        class="btn btn-sm btn-secondary"
        {{ stimulus_action('symfony/ux-form-collection/collection', 'add') }}
    >+</button>
    {% for fileForm in form.files %}
        {{ form_row(fileForm) }}
    {% endfor %}
</div>

Currently that doesn't work because I have avoided rendering the ux_collection_widget, and so the children (and prototype) are all missing their targets.

EDIT: Hmm, I see that you will still need this block so that you can use the {{ block() }} function to set some of the variables. But, Ideally we would JUST set some variables into attr then call the parent collection_widget block. So this block would only be setting variables, then calling that block.

Expand Down
6 changes: 3 additions & 3 deletions src/FormCollection/Resources/views/form_theme_table.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
<tr>
<td colspan="2">
<button data-action="{{ attrDataAction }}"
class="{{ button_add.class|default('') }}" type="button">{{ button_add.text|default('Add')|trans }}</button>
class="{{ button_add_class }}" type="button">{{ button_add_text|trans }}</button>
</td>
</tr>
{%- endblock button_add -%}

{%- block button_delete -%}
{%- set attrDataAction = (attr['data-action']|default('') ~ ' ' ~ controllerName ~ '#delete')|trim -%}
<button data-action="{{ attrDataAction }}"
class="{{ button_delete.class|default('') }}" type="button">
{{ button_delete.text|default('Remove')|trans }}</button>
class="{{ button_delete_class }}" type="button">
{{ button_delete_text|trans }}</button>
{%- endblock button_delete -%}

{% block ux_collection_widget -%}
Expand Down