Refactoring a lot of existing settings views

InvenTree/InvenTree/urls.py

@@ -79,19 +79,11 @@ apipatterns = [
 
 settings_urls = [
 
-    url(r'^usersettings/', SettingsView.as_view(template_name='InvenTree/settings/user_settings.html'), name='settings-user-settings'),
-    url(r'^user/?', SettingsView.as_view(template_name='InvenTree/settings/user.html'), name='settings-user'),
-    url(r'^appearance/?', AppearanceSelectView.as_view(), name='settings-appearance'),
     url(r'^i18n/?', include('django.conf.urls.i18n')),
+    
+    url(r'^appearance/?', AppearanceSelectView.as_view(), name='settings-appearance'),
 
-    url(r'^global/', SettingsView.as_view(template_name='InvenTree/settings/global.html'), name='settings-global'),
-    url(r'^report/', SettingsView.as_view(template_name='InvenTree/settings/report.html'), name='settings-report'),
     url(r'^category/', SettingCategorySelectView.as_view(), name='settings-category'),
-    url(r'^part/', SettingsView.as_view(template_name='InvenTree/settings/part.html'), name='settings-part'),
-    url(r'^stock/', SettingsView.as_view(template_name='InvenTree/settings/stock.html'), name='settings-stock'),
-    url(r'^build/', SettingsView.as_view(template_name='InvenTree/settings/build.html'), name='settings-build'),
-    url(r'^purchase-order/', SettingsView.as_view(template_name='InvenTree/settings/po.html'), name='settings-po'),
-    url(r'^sales-order/', SettingsView.as_view(template_name='InvenTree/settings/so.html'), name='settings-so'),
     url(r'^currencies/', CurrencySettingsView.as_view(), name='settings-currencies'),
     url(r'^currencies-refresh/', CurrencyRefreshView.as_view(), name='settings-currencies-refresh'),
 
@@ -99,7 +91,7 @@ settings_urls = [
     url(r'^(?P<pk>\d+)/edit/', SettingEdit.as_view(), name='setting-edit'),
 
     # Catch any other urls
-    url(r'^.*$', SettingsView.as_view(template_name='InvenTree/settings/user.html'), name='settings'),
+    url(r'^.*$', SettingsView.as_view(template_name='InvenTree/settings/settings.html'), name='settings'),
 ]
 
 # Some javascript files are served 'dynamically', allowing them to pass through the Django translation layer

InvenTree/InvenTree/views.py

@@ -779,7 +779,7 @@ class SettingsView(TemplateView):
     """ View for configuring User settings
     """
 
-    template_name = "InvenTree/settings.html"
+    template_name = "InvenTree/settings/settings.html"
 
     def get_context_data(self, **kwargs):
 

InvenTree/templates/InvenTree/settings/appearance.html

@@ -1,16 +1,14 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
+
 {% load i18n %}
-{% load inventree_extras %}
 
-{% block tabs %}
+{% block label %}appearance{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='theme' %}
+
+{% block heading %}
+{% trans "Appearance" %}
 {% endblock %}
 
-{% block subtitle %}
+{% block content %}
-{% trans "Theme Settings" %}
-{% endblock %}
-
-{% block settings %}
 
 <div class='row'>
     <div class='col-sm-6'>
@@ -33,15 +31,12 @@
     </div>
 {% endif %}
 
-
 <div class='row'>
     <div class='col-sm-6'>
         <h4>{% trans "Language" %}</h4>
     </div>
 </div>
 
-
-
 <div class="row">
     <form action="{% url 'set_language' %}" method="post">{% csrf_token %}
         <input name="next" type="hidden" value="{% url 'settings-appearance' %}">

InvenTree/templates/InvenTree/settings/build.html

@@ -1,16 +1,14 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 {% load inventree_extras %}
 
-{% block tabs %}
+{% block label %}build-order{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='build' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Build Order Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}

InvenTree/templates/InvenTree/settings/global.html

@@ -1,16 +1,15 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 {% load inventree_extras %}
 
-{% block tabs %}
+{% block label %}global{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='global' %}
-{% endblock %}
 
-{% block subtitle %}
+
+{% block heading %}
 {% trans "Global InvenTree Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}

InvenTree/templates/InvenTree/settings/navbar.html

@@ -0,0 +1,89 @@
+{% load i18n %}
+
+<ul class='list-group'>
+
+    <li class='list-group-item'>
+        <a href='#' id='item-menu-toggle'>
+            <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
+        </a>
+    </li>
+
+    <li class='list-group-item'>
+        <b>{% trans "User Settings" %}</b>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Account" %}'>
+        <a href='#' class='nav-toggle' id='select-account'>
+            <span class='fas fa-user'></span> {% trans "Account" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Appearance" %}'>
+        <a href='#' class='nav-toggle' id='select-appearance'>
+            <span class='fas fa-fill'></span> {% trans "Appearance" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Settings" %}'>
+        <a href='#' class='nav-toggle' id='select-user-settings'>
+            <span class='fas fa-cog'></span> {% trans "Settings" %}
+        </a>
+    </li>
+
+    {% if user.is_staff %}
+
+    <li class='list-group-item'>
+        <b>{% trans "InvenTree Settings" %}</b>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Global" %}'>
+        <a href='#' class='nav-toggle' id='select-global'>
+            <span class='fas fa-globe'></span> {% trans "Global" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Currencies" %}'>
+        <a href='#' class='nav-toggle' id='select-currencies'>
+            <span class='fas fa-dollar-sign'></span> {% trans "Currencies" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Reporting" %}'>
+        <a href='#' class='nav-toggle' id='select-reporting'>
+            <span class='fas fa-file-pdf'></span> {% trans "Reporting" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Parts" %}'>
+        <a href='#' class='nav-toggle' id='select-parts'>
+            <span class='fas fa-shapes'></span> {% trans "Parts" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Stock" %}'>
+        <a href='#' class='nav-toggle' id='select-stock'>
+            <span class='fas fa-boxes'></span> {% trans "Stock" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Build Orders" %}'>
+        <a href='#' class='nav-toggle' id='select-build-order'>
+            <span class='fas fa-tools'></span> {% trans "Build Orders" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Purchase Orders" %}'>
+        <a href='#' class='nav-toggle' id='select-purchase-order'>
+            <span class='fas fa-shopping-cart'></span> {% trans "Purchase Orders" %}
+        </a>
+    </li>
+
+    <li class='list-group-item' title='{% trans "Sales Orders" %}'>
+        <a href='#' class='nav-toggle' id='select-sales-order'>
+            <span class='fas fa-truck'></span> {% trans "Sales Orders" %}
+        </a>
+    </li>
+
+    {% endif %}
+
+</ul>

InvenTree/templates/InvenTree/settings/part.html

@@ -1,15 +1,13 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 
-{% block tabs %}
+{% block label %}parts{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='part' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Part Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <h4>{% trans "Part Options" %}</h4>
 

InvenTree/templates/InvenTree/settings/po.html

@@ -1,15 +1,13 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 
-{% block tabs %}
+{% block label %}purchase-order{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='po' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Purchase Order Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}
     <tbody>

InvenTree/templates/InvenTree/settings/report.html

@@ -1,16 +1,14 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 {% load inventree_extras %}
 
-{% block tabs %}
+{% block label %}reporting{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='report' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Report Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}

InvenTree/templates/InvenTree/settings/settings.html

@@ -8,30 +8,26 @@
 {% inventree_title %} | {% trans "Settings" %}
 {% endblock %}
 
+{% block menubar %}
+{% include "InvenTree/settings/navbar.html" %}
+{% endblock %}
+
 {% block content %}
-<div class='settings-container'>
 
-    <h3>InvenTree {% trans "Settings" %}</h3>
+{% include "InvenTree/settings/user.html" %}
-    <hr>
+{% include "InvenTree/settings/user_settings.html" %}
 
-    <div class='settings-nav'>
+{% if user.is_staff %}
-        {% block tabs %}
-        {% include "InvenTree/settings/tabs.html" %} 
-        {% endblock %}
-    </div>
 
-    <div class='settings-content'>
+{% include "InvenTree/settings/global.html" %}
-        <h3>
+{% include "InvenTree/settings/report.html" %}
-            {% block subtitle %}
+{% include "InvenTree/settings/part.html" %}
-            SUBTITLE GOES HERE
+{% include "InvenTree/settings/stock.html" %}
-            {% endblock %}
+{% include "InvenTree/settings/build.html" %}
-        </h3>
+{% include "InvenTree/settings/po.html" %}
-        <hr>
+{% include "InvenTree/settings/so.html" %}
-        {% block settings %}
-        {% endblock %}
-    </div>
 
-</div>
+{% endif %}
 
 {% endblock %}
 
@@ -59,4 +55,34 @@ $('table').find('.btn-edit-setting').click(function() {
     );
 });
 
+$("#edit-user").on('click', function() {
+    launchModalForm(
+        "{% url 'edit-user' %}",
+        {
+            reload: true,
+        }
+    );
+});
+
+$("#edit-password").on('click', function() {
+    launchModalForm(
+        "{% url 'set-password' %}",
+        {
+            reload: true,
+        }
+    );
+});
+
+
+
+enableNavbar({
+    label: 'settings',
+    toggleId: '#item-menu-toggle',
+});
+
+attachNavCallbacks({
+    name: 'settings',
+    default: 'account'
+});
+
 {% endblock %}

InvenTree/templates/InvenTree/settings/so.html

@@ -1,15 +1,13 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 
-{% block tabs %}
+{% block label %}sales-order{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='so' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Sales Order Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}

InvenTree/templates/InvenTree/settings/stock.html

@@ -1,16 +1,13 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 
-{% block tabs %}
+{% block label %}stock{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='stock' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Stock Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
-<h4>{% trans "Stock Options" %}</h4>
 
 <table class='table table-striped table-condensed'>
     {% include "InvenTree/settings/header.html" %}

InvenTree/templates/InvenTree/settings/tabs.html

@@ -3,44 +3,44 @@
 <h4><span class='fas fa-user'></span> {% trans "User Settings" %}</h4>
 <ul class='nav nav-pills nav-stacked'>
     <li{% ifequal tab 'user' %} class='active'{% endifequal %}>
-        <a href="{% url 'settings-user' %}"><span class='fas fa-user'></span> {% trans "Account" %}</a>
+        <a href="#"><span class='fas fa-user'></span> {% trans "Account" %}</a>
     </li>
     <li{% ifequal tab 'theme' %} class='active'{% endifequal %}>
         <a href="{% url 'settings-appearance' %}"><span class='fas fa-fill'></span> {% trans "Appearance" %}</a>
     </li>
     <li{% ifequal tab 'user_settings' %} class='active'{% endifequal %}>
-        <a href="{% url 'settings-user-settings' %}"><span class='fas fa-cog'></span> {% trans "User Settings" %}</a>
+        <a href="#"><span class='fas fa-cog'></span> {% trans "User Settings" %}</a>
     </li>
 </ul>
 {% if user.is_staff %}
 <h4><span class='fas fa-cogs'></span> {% trans "InvenTree Settings" %}</h4>
 <ul class='nav nav-pills nav-stacked'>
     <li {% if tab == 'global' %} class='active' {% endif %}>
-        <a href='{% url "settings-global" %}'><span class='fas fa-globe'></span> {% trans "Global" %}</a>
+        <a href='#'><span class='fas fa-globe'></span> {% trans "Global" %}</a>
     </li>
     <li {% if tab == 'currencies' %} class='active'{% endif %}>
         <a href="{% url 'settings-currencies' %}"><span class='fas fa-dollar-sign'></span> {% trans "Currencies" %}</a>
     </li>
     <li {% if tab == 'report' %} class='active' {% endif %}>
-        <a href='{% url "settings-report" %}'><span class='fas fa-file-pdf'></span> {% trans "Report" %}</a>
+        <a href='#'><span class='fas fa-file-pdf'></span> {% trans "Report" %}</a>
     </li>
     <li{% ifequal tab 'category' %} class='active'{% endifequal %}>
         <a href="{% url 'settings-category' %}"><span class='fa fa-sitemap'></span> {% trans "Categories" %}</a>
     </li>
     <li{% ifequal tab 'part' %} class='active'{% endifequal %}>
-        <a href="{% url 'settings-part' %}"><span class='fas fa-shapes'></span> {% trans "Parts" %}</a>
+        <a href="#"><span class='fas fa-shapes'></span> {% trans "Parts" %}</a>
     </li>
     <li {% if tab == 'stock' %} class='active'{% endif %}>
-        <a href='{% url 'settings-stock' %}'><span class='fas fa-boxes'></span> {% trans "Stock" %}</a>
+        <a href='#'><span class='fas fa-boxes'></span> {% trans "Stock" %}</a>
     </li>
     <li {% if tab == 'build' %} class='active'{% endif %}>
-        <a href="{% url 'settings-build' %}"><span class='fas fa-tools'></span> {% trans "Build Orders" %}</a>
+        <a href="#"><span class='fas fa-tools'></span> {% trans "Build Orders" %}</a>
     </li>
     <li {% if tab == 'po' %} class='active'{% endif %}>
-        <a href="{% url 'settings-po' %}"><span class='fas fa-shopping-cart'></span> {% trans "Purchase Orders" %}</a>
+        <a href="#"><span class='fas fa-shopping-cart'></span> {% trans "Purchase Orders" %}</a>
     </li>
     <li {% if tab == 'so' %} class='active'{% endif %}>
-        <a href="{% url 'settings-so' %}"><span class='fas fa-truck'></span> {% trans "Sales Orders" %}</a>
+        <a href="#"><span class='fas fa-truck'></span> {% trans "Sales Orders" %}</a>
     </li>
 </ul>
 {% endif %}

InvenTree/templates/InvenTree/settings/user.html

@@ -1,69 +1,39 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 
 {% load i18n %}
 
-{% block tabs %}
+{% block label %}account{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='user' %}
+
+{% block heading %}
+{% trans "Account Settings" %}
 {% endblock %}
 
-{% block subtitle %}
+{% block content %}
-{% trans "User Settings" %}
+<div class='btn-group' style='float: right;'>
-{% endblock %}
+    <div class='btn btn-primary' type='button' id='edit-user' title='{% trans "Edit User Information" %}'>
-
+        <span class='fas fa-user-cog'></span> {% trans "Edit" %}
-{% block settings %}
+    </div>
-
+    <div class='btn btn-primary' type='button' id='edit-password' title='{% trans "Change Password" %}'>
-<div class='container'>
+        <span class='fas fa-key'></span> {% trans "Set Password" %}
-    <h4>{% trans "User Information" %}</h4>
-    <div class='btn-group' style='float: right;'>
-        <div class='btn btn-primary' type='button' id='edit-user' title='{% trans "Edit User Information" %}'>
-            <span class='fas fa-user-cog'></span> {% trans "Edit" %}
-        </div>
-        <div class='btn btn-primary' type='button' id='edit-password' title='{% trans "Change Password" %}'>
-            <span class='fas fa-key'></span> {% trans "Set Password" %}
-        </div>
     </div>
-
-    <table class='table table-striped table-condensed'>
-        <tr>
-            <td>{% trans "Username" %}</td>
-            <td>{{ user.username }}</td>
-        </tr>
-        <tr>
-            <td>{% trans "First Name" %}</td>
-            <td>{{ user.first_name }}</td>
-        </tr>
-        <tr>
-            <td>{% trans "Last Name" %}</td>
-            <td>{{ user.last_name }}</td>
-        </tr>
-        <tr>
-            <td>{% trans "Email Address" %}</td>
-            <td>{{ user.email }}</td>
-        </tr>
-    </table>
 </div>
 
-{% endblock %}
+<table class='table table-striped table-condensed'>
-
+    <tr>
-{% block js_ready %}
+        <td>{% trans "Username" %}</td>
-{{ block.super }}
+        <td>{{ user.username }}</td>
-
+    </tr>
-    $("#edit-user").on('click', function() {
+    <tr>
-        launchModalForm(
+        <td>{% trans "First Name" %}</td>
-            "{% url 'edit-user' %}",
+        <td>{{ user.first_name }}</td>
-            {
+    </tr>
-                reload: true,
+    <tr>
-            }
+        <td>{% trans "Last Name" %}</td>
-        );
+        <td>{{ user.last_name }}</td>
-    });
+    </tr>
-
+    <tr>
-    $("#edit-password").on('click', function() {
+        <td>{% trans "Email Address" %}</td>
-        launchModalForm(
+        <td>{{ user.email }}</td>
-            "{% url 'set-password' %}",
+    </tr>
-            {
+</table>
-                reload: true,
-            }
-        );
-    });
-
 {% endblock %}

InvenTree/templates/InvenTree/settings/user_settings.html

@@ -1,16 +1,15 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
+
 {% load i18n %}
 {% load inventree_extras %}
 
-{% block tabs %}
+{% block label %}user-settings{% endblock %}
-{% include "InvenTree/settings/tabs.html" with tab='user_settings' %}
-{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "User Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
@@ -38,4 +37,5 @@
         </tbody>
     </table>
 </div>
+
 {% endblock %}

InvenTree/templates/panel.html

@@ -0,0 +1,13 @@
+<div class='panel panel-default panel-inventree panel-hidden' id='panel-{% block label %}name{% endblock %}'>
+    {% block panel_heading %}
+    <div class='panel-heading'>
+        <h4>{% block heading %}HEADING{% endblock %}</h4>
+    </div>
+    {% endblock %}
+    {% block panel_content %}
+    <div class='panel-content'>
+        {% block content %}
+        {% endblock %}
+    </div>
+    {% endblock %}
+</div>