aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-17 22:14:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Hide pagination & page size when not necessary (#2122)

Browse Source 
* UI: Hide pagination and page size when not necessary

* UI: Use pager component for notifications list

* UI: Use pager component for wallet transactions list

* UI: Improve pager component

* Fix from code review
This commit is contained in:
Dennis Reimann
2020-12-12 07:21:37 +01:00
committed by GitHub
parent 282d0abb62
commit ed497cab99
8 changed files with 71 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
BTCPayServer/Components/Pager/Default.cshtml
View File

@@ -1,57 +1,52 @@
@model BasePagingViewModel @model BasePagingViewModel
@if (Model.Total > 0) @{
var pageSizeOptions = new [] { 50, 100, 250, 500 };
}
@if (Model.Total > pageSizeOptions.Min())
{ {
<nav aria-label="..." class="w-100"> <nav aria-label="..." class="w-100">
<ul class="pagination float-left"> @if (Model.Total > Model.Count)
<li class="page-item @(Model.Skip == 0 ? "disabled" : null)"> {
<a class="page-link" tabindex="-1" href="@NavigatePages(-1, Model.Count)">&laquo;</a> <ul class="pagination float-left">
</li> <li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
<li class="page-item disabled"> <a class="page-link" tabindex="-1" href="@NavigatePages(-1, Model.Count)">&laquo;</a>
@if (Model.Total <= Model.Count) </li>
{ <li class="page-item disabled">
<span class="page-link"> @if (Model.Total <= Model.Count)
1–@Model.Total {
</span> <span class="page-link">
} 1–@Model.Total
else </span>
{ }
<span class="page-link"> else
@(Model.Skip + 1)–@(Model.Skip + Model.Count), Total: @Model.Total {
</span> <span class="page-link">
} @(Model.Skip + 1)–@(Model.Skip + Model.Count), Total: @Model.Total
</li> </span>
<li class="page-item @(Model.Total > (Model.Skip + Model.Count) ? null : "disabled")"> }
<a class="page-link" href="@NavigatePages(1, Model.Count)">&raquo;</a> </li>
</li> <li class="page-item @(Model.Total > (Model.Skip + Model.Count) ? null : "disabled")">
</ul> <a class="page-link" href="@NavigatePages(1, Model.Count)">&raquo;</a>
</li>
</ul>
}
@if (Model.Total >= 50) @if (Model.Total >= pageSizeOptions.Min())
{ {
<ul class="pagination float-right"> <ul class="pagination float-right">
<li class="page-item disabled"> <li class="page-item disabled">
<span class="page-link">Page Size:</span> <span class="page-link">Page Size:</span>
</li> </li>
<li class="page-item @(Model.Count == 50 ? "active" : null)"> @foreach (int pageSize in pageSizeOptions)
<a class="page-link" href="@NavigatePages(0, 50)">50</a>
</li>
@if (Model.Total >= 100)
{ {
<li class="page-item @(Model.Count == 100 ? "active" : null)"> if (Model.Total >= pageSize)
<a class="page-link" href="@NavigatePages(0, 100)">100</a> {
</li> <li class="page-item @(Model.Count == pageSize ? "active" : null)">
} <a class="page-link" href="@NavigatePages(0, pageSize)">@pageSize</a>
@if (Model.Total >= 250) </li>
{ }
<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> </ul>
} }
@@ -70,14 +65,22 @@
skip = Model.Skip + count; skip = Model.Skip + count;
} }
var act = Url.Action(null, new var query = new Dictionary<string, object>
{ {
searchTerm = Model.SearchTerm, { "searchTerm", Model.SearchTerm },
timezoneOffset = Model.TimezoneOffset, { "timezoneOffset", Model.TimezoneOffset },
skip = skip, { "skip", skip },
count = count, { "count", count }
}); };
return act; if (Model.PaginationQuery != null)
{
// merge both, prefering the `query` properties in case of duplicate keys
query = query.Concat(Model.PaginationQuery)
.GroupBy(e => e.Key)
.ToDictionary(g => g.Key, g => g.First().Value);
}
return Url.Action(null, query);
} }
} }

7
BTCPayServer/Controllers/WalletsController.cs
View File

@@ -290,6 +290,13 @@ namespace BTCPayServer.Controllers
Count = count, Count = count,
Total = 0 Total = 0
}; };
if (labelFilter != null)
{
model.PaginationQuery = new Dictionary<string, object>
{
{"labelFilter", labelFilter}
};
}
if (transactions == null) if (transactions == null)
{ {
TempData.SetStatusMessageModel(new StatusMessageModel() TempData.SetStatusMessageModel(new StatusMessageModel()

2
BTCPayServer/Models/BasePagingViewModel.cs
View File

@@ -1,3 +1,4 @@
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations;
namespace BTCPayServer.Models namespace BTCPayServer.Models
@@ -10,5 +11,6 @@ namespace BTCPayServer.Models
[DisplayFormat(ConvertEmptyStringToNull = false)] [DisplayFormat(ConvertEmptyStringToNull = false)]
public string SearchTerm { get; set; } public string SearchTerm { get; set; }
public int? TimezoneOffset { get; set; } public int? TimezoneOffset { get; set; }
public Dictionary<string, object> PaginationQuery { get; set; }
} }
} }

7
BTCPayServer/Models/NotificationViewModels/IndexViewModel.cs
View File

@@ -3,13 +3,8 @@ using BTCPayServer.Abstractions.Contracts;
namespace BTCPayServer.Models.NotificationViewModels namespace BTCPayServer.Models.NotificationViewModels
{ {
public class IndexViewModel public class IndexViewModel : BasePagingViewModel
{ {
public int Skip { get; set; }
public int Count { get; set; }
public int Total { get; set; }
public List<NotificationViewModel> Items { get; set; } public List<NotificationViewModel> Items { get; set; }
} }
} }

5
BTCPayServer/Models/WalletViewModels/ListTransactionsViewModel.cs
View File

@@ -4,7 +4,7 @@ using BTCPayServer.Services.Labels;
namespace BTCPayServer.Models.WalletViewModels namespace BTCPayServer.Models.WalletViewModels
{ {
public class ListTransactionsViewModel public class ListTransactionsViewModel : BasePagingViewModel
{ {
public class TransactionViewModel public class TransactionViewModel
{ {
@@ -19,8 +19,5 @@ namespace BTCPayServer.Models.WalletViewModels
} }
public HashSet<ColoredLabel> Labels { get; set; } = new HashSet<ColoredLabel>(); public HashSet<ColoredLabel> Labels { get; set; } = new HashSet<ColoredLabel>();
public List<TransactionViewModel> Transactions { get; set; } = new List<TransactionViewModel>(); public List<TransactionViewModel> Transactions { get; set; } = new List<TransactionViewModel>();
public int Skip { get; set; }
public int Count { get; set; }
public int Total { get; set; }
} }
} }

2
BTCPayServer/Views/Invoice/ListInvoices.cshtml
View File

@@ -329,7 +329,7 @@
</tbody> </tbody>
</table> </table>
<vc:pager view-model="Model"></vc:pager> <vc:pager view-model="Model" />
</form> </form>
} }
else else

68
BTCPayServer/Views/Notifications/Index.cshtml
View File

@@ -86,73 +86,7 @@
</tbody> </tbody>
</table> </table>
<nav aria-label="..." class="w-100"> <vc:pager view-model="Model" />
@if (Model.Total != 0)
{
<ul class="pagination float-left">
<li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
<a class="page-link" tabindex="-1" href="@ListItemsPage(-1, Model.Count)">&laquo;</a>
</li>
<li class="page-item disabled">
@if (Model.Total <= Model.Count)
{
<span class="page-link">
1–@Model.Items.Count
</span>
}
else
{
<span class="page-link">
@(Model.Skip + 1)–@(Model.Skip + Model.Items.Count), Total: @Model.Total
</span>
}
</li>
<li class="page-item @(Model.Total > (Model.Skip + Model.Items.Count) ? null : "disabled")">
<a class="page-link" href="@ListItemsPage(1, Model.Count)">&raquo;</a>
</li>
</ul>
}
<ul class="pagination float-right">
<li class="page-item disabled">
<span class="page-link">Page Size:</span>
</li>
<li class="page-item @(Model.Count == 50 ? "active" : null)">
<a class="page-link" href="@ListItemsPage(0, 50)">50</a>
</li>
<li class="page-item @(Model.Count == 100 ? "active" : null)">
<a class="page-link" href="@ListItemsPage(0, 100)">100</a>
</li>
<li class="page-item @(Model.Count == 250 ? "active" : null)">
<a class="page-link" href="@ListItemsPage(0, 250)">250</a>
</li>
<li class="page-item @(Model.Count == 500 ? "active" : null)">
<a class="page-link" href="@ListItemsPage(0, 500)">500</a>
</li>
</ul>
</nav>
@{
string ListItemsPage(int prevNext, int count)
{
var skip = Model.Skip;
if (prevNext == -1)
{
skip = Math.Max(0, Model.Skip - Model.Count);
}
else if (prevNext == 1)
{
skip = Model.Skip + count;
}
var act = Url.Action("Index", new
{
skip = skip,
count = count,
});
return act;
}
}
</div> </div>
</div> </div>

76
BTCPayServer/Views/Wallets/WalletTransactions.cshtml
View File

@@ -68,7 +68,7 @@
} }
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
If BTCPay Server shows you an invalid balance, <a asp-action="WalletRescan" asp-route-walletId="@this.Context.GetRouteValue("walletId")">rescan your wallet</a>. <br /> If BTCPay Server shows you an invalid balance, <a asp-action="WalletRescan" asp-route-walletId="@Context.GetRouteValue("walletId")">rescan your wallet</a>. <br />
If some transactions appear in BTCPay Server, but are missing on Electrum or another wallet, <a href="https://docs.btcpayserver.org/FAQ/FAQ-Wallet/#missing-payments-in-my-software-or-hardware-wallet">follow those instructions</a>. If some transactions appear in BTCPay Server, but are missing on Electrum or another wallet, <a href="https://docs.btcpayserver.org/FAQ/FAQ-Wallet/#missing-payments-in-my-software-or-hardware-wallet">follow those instructions</a>.
</div> </div>
</div> </div>
@@ -126,7 +126,7 @@
<a asp-route-labelFilter="@label.Text" class="text-white">@label.Text</a> <a asp-route-labelFilter="@label.Text" class="text-white">@label.Text</a>
<form <form
asp-route-walletId="@this.Context.GetRouteValue("walletId")" asp-route-walletId="@Context.GetRouteValue("walletId")"
asp-action="ModifyTransaction" asp-action="ModifyTransaction"
method="post" method="post"
class="removeTransactionLabelForm"> class="removeTransactionLabelForm">
@@ -169,7 +169,7 @@
<span class="fa fa-tags cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span> <span class="fa fa-tags cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu"> <div class="dropdown-menu">
<form asp-action="ModifyTransaction" method="post" <form asp-action="ModifyTransaction" method="post"
asp-route-walletId="@this.Context.GetRouteValue("walletId")"> asp-route-walletId="@Context.GetRouteValue("walletId")">
<input type="hidden" name="transactionId" value="@transaction.Id" /> <input type="hidden" name="transactionId" value="@transaction.Id" />
<div class="input-group p-2"> <div class="input-group p-2">
<input name="addlabel" placeholder="Label name" maxlength="20" type="text" class="form-control form-control-sm" /> <input name="addlabel" placeholder="Label name" maxlength="20" type="text" class="form-control form-control-sm" />
@@ -206,7 +206,7 @@
} }
<div class="dropdown-menu"> <div class="dropdown-menu">
<form asp-action="ModifyTransaction" method="post" <form asp-action="ModifyTransaction" method="post"
asp-route-walletId="@this.Context.GetRouteValue("walletId")"> asp-route-walletId="@Context.GetRouteValue("walletId")">
<input type="hidden" name="transactionId" value="@transaction.Id" /> <input type="hidden" name="transactionId" value="@transaction.Id" />
<div class="input-group p-2"> <div class="input-group p-2">
<textarea name="addcomment" maxlength="200" rows="2" cols="20" class="form-control form-control-sm">@transaction.Comment</textarea> <textarea name="addcomment" maxlength="200" rows="2" cols="20" class="form-control form-control-sm">@transaction.Comment</textarea>
@@ -222,72 +222,6 @@
} }
</tbody> </tbody>
</table> </table>
<nav class="w-100"> <vc:pager view-model="Model" />
@if (Model.Total != 0)
{
<ul class="pagination float-left">
<li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
<a class="page-link" tabindex="-1" href="@ListTransactionsPage(-1, Model.Count)">&laquo;</a>
</li>
<li class="page-item disabled">
@if (Model.Total <= Model.Count)
{
<span class="page-link">
1–@Model.Transactions.Count
</span>
}
else
{
<span class="page-link">
@(Model.Skip + 1)–@(Model.Skip + Model.Transactions.Count), Total: @Model.Total
</span>
}
</li>
<li class="page-item @(Model.Total > (Model.Skip + Model.Transactions.Count) ? null : "disabled")">
<a class="page-link" href="@ListTransactionsPage(1, Model.Count)">&raquo;</a>
</li>
</ul>
}
<ul class="pagination float-right">
<li class="page-item disabled">
<span class="page-link">Page Size:</span>
</li>
<li class="page-item @(Model.Count == 50 ? "active" : null)">
<a class="page-link" href="@ListTransactionsPage(0, 50)">50</a>
</li>
<li class="page-item @(Model.Count == 100 ? "active" : null)">
<a class="page-link" href="@ListTransactionsPage(0, 100)">100</a>
</li>
<li class="page-item @(Model.Count == 250 ? "active" : null)">
<a class="page-link" href="@ListTransactionsPage(0, 250)">250</a>
</li>
<li class="page-item @(Model.Count == 500 ? "active" : null)">
<a class="page-link" href="@ListTransactionsPage(0, 500)">500</a>
</li>
</ul>
</nav>
@{
string ListTransactionsPage(int prevNext, int count)
{
var skip = Model.Skip;
if (prevNext == -1)
{
skip = Math.Max(0, Model.Skip - Model.Count);
}
else if (prevNext == 1)
{
skip = Model.Skip + count;
}
var act = Url.Action("WalletTransactions", new
{
labelFilter = Context.Request.Query["labelFilter"],
skip = skip,
count = count,
});
return act;
}
}
</div> </div>
</div> </div>