Skip to content

Commit ec3b615

Browse files
aayushkdevaayushkdev
committed
Improve the filter dropdown UI
Signed-off-by: Aayush Kumar <[email protected]>
1 parent e32543d commit ec3b615

File tree

3 files changed

+86
-92
lines changed

3 files changed

+86
-92
lines changed

‎scanpipe/filters.py‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -525,9 +525,8 @@ class ResourceFilterSet(FilterSetUtilsMixin, django_filters.FilterSet):
525525
detected_license_expression = django_filters.ChoiceFilter(
526526
label="Detected license expression",
527527
choices=[
528-
("", "All"),
529-
("_EMPTY_", "None"),
530-
("_ANY_", "Any"),
528+
(EMPTY_VAR, "None"),
529+
(ANY_VAR, "Any"),
531530
],
532531
widget=HasValueDropdownWidget(),
533532
)

‎scanpipe/templates/scanpipe/dropdowns/filter_dropdown_choices_field.html‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,28 @@
11
<div class="dropdown is-hoverable{% if is_right %} is-right{% endif %}">
22
<div class="dropdown-trigger">
3-
<a class="{% if filter.value or filter.data %}has-text-link{% else %}is-grey-link{% endif %}" aria-haspopup="true" aria-controls="{{ filter.id_for_label }}">
3+
<a class="{% if filter.value %}has-text-link{% else %}is-grey-link{% endif %}" aria-haspopup="true" aria-controls="{{ filter.id_for_label }}">
44
<span class="icon width-1 height-1"><i class="fa-solid fa-filter"></i></span>
55
</a>
66
</div>
77
<div class="dropdown-menu" id="{{ filter.id_for_label }}" role="menu">
88
<div class="dropdown-content p-2">
9-
{% if is_htmx %}
10-
<form
11-
action=""
12-
method="get"
13-
hx-get="{% url 'codebase_resource_table' project.slug %}"
14-
hx-target="#right-pane"
15-
hx-push-url="false"
16-
hx-vals='{"path": "{{ path|escapejs }}"}'
17-
>
18-
<div class="select is-small">
19-
<select
20-
name="{{ filter.name }}"
21-
id="filter-select-{{ filter.name }}"
22-
onchange="this.form.requestSubmit()"
23-
>
24-
{% for val, label in filter.field.choices %}
25-
<option value="{{ val }}" {% if filter.value == val %}selected{% endif %}>{{ label }}</option>
26-
{% endfor %}
27-
</select>
28-
</div>
29-
</form>
30-
{% else %}
31-
{{ filter }}
32-
{% endif %}
9+
{% for val, label in filter.field.choices %}
10+
{% if is_htmx %}
11+
<a href="#"
12+
class="dropdown-item{% if filter.value == val or not filter.value and val == '' %} is-active{% endif %}"
13+
hx-get="{% url 'codebase_resource_table' project.slug %}"
14+
hx-target="#right-pane"
15+
hx-push-url="false"
16+
hx-vals='{"path": "{{ path|escapejs }}", "{{ filter.name }}": "{{ val }}"}'>
17+
{{ label }}
18+
</a>
19+
{% else %}
20+
<a href="?{{ filter.name }}={{ val }}"
21+
class="dropdown-item{% if filter.value == val or not filter.value and val == '' %} is-active{% endif %}">
22+
{{ label }}
23+
</a>
24+
{% endif %}
25+
{% endfor %}
3326
</div>
3427
</div>
3528
</div>

‎scanpipe/templates/scanpipe/panels/resource_table_panel.html‎

Lines changed: 66 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{% load humanize %}
22

33
<div id="right-pane">
4-
{% if resources %}
54
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
65
<thead class="is-sticky">
76
<tr>
@@ -31,59 +30,76 @@
3130
</tr>
3231
</thead>
3332
<tbody>
34-
{% for resource in resources %}
33+
{% if resources %}
34+
{% for resource in resources %}
35+
<tr>
36+
<td class="break-all" style="min-width: 200px;">
37+
{% if resource.type == "directory" %}
38+
{{ resource.path }}
39+
{% else %}
40+
<a href="{% url 'resource_detail' project.slug resource.path %}">{{ resource.path }}</a>
41+
{% endif %}
42+
</td>
43+
<td>
44+
{{ resource.status }}
45+
</td>
46+
<td>
47+
{{ resource.type }}
48+
</td>
49+
<td>
50+
{% if resource.type != "directory" %}
51+
{{ resource.size|filesizeformat|default_if_none:"" }}
52+
{% endif %}
53+
</td>
54+
<td class="break-all" style="min-width: 100px;">
55+
{{ resource.name }}
56+
</td>
57+
<td>
58+
{{ resource.extension }}
59+
</td>
60+
<td class="break-all">
61+
{{ resource.programming_language }}
62+
</td>
63+
<td class="break-all">
64+
{{ resource.mime_type }}
65+
</td>
66+
<td>
67+
{{ resource.tag }}
68+
</td>
69+
<td>
70+
{{ resource.detected_license_expression }}
71+
</td>
72+
<td>
73+
{{ resource.compliance_alert }}
74+
</td>
75+
<td>
76+
{% if resource.discovered_packages.all %}
77+
{% for package in resource.discovered_packages.all|slice:"0:3" %}
78+
<a href="{% url 'project_packages' project.slug %}?purl={{ package.package_url }}">{{ package }}</a>{% if not forloop.last %}, {% endif %}
79+
{% endfor %}
80+
{% if resource.discovered_packages.all|length > 3 %}
81+
+{{ resource.discovered_packages.all|length|add:"-3" }} more
82+
{% endif %}
83+
{% endif %}
84+
</td>
85+
</tr>
86+
{% endfor %}
87+
{% else %}
3588
<tr>
36-
<td class="break-all" style="min-width: 200px;">
37-
{% if resource.type == "directory" %}
38-
{{ resource.path }}
39-
{% else %}
40-
<a href="{% url 'resource_detail' project.slug resource.path %}">{{ resource.path }}</a>
41-
{% endif %}
42-
</td>
43-
<td>
44-
{{ resource.status }}
45-
</td>
46-
<td>
47-
{{ resource.type }}
48-
</td>
49-
<td>
50-
{% if resource.type != "directory" %}
51-
{{ resource.size|filesizeformat|default_if_none:"" }}
52-
{% endif %}
53-
</td>
54-
<td class="break-all" style="min-width: 100px;">
55-
{{ resource.name }}
56-
</td>
57-
<td>
58-
{{ resource.extension }}
59-
</td>
60-
<td class="break-all">
61-
{{ resource.programming_language }}
62-
</td>
63-
<td class="break-all">
64-
{{ resource.mime_type }}
65-
</td>
66-
<td>
67-
{{ resource.tag }}
68-
</td>
69-
<td>
70-
{{ resource.detected_license_expression }}
71-
</td>
72-
<td>
73-
{{ resource.compliance_alert }}
74-
</td>
75-
<td>
76-
{% if resource.discovered_packages.all %}
77-
{% for package in resource.discovered_packages.all|slice:"0:3" %}
78-
<a href="{% url 'project_packages' project.slug %}?purl={{ package.package_url }}">{{ package }}</a>{% if not forloop.last %}, {% endif %}
79-
{% endfor %}
80-
{% if resource.discovered_packages.all|length > 3 %}
81-
+{{ resource.discovered_packages.all|length|add:"-3" }} more
89+
<td colspan="100%" style="background: none; border: none; padding: 2rem 0;" class="has-text-centered">
90+
<div class="icon is-large has-text-grey-light mb-3">
91+
<i class="fas fa-folder-open fa-3x"></i>
92+
</div>
93+
<p class="has-text-grey">
94+
{% if path %}
95+
No resources found in this directory.
96+
{% else %}
97+
Select a file or folder from the tree to view its contents.
8298
{% endif %}
83-
{% endif %}
99+
</p>
84100
</td>
85101
</tr>
86-
{% endfor %}
102+
{% endif %}
87103
</tbody>
88104
</table>
89105

@@ -104,18 +120,4 @@
104120
</ul>
105121
</nav>
106122
{% endif %}
107-
{% else %}
108-
<div class="has-text-centered p-6">
109-
<div class="icon is-large has-text-grey-light mb-3">
110-
<i class="fas fa-folder-open fa-3x"></i>
111-
</div>
112-
<p class="has-text-grey">
113-
{% if path %}
114-
No resources found in this directory.
115-
{% else %}
116-
Select a file or folder from the tree to view its contents.
117-
{% endif %}
118-
</p>
119-
</div>
120-
{% endif %}
121123
</div>

0 commit comments

Comments
 (0)