allowAdd and allowRemove settings for element selects

Resolves #15639
craftcms · Sep 2, 2024 · 0bf41d9 · 0bf41d9
1 parent bf9c66a
commit 0bf41d9
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 35 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -50,6 +50,7 @@
 - Deprecated `craft\helpers\ElementHelper::rootElement()`. `craft\base\ElementInterface::getRootOwner()` should be used instead.
 - Added `Craft.cp.announce()`, simplifying live region announcements for screen readers. ([#15569](https://github.com/craftcms/cms/pull/15569))
 - Element action menu items returned by `craft\base\Element::safeActionMenuItems()` and `destructiveActionMenuItems()` can now include a `showInChips` key to explicitly opt into/out of being shown within element chips and cards.
+- Element select inputs now support `allowAdd` and `allowRemove` settings. ([#15639](https://github.com/craftcms/cms/discussions/15639))
 - Control panel CSS selectors that take orientation into account now use logical properties. ([#15522](https://github.com/craftcms/cms/pull/15522))
 
 ### System

diff --git a/src/templates/_includes/forms/elementSelect.twig b/src/templates/_includes/forms/elementSelect.twig
@@ -22,6 +22,9 @@
 {% set maintainHierarchy = maintainHierarchy ?? false %}
 {% set registerJs = registerJs ?? true %}
 
+{% set allowAdd = allowAdd ?? true %}
+{% set allowRemove = allowRemove ?? true %}
+
 {% set containerAttributes = {
     id: id,
     class: ['elementselect']|merge((class ?? [])|explodeClass),
@@ -63,23 +66,25 @@
     {% endif %}
 
     <div class="flex">
-        {{ tag('button', {
-            type: 'button',
-            class: [
-                'btn',
-                'add',
-                'icon',
-                'dashed',
-                disabled ? 'disabled',
-                limit and elements|length >= limit ? 'hidden',
-            ]|filter,
-            text: selectionLabel ?? 'Choose'|t('app'),
-            disabled: disabled,
-            aria: {
-                label: selectionLabel ?? 'Choose'|t('app'),
-                describedby: describedBy ?? false,
-            }
-        }) }}
+        {% if allowAdd %}
+            {{ tag('button', {
+                type: 'button',
+                class: [
+                    'btn',
+                    'add',
+                    'icon',
+                    'dashed',
+                    disabled ? 'disabled',
+                    limit and elements|length >= limit ? 'hidden',
+                ]|filter,
+                text: selectionLabel ?? 'Choose'|t('app'),
+                disabled: disabled,
+                aria: {
+                    label: selectionLabel ?? 'Choose'|t('app'),
+                    describedby: describedBy ?? false,
+                }
+            }) }}
+        {% endif %}
         <div class="spinner hidden"></div>
     </div>
 {% endtag %}
@@ -94,6 +99,8 @@
         referenceElementId: referenceElement.id ?? null,
         referenceElementSiteId: referenceElement.siteId ?? null,
         criteria: criteria,
+        allowAdd: allowAdd,
+        allowRemove: allowRemove,
         allowSelfRelations: allowSelfRelations ?? false,
         maintainHierarchy: maintainHierarchy,
         branchLimit: branchLimit ?? null,

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/src/js/BaseElementSelectInput.js b/src/web/assets/cp/src/js/BaseElementSelectInput.js
@@ -204,7 +204,8 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
 
     canAddMoreElements: function () {
       return (
-        !this.settings.limit || this.$elements.length < this.settings.limit
+        this.settings.allowAdd &&
+        (!this.settings.limit || this.$elements.length < this.settings.limit)
       );
     },
 
@@ -217,7 +218,7 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
     },
 
     enableAddElementsBtn: function () {
-      if (this.$addElementBtn.length) {
+      if (this.settings.allowAdd && this.$addElementBtn.length) {
         this.$addElementBtn.removeClass('hidden');
       }
 
@@ -263,7 +264,10 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
     focusNextLogicalElement: function () {
       if (this.canAddMoreElements()) {
         // If can add more elements, focus ADD button
-        if (this.$addElementBtn.length) {
+        if (
+          this.$addElementBtn.length &&
+          !this.$addElementBtn.hasClass('hidden')
+        ) {
           this.$addElementBtn.get(0).focus();
         }
       } else {
@@ -436,19 +440,21 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
         });
       }
 
-      actions.push({
-        icon: 'remove',
-        label: Craft.t('app', 'Remove'),
-        callback: () => {
-          // If the element is selected, remove *all* the selected elements
-          if (this.elementSelect?.isSelected($element)) {
-            this.removeElement(this.elementSelect.getSelectedItems());
-          } else {
-            this.removeElement($element);
-          }
-        },
-        destructive: true,
-      });
+      if (this.settings.allowRemove) {
+        actions.push({
+          icon: 'remove',
+          label: Craft.t('app', 'Remove'),
+          callback: () => {
+            // If the element is selected, remove *all* the selected elements
+            if (this.elementSelect?.isSelected($element)) {
+              this.removeElement(this.elementSelect.getSelectedItems());
+            } else {
+              this.removeElement($element);
+            }
+          },
+          destructive: true,
+        });
+      }
 
       return actions;
     },
@@ -1033,6 +1039,8 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
       referenceElementId: null,
       referenceElementSiteId: null,
       criteria: {},
+      allowAdd: true,
+      allowRemove: true,
       allowSelfRelations: false,
       sourceElementId: null,
       disabledElementIds: null,