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,16 @@
         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,9 +74,12 @@
             });
 
             node.closest('.ibexa-table').dispatchEvent(new CustomEvent('ibexa-refresh-main-table-checkbox'));
+            validateColumnsNumber(settingsNode);
         }, 0);
 
         initColumns(settingsNode);
+        console.log(settingsNode)
+        
     };
     const checkColumn = (event) => {
         const settingsNode = event.target.closest(SELECTOR_SETTINGS_COLUMNS);
@@ -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/views/themes/admin/matrix_fieldtype/field_types.html.twig

@@ -21,7 +21,12 @@
                 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',
+                            required: true,
+                        }
+                    }), raw: true },
                 ],
                 class: 'ibexa-matrix-settings__column',
             } %}
@@ -40,7 +45,12 @@
                 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',
+                            required: true
+                        }
+                    }), raw: true },
                 ],
                 class: 'ibexa-matrix-settings__column',
             }]) %}
@@ -82,5 +92,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 %}