Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invoice list modes #4422

Closed
wants to merge 3 commits into from
Closed

Invoice list modes #4422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75496db
Simplify invoices list
dennisreimann Dec 8, 2022
75c1d25
POC: Add list mode V4V
dennisreimann Dec 8, 2022
81d7990
Merge branch 'master' into invoice-list-modes
dennisreimann Apr 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions BTCPayServer/Controllers/UIInvoiceController.UI.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -999,11 +999,13 @@ public async Task<IActionResult> ListInvoices(InvoicesModel? model = null)
foreach (var i in l)
storeIds.Add(i);
}

if (storeId is not null)
{
storeIds.Add(storeId);
model.StoreId = storeId;
}

model.StoreIds = storeIds.ToArray();

InvoiceQuery invoiceQuery = GetInvoiceQuery(model.SearchTerm, model.TimezoneOffset ?? 0);
Expand Down Expand Up @@ -1034,6 +1036,13 @@ public async Task<IActionResult> ListInvoices(InvoicesModel? model = null)
HasRefund = invoice.Refunds.Any(data => !data.PullPaymentData.Archived)
});
}

if (model.Mode != "list")
{
model.PaginationQuery ??= new Dictionary<string, object>();
model.PaginationQuery.Add("mode", model.Mode);
}

return View(model);
}

Expand Down
1 change: 1 addition & 0 deletions BTCPayServer/Models/InvoicingModels/InvoicesModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ public class InvoicesModel : BasePagingViewModel
public override int CurrentPageCount => Invoices.Count;
public string[] StoreIds { get; set; }
public string StoreId { get; set; }
public string Mode { get; set; } = "list";
public bool IncludeArchived { get; set; }
}

Expand Down
119 changes: 58 additions & 61 deletions BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
@using BTCPayServer.Client
@using BTCPayServer.Client.Models
@using BTCPayServer.Payments
@using BTCPayServer.Services
@inject DisplayFormatter DisplayFormatter
@model InvoicesModel
@{
ViewData.SetActivePage(InvoiceNavPages.Index, "Invoices");
var storeIds = string.Join("", Model.StoreIds.Select(storeId => $",storeid:{storeId}"));
if (this.Context.GetRouteValue("storeId") is string)
if (Context.GetRouteValue("storeId") is string)
storeIds = string.Empty;
}

@section PageHeadContent
{
<style>
.invoice-payments {
padding-left: var(--btcpay-space-l);
}
</style>
}

@section PageFootContent {
@*Without async, somehow selenium do not manage to click on links in this page*@
<script src="~/modal/btcpay.js" asp-append-version="true" async></script>
Expand Down Expand Up @@ -93,31 +85,12 @@
$(".export-link, a.dropdown-item").each(function () {
this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset);
});

$("#invoices")
.on("click", ".invoice-row .invoice-details-toggle", function (e) {
e.preventDefault();
e.stopPropagation(true);

const $btnToggle = $(e.currentTarget);
const $invoiceRow = $btnToggle.parents(".invoice-row");
const $detailsRow = $invoiceRow.next(".invoice-details-row");

$detailsRow.toggle(0, function () {
const $icon = $btnToggle.children().first();
if ($(this).is(':visible')) {
$icon.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
} else {
$icon.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
}
});
})
.on("click", ".invoice-row", function (e) {
const $invoiceRow = $(e.currentTarget);
if (!$(e.target).is("a,.badge,.selector")) {
$invoiceRow.find(".selector").trigger("click");
}
});

delegate('click', '#invoices .invoice-row', function (e) {
if (e.target.matches('td,time')) {
e.target.closest('.invoice-row').querySelector('.selector').click();
}
});
});
</script>
}
Expand Down Expand Up @@ -222,7 +195,7 @@
</ul>
</div>
</div>
<form class="@(Model.Invoices.Count > 0 ? "col-xl-7 col-xxl-8 " : "")mb-4" asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" method="get">
<form class="@(Model.Invoices.Count > 0 ? "col-xl-5 col-xxl-6 " : "")mb-4" asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" method="get">
<input type="hidden" asp-for="Count" />
<input asp-for="TimezoneOffset" type="hidden" />
<div class="input-group">
Expand Down Expand Up @@ -260,7 +233,7 @@
@if (Model.Invoices.Count > 0)
{
<form method="post" id="MassAction" asp-action="MassAction" class="">
<div class="d-inline-flex align-items-center pb-2 float-xl-end mb-2 gap-3">
<div class="d-flex d-xl-inline-flex align-items-center pb-2 float-xl-end mb-2 gap-3">
<input type="hidden" name="storeId" value="@Model.StoreId" />
<div class="dropdown order-xl-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Expand All @@ -287,6 +260,10 @@
<vc:icon symbol="info" />
</a>
</div>
<div class="btn-group order-5 ms-auto" role="group" aria-label="View mode">
<a asp-route-mode="list" class="btn btn-secondary px-3 @(Model.Mode == "list" ? "active" : "")">List</a>
<a asp-route-mode="v4v" class="btn btn-secondary px-3 @(Model.Mode == "v4v" ? "active" : "")">V4V</a>
</div>
</div>
<div style="clear:both"></div>
<div class="table-responsive">
Expand All @@ -295,40 +272,64 @@
<tr>
<th style="width:2rem;" class="only-for-js">
<input id="selectAllCheckbox" type="checkbox" class="form-check-input" />
</th>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Date
<button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
</div>
</th>
<th class="text-nowrap">Order Id</th>
<th class="text-nowrap">Invoice Id</th>
<th>Status</th>
<th class="text-nowrap" style="width:13rem">Invoice Id</th>
@if (Model.Mode == "v4v")
{
<th class="text-nowrap">Address</th>
<th class="text-nowrap">Comment</th>
}
else
{
<th class="text-nowrap">Order Id</th>
}
<th class="w-100px">Status</th>
<th class="text-end">Amount</th>
<th class="text-end">Actions</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var invoice in Model.Invoices)
{
var detailsId = $"invoice_details_{invoice.InvoiceId}";
<tr id="invoice_@invoice.InvoiceId" class="invoice-row">
<td class="only-for-js">
<input name="selectedItems" type="checkbox" class="selector form-check-input" value="@invoice.InvoiceId" />
</td>
<td>@invoice.Date.ToBrowserDate()</td>
<td>
<div class="text-truncate" style="max-width:120px;" data-bs-toggle="tooltip" title="@invoice.OrderId">
@if (invoice.RedirectUrl != string.Empty)
{
<a href="@invoice.RedirectUrl" rel="noreferrer noopener">@invoice.OrderId</a>
}
else
{
@invoice.OrderId
}
</div>
<td class="text-break">
<a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">@invoice.InvoiceId</a>
</td>
<td class="text-break">@invoice.InvoiceId</td>
@if (Model.Mode == "v4v")
{
var lnurlId = PaymentMethodId.Parse("BTC_LNURLPAY");
var payment = invoice.Details.CryptoPayments.FirstOrDefault(p => p.PaymentMethodId == lnurlId);
var details = (LNURLPayPaymentMethodDetails)payment?.PaymentMethodRaw.GetPaymentMethodDetails();

<td>@(details != null ? details.ConsumedLightningAddress : "")</td>
<td>@(details != null ? details.ProvidedComment : "")</td>
}
else
{
<td style="max-width:120px;">
<div class="text-truncate" style="max-width:120px;" data-bs-toggle="tooltip" title="@invoice.OrderId">
@if (invoice.RedirectUrl != string.Empty)
{
<a href="@invoice.RedirectUrl" rel="noreferrer noopener">@invoice.OrderId</a>
}
else
{
@invoice.OrderId
}
</div>
</td>
}
<td>
@if (invoice.Details.Archived)
{
Expand Down Expand Up @@ -388,14 +389,12 @@
}
</span>
}
&nbsp;
<a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
<a class="only-for-js invoice-details-toggle" href="#">
<span title="Invoice Details Toggle" class="fa fa-1x fa-angle-double-down"></span>
</a>
<button type="button" class="accordion-button collapsed only-for-js" data-bs-toggle="collapse" data-bs-target="#@detailsId" aria-expanded="false" aria-controls="@detailsId">
<vc:icon symbol="caret-down" />
</button>
</td>
</tr>
<tr id="invoice_details_@invoice.InvoiceId" class="invoice-details-row" style="display:none;">
<tr id="@detailsId" class="collapse bg-tile">
<td colspan="99" class="border-top-0">
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
Expand All @@ -405,9 +404,7 @@
</tbody>
</table>
</div>

<vc:pager view-model="Model" />

</form>
}
else
Expand Down
13 changes: 11 additions & 2 deletions BTCPayServer/wwwroot/main/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,17 @@ h2 svg.icon.icon-info {
}

/* Invoices */
.invoice-details-row {
background: var(--btcpay-bg-tile);
.invoice-payments {
padding-left: var(--btcpay-space-l);
}
.invoice-payments .table {
width: 100% !important;
}
.invoice-payments > :first-child {
margin-top: 0 !important;
}
.invoice-payments > :last-child {
margin-bottom: 0 !important;
}
.badge .dropdown-toggle {
cursor: pointer;
Expand Down