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

60
src/templates/list.html
View File

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