btcpayserver/BTCPayServer/Views/UIPaymentRequest/GetPaymentRequests.cshtml
d11n 3942463ac9
UI: Unify payment request list with invoices (#4294)
Some quick win updates to the payment requests list that unify the display with the invoices list:

- Status is displayed as badge
- Amount is properly formatted
- Expiry date format and ability to switch to relative date
2022-11-18 13:24:57 +09:00

109 lines
5.4 KiB
Text

@using BTCPayServer.Services.PaymentRequests
@using Microsoft.AspNetCore.Html
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Components
@model BTCPayServer.Models.PaymentRequestViewModels.ListPaymentRequestsViewModel
@{
Layout = "_Layout";
ViewData["Title"] = "Payment Requests";
}
<div class="sticky-header-setup"></div>
<div class="sticky-header d-sm-flex align-items-center justify-content-between">
<h2 class="mb-0">
@ViewData["Title"]
<small>
<a href="https://docs.btcpayserver.org/PaymentRequests/" class="ms-1" target="_blank" rel="noreferrer noopener">
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
</a>
</small>
</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>
</div>
<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>
</div>
</div>
<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>
</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">@item.AmountFormatted</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>
<vc:pager view-model="Model" />
}
else
{
<p class="text-secondary mt-3">
There are no payment requests matching your criteria.
</p>
}
</div>
</div>