Make URLs created by filter form a lot shorter

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();
+    }
+}

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, [
+        $builder->add('discard', ResetType::class, [
-            'label' => 'Reset',
+            'label' => 'filter.discard',
         ]);
 
     }

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);

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>

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>