Update inventaire

ValblazeProject/Pages/Inventaire.razor

@@ -3,35 +3,40 @@
 @using ValblazeProject.Components
 @using ValblazeProject.Models
 
-<h3>inventaire</h3>
+<main class="contentInvent">
+    <div class="inventaire">
+        <h3>Inventaire</h3>
+        <div class="caseInvent">
+            @for(int i=0; i<10; i++){
+                <CraftingItem Index="i"/>
+            }
+        </div>
+    </div>
 
+    <div class="maList">
 
-<div>
-    @for(int i=0; i<10; i++){
-        <CraftingItem Index="i"/>
-    }
-</div>
+        <InputText @bind-Value="SearchText"/>
 
-<div>
-    <DataGrid TItem="Item"
-              Data="@items"
-              ReadData="@OnReadData"
-              TotalItems="@totalItem"
-              PageSize="10"
-              ShowPager
-              Responsive>
-        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
-            <DisplayTemplate>
-                @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-                {
-                    <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
-                }
-                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)" Caption="Display name" />
-    </DataGrid>
-</div>
+        <DataGrid TItem="Item"
+                  Data="@items"
+                  ReadData="@OnReadData"
+                  TotalItems="@totalItem"
+                  PageSize="5"
+                  ShowPager
+                  Responsive>
+            <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="">
+                <DisplayTemplate>
+                    @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
+                    {
+                        <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
+                    }
+                    else
+                    {
+                        <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 50px" />
+                    }
+                </DisplayTemplate>
+            </DataGridColumn>
+            <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="" />
+        </DataGrid>
+    </div>
+</main>

ValblazeProject/Pages/Inventaire.razor.cs

@@ -8,13 +8,15 @@ using Microsoft.Extensions.Localization;
 using ValblazeProject.Modals;
 using ValblazeProject.Services;
 using ValblazeProject.Components;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using Microsoft.AspNetCore.Components.Forms;
 
 namespace ValblazeProject.Pages
 {
     public partial class Inventaire
     {
         private List<Item> items;
-
         private int totalItem;
 
         [Inject]
@@ -34,6 +36,31 @@ namespace ValblazeProject.Pages
         [CascadingParameter]
         public IModalService Modal { get; set; }
 
+        private string _searchText;
+
+        public string SearchText
+        {
+            get { return _searchText; }
+            set
+            {
+                _searchText = value;
+                OnSearch(_searchText);
+            } 
+        }
+
+        public async Task OnSearch(string _searchText)
+        {
+           /* foreach(var item in items)
+            {
+                if(item.Name == rechercheText)
+                {
+                    rechercheItems.Add(item);
+                }
+            }*/
+           TODO
+        }
+
+
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)

ValblazeProject/Pages/Inventaire.razor.css

@@ -0,0 +1,20 @@
+.inventaire {
+    display: flex;
+    max-width: 700px;
+    flex-direction: column;
+}
+
+.maList {
+}
+
+.contentInvent {
+    display: flex;
+}
+
+
+.caseInvent {
+    gap: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}