Skip to content

Commit

Permalink
Add indicator for active filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@dennisreimann
dennisreimann committed May 11, 2023
1 parent 1eea23f commit e0d4006
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 21 deletions.
40 changes: 22 additions & 18 deletions BTCPayServer/Views/UIInvoice/ListInvoices.cshtml
View file
Expand Up @@ -5,12 +5,16 @@
@model InvoicesModel
@{
ViewData.SetActivePage(InvoiceNavPages.Index, "Invoices");

var hasStatusFilter = HasArrayFilter("status") || HasArrayFilter("exceptionstatus") || HasBooleanFilter("includearchived") || HasBooleanFilter("unusual");
var hasDateFilter = HasArrayFilter("startdate") || HasArrayFilter("enddate");
var hasAppFilter = Model.Apps.Any(app => HasArrayFilter("orderid", app.AppOrderId));
}

@functions
{
private bool HasArrayFilter(string type, string key) =>
Model.Search.ContainsFilter(type) && Model.Search.GetFilterArray(type).Contains(key);
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;
Expand Down Expand Up @@ -233,45 +237,45 @@
<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">
<button id="StatusOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret @(hasStatusFilter ? "custom-active" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Status
</button>
<div class="dropdown-menu" aria-labelledby="StatusOptionsToggle">
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "invalid")" class="dropdown-item @(HasArrayFilter("status", "invalid") ? "dropdown-item-custom-active" : "")">Invalid</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "processing")" class="dropdown-item @(HasArrayFilter("status", "processing") ? "dropdown-item-custom-active" : "")">Processing</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "settled")" class="dropdown-item @(HasArrayFilter("status", "settled") ? "dropdown-item-custom-active" : "")">Settled</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "invalid")" class="dropdown-item @(HasArrayFilter("status", "invalid") ? "custom-active" : "")">Invalid</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "processing")" class="dropdown-item @(HasArrayFilter("status", "processing") ? "custom-active" : "")">Processing</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("status", "settled")" class="dropdown-item @(HasArrayFilter("status", "settled") ? "custom-active" : "")">Settled</a>
<hr class="dropdown-divider">
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidLate")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidLate") ? "dropdown-item-custom-active" : "")">Settled Late</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidPartial")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidPartial") ? "dropdown-item-custom-active" : "")">Settled Partial</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidOver")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidOver") ? "dropdown-item-custom-active" : "")">Settled Over</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidLate")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidLate") ? "custom-active" : "")">Settled Late</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidPartial")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidPartial") ? "custom-active" : "")">Settled Partial</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("exceptionstatus", "paidOver")" class="dropdown-item @(HasArrayFilter("exceptionstatus", "paidOver") ? "custom-active" : "")">Settled Over</a>
<hr class="dropdown-divider">
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("unusual", "true")" class="dropdown-item @(HasBooleanFilter("unusual") ? "dropdown-item-custom-active" : "")">Unusual</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("includearchived", "true")" class="dropdown-item @(HasBooleanFilter("includearchived") ? "dropdown-item-custom-active" : "")" id="StatusOptionsIncludeArchived">Archived</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("unusual", "true")" class="dropdown-item @(HasBooleanFilter("unusual") ? "custom-active" : "")">Unusual</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.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>
@if (Model.Apps.Any())
{
<div class="dropdown">
<button id="AppOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button id="AppOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret @(hasAppFilter ? "custom-active" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
App
</button>
<div class="dropdown-menu" aria-labelledby="AppOptionsToggle">
@foreach (var app in Model.Apps)
{
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("orderid", app.AppOrderId)" class="dropdown-item @(HasArrayFilter("orderid", app.AppOrderId) ? "dropdown-item-custom-active" : "")">@app.AppName</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("orderid", app.AppOrderId)" class="dropdown-item @(HasArrayFilter("orderid", app.AppOrderId) ? "custom-active" : "")">@app.AppName</a>
}
</div>
</div>
}
<div class="dropdown">
<button id="DateOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button id="DateOptionsToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret @(hasDateFilter ? "custom-active" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Time
</button>
<div class="dropdown-menu" aria-labelledby="DateOptionsToggle">
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-1d")" class="dropdown-item @(HasArrayFilter("startdate", "-1d") ? "dropdown-item-custom-active" : "")">Last 24 hours</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-3d")" class="dropdown-item @(HasArrayFilter("startdate", "-3d") ? "dropdown-item-custom-active" : "")">Last 3 days</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-7d")" class="dropdown-item @(HasArrayFilter("startdate", "-7d") ? "dropdown-item-custom-active" : "")">Last 7 days</a>
<button type="button" class="dropdown-item @(HasCustomDateFilter() ? "dropdown-item-custom-active" : "")" data-bs-toggle="modal" data-bs-target="#customRangeModal">Custom Range</button>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-1d")" class="dropdown-item @(HasArrayFilter("startdate", "-1d") ? "custom-active" : "")">Last 24 hours</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-3d")" class="dropdown-item @(HasArrayFilter("startdate", "-3d") ? "custom-active" : "")">Last 3 days</a>
<a asp-action="ListInvoices" asp-route-storeId="@Model.StoreId" asp-route-count="@Model.Count" asp-route-searchTerm="@Model.Search.Toggle("startdate", "-7d")" class="dropdown-item @(HasArrayFilter("startdate", "-7d") ? "custom-active" : "")">Last 7 days</a>
<button type="button" class="dropdown-item @(HasCustomDateFilter() ? "custom-active" : "")" data-bs-toggle="modal" data-bs-target="#customRangeModal">Custom Range</button>
</div>
</div>
</form>
Expand Down
7 changes: 4 additions & 3 deletions BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
View file
Expand Up @@ -11034,6 +11034,7 @@ fieldset:disabled .btn {
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
padding-right: 2.25rem;
}

.dropdown-toggle.dropdown-toggle-custom-caret::after {
Expand Down Expand Up @@ -11247,19 +11248,19 @@ ul:not([class]) li {
padding-left: 1rem;
}

.dropdown-item.dropdown-item-custom-active {
.dropdown .custom-active {
display: inline-flex;
align-items: center;
gap: var(--btcpay-space-s);
}

.dropdown-item.dropdown-item-custom-active::after {
.dropdown .custom-active::after {
display: inline-block;
margin-left: auto;
content: '';
width: 0.5em;
height: 0.5em;
background-color: var(--btcpay-dropdown-link-active-bg);
background-color: var(--btcpay-body-bg-active);
border-radius: 50%;
}

Expand Down

0 comments on commit e0d4006

Please sign in to comment.