Merge branch 'master' of https://codefirst.iut.uca.fr/git/lucie.bedouret/blazorCourse

myBlazorApp/myBlazorApp/Components/MyInventory.razor

@@ -1,6 +1,7 @@
 <h3>My Inventory</h3>
 
 <div class="inventory-items">
+
     @foreach (var item in ItemsInventory)
     {
         <InventoryItem Index="@index" Item="item" />
@@ -12,3 +13,4 @@
     }
 </div>
 
+

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

@@ -3,23 +3,12 @@
 @using System.Globalization
 @using myBlazorApp.Models;
 
-<div class="inventory">
+<div class="body">
-    <MyInventory ItemsInventory="@itemsInv"/>
+    <div class="inventory">
-</div>
+        <MyInventory ItemsInventory="@itemsInv" />
-
-<div id="ItemList">
-    <div>
-        <h3>List of Items</h3>
-        @*SearchBar*@
-
-
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
-
-
     </div>
 
+    <div id="ItemList">
         <div id="ItemList" class="align-end">
             <div>
                 <p>
@@ -36,20 +25,21 @@
                       PageSize="10"
                       ShowPager
                       Responsive>
-              <DataGridColumn TItem="Item" Field=""/>          
+                <DataGridColumn TItem="Item" Field="" />
                 <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
                 <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
                     <DisplayTemplate>
-                    @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
+                        @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"/>
+                            <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
                         }
                     </DisplayTemplate>
                 </DataGridColumn>
             </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;
@@ -16,6 +17,16 @@ namespace myBlazorApp.Pages
 
         private List<Item> items = new List<Item>();
 
+        /*[Parameter]
+        public int Id { get; set; }
+        */
+
+        private ItemModel itemModel = new()
+        {
+            EnchantCategories = new List<string>(),
+            RepairWith = new List<string>()
+        };
+
         private int totalItem;
 
         [Inject]
@@ -63,7 +74,6 @@ namespace myBlazorApp.Pages
             // Reload the page
             NavigationManager.NavigateTo("list", true);
         }
-
     }
 }
 

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: 45%;
+    margin-right: 5%;
 }
 
-.align-end { 
+.ItemList {
     align-content: flex-end;
     justify-content: end;
-    width: 400px;
+    width: 45%;
 }

myBlazorApp/myBlazorApp/Properties/launchSettings.json

@@ -11,7 +11,7 @@
     "myBlazorApp": {
       "commandName": "Project",
       "launchBrowser": true,
-      "applicationUrl": "https://localhost:7235;http://localhost:5065",
+      "applicationUrl": "https://localhost:7236;http://localhost:5065",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

myBlazorApp/myBlazorApp/Services/DataApiService.cs

@@ -10,7 +10,8 @@ namespace myBlazorApp.Services
     {
         private readonly HttpClient _http;
 
-        public DataApiService(HttpClient http)
+        public DataApiService(
+            HttpClient http)
         {
             _http = http;
         }

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);