Small improvements to the filter rebalance styling when boolean check…

…boxes are available (CFM-296)
COmanage · Oct 6, 2023 · fb8b4ea · fb8b4ea
1 parent 9bf59cd
commit fb8b4ea
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/app/templates/element/filter.php b/app/templates/element/filter.php
@@ -206,7 +206,7 @@
             }
 
             // Create a text field to hold our date value.
-            print '<div class="top-filters-fields-date ' . $wrapperCssClass . '">';
+            print '<div class="top-filters-fields-date filter-standard ' . $wrapperCssClass . '">';
             print $this->Form->label($key, $label);
             print '<div class="d-flex">';
             print $this->Form->text($key, $opts) . $this->element('datePicker', $date_args);
@@ -243,7 +243,7 @@
           }
 
           if($options['type'] != 'date') {
-            print '<div class="' . $wrapperCssClass . '">';
+            print '<div class="filter-standard ' . $wrapperCssClass . '">';
             print $this->Form->control($key, $formParams);
             print '</div>';
           }
@@ -253,7 +253,7 @@
         <div class="top-filters-checkboxes input">
           <div class="top-filters-checkbox-fields">
             <?php foreach($field_booleans_columns as $key => $options): ?>
-              <div class="<?= empty($options['active']) ? 'filter-active' : 'filter-inactive' ?>">
+              <div class="filter-boolean <?= empty($options['active']) ? 'filter-inactive' : 'filter-active' ?>">
                 <div class="form-check form-check-inline">
                   <?php
                     print $this->Form->label(!empty($columns[$key]['label']) ? $columns[$key]['label'] : $key);
@@ -359,7 +359,7 @@
         </div>
       <?php endif; ?>
 
-      <?php $rebalanceColumns = ((count($vv_searchable_attributes) - $inactiveFiltersCount) % 2 != 0) ? ' class="tss-rebalance"' : ''; ?>
+      <?php $rebalanceColumns = (((count($vv_searchable_attributes) - $inactiveFiltersCount) % 2 == 1) && empty($field_booleans_columns)) ? ' class="tss-rebalance"' : ''; ?>
       <div id="top-filters-submit"<?php print $rebalanceColumns ?>>
 
         <?php
@@ -392,13 +392,27 @@
               <h4><?= __d('menu','available.filters') ?></h4>
               <div id="top-filters-options">
                 <?php foreach($vv_searchable_attributes as $key => $options): ?>
-                <?php if($options['type'] == 'timestamp') continue; // skip timestamp types ?>
-                <div class="form-check filter-selector">
-                  <input class="form-check-input" type="checkbox" value="<?= Cake\Utility\Inflector::dasherize($key) ?>" id="filter-selector-<?= $key ?>"<?= !empty($options['active']) ? ' checked' : '' ?>>
-                  <label class="form-check-label" for="filter-selector-<?= $key ?>">
-                    <?= $options['label'] ?>
-                  </label>
-                </div>
+                  <?php if($options['type'] == 'timestamp' || $options['type'] == 'boolean') continue; // skip timestamp types and put booleans at the bottom of the list ?>
+                  <div class="form-check filter-selector filter-selector-text">
+                    <input class="form-check-input" 
+                           type="checkbox" 
+                           value="<?= Cake\Utility\Inflector::dasherize($key) ?>" 
+                           id="filter-selector-<?= $key ?>"<?= !empty($options['active']) ? ' checked' : '' ?>>
+                    <label class="form-check-label" for="filter-selector-<?= $key ?>">
+                      <?= $options['label'] ?>
+                    </label>
+                  </div>
+                <?php endforeach; ?>
+                <?php foreach($field_booleans_columns as $key => $options): ?>
+                  <div class="form-check filter-selector filter-selector-boolean">
+                    <input class="form-check-input" 
+                           type="checkbox" 
+                           value="<?= Cake\Utility\Inflector::dasherize($key) ?>" 
+                           id="filter-selector-<?= $key ?>"<?= !empty($options['active']) ? ' checked' : '' ?>>
+                    <label class="form-check-label" for="filter-selector-<?= $key ?>">
+                      <?= $options['label'] ?>
+                    </label>
+                  </div>
                 <?php endforeach; ?>
               </div>
             </div>

diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -166,10 +166,13 @@
       }
 
       // Toggle the submit container rebalance class so long as there are no datetime pickers
-      if(!$('.top-filters-fields-dates').length) {
-        // Count the number of visible fields, and apply the rebalance class on an odd number
-        if($('#top-filters-fields .filter-active').length % 2 == 1) {
-          $('#top-filters-submit').addClass("tss-rebalance");  
+      if(!$('#top-filters-fields .top-filters-fields-dates').length) {
+        // Count the number of standard visible fields, and apply the rebalance class on an odd number 
+        // unless boolean fields are visible - in which case we remove it.
+        let standardFiltersCount = $('#top-filters-fields .filter-standard.filter-active').length;
+        let booleanFiltersCount = $('#top-filters-fields .filter-boolean.filter-active').length;
+        if(standardFiltersCount % 2 == 1 && !booleanFiltersCount) {
+          $('#top-filters-submit').addClass("tss-rebalance"); 
         } else {
           $('#top-filters-submit').removeClass("tss-rebalance");
         }