chelou

BlazorApp/BlazorApp/BlazorApp.csproj

@@ -45,4 +45,7 @@
       <DependentUpon>Pages.List.resx</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <Content Remove="Components\inventoryAction.razor" />
+  </ItemGroup>
 </Project>

BlazorApp/BlazorApp/Components/Crafting.razor.cs

@@ -15,7 +15,7 @@ namespace BlazorApp.Components
         {
             Actions = new ObservableCollection<CraftingAction>();
             Actions.CollectionChanged += OnActionsCollectionChanged;
-            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null};
         }
 
         public ObservableCollection<CraftingAction> Actions { get; set; }

BlazorApp/BlazorApp/Components/InventoryComp.razor

@@ -0,0 +1 @@
+

BlazorApp/BlazorApp/Components/InventoryComp.razor.cs

@@ -0,0 +1 @@
+

BlazorApp/BlazorApp/Components/InventoryComp.razor.css

@@ -0,0 +1,14 @@
+.css-grid {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}
+
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}

BlazorApp/BlazorApp/Components/InventoryItem.razor

@@ -0,0 +1,13 @@
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (Item != null)
+    {
+        @Item.DisplayName
+    }
+</div>

BlazorApp/BlazorApp/Components/InventoryItem.razor.cs

@@ -0,0 +1,58 @@
+using System;
+using BlazorApp.Models;
+using BlazorApp.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp.Components
+{
+	public partial class InventoryItem
+	{
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public InventoryComp Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Item tmp = Parent.RecipeItems[this.Index];
+            Parent.RecipeItems[this.Index] = this.Item;
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+        }
+    }
+}
+

BlazorApp/BlazorApp/Components/InventoryItem.razor.css

@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}

BlazorApp/BlazorApp/Components/MyFirstChildComponent.razor

@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyFirstChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>

BlazorApp/BlazorApp/Components/MyRootComponent.razor

@@ -1,16 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public string Text { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyRootComponent - @Text</strong>
-    <div>
-        <CascadingValue Value="@this">
-            @ChildContent
-        </CascadingValue>
-    </div>
-</div>

BlazorApp/BlazorApp/Components/MySecondChildComponent.razor

@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MySecondChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>

BlazorApp/BlazorApp/Components/TestRenderFragment.razor

@@ -1,7 +0,0 @@
-<h3>TestRenderFragment</h3>
-
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-}
-

BlazorApp/BlazorApp/Pages/Inventory.razor

@@ -3,73 +3,8 @@
 @using BlazorApp.Pages;
 @using BlazorApp.Models;
 
-<div class="inventory">
-    <h3>Inventory</h3>
 
-    <div class="css-grid">
+<div>
-
+    <InventoryComp Items="Items" />
-        <CraftingItem Index="0" />
-        <CraftingItem Index="1" />
-        <CraftingItem Index="2" />
-        <CraftingItem Index="3" />
-        <CraftingItem Index="4" />
-        <CraftingItem Index="5" />
-        <CraftingItem Index="6" />
-        <CraftingItem Index="7" />
-        <CraftingItem Index="8" />
-        <CraftingItem Index="9" />
-        <CraftingItem Index="10" />
-        <CraftingItem Index="11" />
-        <CraftingItem Index="12" />
-        <CraftingItem Index="13" />
-        <CraftingItem Index="14" />
-        <CraftingItem Index="15" />
-        <CraftingItem Index="16" />
-        <CraftingItem Index="17" />
-        <!--
-        <CraftingItem Index="18" />
-        <CraftingItem Index="19" />
-        <CraftingItem Index="20" />
-        <CraftingItem Index="21" />
-        <CraftingItem Index="22" />
-        <CraftingItem Index="23" />
-        <CraftingItem Index="24" />
-        <CraftingItem Index="25" />
-        <CraftingItem Index="26" />
-        -->
-    </div>
 </div>
-<div class="available-items">
-
-    <div class="search-container">
-        <form action="/action_page.php">
-            <h3>Available Items</h3>
-            <input type="text" placeholder="Search" name="search"/>
-            <button type="submit"><i class="fa fa-search"></i></button>
-        </form>
-    </div>
-
-    <DataGrid TItem="Item"
-              Data="@Items"
-              ReadData="@OnReadData"
-              TotalItems="@totalItem"
-              PageSize="10"
-              ShowPager
-              Sortable="true">
 
-        <button type="submit" @onclick="() => SortByName()"></button>
-        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
-            <DisplayTemplate>
-                @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-                {
-                    <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
-                }
-                else
-                {
-                    <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
-                }
-            </DisplayTemplate>
-        </DataGridColumn>
-        <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)"/>
-    </DataGrid>
-</div>

BlazorApp/BlazorApp/Pages/Inventory.razor.cs

@@ -27,7 +27,6 @@ namespace BlazorApp.Pages
             }
 
             Items = await DataService.List(0, await DataService.Count());
-
             StateHasChanged();
         }
 
@@ -46,7 +45,7 @@ namespace BlazorApp.Pages
             }
         }
 
-        private async Task SortByName(DataGridReadDataEventArgs<Item> e)
+        private async Task SortByName()
         {
             Items = await DataService.SortedList();
         }

BlazorApp/BlazorApp/Services/DataApiService.cs

@@ -69,5 +69,9 @@ namespace BlazorApp.Services
 
         }
         */
+        public Task<List<Item>> SortedList()
+        {
+            throw new NotImplementedException();
+        }
     }
 }

BlazorApp/BlazorApp/Services/DataLocalService.cs

@@ -184,6 +184,11 @@ namespace BlazorApp.Services
 
             return Task.FromResult(items);
         }
+
+        public Task<List<Item>> SortedList()
+        {
+            throw new NotImplementedException();
+        }
     }
 }