Adding paging to notifications grid

This commit is contained in:
rockstardev
2020-06-15 00:00:56 -05:00
parent 113869bd08
commit f072ec3a8c
3 changed files with 73 additions and 4 deletions

View File

@@ -40,12 +40,15 @@ namespace BTCPayServer.Controllers
var model = new IndexViewModel()
{
Skip = skip,
Count = count,
Items = _db.Notifications
.OrderByDescending(a => a.Created)
.Skip(skip).Take(count)
.Where(a => a.ApplicationUserId == userId)
.Select(a => a.ViewModel())
.ToList()
.ToList(),
Total = _db.Notifications.Where(a => a.ApplicationUserId == userId).Count()
};
return View(model);

View File

@@ -13,6 +13,9 @@ namespace BTCPayServer.Models.NotificationViewModels
{
public class IndexViewModel
{
public int Skip { get; set; }
public int Count { get; set; }
public int Total { get; set; }
public List<NotificationViewModel> Items { get; set; }
}

View File

@@ -51,7 +51,7 @@
{
<tr data-guid="@item.Id">
<td>
<input name="selectedItems" type="checkbox" class="selector" value="@item.Id" />
<input name="selectedItems" type="checkbox" class="selector" value="@item.Id" />
</td>
<td onclick="rowseen(this)" class="cursor-pointer @(item.Seen ? "": "font-weight-bold")">@item.Created.ToBrowserDate()</td>
<td onclick="rowseen(this)" class="cursor-pointer @(item.Seen ? "": "font-weight-bold")">@item.Body</td>
@@ -70,10 +70,73 @@
</tbody>
</table>
<nav aria-label="...">
<ul class="pagination">
<nav aria-label="..." class="w-100">
@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>