From bf46c10d04a4bf7587d135f5e1cd95b474487663 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 3 Jul 2024 15:04:23 +0900
Subject: [PATCH] datalist pager

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Components/Pages/DataListPager.razor      | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 6b07bec..60e5127 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -41,6 +41,7 @@
             <RadzenPanelMenuItem Text="DataList" Icon="list_alt">
                 <div onclick="document.querySelector('.navbar-toggler').click()">
                     <RadzenPanelMenuItem Text="Basic" Icon="format_list_bulleted" Path="datalist" />
+                    <RadzenPanelMenuItem Text="Pager" Icon="format_list_bulleted" Path="datalistpager" />
                 </div>
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor b/ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor
new file mode 100644
index 0000000..68786d9
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor
@@ -0,0 +1,53 @@
+@page "/datalistpager";
+
+@inject InMemoryData data;
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-12">
+    <RadzenStack class="rz-p-2 rz-border-radius-1" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Style="border: var(--rz-grid-cell-border);">
+        <RadzenText TextStyle="TextStyle.Body1">Pager density</RadzenText>
+        <RadzenSelectBar @bind-Value="@density" TextProperty="Text" ValueProperty="Value"
+                         Size="ButtonSize.Small"
+                         Data="@(Enum.GetValues(typeof(Density)).Cast<Density>().Select(t => new { Text = $"{t}", Value = t }))" />
+    </RadzenStack>
+
+    <RadzenDataList Data="@employees" TItem="@Employee"
+                    Density="@density"
+                    WrapItems="true"
+                    AllowPaging="true" PageSize="@PAGE_SIZE" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
+        <Template Context="employee">
+            <RadzenCard class="rz-p-5" Style="width:300px">
+                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
+                    <RadzenImage Path="@employee.Photo" Style="width:80px; height:80px; border-radius: 50%" AlternateText="@($"{employee.FirstName} {employee.LastName}")"/>
+                    <RadzenStack Gap="0">
+                        <RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
+                        <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
+                        <RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Title</RadzenText>
+                        <RadzenText TextStyle="TextStyle.Body1"><b>@employee.Title</b></RadzenText>
+                    </RadzenStack>
+                </RadzenStack>
+                <hr style="border:none; background-color: rgba(0,0,0,0.2); height:1px; margin: 1rem 0;"/>
+                <RadzenRow>
+                    <RadzenColumn class="rz-text-truncate" Size="8">@employee.City</RadzenColumn>
+                    <RadzenColumn class="rz-text-align-end" Size="4">
+                        <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text="@employee.Job" />
+                    </RadzenColumn>
+                </RadzenRow>
+            </RadzenCard>
+        </Template>
+    </RadzenDataList>
+</RadzenCard>
+
+@code {
+    readonly int PAGE_SIZE = 6;
+
+    Density density;
+    IQueryable<Employee> employees;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var tmp = await data.GetEmployeeDataAsync(100);
+        employees = tmp.AsQueryable();
+    }
+}