From 439f6cb355fff5fa6f815c45f481e98b4555d24a Mon Sep 17 00:00:00 2001
From: Ioannis Igoumenos <ioigoume@admin.grnet.gr>
Date: Wed, 11 May 2022 20:54:52 +0300
Subject: [PATCH] Force index filtering element id to kebab syntax

---
 app/templates/element/filter.php     |  6 +++---
 app/templates/element/javascript.php | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/templates/element/filter.php b/app/templates/element/filter.php
index 26f170713..ff1805d40 100644
--- a/app/templates/element/filter.php
+++ b/app/templates/element/filter.php
@@ -180,7 +180,7 @@
                 <?php
                   print $this->Form->label($key);
                   print $this->Form->checkbox($key, [
-                    'id' => $key,
+                    'id' => str_replace("_", "-", $key),
                     'class' => 'form-check-input',
                     'checked' => $query[$key] ?? 0,
                     'hiddenField' => false,
@@ -211,7 +211,7 @@
                   $coptions['required'] = false;
                   $coptions['placeholder'] = '';
 //                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
-                  $coptions['id'] = $starts_field;
+                  $coptions['id'] = str_replace("_", "-", $starts_field);
 
                   $pickerDate = '';
                   if(!empty($query[$starts_field])) {
@@ -245,7 +245,7 @@
                   $coptions['placeholder'] = ''; // todo: Make this configurable
 //                  $coptions['placeholder'] = 'YYYY-MM-DD HH:MM:SS';
                   $coptions['label'] = 'Ends at:';
-                  $coptions['id'] = $ends_field;
+                  $coptions['id'] = str_replace("_", "-", $ends_field);
 
                   $pickerDate = '';
                   if(!empty($query[$ends_field])) {
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index 6f36ab44e..f07844376 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -128,9 +128,21 @@
       e.stopPropagation();
       $(this).hide();
       $(this)[0].dataset.identifier.split(':').forEach( (ident) => {
-        let filterId = '#' + ident;
+        // CAKEPHP transforms snake case variables to kebab. As a result
+        // searching for the initial key will fail. This is used for use cases
+        // like the models that use the Tree behavior and have the column parent_id
+        let ident_to_snake = ident.replace(/_/g, "-");
+        let filterId = '#' + ident_to_snake;
         $(filterId).val("");
       });
+
+      // Remove the Vue date fields if exist
+      let dateWidgetInputs = document.querySelectorAll('duet-date-picker input');
+      // Remove all the Vue related fields
+      Array.prototype.slice.call(dateWidgetInputs).forEach( (el) => {
+        el.parentNode.removeChild(el);
+      });
+
       $(this).closest('form').submit();
     });