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

Author: OstafinL

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

@@ -371,8 +371,8 @@
     const validateInput = (input) => {
         const isInputEmpty = !input.value;
         const field = input.closest('.form-group');
-        const labelNode = field.querySelector('.ibexa-label');
-        const errorNode = field.querySelector('.ibexa-form-error');
+        const labelNode = field?.querySelector('.ibexa-label');
+        const errorNode = field?.querySelector('.ibexa-form-error');
 
         input.classList.toggle('is-invalid', isInputEmpty);
 
@@ -390,8 +390,24 @@
 
         isEditFormValid = isEditFormValid && !isInputEmpty;
     };
+    const validateMatrixColumns = (columnSettingsNode) => {
+        const columns = columnSettingsNode.querySelectorAll('.ibexa-matrix-settings__column');
+        const hasAddedColumns = columns.length > 0;
+        const hasEmptyInputs = [...columns].some((column) => {
+            const columnInput = column.querySelector('.ibexa-input--matrix-column-identifier');
+
+            return !columnInput.value;
+        });
+        const isValid = hasAddedColumns && !hasEmptyInputs;
+        const errorNode = columnSettingsNode.querySelector('.ibexa-form-error');
+
+        errorNode.toggleAttribute('hidden', hasAddedColumns);
+
+        return isValid;
+    };
     const validateForm = () => {
         const fieldDefinitionsStatuses = {};
+        const matrixColumnsSettingsNodes = doc.querySelectorAll('.ibexa-matrix-settings__columns');
 
         isEditFormValid = true;
         inputsToValidate = editForm.querySelectorAll(SELECTOR_INPUTS_TO_VALIDATE);
@@ -413,6 +429,18 @@
             validateInput(input);
         });
 
+        matrixColumnsSettingsNodes.forEach((columnSettingsNode) => {
+            const fieldDefinition = columnSettingsNode.closest('.ibexa-collapse--field-definition');
+            const { fieldDefinitionIdentifier } = fieldDefinition.dataset;
+            const hasError = !validateMatrixColumns(columnSettingsNode);
+
+            if (!fieldDefinitionsStatuses[fieldDefinitionIdentifier]) {
+                fieldDefinitionsStatuses[fieldDefinitionIdentifier] = [];
+            }
+
+            fieldDefinitionsStatuses[fieldDefinitionIdentifier].push(hasError);
+        });
+
         Object.entries(fieldDefinitionsStatuses).forEach(([fieldDefinitionIdentifier, inputsStatus]) => {
             const isFieldDefinitionValid = inputsStatus.every((hasError) => !hasError);
             const fieldDefinitionNode = doc.querySelector(`[data-field-definition-identifier="${fieldDefinitionIdentifier}"]`);
@@ -629,7 +657,17 @@
         draggableGroups.push(draggable);
     });
 
+    doc.body.addEventListener('ibexa-fieldtype-matrix:added-column', (event) => {
+        const { columnNode } = event.detail;
+        const inputs = columnNode.querySelectorAll('.ibexa-input[required]');
+
+        [...inputs].forEach((input) => {
+            attachValidateEvents(input);
+        });
+    });
+
     fieldDefinitionsGroups.forEach((group) => group.addEventListener('click', () => setActiveGroup(group), false));
+
     inputsToValidate.forEach(attachValidateEvents);
 
     editForm.addEventListener(