IBX-10362: No validation of matrix field without columns when creating content type

Author: OstafinL

src/bundle/Resources/public/js/scripts/admin.contenttype.matrix.js

@@ -6,6 +6,7 @@
     const SELECTOR_ADD_COLUMN = '.ibexa-btn--add-column';
     const SELECTOR_REMOVE_COLUMN = '.ibexa-btn--remove-column';
     const SELECTOR_TEMPLATE = '.ibexa-matrix-settings__column-template';
+    const ERROR_NODE_SELECTOR = '.ibexa-form-error';
     const NUMBER_PLACEHOLDER = /__number__/g;
     const getNextIndex = (parentNode) => {
         return parentNode.dataset.nextIndex++;
@@ -36,9 +37,18 @@
         node.insertAdjacentHTML('beforeend', template.replace(NUMBER_PLACEHOLDER, getNextIndex(node)));
 
         initColumns(settingsNode);
+        validateColumnsNumber(settingsNode);
 
         node.closest('.ibexa-table').dispatchEvent(new CustomEvent('ibexa-refresh-main-table-checkbox'));
+
         doc.body.dispatchEvent(new CustomEvent('ibexa-inputs:added'));
+        doc.body.dispatchEvent(
+            new CustomEvent('ibexa-fieldtype-matrix:added-column', {
+                detail: {
+                    columnNode: node.querySelector(`${SELECTOR_COLUMN}:last-of-type`),
+                },
+            }),
+        );
     };
     const removeItems = (event) => {
         const settingsNode = event.target.closest(SELECTOR_SETTINGS_COLUMNS);
@@ -66,6 +76,7 @@
             });
 
             node.closest('.ibexa-table').dispatchEvent(new CustomEvent('ibexa-refresh-main-table-checkbox'));
+            validateColumnsNumber(settingsNode);
         }, 0);
 
         initColumns(settingsNode);
@@ -91,6 +102,12 @@
 
         initColumns(container);
     };
+    const validateColumnsNumber = (settingsNode) => {
+        const columns = settingsNode.querySelectorAll(SELECTOR_COLUMN);
+        const errorNode = settingsNode.querySelector(ERROR_NODE_SELECTOR);
+
+        errorNode.toggleAttribute('hidden', columns.length > 0);
+    };
 
     doc.querySelectorAll(SELECTOR_SETTINGS_COLUMNS).forEach((container) => {
         initComponent(container);

src/bundle/Resources/public/scss/_matrix-settings.scss

@@ -1,4 +1,8 @@
 .ibexa-matrix-settings {
+    &__columns {
+        margin-top: calculateRem(16px)
+    }
+
     &__column {
         .form-check {
             padding-left: 0;

src/bundle/Resources/views/themes/admin/matrix_fieldtype/field_types.html.twig

@@ -21,11 +21,16 @@
                 body_row_cols: [
                     { has_checkbox: true, content: col_checkbox, raw: true },
                     { content: form_widget(form.columns.vars.prototype.name), raw: true },
-                    { content: form_widget(form.columns.vars.prototype.identifier), raw: true },
+                    { content: form_widget(form.columns.vars.prototype.identifier, {
+                        attr: {
+                            class: 'ibexa-input--matrix-column-identifier'
+                        }
+                    }), raw: true },
                 ],
                 class: 'ibexa-matrix-settings__column',
             } %}
         </script>
+
         {{ form_label(form.columns, null, { 'label_attr': { 'class': 'ibexa-label' } }) }}
         {{ form_errors(form.columns) }}
         {% set body_rows = [] %}
@@ -40,7 +45,11 @@
                 cols: [
                     { has_checkbox: true, content: col_checkbox, raw: true },
                     { content: form_widget(column.name), raw: true },
-                    { content: form_widget(column.identifier), raw: true },
+                    { content: form_widget(column.identifier, {
+                        attr: {
+                            class: 'ibexa-input--matrix-column-identifier'
+                        }
+                    }), raw: true },
                 ],
                 class: 'ibexa-matrix-settings__column',
             }]) %}
@@ -82,5 +91,14 @@
                 {% endembed %}
             {% endblock %}
         {% endembed %}
+
+        <div class="ibexa-form-error" hidden>
+            <em class="ibexa-form-error__row">
+                <svg class="ibexa-icon ibexa-icon--small ibexa-form-error__icon">
+                    <use xlink:href="{{ ibexa_icon_path('notice') }}"></use>
+                </svg>
+                At least one column is required for matrix field.
+            </em>
+        </div>
     </div>
 {% endblock %}

src/lib/FieldType/Mapper/MatrixFormMapper.php

@@ -43,13 +43,13 @@ public function mapFieldDefinitionForm(FormInterface $fieldDefinitionForm, Field
             ])
             ->add('columns', CollectionType::class, [
                 'entry_type' => ColumnType::class,
-                'entry_options' => ['required' => false],
+                'entry_options' => ['required' => true],
                 'allow_add' => true,
                 'allow_delete' => true,
                 'delete_empty' => false,
                 'prototype' => true,
                 'prototype_name' => '__number__',
-                'required' => false,
+                'required' => true,
                 'property_path' => 'fieldSettings[columns]',
                 'label' => false,
                 'translation_domain' => 'ibexa_matrix_fieldtype',

src/lib/Form/Type/ColumnType.php

@@ -20,9 +20,11 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
         $builder
             ->add('name', TextType::class, [
                 'label' => /** @Desc("Name") */ 'fieldtype.column.name',
+                'required' => false,
             ])
             ->add('identifier', TextType::class, [
                 'label' => /** @Desc("Identifier") */ 'fieldtype.column.identifier',
+                'required' => true,
             ]);
     }