Debut siganlements

Sources/HeartTrack/HeartTrack.csproj

@@ -8,6 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
+    <PackageReference Include="Blazorise" Version="1.4.1" />
     <PackageReference Include="Blazorise.Bootstrap" Version="1.4.0" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.4.0" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.4.0" />

Sources/HeartTrack/Pages/Reports.razor

@@ -1,4 +1,5 @@
 @page "/reports"
+@using HeartTrack.Models
 
 <PageTitle>Reports</PageTitle>
 
@@ -6,5 +7,16 @@
 
 This is the report list of users.
 
-<SurveyPrompt Title="How is Blazor working for you?" />
-
+<DataGrid TItem="Report"
+          Data="@reports"
+          ReadData="@OnReadData"
+          TotalItems="@totalReport"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="Report" Field="@nameof(Report.Id)" Caption="Id" />
+    <DataGridColumn TItem="Report" Field="@nameof(Report.Username)" Caption="@Localizer["Username"]" />
+    <DataGridColumn TItem="Report" Field="@nameof(Report.Raison)" Caption="@Localizer["Raison"]" />
+    <DataGridColumn TItem="Report" Field="@nameof(Report.Description)" Caption="@Localizer["Description"]" />
+    <DataGridColumn Caption="" />
+</DataGrid>

Sources/HeartTrack/Pages/Reports.razor.cs

@@ -0,0 +1,63 @@
+using Blazored.LocalStorage;
+using Blazorise.DataGrid;
+using HeartTrack.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+
+namespace HeartTrack.Pages
+{
+    public partial class Reports
+    {
+        private List<Report> reports;
+
+        private int totalReport;
+
+        [Inject]
+        public HttpClient Http { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [Inject]
+        public ILocalStorageService LocalStorage { get; set; }
+
+        [Inject]
+        public IStringLocalizer<Report> Localizer { get; set; }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            // Do not treat this action if is not the first render
+            if (!firstRender)
+            {
+                return;
+            }
+
+            var currentData = await LocalStorage.GetItemAsync<Report[]>("data");
+
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+                var originalData = Http.GetFromJsonAsync<Report[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
+                await LocalStorage.SetItemAsync("data", originalData);
+            }
+        }
+        private async Task OnReadData(DataGridReadDataEventArgs<Report> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            // When you use a real API, we use this follow code
+            //var response = await Http.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await LocalStorage.GetItemAsync<Report[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalReport = (await LocalStorage.GetItemAsync<List<User>>("data")).Count;
+                reports = new List<Report>(response); // an actual data for the current page
+            }
+        }
+    }
+}