Split settings into multiple pages

- Tab style navigation
This commit is contained in:
Oliver Walters 2019-09-07 18:02:03 +10:00
parent 1b8fb4db44
commit 27878d2d8d
8 changed files with 153 additions and 98 deletions

View File

@ -198,6 +198,28 @@
margin-bottom: 20px;
}
.settings-container {
width: 80%;
padding: 15px;
}
.settings-nav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
//top: 0;
//left: 0;
overflow-x: hidden;
padding-top: 20px;
padding-right: 25px;
}
.settings-content {
margin-left: 175px;
padding: 0px 10px;
}
.breadcrump {
margin-bottom: 5px;
}

View File

@ -53,6 +53,16 @@ apipatterns = [
url(r'^$', InfoView.as_view(), name='inventree-info'),
]
settings_urls = [
url(r'^user/?', SettingsView.as_view(template_name='InvenTree/settings/user.html'), name='settings-user'),
url(r'^currency/?', SettingsView.as_view(template_name='InvenTree/settings/currency.html'), name='settings-currency'),
url(r'^part/?', SettingsView.as_view(template_name='InvenTree/settings/part.html'), name='settings-part'),
# Catch any other urls
url(r'^.*$', SettingsView.as_view(template_name='InvenTree/settings/settings.html'), name='settings'),
]
urlpatterns = [
url(r'^part/', include(part_urls)),
url(r'^supplier-part/', include(supplier_part_urls)),
@ -70,7 +80,7 @@ urlpatterns = [
url(r'^login/', auth_views.LoginView.as_view(), name='login'),
url(r'^logout/', auth_views.LogoutView.as_view(template_name='registration/logout.html'), name='logout'),
url(r'^settings/', SettingsView.as_view(), name='settings'),
url(r'^settings/', include(settings_urls)),
url(r'^edit-user/', EditUserView.as_view(), name='edit-user'),
url(r'^set-password/', SetPasswordView.as_view(), name='set-password'),

View File

@ -1,97 +0,0 @@
{% extends "base.html" %}
{% block page_title %}
InvenTree | Settings
{% endblock %}
{% block content %}
<h3>InvenTree Settings</h3>
<hr>
<div class='tab'>
<button class='vtab'>User Settings</button>
<button class='vtab'>Currency Settings</button>
<button class='vtab'></button>
</div>
<div class='row'>
<div class='col-sm-6'>
<h4>User Information</h4>
</div>
<div class='col-sm-6'>
<div class='btn-group' style='float: right;'>
<div class='btn btn-primary' type='button' id='edit-user' title='Edit User Information'>Edit</div>
<div class='btn btn-primary' type='button' id='edit-password' title='Change Password'>Set Password</div>
</div>
</div>
</div>
<div class='settings' id='settings-user'>
<table class='table table-striped table-condensed'>
<tr>
<td>First Name</td>
<td>{{ user.first_name }}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{ user.last_name }}</td>
</tr>
<tr>
<td>Email Address</td>
<td>{{ user.email }}</td>
</tr>
</table>
</div>
<div class='settings' id='settings-currency'>
<table class='table table-striped table-condensed'>
<thead>
<tr>
<th>Currency</th>
<th>Value</th>
<th>Default</th>
</tr>
</thead>
</table>
</div>
<div class='settings' id='settings-parameters'>
<table class='table table-striped table-condensed'>
<thead>
<tr>
<th>Name</th>
<th>Units</th>
</tr>
</thead>
</table>
</div>
{% endblock %}
{% block js_load %}
{{ block.super }}
{% endblock %}
{% block js_ready %}
{{ block.super }}
$("#edit-user").on('click', function() {
launchModalForm(
"{% url 'edit-user' %}",
{
reload: true,
}
);
});
$("#edit-password").on('click', function() {
launchModalForm(
"{% url 'set-password' %}",
{
reload: true,
}
);
});
{% endblock %}

View File

@ -0,0 +1,9 @@
{% extends "InvenTree/settings/settings.html" %}
{% block tabs %}
{% include "InvenTree/settings/tabs.html" with tab='currency' %}
{% endblock %}
{% block settings %}
{% endblock %}

View File

@ -0,0 +1,9 @@
{% extends "InvenTree/settings/settings.html" %}
{% block tabs %}
{% include "InvenTree/settings/tabs.html" with tab='part' %}
{% endblock %}
{% block settings %}
{% endblock %}

View File

@ -0,0 +1,32 @@
{% extends "base.html" %}
{% load static %}
{% block page_title %}
InvenTree | Settings
{% endblock %}
{% block content %}
<h3>InvenTree Settings</h3>
<hr>
<div class='settings-container'>
<div class='settings-nav'>
{% block tabs %}
{% include "InvenTree/settings/tabs.html" %}
{% endblock %}
</div>
<div class='settings-content'>
{% block settings %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block js_load %}
{{ block.super }}
{% endblock %}

View File

@ -0,0 +1,11 @@
<ul class='nav nav-pills nav-stacked'>
<li{% ifequal tab 'user' %} class='active'{% endifequal %}>
<a href="{% url 'settings-user' %}">User</a>
</li>
<li{% ifequal tab 'currency' %} class='active'{% endifequal %}>
<a href="{% url 'settings-currency' %}">Currency</a>
</li>
<li{% ifequal tab 'part' %} class='active'{% endifequal %}>
<a href="{% url 'settings-part' %}">Part</a>
</li>
</ul>

View File

@ -0,0 +1,59 @@
{% extends "InvenTree/settings/settings.html" %}
{% block tabs %}
{% include "InvenTree/settings/tabs.html" with tab='user' %}
{% endblock %}
{% block settings %}
<div class='row'>
<div class='col-sm-6'>
<h4>User Information</h4>
</div>
<div class='col-sm-6'>
<div class='btn-group' style='float: right;'>
<div class='btn btn-primary' type='button' id='edit-user' title='Edit User Information'>Edit</div>
<div class='btn btn-primary' type='button' id='edit-password' title='Change Password'>Set Password</div>
</div>
</div>
</div>
<table class='table table-striped table-condensed'>
<tr>
<td>First Name</td>
<td>{{ user.first_name }}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{ user.last_name }}</td>
</tr>
<tr>
<td>Email Address</td>
<td>{{ user.email }}</td>
</tr>
</table>
{% endblock %}
{% block js_ready %}
{{ block.super }}
$("#edit-user").on('click', function() {
launchModalForm(
"{% url 'edit-user' %}",
{
reload: true,
}
);
});
$("#edit-password").on('click', function() {
launchModalForm(
"{% url 'set-password' %}",
{
reload: true,
}
);
});
{% endblock %}