Fixed Form submitted fields for method get for Vue datepicker modules

COmanage · May 13, 2022 · 416efe2 · 416efe2
1 parent 4dd26d9
commit 416efe2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 38 deletions.
diff --git a/app/src/Lib/Traits/SearchFilterTrait.php b/app/src/Lib/Traits/SearchFilterTrait.php
@@ -30,6 +30,7 @@
 namespace App\Lib\Traits;
 
 use Cake\Utility\Inflector;
+use Cake\I18n\FrozenTime;
 
 trait SearchFilterTrait {
   // Array (and configuration) of permitted search filters
@@ -93,19 +94,19 @@ public function whereFilter(\Cake\ORM\Query $query, string $attribute, string|ar
       if(!empty($search[0])
          && !empty($search[1])) {
         return $query->where(function (\Cake\Database\Expression\QueryExpression $exp, \Cake\ORM\Query $query) use ($attribute, $search) {
-          return $exp->between($attribute, $search[0], $search[1]);
+          return $exp->between($attribute, "'" . $search[0] . "'", "'" . $search[1] . "'");
         });
         // The starts at is non empty. So the data should be greater than the starts_at date
       } elseif(!empty($search[0])
         && empty($search[1])) {
         return $query->where(function (\Cake\Database\Expression\QueryExpression $exp, \Cake\ORM\Query $query) use ($attribute, $search) {
-          return $exp->gte($attribute, $search[0]);
+          return $exp->gte("'" . FrozenTime::parse($search[0]) . "'", $attribute);
         });
         // The ends at is non-empty. So the data should be less than the ends at date
       } elseif(!empty($search[1])
         && empty($search[0])) {
         return $query->where(function (\Cake\Database\Expression\QueryExpression $exp, \Cake\ORM\Query $query) use ($attribute, $search) {
-          return $exp->lte($attribute, $search[1]);
+          return $exp->lte("'" . FrozenTime::parse($search[1]) . "'", $attribute);
         });
       } else {
         // We return everything

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -47,7 +47,7 @@ class FieldHelper extends Helper {
 
   // The current entity, if edit or view
   protected $entity = null;
-  
+
   /**
    * Emit an informational banner.
    *

diff --git a/app/templates/element/filter.php b/app/templates/element/filter.php
@@ -167,14 +167,35 @@
         }
       ?>
       </div>
+      <?php if(!empty($field_booleans_columns)): ?>
+        <div class="top-search-checkboxes input">
+          <div class="top-search-checkbox-label">On-Off</div>
+          <div class="top-search-checkbox-fields">
+            <?php foreach($field_booleans_columns as $key => $options): ?>
+              <div class="form-check form-check-inline">
+                <?php
+                  print $this->Form->label($key);
+                  print $this->Form->checkbox($key, [
+                    'id' => $key,
+                    'class' => 'form-check-input',
+                    'checked' => $query[$key] ?? 0,
+                    'hiddenField' => false,
+                    'required' => false
+                  ]);
+                ?>
+              </div>
+            <?php endforeach; ?>
+          </div>
+        </div>
+      <?php endif; ?>
       <?php if(!empty($field_datetime_columns)): ?>
-      <?php foreach($field_datetime_columns as $key => $options): ?>
-         <div class="input">
-           <div class="top-search-date-label"><?= Inflector::humanize($key) ?></div>
-              <div class="top-filters-fields-subgroups">
+        <?php foreach($field_datetime_columns as $key => $options): ?>
+          <div class="input">
+            <div class="top-search-date-label"><?= Inflector::humanize($key) ?></div>
+            <div class="top-filters-fields-subgroups">
               <!--     Start at       -->
               <div class="top-search-date-fields">
-                  <div class="d-flex">
+                <div class="d-flex">
                   <?php
                   // A datetime field will be rendered as plain text input with adjacent date and time pickers
                   // that will interact with the field value. Allowing direct access to the input field is for
@@ -183,7 +204,8 @@
                   $coptions['class'] = 'form-control datepicker';
                   $coptions['label'] = 'Starts at:';
                   $coptions['required'] = false;
-                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
+                  $coptions['placeholder'] = '';
+//                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
                   $coptions['id'] = $starts_field;
 
                   $pickerDate = '';
@@ -214,7 +236,8 @@
                   $ends_field = $key . "_ends_at";
                   $coptions['class'] = 'form-control datepicker';
                   $coptions['required'] = false;
-                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS'; // TODO: test for date-only inputs and send only the date
+                  $coptions['placeholder'] = ''; // todo: Make this configurable
+//                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
                   $coptions['label'] = 'Ends at:';
                   $coptions['id'] = $ends_field;
 
@@ -241,26 +264,6 @@
         <?php endforeach; ?>
       <?php endif; ?>
 
-      <?php if(!empty($field_booleans_columns)): ?>
-        <div class="top-search-checkboxes input">
-          <div class="top-search-checkbox-label">On-Off</div>
-          <div class="top-search-checkbox-fields">
-            <?php foreach($field_booleans_columns as $key => $options): ?>
-              <div class="form-check form-check-inline">
-                <?php
-                  print $this->Form->label($key);
-                  print $this->Form->checkbox($key, [
-                    'class' => 'form-check-input',
-                    'checked' => $query[$key] ?? 0,
-                    'hiddenField' => false,
-                    'required' => false
-                  ]);
-                ?>
-              </div>
-            <?php endforeach; ?>
-          </div>
-        </div>
-      <?php endif; ?>
       <?php $rebalanceColumns = ((count($vv_searchable_attributes)) % 2 != 0) ? ' class="tss-rebalance"' : ''; ?>
       <div id="top-filters-submit"<?php print $rebalanceColumns ?>>
         <?php

diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -136,15 +136,20 @@ export default {
     let dateWidgets = document.getElementsByTagName('duet-date-picker');
     let curForm = dateWidgets[0].closest('form');
 
+    // We should distinguish between POST and GET requests.
+    // POST: For the POST requests we want to strip out all the Vue Related fields but send all the other form fields
+    // GET: For GET Requests empty fields are useless, So we need to strip them out as well.
     curForm.addEventListener('submit', e => {
-      e.preventDefault();
       let dateWidgetInputs = document.querySelectorAll('duet-date-picker input');
-      Array.prototype.slice.call(dateWidgetInputs).forEach(
-        function(element) {
-          element.parentNode.removeChild(element);
-        }
-      );
-      curForm.submit();
+      // Remove all the Vue related fields
+      Array.prototype.slice.call(dateWidgetInputs).forEach( (el) => {
+        el.parentNode.removeChild(el);
+      });
+      // For the GET request send using the default flow
+      if (curForm.getAttribute('method') != 'get') {
+        e.preventDefault();
+        curForm.submit();
+      }
     });
   },
   template: `