beautifull alignment / trying the images

myBlazorApp/myBlazorApp/Components/MyInventory.razor.css

@@ -1,6 +1,5 @@
 .inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
-    gap: 10px;
+    gap: 5px;
     display: grid;
-    width: 40%;
 }

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -4,53 +4,48 @@
 @using myBlazorApp.Models;
 
 
-<div class="inventory">
-    <MyInventory/>
-</div>
-
-<div id="ItemList">
-    <div>
-        <h3>List of Items</h3>
-        @*SearchBar*@
-
-
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
-
 
+<div class="body">
+    <div class="inventory">
+        <MyInventory/>
     </div>
 
-    <div id="ItemList" class="align-end">
+    <div id="ItemList">
         <div>
-            <p>
+            <h3>List of Items</h3>
-               List of items 
-            </p>
             @*SearchBar*@
 
         </div>
 
-        <DataGrid TItem="Item"
+        <div id="ItemList" class="align-end">
-              Data="@items"
+            <div>
-              ReadData="@OnReadData"
+                <p>
-              TotalItems="@totalItem"
+                   List of items 
-              PageSize="10"
+                </p>
-              ShowPager
+                @*SearchBar*@
-              Responsive>
+
-              <DataGridColumn TItem="Item" Field=""/>          
+            </div>
-              <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+
-              <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
+            <DataGrid TItem="Item"
-                <DisplayTemplate>
+                  Data="@items"
-                    @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
+                  ReadData="@OnReadData"
+                  TotalItems="@totalItem"
+                  PageSize="10"
+                  ShowPager
+                  Responsive>
+                  <DataGridColumn TItem="Item" Field=""/>          
+                  <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+                  <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
+                    @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
                     {
-                        <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="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: 150px" />
                     }
                     else
                     {
                         <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
                     }
-                </DisplayTemplate>
+                  </DataGridColumn>
-              </DataGridColumn>
+            </DataGrid>
-        </DataGrid>
+        </div>
     </div>
 </div>

myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs

@@ -4,6 +4,7 @@ using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using myBlazorApp.Factories;
 using myBlazorApp.Modals;
 using myBlazorApp.Models;
 using myBlazorApp.Services;
@@ -13,6 +14,15 @@ namespace myBlazorApp.Pages
 	public partial class Inventory
     {
 
+        [Parameter]
+        public int Id { get; set; }
+
+        private ItemModel itemModel = new()
+        {
+            EnchantCategories = new List<string>(),
+            RepairWith = new List<string>()
+        };
+
         private List<Item> items = new List<Item>();
 
         private int totalItem;
@@ -62,6 +72,21 @@ namespace myBlazorApp.Pages
             NavigationManager.NavigateTo("list", true);
         }
 
+        protected override async Task OnInitializedAsync()
+        {
+            var item = await DataService.GetById(Id);
+
+            var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");
+
+            if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
+            {
+                fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
+            }
+
+            // Set the model with the item
+            itemModel = ItemFactory.ToModel(item, fileContent);
+        }
+
     }
 }
 

myBlazorApp/myBlazorApp/Pages/Inventory.razor.css

@@ -1,21 +1,17 @@
 .body {
     display: flex;
+    width: 100%;
 }
 
-.inventory-items {
+.inventory {
-    grid-template-columns: repeat(6,minmax(0,1fr));
-    gap: 10px;
-    display: grid;
-    width: 40%;
-}
-
-.align-start {
     align-items: flex-start;
-    justify-content: start
+    justify-content: start;
+    width: 35%;
+    margin-right: 20%;
 }
 
-.align-end { 
+.ItemList {
     align-content: flex-end;
     justify-content: end;
-    width: 400px;
+    width: 45%;
 }

myBlazorApp/myBlazorApp/Services/DataLocalService.cs

@@ -36,6 +36,22 @@ namespace myBlazorApp.Services
             /// Add the item to the current data
             currentData.Add(ItemFactory.Create(model));
 
+            // Save the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+            // Check if the folder "images" exist
+            if (!imagePathInfo.Exists)
+            {
+                imagePathInfo.Create();
+            }
+
+            // Determine the image name
+            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+            // Write the file content
+            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+
+
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
@@ -91,6 +107,32 @@ namespace myBlazorApp.Services
                 throw new Exception($"Unable to found the item with ID: {id}");
             }
 
+            // Save the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+            // Check if the folder "images" exist
+            if (!imagePathInfo.Exists)
+            {
+                imagePathInfo.Create();
+            }
+
+            // Delete the previous image
+            if (item.Name != model.Name)
+            {
+                var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+                if (oldFileName.Exists)
+                {
+                    File.Delete(oldFileName.FullName);
+                }
+            }
+
+            // Determine the image name
+            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+            // Write the file content
+            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+
             // Modify the content of the item
             ItemFactory.Update(item, model);
 
@@ -109,6 +151,14 @@ namespace myBlazorApp.Services
             // Delete item in
             currentData.Remove(item);
 
+            // Delete the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+            var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+            if (fileName.Exists)
+            {
+                File.Delete(fileName.FullName);
+            }
 
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);