IBX-3301: Product type - disable button Add when there is no option t…

…o add more elements (#629)
ibexa · Nov 3, 2022 · d9c9e2b · d9c9e2b
1 parent 1057729
commit d9c9e2b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js
@@ -44,8 +44,17 @@
 
             doc.querySelector(relatedCollapseSelector).classList.remove('ibexa-collapse--hidden');
             afterChangeGroup();
+            toggleAddGroupTriggerBtnState();
         },
     });
+    const toggleAddGroupTriggerBtnState = () => {
+        const addGroupBtns = doc.querySelectorAll('.ibexa-content-type-edit__add-field-definitions-group [data-related-collapse-selector]');
+        const areAllAddGroupBtnsDisabled = [...addGroupBtns].every((btn) =>
+            btn.classList.contains('ibexa-popup-menu__item-content--disabled'),
+        );
+
+        addGroupTriggerBtn.disabled = areAllAddGroupBtnsDisabled;
+    };
     const searchField = (event) => {
         const fieldFilterQueryLowerCase = event.currentTarget.value.toLowerCase();
         const fields = doc.querySelectorAll('.ibexa-available-field-types__list .ibexa-available-field-type');
@@ -254,6 +263,7 @@
                     fieldDefinition.remove();
                 });
                 afterChangeGroup();
+                toggleAddGroupTriggerBtnState();
             })
             .catch(ibexa.helpers.notification.showErrorNotification);
     };
@@ -471,4 +481,6 @@
         },
         false,
     );
+
+    toggleAddGroupTriggerBtnState();
 })(window, window.document, window.ibexa, window.Routing, window.Translator);
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -217,6 +217,15 @@
         &:focus {
             box-shadow: $ibexa-btn-focus-box-shadow-info;
         }
+
+        &.disabled,
+        &[disabled],
+        &:disabled {
+            color: $ibexa-color-dark-400;
+            fill: $ibexa-color-dark-400;
+            border-color: $ibexa-color-dark-200;
+            background-color: $ibexa-color-light-300;
+        }
     }
 
     &--neon-info.ibexa-btn {