Auto-disable screen options checkboxes when limit is reached

.github/workflows/jscs.yml

@@ -20,5 +20,6 @@ jobs:
         run: |
           npm install eslint
           wget https://develop.svn.wordpress.org/trunk/.jshintrc
-          ./node_modules/.bin/eslint ./js/formidable*
+          ./node_modules/.bin/eslint ./js/formidable.js
           ./node_modules/.bin/eslint ./tests/cypress/e2e/*
+          ./node_modules/.bin/eslint ./js/src/admin/admin.js

classes/controllers/FrmEntriesController.php

@@ -393,20 +393,18 @@ private static function field_supports_sorting( $field ) {
 	 * @return array
 	 */
 	public static function hidden_columns( $result ) {
+		global $frm_vars;
+
 		if ( ! is_array( $result ) ) {
 			// Force an unexpected value to be an array.
 			// Since $result is a filtered option and gets saved to the database, it's possible it could be a string.
 			// Since this code expects an array it would break with a "Uncaught Error: [] operator not supported for strings" error.
 			$result = array();
 		}
 
-		$form_id = FrmForm::get_current_form_id();
-
-		$hidden = self::user_hidden_columns_for_form( $form_id, $result );
-
-		global $frm_vars;
-		$i = isset( $frm_vars['cols'] ) ? count( $frm_vars['cols'] ) : 0;
-
+		$form_id     = FrmForm::get_current_form_id();
+		$hidden      = self::user_hidden_columns_for_form( $form_id, $result );
+		$i           = isset( $frm_vars['cols'] ) ? count( $frm_vars['cols'] ) : 0;
 		$max_columns = 11;
 
 		if ( ! empty( $hidden ) ) {
@@ -447,6 +445,10 @@ private static function user_hidden_columns_for_form( $form_id, $result ) {
 	 * Remove some columns by default when there are too many
 	 *
 	 * @since 2.05.07
+	 *
+	 * @param array $atts
+	 * @param array $result
+	 * @return void
 	 */
 	private static function remove_excess_cols( $atts, &$result ) {
 		global $frm_vars;

js/src/admin/admin.js

@@ -10012,6 +10012,81 @@ function frmAdminBuildJS() {
 		});
 	}
 
+	/**
+	 * Enforce the maximum number of entries list columns dynamically.
+	 *
+	 * @since x.x
+	 *
+	 * @return {void}
+	 */
+	function maybeInitEntriesListPage() {
+		if ( ! document.body.classList.contains( 'formidable_page_formidable-entries' ) ) {
+			return;
+		}
+
+		const screenOptionsWrapper = document.getElementById( 'screen-options-wrap' );
+		if ( ! screenOptionsWrapper ) {
+			return;
+		}
+
+		const maxSelectionsNote = div({
+			className: 'frm_warning_style',
+			text: __( 'Only 10 columns can be selected at a time.', 'formidable' ),
+		});
+		maxSelectionsNote.style.margin = 0;
+
+		const legend = screenOptionsWrapper.querySelector( 'legend' );
+		legend.parentNode.insertBefore( maxSelectionsNote, legend.nextElementSibling );
+
+		const checkboxes               = Array.from( screenOptionsWrapper.querySelectorAll( 'input[type="checkbox"]' ) );
+		const maximumColumns           = 10;
+		const getSelectedCount         = () => {
+			return checkboxes.reduce( ( count, checkbox ) => {
+				return checkbox.checked ? count + 1 : count;
+			}, 0 );
+		};
+		const disableCheckboxesIfAtMax = () => {
+			if ( getSelectedCount() >= maximumColumns ) {
+				maxSelectionsNote.classList.remove( 'frm_hidden' );
+				checkboxes.forEach( checkbox => {
+					if ( ! checkbox.checked ) {
+						checkbox.parentNode.classList.add( 'frm_noallow' );
+						checkbox.disabled = true;
+					}
+				} );
+			} else {
+				maxSelectionsNote.classList.add( 'frm_hidden' );
+			}
+		};
+		const addCheckboxListeners = () => {
+			checkboxes.forEach(
+				checkbox => {
+					checkbox.addEventListener(
+						'change',
+						event => {
+							if ( event.target.checked ) {
+								disableCheckboxesIfAtMax();
+							} else {
+								maxSelectionsNote.classList.add( 'frm_hidden' );
+
+								// Enable all checkboxes when a checkbox is unchecked.
+								checkboxes.forEach(
+									checkbox => {
+										checkbox.parentNode.classList.remove( 'frm_noallow' );
+										checkbox.disabled = false;
+									}
+								);
+							}
+						}
+					)
+				}
+			);
+		};
+
+		disableCheckboxesIfAtMax();
+		addCheckboxListeners();
+	}
+
 	function initOnSubmitAction() {
 		const onChangeType = event => {
 			if ( ! event.target.checked ) {
@@ -10318,6 +10393,8 @@ function frmAdminBuildJS() {
 				// Solution install page
 				frmAdminBuild.solutionInit();
 			} else {
+				maybeInitEntriesListPage();
+
 				initAutocomplete();
 
 				jQuery( '[data-frmprint]' ).on( 'click', function() {