refactors. sets correct field definitions

assets/js/app/editor/Components/Collection.vue

@@ -4,16 +4,19 @@
       <div :is="element"></div>
     </div>
 
-    <editor-select
-      ref="templateSelect"
-      :value="initialSelectValue"
-      :name="templateSelectName"
-      :options="templateSelectOptions"
-      :allowempty="false"
-    ></editor-select>
-    <button class="btn btn-secondary" type="button" @click="addCollectionItem">
-      {{ labels.add_collection_item }}
-    </button>
+    <div class="d-flex">
+      <editor-select
+        class="flex-grow-1 mr-2"
+        ref="templateSelect"
+        :value="initialSelectValue"
+        :name="templateSelectName"
+        :options="templateSelectOptions"
+        :allowempty="false"
+      ></editor-select>
+      <button class="btn btn-secondary" type="button" @click="addCollectionItem">
+        {{ labels.add_collection_item }}
+      </button>
+    </div>
   </div>
 </template>
 

src/Entity/Field/CollectionField.php

@@ -54,6 +54,7 @@ class CollectionField extends Field implements FieldInterface
 
         foreach ($fieldDefinitions as $fieldName => $fieldDefinition) {
             $templateField = parent::factory($fieldDefinition, '', $fieldName);
+            $templateField->setDefinition($fieldName, $this->getDefinition()->get('fields')[$fieldName]);
             $templateField->setName($fieldName);
             $result['templates'][$fieldName] = $templateField;
         }

templates/_macro/_macro.html.twig

@@ -44,15 +44,18 @@
         {% if item_field.definition.type == 'set' %}
             {% set hash = item_field.hash %}
         {% else %}
+            {# non-set fields do not have hashes, so we create a 'dummy' hash from the current loop index. #}
             {% set hash = loop.index0 %}
             {% set collectionItemName = collectionItemName ~ '[' ~ hash ~ ']' %}
         {% endif %}
 
-        {% set existing_field %}
+        {% set new_field %}
             {% include '@bolt/_partials/fields/' ~ item_field.type ~ '.html.twig' with
                 {'field': item_field, 'in_collection': true, 'is_first': loop.index0 == 0, 'is_last': loop.index == fields|length, 'name': collectionItemName, 'collection_name': collectionField.name, 'hash': hash } only %}
         {% endset %}
-        {% set fieldsHtml = fieldsHtml|merge([{'html': existing_field, 'hash': hash, 'label': item_field.definition.label}]) %}
+        {# set the label manually as set in _base.html.twig, to pass to Collection.vue for templates #}
+        {% set label = item_field.definition.label|default(item_field.name|default('unnamed')|ucwords) %}
+        {% set fieldsHtml = fieldsHtml|merge([{'html': new_field, 'hash': hash, 'label': label}]) %}
     {% endfor %}
     {{ fieldsHtml|json_encode }}
 {% endapply %}{% endmacro %}

templates/_partials/fields/_base.html.twig

@@ -97,6 +97,7 @@
 
 {% endblock %}
 
+{{ postfix|raw }}
 
 {% if in_collection is defined %}
     <input type="hidden" name="collections[{{ collection_name }}][order][]" value="{{ hash }}">
@@ -114,5 +115,5 @@
         {{ 'collection.remove_item'|trans }}
     </button>
 {% endif %}
-{{ postfix|raw }}
 </div>
+

templates/_partials/fields/set.html.twig

@@ -11,6 +11,4 @@
         {% set setItemName = setName ~ '[' ~ field.value.hash ~ ']' ~ '[' ~ fieldItem.name ~ ']' %}
         {% include '@bolt/_partials/fields/' ~ fieldItem.type ~ '.html.twig' with {'field' : fieldItem, 'name' : setItemName} only %}
     {% endfor %}
-
-
 {% endblock %}