👔 Make an Inventory component

to allow for an easier management of drag/drop

blazor_lab/Components/Inventory.razor

@@ -1,6 +1,4 @@
-@page "/inventory"
+@using blazor_lab.Components
-@using Minecraft.Crafting.Api.Models
-@using blazor_lab.Components
 
 <div class="side-by-side">
     <div>

blazor_lab/Components/Inventory.razor.cs

@@ -0,0 +1,15 @@
+using blazor_lab.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+
+namespace blazor_lab.Components
+{
+    public partial class Inventory
+    {
+        [Inject]
+        public IStringLocalizer<Inventory> Localizer { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; } = new();
+    }
+}

blazor_lab/Pages/Inventory.razor.cs

@@ -1,24 +0,0 @@
-using blazor_lab.Services;
-using Microsoft.AspNetCore.Components;
-using Microsoft.Extensions.Localization;
-using Minecraft.Crafting.Api.Models;
-using System.Diagnostics;
-
-namespace blazor_lab.Pages
-{
-    public partial class Inventory
-    {
-        private List<Models.Item> Items = new();
-
-        [Inject]
-        public IStringLocalizer<Inventory> Localizer { get; set; }
-
-        [Inject]
-        private DataApiService DataApiService { get; set; }
-
-        protected override async Task OnInitializedAsync()
-        {
-            Items = await DataApiService.All();
-        }
-    }
-}

blazor_lab/Pages/InventoryPage.razor

@@ -0,0 +1,8 @@
+@page "/inventory"
+@using blazor_lab.Components
+
+<PageTitle>@Localizer["inventory"]</PageTitle>
+
+<h1>@Localizer["inventory"]</h1>
+
+<Inventory Items="Items"></Inventory>

blazor_lab/Pages/InventoryPage.razor.cs

@@ -0,0 +1,33 @@
+using blazor_lab.Components;
+using blazor_lab.Services;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+
+namespace blazor_lab.Pages
+{
+    public partial class InventoryPage
+    {
+        [Inject]
+        public IStringLocalizer<InventoryPage> Localizer { get; set; }
+
+        [Inject]
+        private IDataService DataService { get; set; }
+
+
+        private List<Models.Item> Items = new();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+
+            StateHasChanged();
+        }
+    }
+}

blazor_lab/Program.cs

@@ -43,7 +43,7 @@ builder.Services.Configure<RequestLocalizationOptions>(options =>
     options.SupportedUICultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("fr-FR") };
 });
 
-builder.Services.AddScoped<DataApiService>();
+builder.Services.AddScoped<IDataService, DataApiService>();
 
 var app = builder.Build();
 

blazor_lab/Resources/Components.InventoryList.fr-FR.resx

@@ -130,9 +130,9 @@
     <value>Trier par</value>
   </data>
   <data name="sort_by_name_asc" xml:space="preserve">
-    <value>Trier par nom (Asc.)</value>
+    <value>nom (Asc.)</value>
   </data>
   <data name="sort_by_name_desc" xml:space="preserve">
-    <value>Trier par nom (Desc.)</value>
+    <value>nom (Desc.)</value>
   </data>
 </root>

blazor_lab/Resources/Components.InventoryList.resx

@@ -127,10 +127,10 @@
     <value>Search</value>
   </data>
   <data name="sort_by_name_asc" xml:space="preserve">
-    <value>Sort by name (Asc.)</value>
+    <value>name (Asc.)</value>
   </data>
   <data name="sort_by_name_desc" xml:space="preserve">
-    <value>Sort by name (Desc.)</value>
+    <value>name (Desc.)</value>
   </data>
   <data name="sort_label" xml:space="preserve">
     <value>Sort</value>

blazor_lab/Resources/Pages.InventoryPage.fr-FR.resx

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="inventory" xml:space="preserve">
+    <value>Inventaire</value>
+  </data>
+</root>

blazor_lab/Resources/Pages.InventoryPage.resx

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="inventory" xml:space="preserve">
+    <value>Inventory</value>
+  </data>
+</root>

blazor_lab/Services/DataApiService.cs

@@ -31,11 +31,6 @@ namespace blazor_lab.Services
             return await _http.GetFromJsonAsync<int>($"{_apiBaseUrl}/count");
         }
 
-        public async Task<List<Item>> All()
-        {
-            return await _http.GetFromJsonAsync<List<Item>>($"{_apiBaseUrl}/all");
-        }
-
         public async Task<List<Item>> List(int currentPage, int pageSize)
         {
             return await _http.GetFromJsonAsync<List<Item>>($"{_apiBaseUrl}/?currentPage={currentPage}&pageSize={pageSize}");

blazor_lab/blazor_lab.csproj

@@ -1,34 +1,37 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
-  <PropertyGroup>
+	<PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+		<TargetFramework>net6.0</TargetFramework>
-    <Nullable>enable</Nullable>
+		<Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
+		<ImplicitUsings>enable</ImplicitUsings>
-  </PropertyGroup>
+	</PropertyGroup>
 
-  <ItemGroup>
+	<ItemGroup>
-    <PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
+		<PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
-    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
+		<PackageReference Include="Blazored.Modal" Version="7.1.0" />
-    <PackageReference Include="Blazorise.Bootstrap" Version="1.2.1" />
+		<PackageReference Include="Blazorise.Bootstrap" Version="1.2.1" />
-    <PackageReference Include="Blazorise.DataGrid" Version="1.2.1" />
+		<PackageReference Include="Blazorise.DataGrid" Version="1.2.1" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.2.1" />
+		<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.2.1" />
-  </ItemGroup>
+	</ItemGroup>
 
-  <ItemGroup>
+	<ItemGroup>
-    <Folder Include="wwwroot\_content\" />
+		<Folder Include="wwwroot\_content\" />
-  </ItemGroup>
+	</ItemGroup>
 
-  <ItemGroup>
+	<ItemGroup>
-    <ProjectReference Include="..\Minecraft.Crafting.Api\Minecraft.Crafting.Api.csproj" />
+		<ProjectReference Include="..\Minecraft.Crafting.Api\Minecraft.Crafting.Api.csproj" />
-  </ItemGroup>
+	</ItemGroup>
 
-  <ItemGroup>
+	<ItemGroup>
-    <EmbeddedResource Update="Resources\Pages.Inventory.resx">
+		<EmbeddedResource Update="Resources\Components.Inventory.resx">
-      <SubType>Designer</SubType>
+			<SubType>Designer</SubType>
-    </EmbeddedResource>
+		</EmbeddedResource>
-    <EmbeddedResource Update="Resources\Components.InventoryList.resx">
+		<EmbeddedResource Update="Resources\Pages.InventoryPage.resx">
-      <SubType>Designer</SubType>
+			<SubType>Designer</SubType>
-    </EmbeddedResource>
+		</EmbeddedResource>
-  </ItemGroup>
+		<EmbeddedResource Update="Resources\Components.InventoryList.resx">
+			<SubType>Designer</SubType>
+		</EmbeddedResource>
+	</ItemGroup>
 
 </Project>