Improve invoices list view (#1815)

* Improve invoices list view

* Pager: Only show options that make sense

* ListInvoices formatting

* Add separator for dropdown toggle split

* Minor ListInvoices improvement

* Improve payment requests list view

* Distinguish empty and filtered lists

* Properly align invoice details

* Add payment symbols to invoices list

* Improve payment symbols in invoices list

* Always display search on list pages

* Inline variable

* Move display logic to pager

e5040ede55 (commitcomment-41698272)

BTCPayServer/Components/Pager/Default.cshtml

@@ -1,8 +1,8 @@
 @model BasePagingViewModel
 
-<nav aria-label="..." class="w-100">
+@if (Model.Total > 0)
-    @if (Model.Total != 0)
 {
+    <nav aria-label="..." class="w-100">
         <ul class="pagination float-left">
             <li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
                 <a class="page-link" tabindex="-1" href="@NavigatePages(-1, Model.Count)">&laquo;</a>
@@ -25,7 +25,9 @@
                 <a class="page-link" href="@NavigatePages(1, Model.Count)">&raquo;</a>
             </li>
         </ul>
-    }
+
+        @if (Model.Total >= 50)
+        {
             <ul class="pagination float-right">
                 <li class="page-item disabled">
                     <span class="page-link">Page Size:</span>
@@ -33,17 +35,28 @@
                 <li class="page-item @(Model.Count == 50 ? "active" : null)">
                     <a class="page-link" href="@NavigatePages(0, 50)">50</a>
                 </li>
+                @if (Model.Total >= 100)
+                {
                     <li class="page-item @(Model.Count == 100 ? "active" : null)">
                         <a class="page-link" href="@NavigatePages(0, 100)">100</a>
                     </li>
+                }
+                @if (Model.Total >= 250)
+                {
                     <li class="page-item @(Model.Count == 250 ? "active" : null)">
                         <a class="page-link" href="@NavigatePages(0, 250)">250</a>
                     </li>
+                }
+                @if (Model.Total >= 500)
+                {
                     <li class="page-item @(Model.Count == 500 ? "active" : null)">
                         <a class="page-link" href="@NavigatePages(0, 500)">500</a>
                     </li>
+                }
             </ul>
+        }
     </nav>
+}
 @{
     string NavigatePages(int prevNext, int count)
     {

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -623,7 +623,6 @@ namespace BTCPayServer.Controllers
                 model.Invoices.Add(new InvoiceModel()
                 {
                     Status = invoice.Status,
-                    StatusString = state.ToString(),
                     ShowCheckout = invoice.Status == InvoiceStatus.New,
                     Date = invoice.InvoiceTime,
                     InvoiceId = invoice.Id,

BTCPayServer/Models/InvoicingModels/InvoicesModel.cs

@@ -19,7 +19,6 @@ namespace BTCPayServer.Models.InvoicingModels
         public string InvoiceId { get; set; }
 
         public InvoiceStatus Status { get; set; }
-        public string StatusString { get; set; }
         public bool CanMarkComplete { get; set; }
         public bool CanMarkInvalid { get; set; }
         public bool CanMarkStatus => CanMarkComplete || CanMarkInvalid;

BTCPayServer/Views/Invoice/ListInvoices.cshtml

@@ -1,11 +1,12 @@
+@using BTCPayServer.Payments
 @model InvoicesModel
 @{
     ViewData["Title"] = "Invoices";
+    var storeIds = string.Join("", Model.StoreIds.Select(storeId => $",storeid:{storeId}"));
 }
 @section HeadScripts {
     <script src="~/modal/btcpay.js" asp-append-version="true"></script>
 }
-
 @Html.HiddenFor(a => a.Count)
 <section>
     <div class="container">
@@ -22,50 +23,36 @@
             <div class="col-lg-12 section-heading">
                 <h2>@ViewData["Title"]</h2>
                 <hr class="primary">
-                <p>Create, search or pay an invoice. (<a href="#help" data-toggle="collapse">Help</a>)</p>
+                <p>Create, search or pay an invoice.</p>
-                <div id="help" class="collapse text-left">
-                    <p>
-                        You can search for invoice Id, deposit address, price, order id, store id, any buyer information and any product information.<br />
-                        Be sure to split your search parameters with comma, for example: <code>startdate:2019-04-25 13:00:00, status:paid</code><br />
-                        You can also apply filters to your search by searching for <code>filtername:value</code>, here is a list of supported filters
-                    </p>
-                    <ul>
-                        <li><code>storeid:id</code> for filtering a specific store</li>
-                        <li><code>orderid:id</code> for filtering a specific order</li>
-                        <li><code>itemcode:code</code> for filtering a specific type of item purchased through the pos or crowdfund apps</li>
-                        <li><code>status:(expired|invalid|complete|confirmed|paid|new)</code> for filtering a specific status</li>
-                        <li><code>exceptionstatus:(paidover|paidlate|paidpartial)</code> for filtering a specific exception state</li>
-                        <li><code>unusual:(true|false)</code> for filtering invoices which might requires merchant attention (those invalid or with an exceptionstatus)</li>
-                        <li><code>startdate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created after certain date</li>
-                        <li><code>enddate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created before certain date</li>
-                    </ul>
-                    <p>
-                        If you want all confirmed and complete invoices, you can duplicate a filter <code>status:confirmed, status:complete</code>.
-                    </p>
-                </div>
             </div>
         </div>
 
-        <form asp-action="ListInvoices" method="get" class="pull-right mb-3 col-sm-12 col-md-7 col-lg-6">
+        <div class="row">
+            <div class="col-12 col-sm-4 col-lg-6 mb-3">
+                <a asp-action="CreateInvoice" class="btn btn-primary mb-1" role="button" id="CreateNewInvoice">
+                    <span class="fa fa-plus"></span>
+                    Create an invoice
+                </a>
+            </div>
+            <div class="col-12 col-sm-8 col-lg-6 mb-3">
+                <form asp-action="ListInvoices" method="get">
                     <input type="hidden" asp-for="Count"/>
-            <div class="input-group ">
                     <input asp-for="TimezoneOffset" type="hidden"/>
+                    <div class="input-group">
+                        <div class="input-group-prepend">
+                            <a href="#help" class="input-group-text text-secondary text-decoration-none" data-toggle="collapse">
+                                <span class="fa fa-filter"></span>
+                            </a>
+                        </div>
                         <input asp-for="SearchTerm" class="form-control"/>
                         <div class="input-group-append">
-                    <button type="submit" class="btn btn-primary" title="Search invoice">
+                            <button type="submit" class="btn btn-secondary" title="Search invoice">
                                 <span class="fa fa-search"></span> Search
                             </button>
-                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="sr-only">Toggle Dropdown</span>
                             </button>
 
-                    @{
-                        var storeIds = string.Join(
-                            "",
-                            Model.StoreIds.Select(storeId => $",storeid:{storeId}")
-                        );
-                    }
-
                             <div class="dropdown-menu dropdown-menu-right">
                                 <a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=status%3Ainvalid@{@storeIds}">Invalid Invoices</a>
                                 <a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=status%3Apaid%2Cstatus%3Aconfirmed%2Cstatus%3Acomplete@{@storeIds}">Paid Invoices</a>
@@ -83,39 +70,11 @@
                                 <a class="dropdown-item" href="/invoices?SearchTerm=">Unfiltered</a>
                             </div>
                         </div>
+
                     </div>
                     <span asp-validation-for="SearchTerm" class="text-danger"></span>
                 </form>
 
-        <form method="post" id="MassAction" asp-action="MassAction">
-            <div class="row button-row col-sm-12 col-md-5 col-lg-6">
-                <div>
-                    <a asp-action="CreateInvoice" class="btn btn-primary mb-1" role="button" id="CreateNewInvoice"><span class="fa fa-plus"></span> Create a new invoice</a>
-
-                    <span>
-                        <button class="btn btn-primary dropdown-toggle  mb-1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Actions
-                        </button>
-                        <div class="dropdown-menu">
-                            <button type="submit" asp-action="MassAction" class="dropdown-item" name="command" value="archive"><i class="fa fa-archive"></i> Archive</button>
-                        </div>
-                    </span>
-
-                    <span>
-                        <a class="btn btn-primary dropdown-toggle  mb-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Export
-                        </a>
-                        <a href="https://docs.btcpayserver.org/Accounting/" target="_blank">
-                            <span class="fa fa-question-circle-o" title="More information..."></span>
-                        </a>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                            <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="csv" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">CSV</a>
-                            <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="json" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">JSON</a>
-                        </div>
-                    </span>
-                </div>
-            </div>
-            <br />
                 @* Custom Range Modal *@
                 <div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                     <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
@@ -193,25 +152,75 @@
                     })
                 </script>
                 @* Custom Range Modal *@
+            </div>
+        </div>
+
+        <div class="row collapse" id="help">
+            <div class="col">
+                <p>
+                    You can search for invoice Id, deposit address, price, order id, store id, any buyer information and any product information.
+                    Be sure to split your search parameters with comma, for example:<br />
+                    <code>startdate:2019-04-25 13:00:00, status:paid</code>
+                </p>
+                <p class="mb-2">
+                    You can also apply filters to your search by searching for <code>filtername:value</code>, supported filters are:
+                </p>
+                <ul>
+                    <li><code>storeid:id</code> for filtering a specific store</li>
+                    <li><code>orderid:id</code> for filtering a specific order</li>
+                    <li><code>itemcode:code</code> for filtering a specific type of item purchased through the pos or crowdfund apps</li>
+                    <li><code>status:(expired|invalid|complete|confirmed|paid|new)</code> for filtering a specific status</li>
+                    <li><code>exceptionstatus:(paidover|paidlate|paidpartial)</code> for filtering a specific exception state</li>
+                    <li><code>unusual:(true|false)</code> for filtering invoices which might requires merchant attention (those invalid or with an exceptionstatus)</li>
+                    <li><code>startdate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created after certain date</li>
+                    <li><code>enddate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created before certain date</li>
+                </ul>
+                <p>
+                    If you want all confirmed and complete invoices, you can duplicate a filter <code>status:confirmed, status:complete</code>.
+                </p>
+            </div>
+        </div>
+
+        @if (Model.Total > 0)
+        {
+            <form method="post" id="MassAction" asp-action="MassAction" class="mt-3">
+                <span class="mr-2">
+                    <button class="btn btn-secondary dropdown-toggle  mb-1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Actions
+                    </button>
+                    <div class="dropdown-menu">
+                        <button type="submit" asp-action="MassAction" class="dropdown-item" name="command" value="archive"><i class="fa fa-archive"></i> Archive</button>
+                    </div>
+                </span>
+                <span>
+                    <a class="btn btn-secondary dropdown-toggle mb-1" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Export
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                        <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="csv" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">CSV</a>
+                        <a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="json" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">JSON</a>
+                    </div>
+                </span>
+
+                <a href="https://docs.btcpayserver.org/Accounting/" class="ml-1" target="_blank">
+                    <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                </a>
 
                 <script type="text/javascript">
-                function selectAll(e) {
+                    function selectAll(e)
+                    {
                         var items = document.getElementsByClassName("selector");
                         for (var i = 0; i < items.length; i++) {
                             items[i].checked = e.checked;
                         }
                     }
                 </script>
-            <div class="row">
+
-                <div class="col-lg-12">
                 <table class="table table-sm table-responsive-md">
                     <thead>
                     <tr>
-                                <th class="only-for-js">
+                        <th style="width:2rem;" class="only-for-js">
-                                    @if (Model.Total > 0)
-                                    {
                             <input id="selectAllCheckbox" type="checkbox" onclick="selectAll(this);"/>
-                                    }
                         </th>
                         <th style="min-width:90px;" class="col-md-auto">
                             Date
@@ -256,10 +265,9 @@
                                 }
                                 @if (invoice.CanMarkStatus)
                                 {
-                                    <div id="pavpill_@invoice.InvoiceId">
+                                    <div id="pavpill_@invoice.InvoiceId" class="badge badge-@invoice.Status.ToString().ToLower()">
-                                        <span class="dropdown-toggle dropdown-toggle-split pavpill pavpil-@invoice.Status.ToString().ToLower()"
+                                        <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                            @invoice.Status.ToString().ToLower()
-                                            @invoice.StatusString
                                         </span>
                                         <div class="dropdown-menu pull-right">
                                             @if (invoice.CanMarkInvalid)
@@ -279,7 +287,22 @@
                                 }
                                 else
                                 {
-                                    <span class="pavpill pavpil-@invoice.Status.ToString().ToLower()">@invoice.StatusString</span>
+                                    <span class="badge badge-@invoice.Status.ToString().ToLower()">
+                                        @invoice.Status.ToString().ToLower()
+                                    </span>
+                                }
+                                @{
+                                    var grouped = invoice.Details.Payments.GroupBy(payment => payment.GetPaymentMethodId()?.PaymentType).Where(entities => entities.Key!= null);
+                                    var paiOnChain = grouped.Where(g => g.Key == BitcoinPaymentType.Instance).Any();
+                                    var paidOffChain = grouped.Where(g => g.Key == LightningPaymentType.Instance).Any();
+                                }
+                                @if (paiOnChain)
+                                {
+                                    <span class="badge">🔗</span>
+                                }
+                                @if (paidOffChain)
+                                {
+                                    <span class="badge">⚡️</span>
                                 }
                             </td>
                             <td style="text-align:right">@invoice.AmountCurrency</td>
@@ -313,10 +336,16 @@
                     }
                     </tbody>
                 </table>
+
                 <vc:pager view-model="Model"></vc:pager>
-                </div>
-            </div>
             </form>
+        }
+        else
+        {
+            <p class="text-secondary mt-3">
+                There are no invoices matching your criteria.
+            </p>
+        }
     </div>
     <script type="text/javascript">
         $(function () {
@@ -354,8 +383,8 @@
 
             $.post("invoices/" + invoiceId + "/changestate/" + newState)
                 .done(function (data) {
-                    var statusHtml = "<span class='pavpill pavpil-" + newState + "'>" + data.statusString + " <span class='fa fa-check'></span></span>";
+                    var statusHtml = "<span class='badge badge-" + newState + "'>" + data.statusString + " <span class='fa fa-check'></span></span>";
-                    pavpill.html(statusHtml);
+                    pavpill.replaceWith(statusHtml);
                 })
                 .fail(function (data) {
                     pavpill.html(originalHtml.replace("dropdown-menu pull-right show", "dropdown-menu pull-right"));
@@ -364,6 +393,9 @@
         }
     </script>
     <style type="text/css">
+        .invoice-payments {
+            padding-left: 2rem;
+        }
 
         .invoice-payments h3 {
             font-size: 15px;
@@ -390,35 +422,37 @@
             border-radius: 0.25rem;
         }
 
-            .pavpill.dropdown-toggle {
+        .badge .dropdown-toggle {
             cursor: pointer;
+            padding: 0;
         }
 
         .dropdown-item {
             cursor: pointer;
         }
 
-        .pavpil-new {
+        .badge-new {
             background: #d4edda;
             color: #000;
         }
 
-        .pavpil-expired {
+        .badge-expired {
             background: #eee;
             color: #000;
         }
 
-        .pavpil-invalid {
+        .badge-invalid {
             background: #c94a47;
             color: #fff;
         }
 
-        .pavpil-confirmed, .pavpil-paid {
+        .badge-confirmed,
+        .badge-paid {
             background: #f1c332;
             color: #000;
         }
 
-        .pavpil-complete {
+        .badge-complete {
             background: #329f80;
             color: #fff;
         }

BTCPayServer/Views/PaymentRequest/GetPaymentRequests.cshtml

@@ -18,20 +18,33 @@
             <div class="col-lg-12 section-heading">
                 <h2>Payment Requests</h2>
                 <hr class="primary">
-                <p>Create, search or pay an payment request.</p>
+                <p>
+                    Create, search or pay a payment request.
+                    <a href="https://docs.btcpayserver.org/PaymentRequests/" class="ml-1" target="_blank">
+                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                    </a>
+                </p>
             </div>
         </div>
 
-        <form asp-action="GetPaymentRequests" method="get" class="pull-right">
+        <div class="row">
+            <div class="col-12 col-md-4 col-lg-6 mb-3">
+                <a asp-action="EditPaymentRequest" class="btn btn-primary" role="button" id="CreatePaymentRequest">
+                    <span class="fa fa-plus"></span>
+                    Create a payment request
+                </a>
+            </div>
+            <div class="col-12 col-md-8 col-lg-6 mb-3">
+                <form asp-action="GetPaymentRequests" method="get">
                     <input type="hidden" asp-for="Count"/>
+                    <input type="hidden" asp-for="TimezoneOffset" />
                     <div class="input-group">
-                <input asp-for="TimezoneOffset" type="hidden" />
                         <input asp-for="SearchTerm" class="form-control" style="width:300px;"/>
                         <div class="input-group-append">
-                    <button type="submit" class="btn btn-primary" title="Search invoice">
+                            <button type="submit" class="btn btn-secondary" title="Search invoice">
                                 <span class="fa fa-search"></span> Search
                             </button>
-                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="sr-only">Toggle Dropdown</span>
                             </button>
 
@@ -44,17 +57,13 @@
                     </div>
                     <span asp-validation-for="SearchTerm" class="text-danger"></span>
                 </form>
+            </div>
+        </div>
 
-        <div class="row button-row">
-            <div class="col-lg-12 pl-0">
-                <a asp-action="EditPaymentRequest" class="btn btn-primary" role="button" id="CreatePaymentRequest"><span class="fa fa-plus"></span> Create a new payment request</a>
-                <a href="https://docs.btcpayserver.org/PaymentRequests/" target="_blank">
-                    <span class="fa fa-question-circle-o" title="More information..."></span>
-                </a>
-            </div>
-        </div>
         <div class="row">
             <div class="col-lg-12">
+                @if (Model.Total > 0)
+                {
                     <table class="table table-sm table-responsive-md">
                         <thead>
                             <tr>
@@ -92,6 +101,13 @@
                     </table>
 
                     <vc:pager view-model="Model"></vc:pager>
+                }
+                else
+                {
+                    <p class="text-secondary mt-3">
+                        There are no payment requests matching your criteria.
+                    </p>
+                }
             </div>
         </div>
     </div>

BTCPayServer/wwwroot/main/site.css

@@ -76,6 +76,11 @@ ul li {
     opacity: .5;
 }
 
+.dropdown-toggle-split,
+.dropdown-toggle-split:hover {
+    border-left: 1px solid var(--btcpay-color-white);
+}
+
 /* Admin Sidebar Navigation */
 a.nav-link {
     color: var(--btcpay-nav-color-link, var(--btcpay-color-neutral-600));