fix: [genericTemplate:filters] Correctly takes filter fields and simplified UI

src/Controller/Component/CRUDComponent.php

@@ -90,7 +90,7 @@ class CRUDComponent extends Component
             $this->Controller->set('taggingEnabled', true);
             $this->setAllTags();
         }
-        $filters = !empty($this->Controller->filters) ? $this->Controller->filters : [];
+        $filters = !empty($this->Controller->filterFields) ? $this->Controller->filterFields : [];
         $this->Controller->set('filters', $filters);
         $this->Controller->viewBuilder()->setLayout('ajax');
         $this->Controller->render('/genericTemplates/filters');

templates/genericTemplates/filters.php

@@ -1,6 +1,13 @@
 <?php
+
 use Cake\Utility\Inflector;
 
+$tableItems = array_map(function ($fieldName) {
+    return [
+        'fieldname' => $fieldName,
+    ];
+}, $filters);
+
 $filteringForm = $this->Bootstrap->table(
     [
         'small' => true,
@@ -9,19 +16,36 @@ $filteringForm = $this->Bootstrap->table(
         'tableClass' => ['indexFilteringTable'],
     ],
     [
-    'fields' => [
+        'fields' => [
-        __('Field'),
+            [
-        __('Operator'),
+                'key' => 'fieldname', 'label' => __('Field'), 'formatter' => function ($field, $row) {
-        [
+                    return sprintf('<span class="fieldName" data-fieldname="%s">%s</span>', h($field), h($field));
-            'labelHtml' => sprintf('%s %s',
+                }
-                __('Value'),
+            ],
-                sprintf('<sup class="fa fa-info" title="%s"><sup>', __('Supports strict matches and LIKE matches with the `%` character.&#10;Example: `%.com`'))
+            [
-            )
+                'key' => 'operator', 'label' => __('Operator'), 'formatter' => function ($field, $row) {
+                    $options = [
+                        sprintf('<option value="%s">%s</option>', '=', '='),
+                        sprintf('<option value="%s">%s</option>', '!=', '!='),
+                    ];
+                    return sprintf('<select class="fieldOperator form-select form-select-sm">%s</select>', implode('', $options));
+                }
+            ],
+            [
+                'key' => 'value',
+                'labelHtml' => sprintf(
+                    '%s %s',
+                    __('Value'),
+                    sprintf('<sup class="fa fa-info" title="%s"><sup>', __('Supports strict matches and LIKE matches with the `%` character.&#10;Example: `%.com`'))
+                ),
+                'formatter' => function ($field, $row) {
+                    return sprintf('<input type="text" class="fieldValue form-control form-control-sm">');
+                }
+            ],
         ],
-        __('Action')
+        'items' => $tableItems
-    ],
+    ]
-    'items' => []
+);
-]);
 
 if ($taggingEnabled) {
     $helpText = $this->Bootstrap->genNode('sup', [
@@ -40,7 +64,6 @@ if ($taggingEnabled) {
 }
 $modalBody = sprintf('%s%s', $filteringForm, $filteringTags);
 
-
 echo $this->Bootstrap->modal([
     'title' => __('Filtering options for {0}', Inflector::singularize($this->request->getParam('controller'))),
     'size' => 'lg',
@@ -69,7 +92,9 @@ echo $this->Bootstrap->modal([
             if (rowData['operator'] == '!=') {
                 fullFilter += ' !='
             }
-            activeFilters[fullFilter] = rowData['value']
+            if (rowData['value'].length > 0) {
+                activeFilters[fullFilter] = rowData['value']
+            }
         })
         $select = modalObject.$modal.find('select.tag-input')
         activeFilters['filteringTags'] = $select.select2('data').map(tag => tag.text)
@@ -85,8 +110,6 @@ echo $this->Bootstrap->modal([
 
     function initFilteringTable($filteringTable) {
         const $controlRow = $filteringTable.find('#controlRow')
-        $filteringTable.find('tbody').empty()
-        addControlRow($filteringTable)
         const randomValue = getRandomValue()
         const activeFilters = Object.assign({}, $(`#toggleFilterButton-${randomValue}`).data('activeFilters'))
         const tags = activeFilters['filteringTags'] !== undefined ? Object.assign({}, activeFilters)['filteringTags'] : []
@@ -100,7 +123,7 @@ echo $this->Bootstrap->modal([
             } else if (fieldParts.length > 2) {
                 console.error('Field contains multiple spaces. ' + field)
             }
-            addFilteringRow($filteringTable, field, value, operator)
+            setFilteringValues($filteringTable, field, value, operator)
         }
         $select = $filteringTable.closest('.modal-body').find('select.tag-input')
         let passedTags = []
@@ -118,97 +141,17 @@ echo $this->Bootstrap->modal([
             .trigger('change')
     }
 
-    function addControlRow($filteringTable) {
+    function setFilteringValues($filteringTable, field, value, operator) {
-        const availableFilters = <?= json_encode($filters) ?>;
+        $row = $filteringTable.find('td > span.fieldName').filter(function() {
-        const $selectField = $('<select/>').addClass('fieldSelect form-select form-select-sm')
+            return $(this).data('fieldname') == field
-        availableFilters.forEach(filter => {
+        }).closest('tr')
-            $selectField.append($('<option/>').text(filter))
+        $row.find('.fieldOperator').val(operator)
-        });
+        $row.find('.fieldValue').val(value)
-        const $selectOperator = $('<select/>').addClass('fieldOperator form-select form-select-sm')
-            .append([
-                $('<option/>').text('=').val('='),
-                $('<option/>').text('!=').val('!='),
-            ])
-        const $row = $('<tr/>').attr('id', 'controlRow')
-            .append(
-                $('<td/>').append($selectField),
-                $('<td/>').append($selectOperator),
-                $('<td/>').append(
-                    $('<input>').attr('type', 'text').addClass('fieldValue form-control form-control-sm')
-                ),
-                $('<td/>').append(
-                    $('<button/>').attr('type', 'button').addClass('btn btn-sm btn-primary')
-                        .append($('<span/>').addClass('fa fa-plus'))
-                        .click(addFiltering)
-                )
-            )
-        $filteringTable.append($row)
-    }
-
-    function addFilteringRow($filteringTable, field, value, operator) {
-        const $selectOperator = $('<select/>').addClass('fieldOperator form-select form-select-sm')
-            .append([
-                $('<option/>').text('=').val('='),
-                $('<option/>').text('!=').val('!='),
-            ]).val(operator)
-        const $row = $('<tr/>')
-            .append(
-                $('<td/>').text(field).addClass('fieldName').data('fieldName', field),
-                $('<td/>').append($selectOperator),
-                $('<td/>').append(
-                    $('<input>').attr('type', 'text').addClass('fieldValue form-control form-control-sm').val(value)
-                ),
-                $('<td/>').append(
-                    $('<button/>').attr('type', 'button').addClass('btn btn-sm btn-danger')
-                        .append($('<span/>').addClass('fa fa-trash'))
-                        .click(removeSelf)
-                )
-            )
-        $filteringTable.append($row)
-        const $controlRow = $filteringTable.find('#controlRow')
-        disableOptionFromSelect($controlRow, field)
-    }
-
-    function addFiltering() {
-        const $table = $(this).closest('table.indexFilteringTable')
-        const $controlRow = $table.find('#controlRow')
-        const field = $controlRow.find('select.fieldSelect').val()
-        const value = $controlRow.find('input.fieldValue').val()
-        const operator = $controlRow.find('input.fieldOperator').val()
-        addFilteringRow($table, field, value, operator)
-        $controlRow.find('input.fieldValue').val('')
-        $controlRow.find('select.fieldSelect').val('')
-    }
-
-    function removeSelf() {
-        const $row = $(this).closest('tr')
-        const $controlRow = $row.closest('table.indexFilteringTable').find('#controlRow')
-        const field = $row.data('fieldName')
-        $row.remove()
-        enableOptionFromSelect($controlRow, field)
-    }
-
-    function disableOptionFromSelect($controlRow, optionName) {
-        $controlRow.find('select.fieldSelect option').each(function() {
-            const $option = $(this)
-            if ($option.text() == optionName) {
-                $option.prop('disabled', true)
-            }
-        });
-    }
-
-    function enableOptionFromSelect($controlRow, optionName) {
-        $controlRow.find('select.fieldSelect option').each(function() {
-            const $option = $(this)
-            if ($option.text() == optionName) {
-                $option.prop('disabled', false)
-            }
-        });
     }
 
     function getDataFromRow($row) {
         const rowData = {};
-        rowData['name'] = $row.find('td.fieldName').data('fieldName')
+        rowData['name'] = $row.find('td > span.fieldName').data('fieldname')
         rowData['operator'] = $row.find('select.fieldOperator').val()
         rowData['value'] = $row.find('input.fieldValue').val()
         return rowData