Grouped editables

[khusseini]

When creating editables with multiple instances it is sometimes cumbersome to configure a group of editables and to print them in a view.

Example:

pimcore_rad_brick:
  areabricks:
    promo_box:
      label: Promo Box
      use_edit: true
      editables:
        num_boxes:
          type: select
          options:
            store: [1, 2, 3]
        box_link:
          type: link
          instances: 'view["num_boxes"].isEmpty() ? 1 : view["num_boxes"].getData()'
        box_image:
          type: link
          instances: 'view["num_boxes"].isEmpty() ? 1 : view["num_boxes"].getData()'
          options:
            reload: true
        box_caption:
          type: input
          instances: 'view["num_boxes"].isEmpty() ? 1 : view["num_boxes"].getData()'

{% for link in box_link %}
<div>
    <h1>{{ box_caption[loop.index0] }}</h1>
    <div>{{ box_image[loop.index0] }}<div>
    <div>{{ link }}</div>
</div>
{% else %}
<div>
    <h1>{{ box_caption }}</h1>
    <div>{{ box_image }}<div>
    <div>{{ box_link }}</div>
</div>
{% endfor %}

Proposed solution:
Add a new configuration to the areabrick with key groups which can hold datasource and instances values to be passed to each member of the group.

areabricks:
  promo_box:
    groups:
      boxes:
        instances: 'view["num_boxes"].isEmpty() ? 1 : view["num_boxes"].getData()'
    label: Promo Box
      use_edit: true
      editables:
        num_boxes:
          type: select
          options:
            store: [1, 2, 3]
        box_link:
          type: link
          group: boxes
        box_image:
          type: image
          group: boxes
          options:
            reload: true
        box_caption:
          type: input
          group: boxes

The view should contain a variable with the name of the group and type of array containing the editables for each instance or data source row.

view.html.twig:

{% for box in boxes %}
<div>
    <h1>{{ box.box_caption|raw }}</h1>
    <div>{{ box.box_image }}<div>
    <div>{{ box.box_link }}</div>
</div>
{% endfor %}