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>
+        <div class="caseInvent">
             @for(int i=0; i<10; i++){
                 <CraftingItem Index="i"/>
             }
-</div>
+        </div>
+    </div>
+
+    <div class="maList">
+
+        <InputText @bind-Value="SearchText"/>
 
-<div>
         <DataGrid TItem="Item"
                   Data="@items"
                   ReadData="@OnReadData"
                   TotalItems="@totalItem"
-              PageSize="10"
+                  PageSize="5"
                   ShowPager
                   Responsive>
-        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
+            <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: 150px" />
+                        <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: 150px" />
+                        <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="Display name" />
+            <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="" />
         </DataGrid>
-</div>
+    </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;
+}