Improve Payout View (#3260)

* updates payouts

* update spacing

* improvements

* View updates

* updates spacing

* Fix spacing

* Fix markup

* Fix test

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
This commit is contained in:
dstrukt 2022-01-11 00:15:23 -08:00 committed by GitHub
parent 4b941a5145
commit 5865fd5022
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 74 deletions

View File

@ -1092,7 +1092,6 @@ namespace BTCPayServer.Tests
Assert.Equal("payout", s.Driver.FindElement(By.ClassName("transactionLabel")).Text);
s.GoToStore(s.StoreId, StoreNavPages.Payouts);
var x = s.Driver.PageSource;
s.Driver.FindElement(By.Id($"{PayoutState.InProgress}-view")).Click();
ReadOnlyCollection<IWebElement> txs;
TestUtils.Eventually(() =>
@ -1131,7 +1130,6 @@ namespace BTCPayServer.Tests
var newStore = s.CreateNewStore();
s.GenerateWallet("BTC", "", true, true);
var newWalletId = new WalletId(newStore.storeId, "BTC");
s.GoToStore(s.StoreId, StoreNavPages.PullPayments);
s.Driver.FindElement(By.Id("NewPullPayment")).Click();

View File

@ -34,7 +34,6 @@
stateActions.Add(("mark-paid", "Mark selected payouts as already paid"));
break;
}
}
@section PageFootContent {
@ -55,9 +54,8 @@
<form method="post">
<input type="hidden" asp-for="PaymentMethodId" />
<input type="hidden" asp-for="PayoutState" />
<div class="row">
<div class="col-12">
<ul class="nav nav-pills bg-tile mb-2" style="border-radius:4px; border: 1px solid var(--btcpay-body-border-medium)">
<div class="d-flex justify-content-between mb-4">
<ul class="nav nav-pills mb-1">
@foreach (var state in Model.PaymentMethods)
{
<li class="nav-item py-0">
@ -67,35 +65,14 @@
asp-route-pullPaymentId="@Model.PullPaymentId"
class="nav-link me-1 @(state.ToString() == Model.PaymentMethodId ? "active" : "")"
id="@state.ToString()-view"
role="tab">
@state.ToPrettyString()
</a>
role="tab">@state.ToPrettyString()</a>
</li>
}
</ul>
<ul class="nav nav-pills bg-tile mb-2" style="border: 1px solid var(--btcpay-body-border-medium)">
@foreach (var state in Model.PayoutStateCount)
{
<li class="nav-item py-0">
<a id="@state.Key-view"
asp-action="Payouts"
asp-route-storeId="@Context.GetRouteValue("storeId")"
asp-route-payoutState="@state.Key"
asp-route-pullPaymentId="@Model.PullPaymentId"
asp-route-paymentMethodId="@Model.PaymentMethodId"
class="nav-link me-1 @(state.Key == Model.PayoutState ? "active" : "")" role="tab">@state.Key.GetStateString() (@state.Value)</a>
</li>
}
</ul>
</div>
@if (Model.Payouts.Any() && stateActions.Any())
{
<div class="col-12" permission="@Policies.CanModifyStoreSettings">
<div class="dropdown mt-4 ms-xl-auto mt-xl-0">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" id="@Model.PayoutState-actions">
Actions
</button>
<div class="dropdown ms-xl-auto mt-xl-0" permission="@Policies.CanModifyStoreSettings">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" id="@Model.PayoutState-actions">Actions</button>
<div class="dropdown-menu" aria-labelledby="@Model.PayoutState-actions">
@foreach (var action in stateActions)
{
@ -103,16 +80,26 @@
}
</div>
</div>
</div>
}
</div>
<div class="row">
<nav id="SectionNav" class="nav mb-3">
@foreach (var state in Model.PayoutStateCount)
{
<a id="@state.Key-view"
asp-action="Payouts"
asp-route-storeId="@Context.GetRouteValue("storeId")"
asp-route-payoutState="@state.Key"
asp-route-pullPaymentId="@Model.PullPaymentId"
asp-route-paymentMethodId="@Model.PaymentMethodId"
class="nav-link @(state.Key == Model.PayoutState ? "active" : "")" role="tab">@state.Key.GetStateString() (@state.Value)</a>
}
</nav>
@if (Model.Payouts.Any())
{
<table class="table table-hover table-responsive-lg">
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-inverse">
<tr>
<th permission="@Policies.CanModifyStoreSettings">
@ -150,7 +137,7 @@
<td title="@pp.Destination">
<span class="text-break">@pp.Destination</span>
</td>
<td class="text-end">
<td class="text-end text-nowrap">
<span>@pp.Amount</span>
</td>
@if (Model.PayoutState != PayoutState.AwaitingApproval)
@ -166,11 +153,11 @@
}
</tbody>
</table>
</div>
<vc:pager view-model="Model" />
}
else
{
<p class="mb-0 py-4" id="@Model.PayoutState-no-payouts">There are no payouts matching this criteria.</p>
<p class="text-muted mb-0" id="@Model.PayoutState-no-payouts">There are no payouts matching this criteria.</p>
}
<vc:pager view-model="Model"/>
</div>
</form>