put list in the component

myBlazorApp/myBlazorApp/Components/MyInventory.razor

@@ -2,12 +2,49 @@
 <CascadingValue Value="@this">
     <h3>@Localizer["Title"]</h3>
 
+    <div class="body">
+        <div class="inventory">
             <div class="inventory-items">
                 @foreach(InventoryListItem i in ItemsInventory)
                 {
                     <InventoryItem Index="@i.position" Item="@i.itemName" Number="@i.number" StackSize="@i.stackSize" />
                 }
+            </div>
+        </div>
+
+        <div id="ItemList" class="align-end">
+            <h3>List of Items</h3>
+
+            <input type="text" @bind-value="@SearchText"
+                   @bind-value:event="oninput" placeholder="Search by Name"
+                   @onchange="@inputValue" />
+
+            <button type="button" @onclick="@OnPress">Sort</button>
+
 
+            <DataGrid TItem="Item"
+                      Data="@choix"
+                      ReadData="@OnReadData"
+                      TotalItems="@totalItem"
+                      PageSize="10"
+                      ShowPager
+                      Responsive>
+
+                <DataGridColumn Field="@nameof(Item.Id)">
+                    <DisplayTemplate>
+                        @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
+                        {
+                            <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="width: 50px" />
+                        }
+                        else
+                        {
+                            <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
+                        }
+                    </DisplayTemplate>
+                </DataGridColumn>
+                <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" />
+            </DataGrid>
+        </div>
     </div>
 </CascadingValue>
 

myBlazorApp/myBlazorApp/Components/MyInventory.razor.cs

@@ -2,11 +2,15 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
+using Blazorise.DataGrid;
+using Blazorise.Extensions;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using Microsoft.JSInterop;
 using myBlazorApp.Models;
 using myBlazorApp.Services;
+using Syncfusion.Blazor.Grids;
+
 namespace myBlazorApp.Components
 {
     public partial class MyInventory
@@ -24,18 +28,27 @@ namespace myBlazorApp.Components
         public int CurrentDragStackSize { get; set; }
         public InventoryItem CurrentInventoryItem {get; set;} = new InventoryItem();
 
-        public MyInventory()
-        {
-            Actions = new ObservableCollection<InventoryAction>();
-            Actions.CollectionChanged += OnActionsCollectionChanged;
 
-        }
+        private List<Item> items = new List<Item>();
 
-        [Inject]
+        private List<Item> full = new List<Item>();
-        public IDataService DataService { get; set; }
+
+        private List<Item> choix = new List<Item>();
+
+        public string SearchText = "";
+
+        private int totalItem;
+
+        private int currentPage;
+
+        private int pageSize;
+
+        List<Item> Filtered = new List<Item>();
+
+        List<Item> Sorted = new List<Item>();
 
         [Inject]
-        public IStringLocalizer<MyInventory> Localizer { get; set; }
+        public IDataService DataService { get; set; }
 
         [Inject]
         public IWebHostEnvironment WebHostEnvironment { get; set; }
@@ -43,6 +56,19 @@ namespace myBlazorApp.Components
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
+        private bool isSorted = false;
+
+        public MyInventory()
+        {
+            Actions = new ObservableCollection<InventoryAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+            
+        }
+
+        [Inject]
+        public IStringLocalizer<MyInventory> Localizer { get; set; }
+
+
         [Inject]
         internal IJSRuntime JavaScriptRuntime { get; set; }
 
@@ -55,6 +81,107 @@ namespace myBlazorApp.Components
                     await DataService.UpdateInventory(infos);      
             }     
         }
+
+
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItem = await DataService.Count();
+                items = await DataService.List(e.Page, e.PageSize);
+                full = await DataService.List(e.Page, totalItem);
+                currentPage = e.Page;
+                pageSize = e.PageSize;
+                if (isSorted == false)
+                {
+                    choix = items;
+                }
+                else
+                {
+                    choix = SortList();
+                    return;
+                }
+                if (SearchText.IsNullOrEmpty())
+                {
+                    choix = items;
+                }
+                else
+                {
+                    choix = choseList();
+                    return;
+                }
+                StateHasChanged();
+            }
+        }
+
+        private List<Item> choseList()
+        {
+            if (SearchText.IsNullOrEmpty())
+            {
+                choix = items;
+                totalItem = full.Count();
+                NavigationManager.NavigateTo("inventory", false);
+            }
+            else
+            {
+                if (Filtered.Count() < (currentPage - 1) * 10 + pageSize)
+                {
+                    pageSize = Filtered.Count() - (currentPage - 1) * 10;
+                }
+                choix = Filtered.GetRange((currentPage - 1) * 10, pageSize);
+                totalItem = Filtered.Count();
+            }
+            StateHasChanged();
+            NavigationManager.NavigateTo("inventory", false);
+            return choix;
+        }
+
+        private void inputValue()
+        {
+            Filtered = full.Where(
+               itm => itm.DisplayName.ToLower().Contains(SearchText.ToLower())).ToList();
+            choseList();
+        }
+
+        private void OnPress()
+        {
+            if (isSorted == true)
+            {
+                isSorted = false;
+            }
+            else isSorted = true;
+            SortList();
+        }
+
+        private List<Item> SortList()
+        {
+            if (isSorted == false)
+            {
+                choix = items;
+                NavigationManager.NavigateTo("inventory", true);
+            }
+            else
+            {
+                if (Sorted.IsNullOrEmpty())
+                {
+                    Sorted = full;
+                }
+                Sorted.Sort((x, y) => string.Compare(x.DisplayName, y.DisplayName));
+                if (Sorted.Count() < (currentPage - 1) * 10 + pageSize)
+                {
+                    pageSize = Sorted.Count() - (currentPage - 1) * 10;
+                }
+                choix = Sorted.GetRange((currentPage - 1) * 10, pageSize);
+            }
+            return choix;
+        }
     }
 }
 

myBlazorApp/myBlazorApp/Components/MyInventory.razor.css

@@ -1,4 +1,22 @@
-.inventory-items {
+.body {
+    display: flex;
+    width: 100%;
+}
+
+.inventory {
+    align-items: flex-start;
+    justify-content: start;
+    width: 45%;
+    margin-right: 5%;
+}
+
+.ItemList {
+    align-content: flex-end;
+    justify-content: start;
+    width: 45%;
+}
+
+.inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 5px;
     display: grid;

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -4,44 +4,6 @@
 @using myBlazorApp.Models;
 @using Syncfusion.Blazor.Grids;
 
-           <div class="body">
     <div class="inventory">
         <MyInventory ItemsInventory="@itemsInv"/>
     </div>
-
-    <div id="ItemList">
-        <div id="ItemList" class="align-end">
-            <h3>List of Items</h3>
-
-                <input type="text" @bind-value="@SearchText"
-                     @bind-value:event="oninput" placeholder="Search by Name" 
-                     @onchange="@inputValue"/>
-
-            <button type="button" @onclick="@OnPress">Sort</button>
-
-            
-            <DataGrid TItem="Item"
-                      Data="@choix"
-                      ReadData="@OnReadData"
-                      TotalItems="@totalItem"
-                      PageSize="10"
-                      ShowPager
-                      Responsive>
-                
-                <DataGridColumn Field="@nameof(Item.Id)">
-                    <DisplayTemplate>
-                        @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-                        {
-                            <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="width: 50px" />
-                        }
-                        else
-                        {
-                            <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
-                        }
-                    </DisplayTemplate>
-                </DataGridColumn>
-                <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" />
-            </DataGrid>
-        </div>
-    </div>
-</div>

myBlazorApp/myBlazorApp/Pages/Inventory.razor.css

@@ -1,17 +1 @@
-.body {
+
-    display: flex;
-    width: 100%;
-}
-
-.inventory {
-    align-items: flex-start;
-    justify-content: start;
-    width: 45%;
-    margin-right: 5%;
-}
-
-.ItemList {
-    align-content: flex-end;
-    justify-content: end;
-    width: 45%;
-}