[Form] Added additional data attributes for collections #7713

leevigraham · 2013-04-18T14:44:17Z

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets	na
License	MIT
Doc PR	WIP

fix the tests as they have not been updated yet
submit changes to the documentation

I've added 4 extra data-* attributes to collections in twig and php views for easier js manipulation.

New attributes:

data-form-widget='collection': This is a collection and all children are form types
data-collection-allow-add: Allow adding of new elements
data-collection-allow-delete: Allow deletion of elements (new and existing)
data-prototype-name: The prototype name

This should make javascript integration much easier.

Example js:

$('[data-form-widget=collection]').each(function(){

    var $collection = $(this),
        prototypeString = $collection.data('prototype'),
        prototypeName = $collection.data('prototypeName') || '__name__',
        prototypeNameRegx = new RegExp(prototypeName+"(label__)?","g"),
        count = $collection.children().length;

    var $deleteLink = $("<span />", {
        'class': 'js-delete',
        'text': 'Delete'
    });

    var $addLink = $("<span />", {
        'class': 'js-add',
        'text': 'Add'
    });

    if($collection.data('collectionAllowDelete')) {

        $collection
            .children()
            .append($deleteLink.clone(true));

        $collection.on('click', '.js-delete', function(){
            event.preventDefault();
            $(this).parent().remove();
        });
    }

    if($collection.data('collectionAllowAdd')) {

        $addLink.click(function(event){
            event.preventDefault();
            var newPrototypeString = prototypeString.replace(prototypeNameRegx, count),
                $newPrototype = $(newPrototypeString).append($deleteLink.clone(true));
            $newPrototype.insertBefore($addLink);
            count++;
        });

        $collection.append($addLink);
    }
});

Replaces #5145

stof · 2013-04-18T14:49:57Z

You should also add an attribute with the prototype name. Otherwise, you have to hardcode the prototype name in the JS and it breaks when using a different value (which is needed for nested collections)

stof · 2013-04-18T14:50:30Z

src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

    {% if prototype is defined %}
        {% set attr = attr|merge({'data-prototype': form_row(prototype) }) %}
    {% endif %}
+
+    {% if allow_delete is defined %}


it is always defined. But it may be false

stof · 2013-04-18T14:51:38Z

you should update the rendering testsuite for these attributes, with cases testing that they are added when needed and also cases testing that they are not added when they should not. I would show you that the conditions are currently wrong and that you forgot updating the PHP templates

leevigraham · 2013-04-18T14:59:42Z

Will do and resubmit.

webmozart · 2013-04-18T15:06:40Z

@leevigraham It is sufficient to push your branch again (with the -f switch if you amend commits), then the PR will be updated without having to create a new one.

leevigraham · 2013-04-18T15:07:37Z

@bschussek I think I deleted my old fork and local repo hence the new request. I'll push back up to this same PR tomorrow.

stof · 2013-04-22T12:59:35Z

@leevigraham ping

stof · 2013-04-24T09:09:51Z

@leevigraham could you finish it ?

leevigraham · 2013-04-24T09:37:53Z

I'll try and work on this tonight when I get home from the office. :)

On 24/04/2013, at 7:10 PM, Christophe Coevoet [email protected] wrote:

@leevigraham could you finish it ?

—
Reply to this email directly or view it on GitHub.

leevigraham · 2013-04-24T12:14:03Z

@stof How would you feel about adding data-collection-allow-delete & data-collection-allow-add vs data-collection-delete & data-collection-add

fabpot · 2013-04-25T11:05:58Z

@leevigraham Can you submit a PR on the docs?

webmozart · 2013-04-25T11:08:25Z

src/Symfony/Component/Form/Tests/AbstractLayoutTest.php

@@ -1747,7 +1751,31 @@ public function testCollectionPrototype()
        $this->assertMatchesXpath($html,
            '//div[@id="name_items"][@data-prototype]
            |
-            //table[@id="name_items"][@data-prototype]'
+             //table[@id="name_items"][@data-prototype]'
+        );


This and the following tests should be split across AbstractDivLayoutTest and AbstractTableLayoutTest. We want to test that div layouts contain no tables and vice versa.

The tests should also be more specific, i.e. "./table" instead of "//table".

To easy. I copied the existing test but it's not hard to split. Should there be a separate test for each attribute?

Not necessarily, you can test all of them in one XPath. :)

* Added additional data attributes for collections: * data-form-widget="collection" - defines that the field is a collection * data-collection-allow-delete - defines collection items can be deleted * data-collection-allow-add - defines collection items can be added * Added `prototype_name` as view variable rather than accessing prototype.vars.name * Updated .twig and php templates

…-prototype

webmozart · 2013-05-02T07:44:34Z

src/Symfony/Component/Form/Tests/AbstractLayoutTest.php

@@ -1735,19 +1735,40 @@ public function testUrl()
        );
    }

+    public function testCollection()


This test doesn't really serve any purpose, since it is overridden in the subclasses anyway.

stof · 2013-09-17T08:33:10Z

@fabpot @bschussek is there any chance to have this merged for 2.4 ?

stof · 2013-09-17T08:36:21Z

src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

+    {% set attr = attr|merge({
+        'data-form-widget': 'collection',
+        'data-collection-allow-add': allow_add,
+        'data-collection-allow-delete': allow_delete,


casting a boolean to a string will display 1 or an empty string. I don't think it is the best stuff we can pass to the JS

jakzal · 2013-12-23T13:20:43Z

@leevigraham have you got time to finish this one off?

leevigraham · 2014-01-19T13:44:20Z

Closing in favour of a refactored and up to date w/ master: Pull Request #10071

leevigraham mentioned this pull request Apr 18, 2013

[Form] Add extra data attributes for collections #5145

Closed

stof reviewed Apr 18, 2013
View reviewed changes

stof mentioned this pull request Apr 24, 2013

[Form] make prototype_name available in twig template #7825

Closed

leevigraham mentioned this pull request Apr 24, 2013

[3.0] [Form] - Rename data-prototype attribute to data-collection-protoype #7833

Closed

webmozart reviewed Apr 25, 2013
View reviewed changes

leevigraham added 2 commits April 26, 2013 21:09

Merge remote-tracking branch 'upstream/master' into feature/form-twig…

729e7e0

…-prototype

webmozart reviewed May 2, 2013
View reviewed changes

stof reviewed Sep 17, 2013
View reviewed changes

stof referenced this pull request in infinite-networks/InfiniteFormBundle Sep 17, 2013

Add form collection javascript

7ba9af8

merk mentioned this pull request Sep 17, 2013

Collection javascript: handling nested prototypes infinite-networks/InfiniteFormBundle#4

Open

leevigraham mentioned this pull request Jan 19, 2014

[Form] Added additional data attributes for collection type output #10071

Closed

2 tasks

leevigraham closed this Jan 19, 2014

Uh oh!

[Form] Added additional data attributes for collections #7713

[Form] Added additional data attributes for collections #7713

Uh oh!

Conversation

leevigraham commented Apr 18, 2013

Uh oh!

stof commented Apr 18, 2013

Uh oh!

stof Apr 18, 2013

Choose a reason for hiding this comment

Uh oh!

stof commented Apr 18, 2013

Uh oh!

leevigraham commented Apr 18, 2013

Uh oh!

webmozart commented Apr 18, 2013

Uh oh!

leevigraham commented Apr 18, 2013

Uh oh!

stof commented Apr 22, 2013

Uh oh!

stof commented Apr 24, 2013

Uh oh!

leevigraham commented Apr 24, 2013

Uh oh!

leevigraham commented Apr 24, 2013

Uh oh!

fabpot commented Apr 25, 2013

Uh oh!

webmozart Apr 25, 2013

Choose a reason for hiding this comment

Uh oh!

webmozart Apr 25, 2013

Choose a reason for hiding this comment

Uh oh!

leevigraham Apr 25, 2013

Choose a reason for hiding this comment

Uh oh!

webmozart Apr 26, 2013

Choose a reason for hiding this comment

Uh oh!

webmozart May 2, 2013

Choose a reason for hiding this comment

Uh oh!

stof commented Sep 17, 2013

Uh oh!

stof Sep 17, 2013

Choose a reason for hiding this comment

Uh oh!

jakzal commented Dec 23, 2013

Uh oh!

leevigraham commented Jan 19, 2014

Uh oh!

Uh oh!