Allow filtering from columns

[elfjes]

Allow specifiying when a column may be "filterable" (by specifying the IncidentTableColumn.filter_field). This means:

• a button will be attached to the column header
• clicking that button will display an input element
• typing into this element (ie change event) will fire an htmx request with the specified filter_field as the query param to filter incidents

TODO:

• create the ui elements and activate this element when IncidentTableColumn.filter_field is set
• wrap the column headers in a form and send this form as htmx request on change event
  • include filter-box form fields in the request
• prefill input value based on current values

Limitations:

• requires hyperscript
• only support simple text input for now

[hmpf]

We should probably figure out how to do the bulk-selection first so the forms don't interfere with each other.

I assume the form will have hidden fields for the other values so we don't lose the existing GET-args?

[hmpf]

The icon needs be flatter =)

[elfjes]

We should probably figure out how to do the bulk-selection first so the forms don't interfere with each other.

hmm perhaps, but I think the bulk selection will be a completely separate flow from the filtering, no? or is it the mass checkbox that you're concerned about?

I assume the form will have hidden fields for the other values so we don't lose the existing GET-args?

I was thinking to just cross hx-include the header-row form and the filterbox form for both forms (and also in the periodic refresh). Hidden inputs might also work but we need to be sure then to also add the header-row inputs in the filterbox form

The icon needs be flatter =)

I went with something that is in unicode. I could not find anything that worked better 😅. Maybe we need to think about adopting an icon pack (fontawesome?)

[hmpf]

We should probably figure out how to do the bulk-selection first so the forms don't interfere with each other.

hmm perhaps, but I think the bulk selection will be a completely separate flow from the filtering, no? or is it the mass checkbox that you're concerned about?

Yep. <input> has the form-attribute but there is more than one bulk form.

[hmpf]

As for supporting other types than text-input, we'd have to extend the column-objects.

[podliashanyk]

We should probably figure out how to do the bulk-selection first so the forms don't interfere with each other.

hmm perhaps, but I think the bulk selection will be a completely separate flow from the filtering, no? or is it the mass checkbox that you're concerned about?

Yep. <input> has the form-attribute but there is more than one bulk form.

Haven't looked at code yet but in general multiple input tags with form is no problem. form exists for hooking inputs to any forms anywhere in DOM: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form.