Payment Requests: List view improvements (#5065)

* List invoice checkbox variant

* Remove custom css

* Improve payment requests list view

* Improve Payment Requests List View

* List invoice checkbox variant

* Remove custom css

* Improve payment requests list view

* Improve Payment Requests List View

* Update payment request (name link leads to view not edit)

* Refactoring

---------

Co-authored-by: d11n <mail@dennisreimann.de>
This commit is contained in:
Chukwuleta Tobechi 2023-07-06 09:02:23 +01:00 committed by GitHub
parent 966e598f10
commit 0b082138c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 114 additions and 89 deletions

View file

@ -1156,12 +1156,13 @@ namespace BTCPayServer.Tests
s.Driver.FindElement(By.Id("ArchivePaymentRequest")).Click();
Assert.Contains("The payment request has been archived", s.FindAlertMessage().Text);
Assert.DoesNotContain("Pay123", s.Driver.PageSource);
s.Driver.FindElement(By.Id("SearchDropdownToggle")).Click();
s.Driver.FindElement(By.Id("SearchIncludeArchived")).Click();
s.Driver.FindElement(By.Id("StatusOptionsToggle")).Click();
s.Driver.WaitForElement(By.Id("StatusOptionsIncludeArchived")).Click();
Assert.Contains("Pay123", s.Driver.PageSource);
// unarchive (from list)
s.Driver.FindElement(By.Id($"ToggleArchival-{payReqId}")).Click();
s.Driver.FindElement(By.Id($"ToggleActions-{payReqId}")).Click();
s.Driver.WaitForElement(By.Id($"ToggleArchival-{payReqId}")).Click();
Assert.Contains("The payment request has been unarchived", s.FindAlertMessage().Text);
Assert.Contains("Pay123", s.Driver.PageSource);
}

View file

@ -78,16 +78,20 @@ namespace BTCPayServer.Controllers
model = this.ParseListQuery(model ?? new ListPaymentRequestsViewModel());
var store = GetCurrentStore();
var includeArchived = new SearchString(model.SearchTerm, model.TimezoneOffset ?? 0).GetFilterBool("includearchived") == true;
var fs = new SearchString(model.SearchTerm, model.TimezoneOffset ?? 0);
var result = await _PaymentRequestRepository.FindPaymentRequests(new PaymentRequestQuery
{
UserId = GetUserId(),
StoreId = store.Id,
Skip = model.Skip,
Count = model.Count,
IncludeArchived = includeArchived
Status = fs.GetFilterArray("status")?.Select(s => Enum.Parse<Client.Models.PaymentRequestData.PaymentRequestStatus>(s, true)).ToArray(),
IncludeArchived = fs.GetFilterBool("includearchived") ?? false
});
model.Search = fs;
model.SearchText = fs.TextSearch;
model.Items = result.Select(data =>
{
var blob = data.GetBlob();

View file

@ -18,6 +18,9 @@ namespace BTCPayServer.Models.PaymentRequestViewModels
{
public List<ViewPaymentRequestViewModel> Items { get; set; }
public override int CurrentPageCount => Items.Count;
public SearchString Search { get; set; }
public string SearchText { get; set; }
}
public class UpdatePaymentRequestViewModel

View file

@ -5,7 +5,6 @@
@model InvoicesModel
@{
ViewData.SetActivePage(InvoiceNavPages.Index, "Invoices");
var statusFilterCount = CountArrayFilter("status") + CountArrayFilter("exceptionstatus") + (HasBooleanFilter("includearchived") ? 1 : 0) + (HasBooleanFilter("unusual") ? 1 : 0);
var hasDateFilter = HasArrayFilter("startdate") || HasArrayFilter("enddate");
var appFilterCount = Model.Apps.Count(app => HasArrayFilter("orderid", app.AppOrderId));

View file

@ -6,6 +6,20 @@
@{
Layout = "_Layout";
ViewData["Title"] = "Payment Requests";
var storeId = Context.GetStoreData().Id;
var statusFilterCount = CountArrayFilter("status") + (HasBooleanFilter("includearchived") ? 1 : 0);
}
@functions
{
private int CountArrayFilter(string type) =>
Model.Search.ContainsFilter(type) ? Model.Search.GetFilterArray(type).Length : 0;
private bool HasArrayFilter(string type, string key = null) =>
Model.Search.ContainsFilter(type) && (key is null || Model.Search.GetFilterArray(type).Contains(key));
private bool HasBooleanFilter(string key) =>
Model.Search.ContainsFilter(key) && Model.Search.GetFilterBool(key) is true;
}
<div class="sticky-header-setup"></div>
@ -16,9 +30,8 @@
<vc:icon symbol="info" />
</a>
</h2>
<a asp-action="EditPaymentRequest" asp-route-storeId="@Context.GetStoreData().Id" class="btn btn-primary mt-3 mt-sm-0" role="button" id="CreatePaymentRequest">
<span class="fa fa-plus"></span>
Create Payment Request
<a asp-action="EditPaymentRequest" asp-route-storeId="@storeId" class="btn btn-primary mt-3 mt-sm-0" role="button" id="CreatePaymentRequest">
Create Request
</a>
</div>
@ -37,86 +50,91 @@
<partial name="_StatusMessage" />
<div class="row mb-2">
<div class="col col-lg-8 col-xl-6 mr-auto">
<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="SearchTerm" class="form-control" />
<button type="submit" class="btn btn-secondary text-nowrap" title="Search invoice">
<span class="fa fa-search"></span> Search
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="SearchDropdownToggle">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="SearchDropdownToggle">
<a class="dropdown-item" asp-action="GetPaymentRequests" asp-route-storeId="@Context.GetStoreData().Id" asp-route-count="@Model.Count" asp-route-searchTerm="includearchived:true" id="SearchIncludeArchived">Include Archived</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="?searchTerm=" id="SearchUnfiltered">Unfiltered</a>
</div>
</div>
<span asp-validation-for="SearchTerm" class="text-danger"></span>
</form>
<form asp-action="GetPaymentRequests" method="get" class="d-flex flex-wrap flex-sm-nowrap align-items-center gap-3 mb-4 col-lg-9 col-xl-8 col-xxl-6">
<input type="hidden" asp-for="Count" />
<input type="hidden" asp-for="TimezoneOffset" />
<input asp-for="SearchTerm" type="hidden" value="@Model.Search.WithoutSearchText()"/>
<input asp-for="SearchText" class="form-control" placeholder="Search…" />
<div class="dropdown">
<button id="StatusOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@if (statusFilterCount > 0)
{
<span>@statusFilterCount Status</span>
}
else
{
<span>All Status</span>
}
</button>
<div class="dropdown-menu" aria-labelledby="StatusOptionsToggle">
<a asp-action="GetPaymentRequests" asp-route-storeId="@storeId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "pending")" class="dropdown-item @(HasArrayFilter("status", "pending") ? "custom-active" : "")">Pending</a>
<a asp-action="GetPaymentRequests" asp-route-storeId="@storeId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "completed")" class="dropdown-item @(HasArrayFilter("status", "completed") ? "custom-active" : "")">Settled</a>
<a asp-action="GetPaymentRequests" asp-route-storeId="@storeId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "expired")" class="dropdown-item @(HasArrayFilter("status", "expired") ? "custom-active" : "")">Expired</a>
<div role="separator" class="dropdown-divider"></div>
<a asp-action="GetPaymentRequests" asp-route-storeId="@storeId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("includearchived", "true")" class="dropdown-item @(HasBooleanFilter("includearchived") ? "custom-active" : "")" id="StatusOptionsIncludeArchived">Archived</a>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-lg-12">
@if (Model.Items.Count > 0)
{
<table class="table table-hover table-responsive-md">
<thead>
<tr>
<th>Title</th>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Expiry
<button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
@if (Model.Items.Any())
{
<table class="table table-hover table-responsive-md" id="tableId">
<thead>
<tr>
<th>Title</th>
<th class="w-150px">
<div class="d-flex align-items-center gap-1">
Expiry
<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>Price</th>
<th>Status</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Items)
{
<tr>
<td>
<a asp-action="ViewPaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="PaymentRequest-@item.Id">@item.Title</a>
</td>
<td>
@(item.ExpiryDate?.ToBrowserDate() ?? new HtmlString("<span class=\"text-muted\">No Expiry</span>"))
</td>
<td>
<span data-sensitive>@item.AmountFormatted</span>
</td>
<td>
<span class="badge badge-@item.Status.ToLower() status-badge">@item.Status</span>
</td>
<td class="text-end">
<div class="d-inline-flex align-items-center gap-3">
<a asp-action="EditPaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Edit-@item.Id">Edit</a>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle p-0 dropdown-toggle-no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="ToggleActions-@item.Id">
<i class="fa fa-ellipsis-h"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="actionDropdown">
<li><a class="dropdown-item" asp-controller="UIInvoice" asp-action="ListInvoices" asp-route-storeId="@item.StoreId" asp-route-searchterm="@($"orderid:{PaymentRequestRepository.GetOrderIdForPaymentRequest(item.Id)}")">Invoices</a></li>
<li><a class="dropdown-item" asp-action="ClonePaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Clone-@item.Id">Clone</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" asp-action="TogglePaymentRequestArchival" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="ToggleArchival-@item.Id">@(item.Archived ? "Unarchive" : "Archive")</a></li>
</ul>
</div>
</th>
<th>Status</th>
<th class="text-end">Amount</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Items)
{
<tr>
<td>
<a asp-action="EditPaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Edit-@item.Id">@item.Title</a>
</td>
<td>
@(item.ExpiryDate?.ToBrowserDate() ?? new HtmlString($"<span class=\"text-muted\">No Expiry</span>"))
</td>
<td>
<span class="badge badge-@item.Status.ToLower()">@item.Status</span>
</td>
<td class="text-end">
<span data-sensitive>@item.AmountFormatted</span>
</td>
<td class="text-end">
<a asp-controller="UIInvoice" asp-action="ListInvoices" asp-route-storeId="@item.StoreId" asp-route-searchterm="@($"orderid:{PaymentRequestRepository.GetOrderIdForPaymentRequest(item.Id)}")">Invoices</a>
<span> - </span>
<a asp-action="ClonePaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Clone-@item.Id">Clone</a>
<span> - </span>
<a asp-action="TogglePaymentRequestArchival" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="ToggleArchival-@item.Id">@(item.Archived ? "Unarchive" : "Archive")</a>
<span> - </span>
<a asp-action="ViewPaymentRequest" asp-route-payReqId="@item.Id" id="PaymentRequest-@item.Id">View</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
<vc:pager view-model="Model" />
}
else
{
<p class="text-secondary mt-3">
There are no payment requests matching your criteria.
</p>
}
</div>
</div>
<vc:pager view-model="Model" />
}
else
{
<p class="text-secondary mt-3">
There are no payment requests matching your criteria.
</p>
}