mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

Closes #10054: Implement advanced UI controls for object selection (#11952)

Browse Source 
* WIP

* WIP

* WIP

* Make object selector functional

* Replace extraneous form fields with selector widgets

* Avoid overlap with filterset field names

* Show checkmarks next to visibile filters

* Update results automatically when searching

* Include selector for device/VM component parent fields

* Use selector for filtering VLAN group/site

* Limit selector to 100 results
This commit is contained in:
Jeremy Stretch
2023-03-13 12:44:26 -04:00
committed by GitHub
parent 2a9178af12
commit d1f76bec37
24 changed files with 276 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
netbox/templates/htmx/object_selector.html Normal file
View File

@ -0,0 +1,32 @@
{% load form_helpers %}
<div class="modal-header">
<h5 class="modal-title">Select {{ model|meta:"verbose_name"|bettertitle }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body row">
<div class="col-3">
<div class="list-group list-group-flush">
{% for field in form.visible_fields %}
<a href="#" class="list-group-item list-group-item-action px-0 py-1" data-bs-toggle="collapse" data-bs-target="#checkmark{{ forloop.counter }}, #selector{{ forloop.counter }}">
<span id="checkmark{{ forloop.counter }}" class="collapse{% if forloop.counter < 3 %} show{% endif %}"><i class="mdi mdi-check-bold"></i></span>
{{ field.label }}
</a>
{% endfor %}
</div>
</div>
<div class="col-9">
<form hx-get="{% url 'htmx_object_selector' %}?_model={{ model|meta:"label_lower" }}" hx-target="#selector_results" hx-trigger="load, submit, keyup from:#id_q delay:500ms">
<input type="hidden" name="_search" value="true" />
<div class="tab-content p-1">
{% for field in form.visible_fields %}
<div class="collapse{% if forloop.counter < 3 %} show{% endif %}" id="selector{{ forloop.counter }}">{% render_field field %}</div>
{% endfor %}
</div>
<div class="text-end">
<button type="submit" class="btn btn-sm btn-primary">Search</button>
</div>
</form>
<div id="selector_results" class="mt-3" data-selector-target="{{ target_id }}"></div>
</div>
</div>

13
netbox/templates/htmx/object_selector_results.html Normal file
View File

@ -0,0 +1,13 @@
<div class="list-group">
{% for object in results %}
<a href="#" class="list-group-item list-group-item-action" data-label="{{ object }}" data-value="{{ object.pk }}" data-bs-dismiss="modal">
<h6 class="mb-1">
{{ object }}
{% if object.status %}{% badge object.get_status_display bg_color=object.get_status_color %}{% endif %}
</h6>
{% if object.description %}
<small>{{ object.description }}</small>
{% endif %}
</a>
{% endfor %}
</div>