From 87913ba3b55ecc9c7433d249b09adf320a6db27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Sun, 4 Sep 2022 16:09:56 +0200
Subject: [PATCH] Make URLs created by filter form a lot shorter

---
 .../helpers/form_cleanup_controller.js        | 43 +++++++++++++++++++
 src/Form/Filters/PartFilterType.php           |  6 +--
 src/Form/Type/TriStateCheckboxType.php        |  2 +-
 templates/Parts/lists/_filter.html.twig       | 11 ++++-
 translations/messages.en.xlf                  | 24 +++++++++++
 5 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 assets/controllers/helpers/form_cleanup_controller.js

diff --git a/assets/controllers/helpers/form_cleanup_controller.js b/assets/controllers/helpers/form_cleanup_controller.js
new file mode 100644
index 00000000..955c1e09
--- /dev/null
+++ b/assets/controllers/helpers/form_cleanup_controller.js
@@ -0,0 +1,43 @@
+import {Controller} from "@hotwired/stimulus";
+
+/**
+ * Purpose of this controller is to clean up the form before it is finally submitted. This means empty fields get disabled, so they are not submitted.
+ * This is especially useful for GET forms, to prevent very long URLs
+ */
+export default class extends Controller {
+
+    /**
+     * Call during the submit event of the form. This will disable all empty fields, so they are not submitted.
+     * @param event
+     */
+    submit(event) {
+        /** Find the form this event belongs to */
+        /** @type {HTMLFormElement} */
+        const form = event.target.closest('form');
+
+        for(const element of form.elements) {
+            if(! element.value) {
+                element.disabled = true;
+            }
+
+            //Workaround for tristate checkboxes which use a hidden field to store the value
+            if ((element.type === 'hidden' || element.type === 'checkbox') && element.value === 'indeterminate') {
+                element.disabled = true;
+            }
+        }
+    }
+
+    /**
+     * Submits the form with all form elements disabled, so they are not submitted. This is useful for GET forms, to reset the form to not filled state.
+     * @param event
+     */
+    clearAll(event)
+    {
+        const form = event.target.closest('form');
+        for(const element of form.elements) {
+            element.disabled = true;
+        }
+
+        form.submit();
+    }
+}
\ No newline at end of file
diff --git a/src/Form/Filters/PartFilterType.php b/src/Form/Filters/PartFilterType.php
index 968187ac..b3d491ab 100644
--- a/src/Form/Filters/PartFilterType.php
+++ b/src/Form/Filters/PartFilterType.php
@@ -210,11 +210,11 @@ class PartFilterType extends AbstractType
         ]);
 
         $builder->add('submit', SubmitType::class, [
-            'label' => 'Update',
+            'label' => 'filter.submit',
         ]);
 
-        $builder->add('reset', ResetType::class, [
-            'label' => 'Reset',
+        $builder->add('discard', ResetType::class, [
+            'label' => 'filter.discard',
         ]);
 
     }
diff --git a/src/Form/Type/TriStateCheckboxType.php b/src/Form/Type/TriStateCheckboxType.php
index 87bdc473..9b3b2514 100644
--- a/src/Form/Type/TriStateCheckboxType.php
+++ b/src/Form/Type/TriStateCheckboxType.php
@@ -171,10 +171,10 @@ final class TriStateCheckboxType extends AbstractType implements DataTransformer
             case 'true':
                 return true;
             case 'false':
-            case '':
                 return false;
             case 'indeterminate':
             case 'null':
+            case '':
                 return null;
             default:
                 throw new InvalidArgumentException('Invalid value encountered!: '.$value);
diff --git a/templates/Parts/lists/_filter.html.twig b/templates/Parts/lists/_filter.html.twig
index 953ce0d6..aa2eb474 100644
--- a/templates/Parts/lists/_filter.html.twig
+++ b/templates/Parts/lists/_filter.html.twig
@@ -1,5 +1,5 @@
 <div class="card mb-4">
-    <div class="card-header"><i class="fa-solid fa-filter fa-fw"></i> Filter</div>
+    <div class="card-header"><i class="fa-solid fa-filter fa-fw"></i> {% trans %}filter.title{% endtrans %}</div>
     <div class="card-body">
         <ul class="nav nav-tabs" id="filterTabs" role="tablist">
             <li class="nav-item" role="presentation">
@@ -22,7 +22,7 @@
             </li>
         </ul>
 
-        {{ form_start(filterForm) }}
+        {{ form_start(filterForm, {"attr": {"data-controller": "helpers--form-cleanup", "data-action": "helpers--form-cleanup#submit"}}) }}
 
         <div class="tab-content">
             <div class="tab-pane active pt-3" id="filter-common" role="tabpanel" aria-labelledby="filter-common-tab" tabindex="0">
@@ -77,6 +77,13 @@
 
 
         {{ form_row(filterForm.submit) }}
+        {{ form_row(filterForm.discard) }}
+
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <button type="button" class="btn btn-danger" {{ stimulus_action('helpers/form_cleanup', 'clearAll') }}>{% trans %}filter.clear_filters{% endtrans %}</button>
+            </div>
+        </div>
 
         {{ form_end(filterForm) }}
     </div>
diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
index 3c94b9d9..73469609 100644
--- a/translations/messages.en.xlf
+++ b/translations/messages.en.xlf
@@ -9519,5 +9519,29 @@ Element 3</target>
         <target>Total amount</target>
       </segment>
     </unit>
+    <unit id="FGuEete" name="filter.submit">
+      <segment>
+        <source>filter.submit</source>
+        <target>Update</target>
+      </segment>
+    </unit>
+    <unit id="4jJXUNM" name="filter.discard">
+      <segment>
+        <source>filter.discard</source>
+        <target>Discard changes</target>
+      </segment>
+    </unit>
+    <unit id="uVrP0no" name="filter.clear_filters">
+      <segment>
+        <source>filter.clear_filters</source>
+        <target>Clear all filters</target>
+      </segment>
+    </unit>
+    <unit id="Rd0n9wc" name="filter.title">
+      <segment>
+        <source>filter.title</source>
+        <target>Filter</target>
+      </segment>
+    </unit>
   </file>
 </xliff>