Closes: #9583 - Add column specific search field to tables #15073

DanSheps · 2024-02-07T18:20:15Z

Closes: #9583 - Add column specific search field to tables

The plan is to use the existing filterset to generate form fields on the table column headers to allow for inline-filtering using HTMX requests

Progress

Fields are generated for type fields HTMX requests are sent and account for both fields
Integrate with "quick search"
Works with custom fields
Allow dropdown to float outside of the parent div

Todo

~~Add input fields for "name"~~ Not needed - Quick search is suitable for this
~~Fix filter float (Move before field name perhaps)~~ Done
~~Add show/hide filter (Optional)~~ Outside of scope

DanSheps

I think this is mostly there

netbox/netbox/views/generic/bulk_views.py

DanSheps · 2024-02-07T19:46:35Z

netbox/templates/inc/table_controls_htmx.html

@@ -5,7 +5,7 @@
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch">
      <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+        hx-get="" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />


Removed full path, as this will allow taking into account filters on the form (to facilitate pushing of the filters from the column as well).

Should not impact functionality

Should not impact functionality

Do we know this for sure? IIRC we specify the full path for a reason, I just can't recall why.

From my testing, I haven't found any issues with it.

netbox/utilities/templatetags/form_helpers.py

…field_to_tables' into 9583-add_column_specific_search_field_to_tables

jeremystretch

I'm seeing a lot of errors when trying to load the filter fields.

This is likely due to having multiple form fields with the same ID (one on the table and one on the "filters" tab).

netbox/utilities/templatetags/form_helpers.py

…ction for column filters

…tables

netbox/utilities/templatetags/form_helpers.py

netbox/templates/inc/table_htmx.html

netbox/templates/inc/table_header_filter_dropdown.html

jeremystretch · 2024-03-20T19:45:15Z

netbox/templates/inc/table_controls_htmx.html

@@ -5,7 +5,7 @@
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch">
      <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+        hx-get="" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />


Should not impact functionality

Do we know this for sure? IIRC we specify the full path for a reason, I just can't recall why.

netbox/templates/inc/table_header_filter_dropdown.html

netbox/templates/inc/table_htmx.html

netbox/utilities/templatetags/form_helpers.py

jeremystretch · 2024-03-20T19:55:00Z

netbox/utilities/templatetags/form_helpers.py

+        field.field.widget.attrs.update({
+            'id': f'table_filter_id_{field.name}',
+            'hx-get': url if url else '#',
+            'hx-push-url': "true",
+            'hx-target': '#object_list',
+            'hx-trigger': 'hidden.bs.dropdown from:closest .dropdown'
+        })


I'm not sure this approach is tenable: We're using the same form field for both the column and the regular filter form (behind the second tab). Setting HTMX attributes on a non-HTMX form field should be avoided, and overriding its ID may cause problems. IMO we should try to identify a cleaner approach.

I have went ahead and made a possible modification to this.

In bulk views, I initialize two copies of the form:

A copy of the form for the filtering tab

A copy of the form for the table column filtering

Since this render_table_filter_field tag is only used by the table coumn filtering logic, this shouldn't be a problem anymore.

Let me know if this approach is a more "safer" one while allowing for some code re-use. I can go a little deeper and perhaps modify all filtersets to add a "column filter" tuple to allow a more clean approach to limiting the columns as well.

AFAICT this should work fine, but do we need a full form instance for the columns? It might suffice to make a copy of the relevant fields from the filter form and attach them to their respective columns.

Though with either approach, I feel like we're missing a step. The current implementation depends on the column name and the field name matching (form_field=table.filterset_form|get_filter_field:column.name). This should work ~95% of the time but inevitably we're going to find exceptions. I'd like to see if we can devise a more robust approach, short of duplicating the field definitions.

AFAICT this should work fine, but do we need a full form instance for the columns? It might suffice to make a copy of the relevant fields from the filter form and attach them to their respective columns.

Instead of initializing the form right away, we could copy the form definition and then remove fields that not present on the table before intitialization. This feels like excess code for very little gain however

Though with either approach, I feel like we're missing a step. The current implementation depends on the column name and the field name matching (form_field=table.filterset_form|get_filter_field:column.name). This should work ~95% of the time but inevitably we're going to find exceptions. I'd like to see if we can devise a more robust approach, short of duplicating the field definitions.

I think we should handle this on a case-by-case. The only other option would be looking at the table and building a completely new form class dynamically based on the table field types, however we then would likely lose all the custom filtering unless we tie it with the existing filter form somehow.

jeremystretch · 2024-03-20T20:08:36Z

Another concern: There's no way to quickly discern when a column filter has been applied.

netbox/templates/inc/table_htmx.html

netbox/utilities/templatetags/form_helpers.py

DanSheps · 2024-06-03T04:15:35Z

@DanSheps any progress on this?

This week I should have something

…into 9583-add_column_specific_search_field_to_tables # Conflicts: # netbox/project-static/dist/netbox.css # netbox/templates/htmx/table.html # netbox/templates/inc/table_htmx.html

DanSheps · 2024-06-13T13:59:17Z

netbox/utilities/templatetags/form_helpers.py

+    # Check for a table form column map attribute and use that to map form fields if set
+    if hasattr(form, '_table_form_column_map') and form._table_form_column_map.get(fieldname):
+        return getfield(form, form._table_form_column_map.get(fieldname))


Not set on this, but also wondering if this should be a default on the form or if it should move to the Meta class

github-actions · 2024-06-29T04:04:09Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.

github-actions · 2024-07-17T04:03:10Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.

github-actions · 2024-08-07T04:04:16Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.

github-actions · 2024-08-23T04:03:56Z

This PR has been automatically closed due to lack of activity.

github-actions · 2024-09-08T04:03:19Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.

github-actions · 2024-10-12T04:03:35Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.

…tables

DanSheps added 4 commits February 2, 2024 15:49

Preliminary work on 9583.

4c39516

HTMX work on 9583.

e762755

Preliminary work on 9583.

f7294f7

Preliminary work on 9583.

664a0eb

DanSheps changed the base branch from develop to feature February 7, 2024 19:41

DanSheps commented Feb 7, 2024

View reviewed changes

Apply some quick fixes and add comments

cc423f5

jeremystretch added this to the v4.0 milestone Feb 8, 2024

DanSheps added 10 commits February 9, 2024 16:35

Final work on #9583 for basic functionality

50557c0

CSS update for dropdown

03f67f3

Merge remote-tracking branch 'origin/9583-add_column_specific_search_…

3243ebd

…field_to_tables' into 9583-add_column_specific_search_field_to_tables

Update CSS

b54cfd6

Change dropdown position and fix test failure

5f69666

Fix test failure

06c1aff

Merge in recent feture changes

4ae6683

Update CSS after merge

c3f1a96

Optimizations

f81f76f

Fix extraneous __all__ entry

0309796

DanSheps marked this pull request as ready for review February 12, 2024 22:09

DanSheps requested a review from jeremystretch February 12, 2024 22:09

jeremystretch reviewed Feb 13, 2024

View reviewed changes

netbox/utilities/templatetags/form_helpers.py Outdated Show resolved Hide resolved

Fix tom-select errors related to field id. Break out render_field fun…

84151cb

…ction for column filters

DanSheps requested a review from jeremystretch February 16, 2024 21:57

jeremystretch added 2 commits March 7, 2024 08:50

Merge branch 'feature' into 9583-add_column_specific_search_field_to_…

77bfd62

…tables

Merge branch 'feature' into 9583-add_column_specific_search_field_to_…

25a4e94

…tables

jeremystretch requested changes Mar 20, 2024

View reviewed changes

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/templates/inc/table_htmx.html Outdated Show resolved Hide resolved

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/templates/inc/table_htmx.html Outdated Show resolved Hide resolved

DanSheps commented Mar 22, 2024

View reviewed changes

netbox/utilities/templatetags/form_helpers.py Outdated Show resolved Hide resolved

DanSheps added 3 commits June 12, 2024 23:01

Add a table form override and add a table column remap option

30e6531

Merge branch 'feature' of https://github.com/netbox-community/netbox …

f130678

…into 9583-add_column_specific_search_field_to_tables # Conflicts: # netbox/project-static/dist/netbox.css # netbox/templates/htmx/table.html # netbox/templates/inc/table_htmx.html

Regnerate CSS

0ad1db9

DanSheps commented Jun 13, 2024

View reviewed changes

github-actions bot added the pending closure Requires immediate attention to avoid being closed for inactivity label Jun 29, 2024

DanSheps removed the pending closure Requires immediate attention to avoid being closed for inactivity label Jul 2, 2024

DanSheps requested review from arthanson and jeremystretch July 2, 2024 03:18

Update to latest feature

b12ce97

github-actions bot added the pending closure Requires immediate attention to avoid being closed for inactivity label Jul 17, 2024

DanSheps removed the pending closure Requires immediate attention to avoid being closed for inactivity label Jul 22, 2024

github-actions bot added the pending closure Requires immediate attention to avoid being closed for inactivity label Aug 7, 2024

github-actions bot closed this Aug 23, 2024

jeremystretch reopened this Aug 23, 2024

jeremystretch removed the pending closure Requires immediate attention to avoid being closed for inactivity label Aug 23, 2024

github-actions bot added the pending closure Requires immediate attention to avoid being closed for inactivity label Sep 8, 2024

DanSheps added status: blocked Another issue or external requirement is preventing implementation and removed pending closure Requires immediate attention to avoid being closed for inactivity status: blocked Another issue or external requirement is preventing implementation labels Sep 12, 2024

github-actions bot added the pending closure Requires immediate attention to avoid being closed for inactivity label Oct 12, 2024

DanSheps removed the pending closure Requires immediate attention to avoid being closed for inactivity label Oct 15, 2024

DanSheps added 2 commits October 16, 2024 22:13

Merge branch 'feature' into 9583-add_column_specific_search_field_to_…

77cb8ac

…tables

Update bundle

d6ab7b7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Closes: #9583 - Add column specific search field to tables #15073

Closes: #9583 - Add column specific search field to tables #15073

DanSheps commented Feb 7, 2024 •

edited

Loading

DanSheps left a comment

DanSheps Feb 7, 2024 •

edited

Loading

jeremystretch Mar 20, 2024

DanSheps Apr 15, 2024

jeremystretch left a comment

jeremystretch Mar 20, 2024

jeremystretch Mar 20, 2024

DanSheps Mar 22, 2024 •

edited

Loading

jeremystretch Mar 25, 2024

DanSheps Apr 15, 2024

jeremystretch commented Mar 20, 2024

DanSheps commented Jun 3, 2024

DanSheps Jun 13, 2024 •

edited

Loading

github-actions bot commented Jun 29, 2024

github-actions bot commented Jul 17, 2024

github-actions bot commented Aug 7, 2024

github-actions bot commented Aug 23, 2024

github-actions bot commented Sep 8, 2024

github-actions bot commented Oct 12, 2024

Closes: #9583 - Add column specific search field to tables #15073

Are you sure you want to change the base?

Closes: #9583 - Add column specific search field to tables #15073

Conversation

DanSheps commented Feb 7, 2024 • edited Loading