Introduce tabs in the invoice list

datacenterlight/views.py

@@ -29,7 +29,7 @@ from utils.forms import (
 )
 from utils.hosting_utils import (
     get_vm_price_with_vat, get_all_public_keys, get_vat_rate_for_country,
-    get_vm_price_for_given_vat, round_up
+    get_vm_price_for_given_vat
 )
 from utils.stripe_utils import StripeUtils
 from utils.tasks import send_plain_email_task

hosting/templates/hosting/invoices.html

@@ -2,70 +2,84 @@
 {% load staticfiles bootstrap3 humanize i18n custom_tags %}
 
 {% block content %}
-<div class="dashboard-container">
+<div class="container">
-    <div class="dashboard-container-head">
+  <ul class="nav nav-tabs">
-        <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
+    <li class="active"><a data-toggle="tab" href="#recurring">{% trans "Recurring" %}</a></li>
-        {% if messages %}
+    <li><a data-toggle="tab" href="#one_off">{% trans "One-off payments" %}</a></li>
-            <div class="alert alert-warning">
-                {% for message in messages %}
-                <span>{{ message }}</span>
-                {% endfor %}
-            </div>
-        {% endif %}
-        <div class="dashboard-subtitle"></div>
-    </div>
-
-    <table class="table table-switch">
-        <thead>
-            <tr>
-                <th>{% trans "VM ID" %}</th>
-                <th>{% trans "IP Address" %}/{% trans "Product" %}</th>
-                <th>{% trans "Period" %}</th>
-                <th>{% trans "Amount" %}</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for inv_data in invs %}
-                <tr>
-                    {{ inv_data | get_line_item_from_stripe_invoice }}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-{% if invs.has_other_pages %}
-  <ul class="pagination">
-    {% if invs.has_previous %}
-      {% if user_email %}
-        <li><a href="?page={{ invs.previous_page_number }}&user_email={{user_email}}">&laquo;</a></li>
-      {% else %}
-        <li><a href="?page={{ invs.previous_page_number }}">&laquo;</a></li>
-      {% endif %}
-    {% else %}
-      <li class="disabled"><span>&laquo;</span></li>
-    {% endif %}
-    {% for i in invs.paginator.page_range %}
-      {% if invs.number == i %}
-        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
-      {% else %}
-          {% if user_email %}
-              <li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
-          {% else %}
-              <li><a href="?page={{ i }}">{{ i }}</a></li>
-          {% endif %}
-      {% endif %}
-    {% endfor %}
-    {% if invs.has_next %}
-      {% if user_email %}
-        <li><a href="?page={{ invs.next_page_number }}&user_email={{user_email}}">&raquo;</a></li>
-      {% else %}
-        <li><a href="?page={{ invs.next_page_number }}">&raquo;</a></li>
-      {% endif %}
-    {% else %}
-      <li class="disabled"><span>&raquo;</span></li>
-    {% endif %}
   </ul>
-{% endif %}
 
+  <div class="tab-content">
+    <div id="recurring" class="tab-pane fade in active">
+        <div class="dashboard-container">
+            <div class="dashboard-container-head">
+                <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Bills" %}</h3>
+                {% if messages %}
+                    <div class="alert alert-warning">
+                        {% for message in messages %}
+                        <span>{{ message }}</span>
+                        {% endfor %}
+                    </div>
+                {% endif %}
+                <div class="dashboard-subtitle"></div>
+            </div>
+
+            <table class="table table-switch">
+                <thead>
+                    <tr>
+                        <th>{% trans "VM ID" %}</th>
+                        <th>{% trans "IP Address" %}/{% trans "Product" %}</th>
+                        <th>{% trans "Period" %}</th>
+                        <th>{% trans "Amount" %}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for inv_data in invs %}
+                        <tr>
+                            {{ inv_data | get_line_item_from_stripe_invoice }}
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% if invs.has_other_pages %}
+          <ul class="pagination">
+            {% if invs.has_previous %}
+              {% if user_email %}
+                <li><a href="?page={{ invs.previous_page_number }}&user_email={{user_email}}">&laquo;</a></li>
+              {% else %}
+                <li><a href="?page={{ invs.previous_page_number }}">&laquo;</a></li>
+              {% endif %}
+            {% else %}
+              <li class="disabled"><span>&laquo;</span></li>
+            {% endif %}
+            {% for i in invs.paginator.page_range %}
+              {% if invs.number == i %}
+                <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
+              {% else %}
+                  {% if user_email %}
+                      <li><a href="?page={{ i }}&user_email={{user_email}}">{{ i }}</a></li>
+                  {% else %}
+                      <li><a href="?page={{ i }}">{{ i }}</a></li>
+                  {% endif %}
+              {% endif %}
+            {% endfor %}
+            {% if invs.has_next %}
+              {% if user_email %}
+                <li><a href="?page={{ invs.next_page_number }}&user_email={{user_email}}">&raquo;</a></li>
+              {% else %}
+                <li><a href="?page={{ invs.next_page_number }}">&raquo;</a></li>
+              {% endif %}
+            {% else %}
+              <li class="disabled"><span>&raquo;</span></li>
+            {% endif %}
+          </ul>
+        {% endif %}
+
+        </div>
+    </div>
+    <div id="one_off" class="tab-pane fade">
+      <h3>One-off payments</h3>
+    </div>
+  </div>
 </div>
 {% endblock %}