From 9c9832704d67ccca11830cfaab886cf7f2fdcf0e Mon Sep 17 00:00:00 2001
From: Brice Maron <brice@bmaron.net>
Date: Sat, 31 Aug 2019 22:54:23 +0200
Subject: bill list: add placeholder and disable add bill when no members

---
 ihatemoney/templates/list_bills.html | 77 +++++++++++++++++++++++-------------
 1 file changed, 49 insertions(+), 28 deletions(-)

(limited to 'ihatemoney/templates/list_bills.html')

diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index e24fca5..e42ec37 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -87,10 +87,12 @@
 {% endblock %}
 
 {% block content %}
-    <a id="new-bill" href="{{ url_for('.add_bill') }}" class="btn btn-primary float-right" data-toggle="modal" data-target="#bill-form">
-        <i class="icon icon-white plus">{{ static_include("images/plus.svg") | safe }}</i>
-        {{ _("Add a new bill") }}
-    </a>
+    <span id="new-bill" class="float-right"  {% if not g.project.members %} data-toggle="tooltip" title="{{_('You should start by adding participants')}}" {% endif %}>
+        <a href="{{ url_for('.add_bill') }}" class="btn btn-primary float-right {% if not g.project.members %} disabled {% endif %}" data-toggle="modal" data-target="#bill-form">
+            <i class="icon icon-white plus">{{ static_include("images/plus.svg") | safe }}</i>
+            {{ _("Add a new bill") }}
+        </a>
+    </span>
     <div id="bill-form" class="modal fade show" role="dialog">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
@@ -106,31 +108,50 @@
     </div>
 
     {% if bills.count() > 0 %}
-    <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
-        <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</<th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead>
-    <tbody>
-    {% for bill in bills %}
-    <tr owers="{{bill.owers|join(',','id')}}" payer="{{bill.payer.id}}">
-            <td>
-                <span data-toggle="tooltip" data-placement="top"
-                    title="{{ _('Added on %(date)s', date=bill.creation_date if bill.creation_date else bill.date) }}">
-                    {{ bill.date }}
-                </span>
-            </td>
-            <td>{{ bill.payer }}</td>
-            <td>{{ bill.what }}</td>
-            <td>{{ bill.owers|join(', ', 'name') }} </td>
-            <td>{{ "%0.2f"|format(bill.amount) }} ({{ "%0.2f"|format(bill.pay_each()) }} {{ _("each") }})</td>
-            <td class="bill-actions">
-                <a class="edit" href="{{ url_for(".edit_bill", bill_id=bill.id) }}" title="{{ _("edit") }}">{{ _('edit') }}</a>
-                <a class="delete" href="{{ url_for(".delete_bill", bill_id=bill.id) }}" title="{{ _("delete") }}">{{ _('delete') }}</a>
-            </td>
-    </tr>
-    {% endfor %}
-    </tbody>
-    </table>
+        <div class="clearfix"></div>
+
+        <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
+            <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</<th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead>
+        <tbody>
+        {% for bill in bills %}
+        <tr owers="{{bill.owers|join(',','id')}}" payer="{{bill.payer.id}}">
+                <td>
+                    <span data-toggle="tooltip" data-placement="top"
+                        title="{{ _('Added on %(date)s', date=bill.creation_date if bill.creation_date else bill.date) }}">
+                        {{ bill.date }}
+                    </span>
+                </td>
+                <td>{{ bill.payer }}</td>
+                <td>{{ bill.what }}</td>
+                <td>{{ bill.owers|join(', ', 'name') }} </td>
+                <td>{{ "%0.2f"|format(bill.amount) }} ({{ "%0.2f"|format(bill.pay_each()) }} {{ _("each") }})</td>
+                <td class="bill-actions">
+                    <a class="edit" href="{{ url_for(".edit_bill", bill_id=bill.id) }}" title="{{ _("edit") }}">{{ _('edit') }}</a>
+                    <a class="delete" href="{{ url_for(".delete_bill", bill_id=bill.id) }}" title="{{ _("delete") }}">{{ _('delete') }}</a>
+                </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        </table>
 
     {% else %}
-    <div class="py-3"></div><p>{{ _("Nothing to list yet. You probably want to") }} <a href="{{ url_for(".add_bill") }}" data-toggle="modal" data-target="#bill-form">{{ _("add a bill") }}</a> ?</p></div>
+        <div class="py-3 d-flex justify-content-center empty-bill">
+        <div class="card d-inline-flex p-2">
+            <div class="card-body text-center text-muted">
+                <i class="icon icon-white hand-holding-heart">{{ static_include("images/hand-holding-heart.svg") | safe }}</i>
+                <h3>{{ _('No bills')}}</h3>
+                <p>
+                    {{ _("Nothing to list yet.")}}<br />
+                    {{ _("You probably want to") }}
+                    {%- if g.project.members %} <a href="{{ url_for('.add_bill') }}" data-toggle="modal" data-target="#bill-form">
+                            {{- _("add a bill") -}}
+                        </a> ?
+                    {% else %} <a href="{{ url_for('.add_member') }}">
+                            {{- _('add participants') -}}
+                        </a> ?
+                    {%- endif -%}
+                </p>
+            </div>
+        </div></div>
     {% endif %}
 {% endblock %}
-- 
cgit v1.1