From fbc61a71b8dcc5b47c907a6b770fe994f07689d0 Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@admin.grnet.gr>
Date: Wed, 11 May 2022 20:28:32 +0300
Subject: [PATCH] Fixed top filter button clear functionality

---
 app/templates/element/filter.php                       |  6 +++++-
 app/templates/element/javascript.php                   | 10 ++++------
 app/webroot/js/comanage/comanage.js                    |  2 +-
 .../components/datepicker/cm-datetimepicker.js         |  5 ++++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/templates/element/filter.php b/app/templates/element/filter.php
index 11535d325..26f170713 100644
--- a/app/templates/element/filter.php
+++ b/app/templates/element/filter.php
@@ -99,6 +99,10 @@
           <?php
             // Construct aria-controls string
             $aria_controls = $key;
+            // We save the name of the id into a dataset variable, data-identifier. This is an easy way
+            // to store the correct identifier in the case of dates. Dates have two search fields for each column
+            // which makes it more complicated to keep track of the id.
+            $data_identifier = is_array($params) ? implode(':', array_keys($params)) : $key;
 
             // We have active filters - not just a sort.
             $hasActiveFilters = true;
@@ -110,7 +114,7 @@
               $$populated_vvar[ $search_params[$key] ] :
               (is_array($search_params[$key]) ? 'Range' : $search_params[$key]);
           ?>
-          <button class="top-filters-active-filter deletebutton spin btn btn-default btn-sm" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __d('operation', 'clear.filters',[2]); ?>">
+          <button class="top-filters-active-filter deletebutton spin btn btn-default btn-sm" data-identifier="<?= $data_identifier ?>" type="button" aria-controls="<?php print $aria_controls; ?>" title="<?= __d('operation', 'clear.filters',[2]); ?>">
              <em class="material-icons">cancel</em>
              <span class="top-filters-active-filter-title">
                <?= $vv_searchable_attributes[$key]['label'] ?>
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index 201139b51..6f36ab44e 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -127,12 +127,10 @@
       e.preventDefault();
       e.stopPropagation();
       $(this).hide();
-      // CAKEPHP transforms snake case variables to kebab. As a result
-      // searching for the initial key will fail
-      original_value = $(this).attr("aria-controls");
-      value_to_snake = original_value.replace(/_/g, "-");;
-      filterId = '#' + value_to_snake;
-      $(filterId).val("");
+      $(this)[0].dataset.identifier.split(':').forEach( (ident) => {
+        let filterId = '#' + ident;
+        $(filterId).val("");
+      });
       $(this).closest('form').submit();
     });
 
diff --git a/app/webroot/js/comanage/comanage.js b/app/webroot/js/comanage/comanage.js
index 86dfb5cf5..a928fa434 100644
--- a/app/webroot/js/comanage/comanage.js
+++ b/app/webroot/js/comanage/comanage.js
@@ -204,7 +204,7 @@ function limitPage(pageLimit,recordCount,currentPage) {
 // Clear the top search form for index views
 // formObj         - form object (DOM form obj, required)
 function clearTopSearch(formObj) {
-  for (var i=0; i<formObj.elements.length; i++) {
+  for (let i=0; i<formObj.elements.length; i++) {
     if(formObj.elements[i].type != 'hidden') {
       formObj.elements[i].disabled = true;
     }
diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
index f4459a5fd..d257e0aa4 100644
--- a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
+++ b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -140,6 +140,10 @@ export default {
     // 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 => {
+      // For the GET request send using the default flow
+      if (curForm.getAttribute('method') != 'get') {
+        e.preventDefault();
+      }
       let dateWidgetInputs = document.querySelectorAll('duet-date-picker input');
       // Remove all the Vue related fields
       Array.prototype.slice.call(dateWidgetInputs).forEach( (el) => {
@@ -147,7 +151,6 @@ export default {
       });
       // For the GET request send using the default flow
       if (curForm.getAttribute('method') != 'get') {
-        e.preventDefault();
         curForm.submit();
       }
     });