From 65b2c70e70b5f8c7db2cddc5e94bb26c36a33482 Mon Sep 17 00:00:00 2001
From: Jason Dove <jason@jasondove.me>
Date: Sat, 13 Feb 2021 09:26:39 -0600
Subject: [PATCH] add basic paging

---
 ...{MediaTVItems.razor => MediaTvItems.razor} |  0
 ErsatzTV/Shared/MediaItemsGrid.razor          | 22 +++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 rename ErsatzTV/Pages/{MediaTVItems.razor => MediaTvItems.razor} (100%)

diff --git a/ErsatzTV/Pages/MediaTVItems.razor b/ErsatzTV/Pages/MediaTvItems.razor
similarity index 100%
rename from ErsatzTV/Pages/MediaTVItems.razor
rename to ErsatzTV/Pages/MediaTvItems.razor
diff --git a/ErsatzTV/Shared/MediaItemsGrid.razor b/ErsatzTV/Shared/MediaItemsGrid.razor
index f52b68a3c..34ed01717 100644
--- a/ErsatzTV/Shared/MediaItemsGrid.razor
+++ b/ErsatzTV/Shared/MediaItemsGrid.razor
@@ -2,18 +2,36 @@
 @using ErsatzTV.Application.MediaItems.Queries
 @inject IMediator Mediator
 
+<MudContainer MaxWidth="MaxWidth.Small" Class="mb-6" Style="max-width: 300px">
+    <MudPaper Style="display: flex; justify-content: center; align-items: center">
+        <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
+                       OnClick="@(() => _pageNumber -= 1)"
+                       Disabled="@(_pageNumber <= 1)">
+        </MudIconButton>
+        <MudText Style="flex-grow: 1"
+                 Align="Align.Center">
+            @((_pageNumber - 1) * PageSize + 1)-@Math.Min(_data.Count, _pageNumber * PageSize) of @_data.Count
+        </MudText>
+        <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
+                       OnClick="@(() => _pageNumber += 1)" Disabled="@(_pageNumber * PageSize > _data.Count)">
+        </MudIconButton>
+    </MudPaper>
+</MudContainer>
+
 <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-    @foreach (AggregateMediaItemViewModel item in _data.OrderBy(i => i.SortTitle))
+    @foreach (AggregateMediaItemViewModel item in _data.OrderBy(i => i.SortTitle).Skip(PageSize * (_pageNumber - 1)).Take(PageSize))
     {
         <MediaCard Data="@item"/>
     }
 </MudContainer>
 
 @code {
-
     [Parameter]
     public MediaType MediaType { get; set; }
 
+    private int PageSize => 100;
+    private int _pageNumber = 1;
+
     private List<AggregateMediaItemViewModel> _data;
 
     protected override async Task OnInitializedAsync() =>