Tsumanu/actix-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make column sort as dropdown

Browse Source
This commit is contained in:
Manuel Gugger 2023-03-21 09:22:26 +01:00
parent ae32a57181
commit 12bdddd995
2 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/templates/head.html
View File

@ -39,13 +39,8 @@
}
}
function sort_by(column) {
current_sort_order = document.getElementsByName("sort_order")[0].value;
if (current_sort_order == "Asc") {
document.getElementsByName("sort_order").forEach((e) => e.value = "Desc");
} else {
document.getElementsByName("sort_order").forEach((e) => e.value = "Asc");
}
function sort_by(column, order) {
document.getElementsByName("sort_order").forEach((e) => e.value = order);
document.getElementsByName("sort_by").forEach((e) => e.value = column);
document.getElementById('table_form').requestSubmit();
}
@ -90,5 +85,11 @@
z-index: 6;
pointer-events: none
}
.is-borderless {
padding: 0;
border: none;
background: none;
}
</style>

60
src/templates/list.html
View File

@ -77,27 +77,51 @@
<th>
<input type="checkbox" onclick="checkAll(this)">
</th>
<th onclick="sort_by('{{ view_model.primary_key }}');" class="is-clickable">{{
view_model.primary_key | title }}
{% if sort_by == view_model.primary_key %}
{% if sort_order == "Asc" %}
<i class="ml-1 fa-solid fa-caret-up"></i>
{% elif sort_order == "Desc" %}
<i class="ml-1 fa-solid fa-caret-down"></i>
{% endif %}
{% endif %}
<th>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button is-borderless" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>{{ view_model.primary_key | split(pat="_") | join(sep=" ") | title }}</span>
<!-- <span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span> -->
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item is-clickable" onclick="sort_by('{{ view_model.primary_key }}', 'Asc');">
Sort by Asc <i class="ml-1 fa-solid fa-caret-up"></i>
</div>
<div class="dropdown-item is-clickable" onclick="sort_by('{{ view_model.primary_key }}', 'Desc');">
Sort by Desc <i class="ml-1 fa-solid fa-caret-down"></i>
</div>
</div>
</div>
</div>
</th>
{% for model_field in view_model.fields | filter(attribute="list_hide_column", value=false) |
sort(attribute="list_sort_position") -%}
<th onclick="sort_by('{{ model_field.field_name }}');" class="is-clickable">{{
model_field.field_name | split(pat="_") | join(sep=" ") | title }}
{% if sort_by == model_field.field_name %}
{% if sort_order == "Asc" %}
<i class="ml-1 fa-solid fa-caret-up"></i>
{% elif sort_order == "Desc" %}
<i class="ml-1 fa-solid fa-caret-down"></i>
{% endif %}
{% endif %}
<th>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button is-borderless" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}</span>
<!-- <span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span> -->
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item is-clickable" onclick="sort_by('{{ model_field.field_name }}', 'Asc');">
Sort by Asc <i class="ml-1 fa-solid fa-caret-up"></i>
</div>
<div class="dropdown-item is-clickable" onclick="sort_by('{{ model_field.field_name }}', 'Desc');">
Sort by Desc <i class="ml-1 fa-solid fa-caret-down"></i>
</div>
</div>
</div>
</div>
</th>
{%- endfor %}
<th>