Add min and max to list field

CHANGELOG.md

@@ -6,6 +6,7 @@
     * Added ability to choose how you want the preview button to open [#1096](https://github.com/getgrav/grav-plugin-admin/pull/1096)
     * `base.html.twig` now extends a `base-root.html.twig` file
     * Add month+date indication to the stats graph to avoid confusion when there are days without visits
+    * Added `min` and `max` options for `list` form field [#1113](https://github.com/getgrav/grav-plugin-admin/pull/1113)
 1. [](#bugfix)
     * Fixed issue with tab widths on Pages overlapping non-english toggle switch [#1089](https://github.com/getgrav/grav-plugin-admin/issues/1089)
     * Added `vendor` to ignores for direct install of Grav

themes/grav/app/forms/fields/collections.js

@@ -36,6 +36,8 @@ export default class CollectionsField {
                 onUpdate: () => this.reindex(container)
             }));
         });
+
+        this._updateActionsStateBasedOnMinMax(list);
     }
 
     addItem(event) {
@@ -44,10 +46,17 @@ export default class CollectionsField {
         let list = $(button.closest('[data-type="collection"]'));
         let template = $(list.find('> [data-collection-template="new"]').data('collection-template-html'));
 
+        this._updateActionsStateBasedOnMinMax(list);
+        let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
+        let maxItems = list.data('max');
+        if (typeof maxItems !== 'undefined' && items.length >= maxItems) {
+            return;
+        }
+
         list.find('> [data-collection-holder]')[position === 'top' ? 'prepend' : 'append'](template);
         this.reindex(list);
 
-        let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
+        items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
         let topAction = list.closest('[data-type="collection"]').find('[data-action-add="top"]');
         let sortAction = list.closest('[data-type="collection"]').find('[data-action="sort"]');
 
@@ -65,10 +74,18 @@ export default class CollectionsField {
         let item = button.closest('[data-collection-item]');
         let list = $(button.closest('[data-type="collection"]'));
 
+        this._updateActionsStateBasedOnMinMax(list);
+        let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
+        let minItems = list.data('min');
+
+        if (typeof minItems !== 'undefined' && items.length <= minItems) {
+            return;
+        }
+
         item.remove();
         this.reindex(list);
 
-        let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
+        items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
         let topAction = list.closest('[data-type="collection"]').find('[data-action-add="top"]');
         let sortAction = list.closest('[data-type="collection"]').find('[data-action="sort"]');
 
@@ -212,6 +229,23 @@ export default class CollectionsField {
             }
         });
     }
+
+    _updateActionsStateBasedOnMinMax(list) {
+        let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
+        let minItems = list.data('min');
+        let maxItems = list.data('max');
+
+        list.find('> .collection-actions [data-action="add"]').attr('disabled', false);
+        list.find('> ul > li > .item-actions [data-action="delete"]').attr('disabled', false);
+
+        if (typeof minItems !== 'undefined' && items.length <= minItems) {
+            list.find('> ul > li > .item-actions [data-action="delete"]').attr('disabled', true);
+        }
+
+        if (typeof maxItems !== 'undefined' && items.length >= maxItems) {
+            list.find('> .collection-actions [data-action="add"]').attr('disabled', true);
+        }
+    }
 }
 
 export let Instance = new CollectionsField();

themes/grav/templates/forms/fields/list/list.html.twig

@@ -36,7 +36,10 @@
         {% endblock %}
     >
 
-        <div class="form-list-wrapper {{ field.size }}" data-type="collection">
+        <div class="form-list-wrapper {{ field.size }}" data-type="collection"
+            {% if field.min is defined %}data-min="{{ field.min }}"{% endif %}
+            {% if field.max is defined %}data-max="{{ field.max }}"{% endif %}
+        >
             {% if fieldControls in ['top', 'both'] %}
                 <div class="collection-actions{{ not value|length ? ' hidden' : '' }}">
                     <button class="button" type="button" data-action="expand_all"