Dynamic tabs on conso view

apps/note/urls.py

@@ -12,7 +12,6 @@ urlpatterns = [
     path('buttons/create/', views.TransactionTemplateCreateView.as_view(), name='template_create'),
     path('buttons/update/<int:pk>/', views.TransactionTemplateUpdateView.as_view(), name='template_update'),
     path('buttons/', views.TransactionTemplateListView.as_view(), name='template_list'),
-    path('consos/<str:template_type>/', views.ConsoView.as_view(), name='consos'),
     path('consos/', views.ConsoView.as_view(), name='consos'),
 
     # API for the note autocompleter

apps/note/views.py

@@ -8,7 +8,7 @@ from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 from django.views.generic import CreateView, ListView, UpdateView
 
-from .models import Transaction, TransactionCategory, TransactionTemplate, Alias
+from .models import Transaction, TransactionTemplate, Alias
 from .forms import TransactionForm, TransactionTemplateForm, ConsoForm
 
 
@@ -135,19 +135,13 @@ class ConsoView(LoginRequiredMixin, CreateView):
         Add some context variables in template such as page title
         """
         context = super().get_context_data(**kwargs)
-        context['template_types'] = TransactionCategory.objects.all()
-
-        if 'template_type' not in self.kwargs.keys():
-            return context
-
-        template_type = TransactionCategory.objects.filter(
-            name=self.kwargs.get('template_type')).get()
-        context['buttons'] = TransactionTemplate.objects.filter(
-            template_type=template_type)
-        context['title'] = template_type
-
+        context['transaction_templates'] = TransactionTemplate.objects.all() \
+            .order_by('template_type')
+        context['title'] = _("Consommations")
         return context
 
     def get_success_url(self):
-        return reverse('note:consos',
-                       args=(self.kwargs.get('template_type'), ))
+        """
+        When clicking a button, reload the same page
+        """
+        return reverse('note:consos')

templates/note/conso_form.html

@@ -2,13 +2,18 @@
 
 {% load i18n static pretty_money %}
 
+{# Remove page title #}
+{% block contenttitle %}{% endblock %}
+
 {% block content %}
-    <fieldset class="module aligned">
-        {% for type in template_types %}
-            <a href="{% url 'note:consos' template_type=type %}"><button>{{ type }}</button></a>
-        {% endfor %}
-    </fieldset>
-    <form method="post" onsubmit="window.onbeforeunload=null">{% csrf_token %}
+    {# Regroup buttons under categories #}
+    {% regroup transaction_templates by template_type as template_types %}
+
+    <form method="post" onsubmit="window.onbeforeunload=null">
+        {% csrf_token %}
+
+        <div class="row">
+            <div class="col-sm-5">
                 {% if form.non_field_errors %}
                     <p class="errornote">
                         {% for error in form.non_field_errors %}
@@ -16,7 +21,6 @@
                         {% endfor %}
                     </p>
                 {% endif %}
-        <fieldset class="module aligned">
                 {% for field in form %}
                     <div class="form-row{% if field.errors %} errors{% endif %}">
                         {{ field.errors }}
@@ -33,9 +37,57 @@
                         </div>
                     </div>
                 {% endfor %}
-            {% for button in buttons %}
-                <button name="button" value="{{ button.name }}">{{ button.name }} ({{ button.amount | pretty_money }})</button>
+            </div>
+
+            <div class="col-sm-7">
+                <div class="card text-center">
+                    {# Tabs for button categories #}
+                    <div class="card-header">
+                        <ul class="nav nav-tabs nav-fill card-header-tabs">
+                            {% for template_type in template_types %}
+                                <li class="nav-item">
+                                    <a class="nav-link" data-toggle="tab" href="#{{ template_type.grouper|slugify }}">
+                                        {{ template_type.grouper }}
+                                    </a>
+                                </li>
                             {% endfor %}
-        </fieldset>
+                        </ul>
+                    </div>
+
+                    {# Tabs content #}
+                    <div class="card-body">
+                        <div class="tab-content">
+                            {% for template_type in template_types %}
+                                <div class="tab-pane" id="{{ template_type.grouper|slugify }}">
+                                    {% for button in template_type.list %}
+                                        <button class="btn btn-outline-dark" name="button" value="{{ button.name }}">
+                                            {{ button.name }} ({{ button.amount | pretty_money }})
+                                        </button>
+                                    {% endfor %}
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </form>
+
+    <script type="text/javascript">
+        $ = django.jQuery;
+        $(document).ready(function() {
+            // If hash of a category in the URL, then select this category
+            // else select the first one
+            if (location.hash) {
+                $("a[href='" + location.hash + "']").tab("show");
+            } else {
+                $("a[data-toggle='tab']").first().tab("show");
+            }
+
+            // When selecting a category, change URL
+            $(document.body).on("click", "a[data-toggle='tab']", function(event) {
+                location.hash = this.getAttribute("href");
+            });
+        });
+    </script>
 {% endblock %}