💩

https://codefirst.iut.uca.fr/documentation/julien.riboulet/docusaurus/Blazor/add-item/redirection/#perform-a-redirect:art: Debug styles

blazor_lab.sln

@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.2.32616.157
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "blazor_lab", "blazor_lab\blazor_lab.csproj", "{7B8F9C82-6399-47FC-A996-8140F39484D6}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "blazor_lab", "blazor_lab\blazor_lab.csproj", "{7B8F9C82-6399-47FC-A996-8140F39484D6}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

blazor_lab/Models/ItemModel.cs

@@ -0,0 +1,36 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace blazor_lab.Models
+{
+    public class ItemModel
+    {
+        public int Id { get; set; }
+
+        [Required]
+        [StringLength(50, ErrorMessage = "50ch max")]
+        public string DisplayName { get; set; }
+
+        [Required]
+        [StringLength(50, ErrorMessage = "50ch max")]
+        [RegularExpression(@"^[a-z''-'\s]{1, 50}$", ErrorMessage = "lowercase only")]
+        public string Name { get; set; }
+
+        [Required]
+        [Range(1, 64)]
+        public int StackSize { get; set; }
+
+        [Required]
+        [Range(1, 125)]
+        public int MaxDurability { get; set; }
+
+        public List<string> EnchantCategories { get; set; }
+        public List<string> RepairWith { get; set; }
+
+        [Required]
+        [Range(typeof(bool), "true", "true", ErrorMessage = "You must agree to thhe terms.")]
+        public bool AcceptConditions { get; set; }
+
+        [Required(ErrorMessage = "img mandatory")]
+        public byte[] ImageContent { get; set; }
+    }
+}

blazor_lab/Pages/Add.razor

@@ -0,0 +1,75 @@
+@page "/add"
+
+
+<h3>Add</h3>
+
+<EditForm Model="@itemModel" OnValidSubmit="@HandleValidSubmit">
+    <DataAnnotationsValidator />
+    <ValidationSummary />
+
+    <p>
+        <label for="display-name">
+            Display name:
+            <InputText id="display-name" @bind-Value="itemModel.DisplayName" />
+        </label>
+    </p>
+    <p>
+        <label for="name">
+            Name:
+            <InputText id="name" @bind-Value="itemModel.Name" />
+        </label>
+    </p>
+    <p>
+        <label for="stack-size">
+            Stack size:
+            <InputNumber id="stack-size" @bind-Value="itemModel.StackSize" />
+        </label>
+    </p>
+    <p>
+        <label for="max-durability">
+            Max durability:
+            <InputNumber id="max-durability" @bind-Value="itemModel.MaxDurability" />
+        </label>
+    </p>
+    <p>
+        Enchant categories:
+        <div>
+            @foreach (var item in enchantCategories)
+            {
+                <label>
+                    <input type="checkbox"
+                       @onchange="@(e => OnEnchantCategoriesChange(item, e.Value))" />
+                    @item
+                </label>
+            }
+        </div>
+    </p>
+    <p>
+        Repair with:
+        <div>
+            @foreach (var item in repairWith)
+            {
+                <label>
+                    <input type="checkbox" 
+                        @onchange="@(e => OnRepairWithChange(item, e.Value))" 
+                        />
+                        @item
+                </label>
+            }
+        </div>
+    </p>
+    <p>
+        <label>
+            Item image:
+            <InputFile OnChange="@LoadImage" accept=".png" />
+        </label>
+    </p>
+    <p>
+        <label>
+            Accept Condition:
+            <InputCheckbox @bind-Value="itemModel.AcceptCondition" />
+        </label>
+    </p>
+
+    <button type="submit">Submit</button>
+</EditForm>

blazor_lab/Pages/Add.razor.cs

@@ -0,0 +1,122 @@
+using blazor_lab.Models;
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace blazor_lab.Pages
+{
+    public partial class Add
+    {
+
+        [Inject]
+        public ILocalStorageService LocalStorageService { get; set; }
+
+        [Inject]
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
+
+        /// <summary>
+        /// The default enchant categories.
+        /// </summary>
+        private List<string> enchantCategories = new() { "armor", "armor_head", "armor_chest", "weapon", "digger", "breakable", "vanishable" };
+
+        /// <summary>
+        /// The default repair with.
+        /// </summary>
+        private List<string> repairWith = new() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
+
+        /// <summary>
+        /// The current item model
+        /// </summary>
+        private ItemModel itemModel = new()
+        {
+            EnchantCategories = new List<string>(),
+            RepairWith = new List<string>()
+        };
+
+
+        private async void HandleValidSubmit()
+        {
+            // Get the current data
+            var currentData = await LocalStorageService.GetItemAsync<List<Item>>("data");
+
+            // Simulate the Id
+            itemModel.Id = currentData.Max(item => item.Id) + 1;
+
+            // Add the item to the current data
+            currentData.Add(new Item
+            {
+                Id = itemModel.Id,
+                DisplayName = itemModel.DisplayName,
+                Name = itemModel.Name,
+                RepairWith = itemModel.RepairWith,
+                EnchantCategories = itemModel.EnchantCategories,
+                MaxDurability = itemModel.MaxDurability,
+                StackSize = itemModel.StackSize,
+                CreatedDate = DateTime.Now
+            });
+
+            // 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}/{itemModel.Name}.png");
+
+            // Write the file content
+            await File.WriteAllBytesAsync(fileName.FullName, itemModel.ImageContent);
+
+            // Save the data
+            await LocalStorageService.SetItemAsync("data", currentData);
+        }
+        private async Task LoadImage(InputFileChangeEventArgs e)
+        {
+            // Set the model's image to the image saved on file
+            using (var memoryStream = new MemoryStream())
+            {
+                await e.File.OpenReadStream().CopyToAsync(memoryStream);
+                itemModel.ImageContent = memoryStream.ToArray();
+            }
+        }
+
+        private void OnEnchantCategoriesChange(string item, object checkedValue)
+        {
+            if ((bool)checkedValue)
+            {
+                if (!itemModel.EnchantCategories.Contains(item))
+                {
+                    itemModel.EnchantCategories.Add(item);
+                }
+
+                return;
+            }
+
+            if (itemModel.EnchantCategories.Contains(item))
+            {
+                itemModel.EnchantCategories.Remove(item);
+            }
+        }
+
+        private void OnRepairWithChange(string item, object checkedValue)
+        {
+            if ((bool)checkedValue)
+            {
+                if (!itemModel.RepairWith.Contains(item))
+                {
+                    itemModel.RepairWith.Add(item);
+                }
+
+                return;
+            }
+
+            if (itemModel.RepairWith.Contains(item))
+            {
+                itemModel.RepairWith.Remove(item);
+            }
+        }
+    }
+}

blazor_lab/Pages/List.razor

@@ -3,11 +3,14 @@
 
 <h3>List</h3>
 
+<div>
+    <NavLink class="btn btn-primary" href="add" Match="NavLinkMatch.All">
+        <i class="fa fa-plus"></i> Add
+    </NavLink>
+</div>
+
 @if (items != null)
 {
-    <!---->
-    <!---->
-    <!---->
     <DataGrid TItem="Item"
           Data="@items"
           PageSize="10"

blazor_lab/Pages/List.razor.cs

@@ -1,4 +1,5 @@
 using blazor_lab.Models;
+using Blazored.LocalStorage;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 
@@ -13,9 +14,31 @@ namespace blazor_lab.Pages
         [Inject]
         public HttpClient HttpClient { get; set; }
 
+        [Inject]
+        public ILocalStorageService LocalStorageService { get; set; }
+
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            // Do not treat this action if is not the first render
+            if (!firstRender)
+            {
+                return;
+            }
+
+            var currentData = await LocalStorageService.GetItemAsync<Item[]>("data");
+
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+                var originalData = HttpClient.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
+                await LocalStorageService.SetItemAsync("data", originalData);
+            }
+        }
+
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -23,29 +46,14 @@ namespace blazor_lab.Pages
                 return;
             }
 
-            //real API =>
-            //var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
-            var response =
-                (
-                    await HttpClient.GetFromJsonAsync<Item[]>(
-                        $"{NavigationManager.BaseUri}fake-data.json"
-                    )
-                )
-                .Skip((e.Page - 1) * e.PageSize)
-                .Take(e.PageSize)
-                .ToList();
+            //Real API =>
+            //var response = await HttpClient.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await LocalStorageService.GetItemAsync<Item[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
 
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                totalItems =
-                    (
-                        await HttpClient.GetFromJsonAsync<List<Item>>(
-                            $"{NavigationManager.BaseUri}fake-data.json"
-                        )
-                    )
-                    .Count;
-
-                items = new List<Item>(response);
+                totalItems = (await LocalStorageService.GetItemAsync<List<Item>>("data")).Count;
+                items = new List<Item>(response); // an actual data for the current page
             }
         }
 

blazor_lab/Shared/MainLayout.razor

@@ -1,15 +1,20 @@
 @inherits LayoutComponentBase
 
+<PageTitle>blazor_lab_1</PageTitle>
 <header><h1>blabla topic stuff</h1></header>
 
-<div class="sidebar">
-    <NavMenu/>
-</div>
+<div class="page">
+
+    <div class="sidebar">
+        <NavMenu />
+    </div>
 
-<div class="container">
-    <main role="main" class="pb-3">
-        @Body
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
     </main>
+
 </div>
 
 <footer>blabla trademark stuff</footer>

blazor_lab/Shared/MainLayout.razor.css

@@ -0,0 +1,70 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+    }
+
+    .top-row a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row a, .top-row .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}