From 3597e79dc10a57078f2cd0807f939f00a7a7d635 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Fri, 21 Feb 2020 22:40:58 +0100
Subject: [PATCH 1/2] Dynamic tabs on conso view

---
 apps/note/urls.py              |   1 -
 apps/note/views.py             |  22 +++----
 templates/note/conso_form.html | 114 ++++++++++++++++++++++++---------
 3 files changed, 91 insertions(+), 46 deletions(-)

diff --git a/apps/note/urls.py b/apps/note/urls.py
index e1cc5216..fea911f6 100644
--- a/apps/note/urls.py
+++ b/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
diff --git a/apps/note/views.py b/apps/note/views.py
index b012ad8b..61012f34 100644
--- a/apps/note/views.py
+++ b/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')
diff --git a/templates/note/conso_form.html b/templates/note/conso_form.html
index e2106f17..89a8f8e4 100644
--- a/templates/note/conso_form.html
+++ b/templates/note/conso_form.html
@@ -2,40 +2,92 @@
 
 {% 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 %}
-        {% if form.non_field_errors %}
-            <p class="errornote">
-                {% for error in form.non_field_errors %}
-                    {{ error }}
+    {# 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 %}
+                            {{ error }}
+                        {% endfor %}
+                    </p>
+                {% endif %}
+                {% for field in form %}
+                    <div class="form-row{% if field.errors %} errors{% endif %}">
+                        {{ field.errors }}
+                        <div>
+                            {{ field.label_tag }}
+                            {% if field.is_readonly %}
+                                <div class="readonly">{{ field.contents }}</div>
+                            {% else %}
+                                {{ field }}
+                            {% endif %}
+                            {% if field.field.help_text %}
+                                <div class="help">{{ field.field.help_text|safe }}</div>
+                            {% endif %}
+                        </div>
+                    </div>
                 {% endfor %}
-            </p>
-        {% endif %}
-        <fieldset class="module aligned">
-            {% for field in form %}
-                <div class="form-row{% if field.errors %} errors{% endif %}">
-                    {{ field.errors }}
-                    <div>
-                        {{ field.label_tag }}
-                        {% if field.is_readonly %}
-                            <div class="readonly">{{ field.contents }}</div>
-                        {% else %}
-                            {{ field }}
-                        {% endif %}
-                        {% if field.field.help_text %}
-                            <div class="help">{{ field.field.help_text|safe }}</div>
-                        {% endif %}
+            </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 %}
+                        </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>
-            {% endfor %}
-            {% for button in buttons %}
-                <button name="button" value="{{ button.name }}">{{ button.name }} ({{ button.amount | pretty_money }})</button>
-            {% endfor %}
-        </fieldset>
+            </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 %}

From a39bbea2d406b458a540336bd7d52f9df89ac73c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Sat, 22 Feb 2020 10:17:24 +0100
Subject: [PATCH 2/2] Add shadow and fix jquery hack

---
 templates/note/conso_form.html | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/templates/note/conso_form.html b/templates/note/conso_form.html
index 89a8f8e4..b121ad54 100644
--- a/templates/note/conso_form.html
+++ b/templates/note/conso_form.html
@@ -13,7 +13,7 @@
         {% csrf_token %}
 
         <div class="row">
-            <div class="col-sm-5">
+            <div class="col-sm-5 mb-4">
                 {% if form.non_field_errors %}
                     <p class="errornote">
                         {% for error in form.non_field_errors %}
@@ -40,7 +40,7 @@
             </div>
 
             <div class="col-sm-7">
-                <div class="card text-center">
+                <div class="card text-center shadow">
                     {# Tabs for button categories #}
                     <div class="card-header">
                         <ul class="nav nav-tabs nav-fill card-header-tabs">
@@ -59,11 +59,14 @@
                         <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 class="d-inline-flex flex-wrap justify-content-center">
+                                        {% for button in template_type.list %}
+                                            <button class="btn btn-outline-dark rounded-0 flex-fill"
+                                                    name="button" value="{{ button.name }}">
+                                                {{ button.name }} ({{ button.amount | pretty_money }})
+                                            </button>
+                                        {% endfor %}
+                                    </div>
                                 </div>
                             {% endfor %}
                         </div>
@@ -72,9 +75,10 @@
             </div>
         </div>
     </form>
+{% endblock %}
 
+{% block extrajavascript %}
     <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