IBX-10362: Fixed validation of matrix field without columns when creating content type (#77)

Co-authored-by: Tomasz Białczak <[email protected]>

Author: OstafinL

composer.json

@@ -48,6 +48,7 @@
         "ibexa/http-cache": "~4.6.0@dev",
         "ibexa/design-engine": "~4.6.0@dev",
         "ibexa/code-style": "^1.0",
+        "ibexa/twig-components": "~4.6.x-dev",
         "friendsofphp/php-cs-fixer": "^3.0",
         "phpunit/phpunit": "^9.5",
         "phpstan/phpstan": "^2.0",

src/bundle/Command/MigrateLegacyMatrixCommand.php

@@ -107,7 +107,7 @@ public function execute(InputInterface $input, OutputInterface $output)
             }
 
             if ($isValidXml) {
-                $columnList = $xml->xpath('//column-name');
+                $columnList = $xml->xpath('//column-name') ?: [];
 
                 $columns = [];
 
@@ -180,7 +180,8 @@ public function execute(InputInterface $input, OutputInterface $output)
                         ],
                     ]);
 
-                    $rows = $this->convertCellsToRows($xml->xpath('c'), $columns);
+                    $cells = $xml->xpath('c') ?: [];
+                    $rows = $this->convertCellsToRows($cells, $columns);
 
                     $fieldValue->data['entries'] = $rows;
 

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/translations/ibexa_matrix_fieldtype.en.xliff

@@ -26,6 +26,11 @@
         <target state="new">Delete</target>
         <note>key: field.column.delete</note>
       </trans-unit>
+      <trans-unit id="5e712908b00d328e0ae52c2b063ea2186335e029" resname="field.column.error.quantity">
+        <source>At least one column is required for matrix field.</source>
+        <target state="new">At least one column is required for matrix field.</target>
+        <note>key: field.column.error.quantity</note>
+      </trans-unit>
       <trans-unit id="fa41ae6cab6d74c6548f4052c02c0c5129a27f1d" resname="field.column.identifier">
         <source>Identifier</source>
         <target state="new">Identifier</target>

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

@@ -21,14 +21,21 @@
                 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 = [] %}
+
         {% for column in form.columns %}
             {% set col_checkbox %}
                 <div class="form-check">
@@ -40,7 +47,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 +93,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>
+                {{ 'field.column.error.quantity'|trans|desc('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,
             ]);
     }
 

tests/integration/Kernel.php

@@ -17,6 +17,7 @@
 use Ibexa\Bundle\Notifications\IbexaNotificationsBundle;
 use Ibexa\Bundle\Rest\IbexaRestBundle;
 use Ibexa\Bundle\Search\IbexaSearchBundle;
+use Ibexa\Bundle\TwigComponents\IbexaTwigComponentsBundle;
 use Ibexa\Bundle\User\IbexaUserBundle;
 use Ibexa\Contracts\Test\Core\IbexaTestKernel;
 use Knp\Bundle\MenuBundle\KnpMenuBundle;
@@ -47,6 +48,7 @@ public function registerBundles(): iterable
         yield new IbexaAdminUiBundle();
         yield new IbexaNotificationsBundle();
         yield new IbexaGraphQLBundle();
+        yield new IbexaTwigComponentsBundle();
 
         yield new IbexaFieldTypeMatrixBundle();
     }