Hide some boxes when the user has no bills.

app/Http/Controllers/HomeController.php

@@ -19,6 +19,7 @@ use FireflyIII\Helpers\Collector\JournalCollectorInterface;
 use FireflyIII\Models\AccountType;
 use FireflyIII\Models\Tag;
 use FireflyIII\Repositories\Account\AccountRepositoryInterface as ARI;
+use FireflyIII\Repositories\Bill\BillRepositoryInterface;
 use FireflyIII\Repositories\Tag\TagRepositoryInterface;
 use Illuminate\Http\Request;
 use Illuminate\Support\Collection;
@@ -121,7 +122,6 @@ class HomeController extends Controller
      */
     public function index(ARI $repository)
     {
-
         $types = config('firefly.accountTypesByIdentifier.asset');
         $count = $repository->count($types);
 
@@ -142,6 +142,11 @@ class HomeController extends Controller
         $accounts              = $repository->getAccountsById($frontPage->data);
         $showDepositsFrontpage = Preferences::get('showDepositsFrontpage', false)->data;
 
+        // zero bills? Hide some elements from view.
+        /** @var BillRepositoryInterface $billRepository */
+        $billRepository = app(BillRepositoryInterface::class);
+        $billCount      = $billRepository->getBills()->count();
+
         foreach ($accounts as $account) {
             $collector = app(JournalCollectorInterface::class);
             $collector->setAccounts(new Collection([$account]))->setRange($start, $end)->setLimit(10)->setPage(1);
@@ -153,7 +158,7 @@ class HomeController extends Controller
         }
 
         return view(
-            'index', compact('count', 'showTour', 'title', 'subTitle', 'mainTitleIcon', 'transactions', 'showDepositsFrontpage')
+            'index', compact('count', 'showTour', 'title', 'subTitle', 'mainTitleIcon', 'transactions', 'showDepositsFrontpage', 'billCount')
         );
     }
 
@@ -205,10 +210,7 @@ class HomeController extends Controller
      *
      * @return bool
      */
-    private
-    function startsWithAny(
-        array $array, string $needle
-    ): bool
+    private function startsWithAny(array $array, string $needle): bool
     {
         foreach ($array as $entry) {
             if ((substr($needle, 0, strlen($entry)) === $entry)) {

public/js/ff/index.js

@@ -1,4 +1,4 @@
-    /* globals $, columnChart,showTour, Tour, google, pieChart, stackedColumnChart */
+/* globals $, columnChart,showTour, Tour, google, pieChart, stackedColumnChart, billCount */
 
 $(function () {
     "use strict";
@@ -33,7 +33,9 @@ function endTheTour() {
 function drawChart() {
     "use strict";
     lineChart('chart/account/frontpage', 'accounts-chart');
-    pieChart('chart/bill/frontpage', 'bills-chart');
+    if (billCount > 0) {
+        pieChart('chart/bill/frontpage', 'bills-chart');
+    }
     stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
     columnChart('chart/category/frontpage', 'categories-chart');
     columnChart('chart/account/expense', 'expense-accounts-chart');

resources/views/index.twig

@@ -43,20 +43,21 @@
             </div>
         </div>
         <div class="col-lg-4 col-md-6 col-sm-12">
+            {% if billCount > 0 %}
+                <!-- BILLS -->
+                <div class="box">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">{{ 'bills'|_ }}</h3>
 
-            <!-- BILLS -->
-            <div class="box">
-                <div class="box-header with-border">
-                    <h3 class="box-title">{{ 'bills'|_ }}</h3>
-
-                </div>
-                <div class="box-body">
-                    <div style="width:60%;margin:0 auto;">
-                        <canvas id="bills-chart" style="width:100%;height:175px;" height="175"></canvas>
                     </div>
+                    <div class="box-body">
+                        <div style="width:60%;margin:0 auto;">
+                            <canvas id="bills-chart" style="width:100%;height:175px;" height="175"></canvas>
+                        </div>
 
+                    </div>
                 </div>
-            </div>
+            {% endif %}
 
             <!-- TRANSACTIONS -->
             {% for data in transactions %}
@@ -129,6 +130,7 @@
         {% else %}
         showTour = false;
         {% endif %}
+        var billCount = {{ billCount }};
     </script>
 
     <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>

resources/views/partials/boxes.twig

@@ -1,6 +1,14 @@
+{# Set box sizes: #}
+{% if billCount > 0 %}
+    {% set boxClasses = 'col-lg-3 col-md-3 col-sm-6 col-xs-12' %}
+{% else %}
+    {# Zero bills? Remove the boxes. #}
+    {% set boxClasses = 'col-lg-4 col-md-4 col-sm-6 col-xs-12' %}
+{% endif %}
+
 <!-- Info boxes -->
 <div class="row hidden-sm hidden-xs">
-    <div class="col-md-3 col-sm-6 col-xs-12">
+    <div class="{{ boxClasses }}">
         <div class="info-box">
             <span class="info-box-icon bg-red">
                 <i class="fa fa-upload fa-fw"></i>
@@ -10,12 +18,9 @@
                 <span class="info-box-text">{{ 'moneyOut'|_ }}</span>
                 <span class="info-box-number" id="box-out"></span>
             </div>
-            <!-- /.info-box-content -->
         </div>
-        <!-- /.info-box -->
     </div>
-    <!-- /.col -->
-    <div class="col-md-3 col-sm-6 col-xs-12">
+    <div class="{{ boxClasses }}">
         <div class="info-box">
             <span class="info-box-icon bg-green">
                 <i class="fa fa-download faw-fw"></i>
@@ -25,43 +30,34 @@
                 <span class="info-box-text">{{ 'moneyIn'|_ }}</span>
                 <span class="info-box-number" id="box-in"></span>
             </div>
-            <!-- /.info-box-content -->
         </div>
-        <!-- /.info-box -->
     </div>
-    <!-- /.col -->
+    {% if billCount > 0 %}
+        <div class="clearfix visible-sm-block"></div>
 
-    <!-- fix for small devices only -->
-    <div class="clearfix visible-sm-block"></div>
-
-    <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
+        <div class="{{ boxClasses }}">
+            <div class="info-box">
             <span class="info-box-icon bg-blue">
                 <i class="fa fa-calendar fa-fw"></i>
             </span>
 
-            <div class="info-box-content">
-                <span class="info-box-text">{{ 'billsToPay'|_ }}</span>
-                <span class="info-box-number" id="box-bills-unpaid"></span>
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ 'billsToPay'|_ }}</span>
+                    <span class="info-box-number" id="box-bills-unpaid"></span>
+                </div>
             </div>
-            <!-- /.info-box-content -->
         </div>
-        <!-- /.info-box -->
-    </div>
-    <!-- /.col -->
-    <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
+        <div class="{{ boxClasses }}">
+            <div class="info-box">
             <span class="info-box-icon bg-aqua">
                 <i class="fa fa-line-chart fa-fw"></i>
             </span>
 
-            <div class="info-box-content">
-                <span class="info-box-text">{{ 'billsPaid'|_ }}</span>
-                <span class="info-box-number" id="box-bills-paid"></span>
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ 'billsPaid'|_ }}</span>
+                    <span class="info-box-number" id="box-bills-paid"></span>
+                </div>
             </div>
-            <!-- /.info-box-content -->
         </div>
-        <!-- /.info-box -->
-    </div>
-    <!-- /.col -->
-</div><!-- /.row -->
+    {% endif %}
+</div>