mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-03-13 11:35:51 +01:00
Improves Invoice Summary accordion view (#3859)
* ui+site: moves invoice css * ui+invoice: improves invoice summary and partials
This commit is contained in:
dstrukt
GitHub
parent
cb8fe24a77
commit
68bd40d2a4
4 changed files with 104 additions and 129 deletions
|
|
@ -49,49 +49,50 @@
|
|||
@if (onchainPayments.Any())
|
||||
{
|
||||
var hasNetworkFee = onchainPayments.Sum(a => a.NetworkFee) > 0;
|
||||
<h3>On-Chain payments</h3>
|
||||
<table class="table table-hover">
|
||||
<h5>On-Chain Payments</h5>
|
||||
<table class="table table-hover mt-3 mb-0">
|
||||
<thead class="thead-inverse">
|
||||
<tr>
|
||||
<th>Crypto</th>
|
||||
<th>Index</th>
|
||||
<th>Deposit address</th>
|
||||
<th>Amount</th>
|
||||
@if (hasNetworkFee)
|
||||
{
|
||||
<th>
|
||||
Network Fee
|
||||
<a href="https://docs.btcpayserver.org/FAQ/Stores/#allow-anyone-to-create-invoice" target="_blank" rel="noreferrer noopener">
|
||||
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
|
||||
</a>
|
||||
</th>
|
||||
}
|
||||
<th>Transaction Id</th>
|
||||
<th class="text-end">Confirmations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var payment in onchainPayments)
|
||||
{
|
||||
<tr style="@(payment.Replaced ? "text-decoration: line-through" : "")">
|
||||
<td>@payment.Crypto</td>
|
||||
<td>@(payment.CryptoPaymentData.KeyPath?.ToString()?? "Unknown")</td>
|
||||
<td style="max-width:300px;" data-bs-toggle="tooltip" class="text-truncate" title="@payment.DepositAddress">@payment.DepositAddress</td>
|
||||
<td class="payment-value">@payment.CryptoPaymentData.GetValue() @Safe.Raw(payment.AdditionalInformation is string i ? $"<br/>({i})" : string.Empty)</td>
|
||||
<tr>
|
||||
<th>Crypto</th>
|
||||
<th>Index</th>
|
||||
<th>Deposit address</th>
|
||||
<th>Amount</th>
|
||||
@if (hasNetworkFee)
|
||||
{
|
||||
<td>@payment.NetworkFee</td>
|
||||
}
|
||||
<td style="max-width:200px;" data-bs-toggle="tooltip" class="text-truncate" title="@payment.TransactionId">
|
||||
<div class="wraptextAuto">
|
||||
<a href="@payment.TransactionLink" target="_blank" rel="noreferrer noopener">
|
||||
@payment.TransactionId
|
||||
<th>
|
||||
Network Fee
|
||||
<a href="https://docs.btcpayserver.org/FAQ/Stores/#allow-anyone-to-create-invoice" target="_blank" rel="noreferrer noopener">
|
||||
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end">@payment.Confirmations</td>
|
||||
</th>
|
||||
}
|
||||
<th>Transaction Id</th>
|
||||
<th class="text-end">Confirmations</th>
|
||||
</tr>
|
||||
}
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var payment in onchainPayments)
|
||||
{
|
||||
<tr style="@(payment.Replaced ? "text-decoration: line-through" : "")">
|
||||
<td>@payment.Crypto</td>
|
||||
<td>@(payment.CryptoPaymentData.KeyPath?.ToString()?? "Unknown")</td>
|
||||
<td style="max-width:300px;" data-bs-toggle="tooltip" class="text-truncate" title="@payment.DepositAddress">@payment.DepositAddress</td>
|
||||
<td class="payment-value">@payment.CryptoPaymentData.GetValue() @Safe.Raw(payment.AdditionalInformation is string i ? $"<br/>({i})" : string.Empty)</td>
|
||||
@if (hasNetworkFee)
|
||||
{
|
||||
<td>@payment.NetworkFee</td>
|
||||
}
|
||||
<td style="max-width:200px;" data-bs-toggle="tooltip" class="text-truncate" title="@payment.TransactionId">
|
||||
<div class="wraptextAuto">
|
||||
<a href="@payment.TransactionLink" target="_blank" rel="noreferrer noopener">
|
||||
@payment.TransactionId
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end">@payment.Confirmations</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,47 +8,6 @@
|
|||
storeIds = string.Empty;
|
||||
}
|
||||
|
||||
@section PageHeadContent {
|
||||
<style>
|
||||
.invoice-payments {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.invoice-payments h3 {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pavpill {
|
||||
display: inline-block;
|
||||
padding: 0.3em 0.5em;
|
||||
font-size: 85%;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.badge .dropdown-toggle {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pull mass action form up, so that it is besides the search form */
|
||||
@@media (min-width: 1200px) {
|
||||
#MassAction {
|
||||
margin-top: -4rem;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
@ -366,14 +325,14 @@
|
|||
<div class="dropdown-menu pull-right">
|
||||
@if (invoice.CanMarkInvalid)
|
||||
{
|
||||
<button class="dropdown-item small cursorPointer changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="invalid">
|
||||
Mark as invalid <span class="fa fa-times"></span>
|
||||
<button class="dropdown-item cursorPointer changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="invalid">
|
||||
Mark as invalid
|
||||
</button>
|
||||
}
|
||||
@if (invoice.CanMarkSettled)
|
||||
{
|
||||
<button class="dropdown-item small cursorPointer changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="settled">
|
||||
Mark as settled <span class="fa fa-check-circle"></span>
|
||||
<button class="dropdown-item cursorPointer changeInvoiceState" data-invoice-id="@invoice.InvoiceId" data-new-state="settled">
|
||||
Mark as settled
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -416,10 +375,8 @@
|
|||
</tr>
|
||||
<tr id="invoice_details_@invoice.InvoiceId" class="invoice-details-row" style="display:none;">
|
||||
<td colspan="99" class="border-top-0">
|
||||
<div style="margin-left: 15px; margin-bottom: 0;">
|
||||
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
|
||||
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
|
||||
</div>
|
||||
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
|
||||
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
@using BTCPayServer.Client.Models
|
||||
@model (InvoiceDetailsModel Invoice, bool ShowAddress)
|
||||
@model (InvoiceDetailsModel Invoice, bool ShowAddress)
|
||||
@{ var invoice = Model.Invoice; }
|
||||
|
||||
<div class="invoice-payments table-responsive-xl mb-4">
|
||||
<h3 class="mb-0">Invoice Summary</h3>
|
||||
<table class="table table-hover">
|
||||
<div class="invoice-payments table-responsive">
|
||||
<h5 class="mb-0">Invoice Summary</h5>
|
||||
<table class="table table-hover mt-3 mb-4">
|
||||
<thead class="thead-inverse">
|
||||
<tr>
|
||||
<th>Payment method</th>
|
||||
@if (Model.ShowAddress)
|
||||
{
|
||||
<th>Address</th>
|
||||
}
|
||||
<th class="text-end">Rate</th>
|
||||
<th class="text-end">Paid</th>
|
||||
<th class="text-end">Due</th>
|
||||
@if (invoice.StatusException == InvoiceExceptionStatus.PaidOver)
|
||||
{
|
||||
<th class="text-end">Overpaid</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var payment in invoice.CryptoPayments)
|
||||
{
|
||||
<tr>
|
||||
<td>@payment.PaymentMethod</td>
|
||||
<th>Payment method</th>
|
||||
@if (Model.ShowAddress)
|
||||
{
|
||||
<td class="text-break">@payment.Address</td>
|
||||
<th>Address</th>
|
||||
}
|
||||
<td class="text-end">@payment.Rate</td>
|
||||
<td class="text-end text-nowrap">@payment.Paid</td>
|
||||
<td class="text-end text-nowrap">@payment.Due</td>
|
||||
<th class="text-end">Rate</th>
|
||||
<th class="text-end">Paid</th>
|
||||
<th class="text-end">Due</th>
|
||||
@if (invoice.StatusException == InvoiceExceptionStatus.PaidOver)
|
||||
{
|
||||
<td class="text-end">@payment.Overpaid</td>
|
||||
<th class="text-end">Overpaid</th>
|
||||
}
|
||||
</tr>
|
||||
var details = payment.PaymentMethodRaw.GetPaymentMethodDetails();
|
||||
var name = details.GetAdditionalDataPartialName();
|
||||
if (!string.IsNullOrEmpty(name))
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var payment in invoice.CryptoPayments)
|
||||
{
|
||||
<partial name="@name" model="@details" />
|
||||
<tr>
|
||||
<td>@payment.PaymentMethod</td>
|
||||
@if (Model.ShowAddress)
|
||||
{
|
||||
<td title="@payment.Address">
|
||||
<span class="text-truncate d-block" style="max-width: 400px">@payment.Address</span>
|
||||
</td>
|
||||
}
|
||||
<td class="text-end">@payment.Rate</td>
|
||||
<td class="text-end">@payment.Paid</td>
|
||||
<td class="text-end">@payment.Due</td>
|
||||
@if (invoice.StatusException == InvoiceExceptionStatus.PaidOver)
|
||||
{
|
||||
<td class="text-end">@payment.Overpaid</td>
|
||||
}
|
||||
</tr>
|
||||
var details = payment.PaymentMethodRaw.GetPaymentMethodDetails();
|
||||
var name = details.GetAdditionalDataPartialName();
|
||||
if (!string.IsNullOrEmpty(name))
|
||||
{
|
||||
<partial name="@name" model="@details" />
|
||||
}
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@{
|
||||
var grouped = invoice.Payments.GroupBy(payment => payment.GetPaymentMethodId()?.PaymentType).Where(entities => entities.Key!= null);
|
||||
}
|
||||
@foreach (var paymentGroup in grouped)
|
||||
{
|
||||
<div class="invoice-payments table-responsive-xl mb-4">
|
||||
@{
|
||||
var grouped = invoice.Payments.GroupBy(payment => payment.GetPaymentMethodId()?.PaymentType).Where(entities => entities.Key != null);
|
||||
}
|
||||
@foreach (var paymentGroup in grouped)
|
||||
{
|
||||
<partial name="@paymentGroup.Key.InvoiceViewPaymentPartialName" model="@paymentGroup.ToList()" />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,6 +99,23 @@ h2 small .fa-question-circle-o {
|
|||
font-size: var(--btcpay-font-size-l);
|
||||
}
|
||||
|
||||
|
||||
/* Invoices */
|
||||
.invoice-payments {
|
||||
padding: var(--btcpay-space-m) var(--btcpay-space-l);
|
||||
}
|
||||
.invoice-details-row {
|
||||
background: var(--btcpay-bg-tile);
|
||||
}
|
||||
.badge .dropdown-toggle {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
#MassAction {
|
||||
margin-top: -4rem;
|
||||
}
|
||||
}
|
||||
/* Prevent layout from breaking on hyperlinks with very long URLs as the visible text */
|
||||
.invoice-details a {
|
||||
word-break: break-word;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue