ADD: add the possibility to put items in the inventory, drag and drop will soon be okay

myBlazorApp/myBlazorApp/Components/InventoryAction.cs

@@ -0,0 +1,12 @@
+using System;
+using myBlazorApp.Models;
+namespace myBlazorApp.Components
+{
+	public class InventoryAction
+    { 
+        public string Action { get; set; }
+        public int Index { get; set; }
+        public Item Item { get; set; }
+    }
+}
+

myBlazorApp/myBlazorApp/Components/InventoryItem.razor.cs

@@ -1,5 +1,7 @@
 using System;
 namespace myBlazorApp.Components;
+
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using myBlazorApp.Models;
 
@@ -9,6 +11,34 @@ public partial class InventoryItem
     public Item Item { get; set; }
     [Parameter]
     public int Index { get; set; }
+    [CascadingParameter]
+    public MyInventory Parent { get; set; }
+
+    internal void OnDragEnter()
+    {
+
+        Parent.Actions.Add(new InventoryAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+    }
+
+    internal void OnDragLeave()
+    {
+
+        Parent.Actions.Add(new InventoryAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+    }
+
+    internal void OnDrop()
+    {
+        this.Item = Parent.CurrentDragItem;
+
+        Parent.Actions.Add(new InventoryAction { Action = "Drop", Item = this.Item, Index = this.Index });
+
+    }
+
+    private void OnDragStart()
+    {
+        Parent.CurrentDragItem = this.Item;
 
+        Parent.Actions.Add(new InventoryAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+    }
 }
 

myBlazorApp/myBlazorApp/Components/MyInventory.razor

@@ -1,23 +1,14 @@
 <h3>My Inventory</h3>
 
 <div class="inventory-items">
-    <InventoryItem Index="0" />
+    @foreach (var item in ItemsInventory)
-    <InventoryItem Index="1" />
+    {
-    <InventoryItem Index="2" />
+        <InventoryItem Index="@index" Item="item" />
-    <InventoryItem Index="3" />
+            index++;
-    <InventoryItem Index="4" />
+    }
-    <InventoryItem Index="5" />
+    @for (int i = @index; i<18; i++)
-    <InventoryItem Index="6" />
+    {
-    <InventoryItem Index="7" />
+        <InventoryItem Index="i" />
-    <InventoryItem Index="8" />
+    }
-    <InventoryItem Index="9" />
-    <InventoryItem Index="10" />
-    <InventoryItem Index="11" />
-    <InventoryItem Index="12" />
-    <InventoryItem Index="13" />
-    <InventoryItem Index="14" />
-    <InventoryItem Index="15" />
-    <InventoryItem Index="16" />
-    <InventoryItem Index="17" />
 </div>
 

myBlazorApp/myBlazorApp/Components/MyInventory.razor.cs

@@ -1,12 +1,26 @@
 using System;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using myBlazorApp.Models;
 using myBlazorApp.Services;
 namespace myBlazorApp.Components
 {
     public partial class MyInventory
     {
-        private List<Item> itemsInventory = new List<Item>();
+        [Parameter]
+        public List<Item> ItemsInventory { get; set; } = new List<Item>();
+        public ObservableCollection<InventoryAction> Actions { get; set; }
+        public Item CurrentDragItem { get; set; }
+        [Parameter]
+        public int index { get; set; } = 0;
+
+        public MyInventory()
+        {
+            Actions = new ObservableCollection<InventoryAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+        }
 
         [Inject]
         public IDataService DataService { get; set; }
@@ -16,6 +30,10 @@ namespace myBlazorApp.Components
 
         [Inject]
         public NavigationManager NavigationManager { get; set; }
+
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
         /*
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
@@ -29,6 +47,11 @@ namespace myBlazorApp.Components
             StateHasChanged();
         }
         */
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("MyInventory.AddActions", e.NewItems);
+        }
     }
 }
 

myBlazorApp/myBlazorApp/Components/MyInventory.razor.js

@@ -0,0 +1,16 @@
+window.Crafting =
+{
+    AddActions: function (data) {
+
+        data.forEach(element => {
+            var div = document.createElement('div');
+            div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index;
+
+            if (element.item) {
+                div.innerHTML += ' - Item Name: ' + element.item.name;
+            }
+
+            document.getElementById('actions').appendChild(div);
+        });
+    }
+}

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -3,9 +3,8 @@
 @using System.Globalization
 @using myBlazorApp.Models;
 
-
 <div class="inventory">
-    <MyInventory/>
+    <MyInventory ItemsInventory="@itemsInv"/>
 </div>
 
 <div id="ItemList">

myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs

@@ -12,6 +12,7 @@ namespace myBlazorApp.Pages
 {
 	public partial class Inventory
     {
+        public List<Item> itemsInv = new List<Item>();
 
         private List<Item> items = new List<Item>();
 
@@ -39,6 +40,7 @@ namespace myBlazorApp.Pages
             if (!e.CancellationToken.IsCancellationRequested)
             {
                 items = await DataService.List(e.Page, e.PageSize);
+                itemsInv = await DataService.List(e.Page, e.PageSize);
                 totalItem = await DataService.Count();
             }
         }