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

add side-nav for filters

Browse Source
This commit is contained in:
Manuel Gugger 2023-06-15 13:03:44 +02:00
parent 223ad29266
commit de5d3826ed
8 changed files with 211 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/azure_auth/main.rs
View File

@ -110,7 +110,8 @@ fn create_actix_admin_builder() -> ActixAdminBuilder {
}), }),
login_link: Some("/azure-auth/login".to_string()), login_link: Some("/azure-auth/login".to_string()),
logout_link: Some("/azure-auth/logout".to_string()), logout_link: Some("/azure-auth/logout".to_string()),
file_upload_directory: "./file_uploads" file_upload_directory: "./file_uploads",
navbar_title: "ActixAdmin Example"
}; };
let mut admin_builder = ActixAdminBuilder::new(configuration); let mut admin_builder = ActixAdminBuilder::new(configuration);

3
examples/basic/main.rs
View File

@ -28,7 +28,8 @@ fn create_actix_admin_builder() -> ActixAdminBuilder {
user_is_logged_in: None, user_is_logged_in: None,
login_link: None, login_link: None,
logout_link: None, logout_link: None,
file_upload_directory: "./file_uploads" file_upload_directory: "./file_uploads",
navbar_title: "ActixAdmin Example"
}; };
let mut admin_builder = ActixAdminBuilder::new(configuration); let mut admin_builder = ActixAdminBuilder::new(configuration);

1
src/lib.rs
View File

@ -74,6 +74,7 @@ pub struct ActixAdminConfiguration {
pub login_link: Option<String>, pub login_link: Option<String>,
pub logout_link: Option<String>, pub logout_link: Option<String>,
pub file_upload_directory: &'static str, pub file_upload_directory: &'static str,
pub navbar_title: &'static str
} }
#[derive(Clone)] #[derive(Clone)]

1
src/routes/helpers.rs
View File

@ -8,6 +8,7 @@ use actix_web::{error, Error, HttpResponse};
pub fn add_auth_context(session: &Session, actix_admin: &ActixAdmin, ctx: &mut Context) { pub fn add_auth_context(session: &Session, actix_admin: &ActixAdmin, ctx: &mut Context) {
let enable_auth = &actix_admin.configuration.enable_auth; let enable_auth = &actix_admin.configuration.enable_auth;
ctx.insert("enable_auth", &enable_auth); ctx.insert("enable_auth", &enable_auth);
ctx.insert("navbar_title", &actix_admin.configuration.navbar_title);
if *enable_auth { if *enable_auth {
let func = &actix_admin.configuration.user_is_logged_in.unwrap(); let func = &actix_admin.configuration.user_is_logged_in.unwrap();
ctx.insert("user_is_logged_in", &func(session)); ctx.insert("user_is_logged_in", &func(session));

12
src/templates/base.html
View File

@ -24,9 +24,17 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
<div id="content"> <div id="content">
{% block content %} <div class="columns">
{% endblock content %} <aside id="nav_aside" class="column is-2 is-hidden is-narrow-mobile is-fullheight is-hidden-mobile">
{% block aside %}
{% endblock aside %}
</aside>
{% block content %}
{% endblock content %}
</div>
</div> </div>
</div> </div>
</body> </body>

11
src/templates/head.html
View File

@ -1,6 +1,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Actix Admin</title> <title>{{ navbar_title }}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@ -51,6 +51,15 @@
document.getElementById('table_form').requestSubmit(); document.getElementById('table_form').requestSubmit();
} }
function toggle_aside() {
el = document.getElementById("nav_aside");
if(el.classList.contains("is-hidden")) {
el.classList.remove("is-hidden");
} else {
el.classList.add("is-hidden");
}
}
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements // Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

352
src/templates/list.html
View File

@ -1,204 +1,218 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block aside %}
<p class="menu-label is-hidden-touch">Filter</p>
<ul class="menu-list">
</ul>
{% endblock aside %}
{% block content %} {% block content %}
{% if not render_partial or render_partial == false %} {% if not render_partial or render_partial == false %}
<div class="columns">
<div class="column"> <div class="column">
<div class="buttons"> <div class="columns">
<a class="button is-primary" href="/admin/{{ entity_name }}/create" hx-boost="true" hx-indicator="#loading"><i class="fa-solid fa-circle-plus"></i></a> <div class="column">
<div class="buttons">
<a class="button is-primary" href="/admin/{{ entity_name }}/create" hx-boost="true"
hx-indicator="#loading"><i class="fa-solid fa-circle-plus"></i></a>
<div class="dropdown is-hoverable"> <div class="dropdown mr-2 is-hoverable">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span><i class="fa-solid fa-list"></i></span> <span><i class="fa-solid fa-list"></i></span>
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
</button> </button>
</div>
<div class="dropdown-menu" id="dropdown-menu4">
<div class="dropdown-content">
<div class="dropdown-item">
<a hx-include="#table_form" hx-target="#{{ entity_name }}table" href="#"
hx-indicator="#loading" hx-confirm="Are you sure?" hx-delete="delete">Delete</a>
</div>
</div>
</div>
</div>
<button class="button" onclick="toggle_aside()"><i class="fa-solid fa-filter"></i></button>
</div> </div>
<div class="dropdown-menu" id="dropdown-menu4"> </div>
<div class="dropdown-content"> <form id="search_form" action="/admin/{{ entity_name }}/list" hx-boost="true" hx-indicator="#loading"
<div class="dropdown-item"> hx-target="#{{ entity_name }}table" hx-trigger="reload_table from:#entities_per_page">
<a hx-include="#table_form" hx-target="#{{ entity_name }}table" href="#" <input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
hx-indicator="#loading" hx-confirm="Are you sure?" hx-delete="delete">Delete</a> <input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
<div class="column is-narrow">
<div class="field is-horizontal">
{% if view_model.show_search %}
<p class="control has-icons-left has-icons-right">
<input class="input is-rounded" type="search" id="search" value="{{ search }}" name="search"
placeholder="Search" hx-get="/admin/{{ entity_name }}/list"
hx-trigger="keyup changed delay:500ms, search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</p>
{% endif %}
<div class="select">
<div class="ml-1 control has-icons-left has-icons-right">
<select id="entities_per_page" class="select" name="entities_per_page"
onchange="this.dispatchEvent(new Event('reload_table'));">
{% for a in [10,20,50,100,] %}
<option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}
</option>
{% endfor %}
</select>
<p class="help">Entities per Page</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </form>
</div> </div>
</div> {% endif %}
<form id="search_form" action="/admin/{{ entity_name }}/list" hx-boost="true" hx-indicator="#loading"
hx-target="#{{ entity_name }}table" hx-trigger="reload_table from:#entities_per_page">
<input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
<input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
<div class="column is-narrow">
<div class="field is-horizontal">
{% if view_model.show_search %}
<p class="control has-icons-left has-icons-right">
<input class="input is-rounded" type="search" id="search" value="{{ search }}" name="search"
placeholder="Search" hx-get="/admin/{{ entity_name }}/list"
hx-trigger="keyup changed delay:500ms, search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</p>
{% endif %}
<div class="select">
<div class="ml-1 control has-icons-left has-icons-right">
<select id="entities_per_page" class="select" name="entities_per_page"
onchange="this.dispatchEvent(new Event('reload_table'));">
{% for a in [10,20,50,100,] %}
<option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}</option>
{% endfor %}
</select>
<p class="help">Entities per Page</p>
</div>
</div>
</div>
</div>
</form>
</div>
{% endif %}
<div id="{{ entity_name }}table"> <div id="{{ entity_name }}table">
<div class="is-relative"> <div class="is-relative">
{% include "loader.html" %} {% include "loader.html" %}
<form id="table_form" hx-indicator="#loading" hx-get="/admin/{{ entity_name }}/list" <form id="table_form" hx-indicator="#loading" hx-get="/admin/{{ entity_name }}/list"
hx-target="#{{ entity_name }}table"> hx-target="#{{ entity_name }}table">
<input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}"> <input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
<input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}"> <input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
<input type="hidden" name="entities_per_page" value="{{ entities_per_page }}"> <input type="hidden" name="entities_per_page" value="{{ entities_per_page }}">
<input type="hidden" name="search" value="{{ search }}"> <input type="hidden" name="search" value="{{ search }}">
<input type="hidden" name="page" value="{{ page }}"> <input type="hidden" name="page" value="{{ page }}">
<table class="table is-relative is-narrow is-fullwidth is-hoverable is-striped"> <table class="table is-relative is-narrow is-fullwidth is-hoverable is-striped">
<thead> <thead>
<tr>
<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>
{% 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>
{%- endfor %}
<th>
<!-- Edit Action -->
<!-- Delete Action -->
</th>
</tr>
</form>
</thead>
<tbody hx-indicator="#loading" hx-boost="true">
{% for entity in entities -%}
<tr> <tr>
<th> <td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
<input type="checkbox" onclick="checkAll(this)"> <td>
</th> <a href="/admin/{{ entity_name }}/show/{{ entity.primary_key }}" hx-vals='{
<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>
{% 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>
{%- endfor %}
<th>
<!-- Edit Action -->
<!-- Delete Action -->
</th>
</tr>
</form>
</thead>
<tbody hx-indicator="#loading" hx-boost="true">
{% for entity in entities -%}
<tr>
<td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
<td>
<a href="/admin/{{ entity_name }}/show/{{ entity.primary_key }}" hx-vals='{
"page" : "{{ page }}", "page" : "{{ page }}",
"entities_per_page" : "{{ entities_per_page }}", "entities_per_page" : "{{ entities_per_page }}",
"search" : "{{ search }}", "search" : "{{ search }}",
"sort_by" : "{{ sort_by }}", "sort_by" : "{{ sort_by }}",
"sort_order" : "{{ sort_order }}" "sort_order" : "{{ sort_order }}"
}' hx-target="#content"> }' hx-target="#content">
<i class="fa-solid fa-magnifying-glass"></i> {{ entity.primary_key }} <i class="fa-solid fa-magnifying-glass"></i> {{ entity.primary_key }}
</a> </a>
</td> </td>
{% 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") -%}
{% if model_field.field_type == "Checkbox" %} {% if model_field.field_type == "Checkbox" %}
<td>{{ entity.values | get(key=model_field.field_name) | get_icon | safe }}</td> <td>{{ entity.values | get(key=model_field.field_name) | get_icon | safe }}</td>
{% elif model_field.field_type == "FileUpload" %} {% elif model_field.field_type == "FileUpload" %}
<td><a href="file/{{ entity.primary_key }}/{{ model_field.field_name }}">{{ <td><a href="file/{{ entity.primary_key }}/{{ model_field.field_name }}">{{
entity.values entity.values
| get(key=model_field.field_name) }}</a></td> | get(key=model_field.field_name) }}</a></td>
{% else %} {% else %}
<td>{{ entity.values | get(key=model_field.field_name) }}</td> <td>{{ entity.values | get(key=model_field.field_name) }}</td>
{% endif %} {% endif %}
{%- endfor %} {%- endfor %}
<td class="has-text-right"> <td class="has-text-right">
<a hx-target="body" href="/admin/{{ entity_name }}/edit/{{ entity.primary_key }}" hx-vals='{ <a hx-target="body" href="/admin/{{ entity_name }}/edit/{{ entity.primary_key }}" hx-vals='{
"page" : "{{ page }}", "page" : "{{ page }}",
"entities_per_page" : "{{ entities_per_page }}", "entities_per_page" : "{{ entities_per_page }}",
"search" : "{{ search }}", "search" : "{{ search }}",
"sort_by" : "{{ sort_by }}", "sort_by" : "{{ sort_by }}",
"sort_order" : "{{ sort_order }}" "sort_order" : "{{ sort_order }}"
}'> }'>
<i class="fa-solid fa-pen-to-square"></i> <i class="fa-solid fa-pen-to-square"></i>
</a> </a>
<a hx-target="closest tr" hx-confirm="Are you sure?" hx-delete="delete/{{ entity.primary_key }}"> <a hx-target="closest tr" hx-confirm="Are you sure?"
<i class="fa-solid fa-trash"></i> hx-delete="delete/{{ entity.primary_key }}">
</a> <i class="fa-solid fa-trash"></i>
</td> </a>
</tr> </td>
{%- endfor %} </tr>
</tbody> {%- endfor %}
<tfoot> </tbody>
<tr> <tfoot>
<td colspan="{{ view_model.fields | length + 3 }}"> <tr>
</td> <td colspan="{{ view_model.fields | length + 3 }}">
</tr> </td>
</tfoot> </tr>
</table> </tfoot>
</form> </table>
</div> </form>
<nav hx-boost="true" hx-push-url="true" hx-target="#{{ entity_name }}table" hx-vals='{ </div>
<nav hx-boost="true" hx-push-url="true" hx-target="#{{ entity_name }}table" hx-vals='{
"entities_per_page" : "{{ entities_per_page }}", "entities_per_page" : "{{ entities_per_page }}",
"search" : "{{ search }}", "search" : "{{ search }}",
"sort_by" : "{{ sort_by }}", "sort_by" : "{{ sort_by }}",
"sort_order" : "{{ sort_order }}", "sort_order" : "{{ sort_order }}",
"render_partial" : "true" "render_partial" : "true"
}' hx-indicator="#loading" class="pagination is-rounded is-centered" role="pagination" aria-label="pagination"> }' hx-indicator="#loading" class="pagination is-rounded is-centered" role="pagination" aria-label="pagination">
{% if page > 1 %} {% if page > 1 %}
<a href="/admin/{{ entity_name }}/list?&page={{ page - 1 }}" class="pagination-previous left-arrow-click"><i <a href="/admin/{{ entity_name }}/list?&page={{ page - 1 }}"
class="fa-solid fa-arrow-left"></i> class="pagination-previous left-arrow-click"><i class="fa-solid fa-arrow-left"></i>
</a> </a>
{% endif %} {% endif %}
{% if page < num_pages %} {% if page < num_pages %} <a href="/admin/{{ entity_name }}/list?page={{ page + 1 }}"
<a href="/admin/{{ entity_name }}/list?page={{ page + 1 }}" class="pagination-next right-arrow-click"><i class="pagination-next right-arrow-click"><i class="fa-solid fa-arrow-right"></i>
class="fa-solid fa-arrow-right"></i> </a>
</a> {% endif %}
{% endif %} <ul class="pagination-list">
<ul class="pagination-list"> <li>
<li> <a class="pagination-link {% if page == 1 %}is-current{% endif %}"
<a class="pagination-link {% if page == 1 %}is-current{% endif %}" href="/admin/{{ entity_name }}/list?page={{ 1 }}" href="/admin/{{ entity_name }}/list?page={{ 1 }}" aria-label="Goto page 1">1</a>
aria-label="Goto page 1">1</a> </li>
</li> <li>
<li> <span class="pagination-ellipsis">&hellip;</span>
<span class="pagination-ellipsis">&hellip;</span> </li>
</li> {% for i in range(start=min_show_page,end=max_show_page) %}
{% for i in range(start=min_show_page,end=max_show_page) %} <li><a class="pagination-link {% if page == i+1 %}is-current{% endif %}"
<li><a class="pagination-link {% if page == i+1 %}is-current{% endif %}" aria-label="Goto page {{ i + 1 }}"
aria-label="Goto page {{ i + 1 }}" href="/admin/{{ entity_name }}/list?page={{ i + 1 }}">{{ href="/admin/{{ entity_name }}/list?page={{ i + 1 }}">{{
i + 1 }}</a></li> i + 1 }}</a></li>
{%- endfor %} {%- endfor %}
<li> <li>
<span class="pagination-ellipsis">&hellip;</span> <span class="pagination-ellipsis">&hellip;</span>
</li> </li>
<li> <li>
<a href="/admin/{{ entity_name }}/list?page={{ num_pages }}" <a href="/admin/{{ entity_name }}/list?page={{ num_pages }}"
class="pagination-link is-rounded {% if page == num_pages %}is-current{% endif %}" class="pagination-link is-rounded {% if page == num_pages %}is-current{% endif %}"
aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a> aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
</li> </li>
</ul> </ul>
</div>
</nav> </nav>
</div> </div>

4
src/templates/navbar.html
View File

@ -1,7 +1,7 @@
<nav class="navbar is-dark mb-4" role="navigation" aria-label="main navigation"> <nav class="navbar has-shadow mb-4" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/admin/"> <a class="navbar-item" href="/admin/">
Actix Admin {{ navbar_title }}
</a> </a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar"> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">