TO DO Fix composant razor

ValblazeProject/Components/Card.razor

@@ -0,0 +1,7 @@
+<h3>Card</h3>
+@typeparam TItem
+<div class="card text-center">
+    @CardHeader(Item)
+    @CardBody(Item)
+    @CardFooter
+</div>

ValblazeProject/Components/Card.razor.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+
+namespace ValblazeProject.Components
+{
+    public partial class Card<TItem>
+    {
+        [Parameter]
+        public RenderFragment<TItem> CardBody { get; set; }
+
+        [Parameter]
+        public RenderFragment CardFooter { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> CardHeader { get; set; }
+
+        [Parameter]
+        public TItem Item { get; set; }
+    }
+}

ValblazeProject/Components/Crafting.razor

@@ -0,0 +1,50 @@
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+
+                <div>Available items:</div>
+                <div>
+                    <div class="css-grid">
+
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true" />
+                        }
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="col-6">
+                <div>Recipe</div>
+
+                <div>
+
+                    <div class="css-recipe">
+                        <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" />
+                    </div>
+                </div>
+
+                <div>Result</div>
+                <div>
+                    <CraftingItem Item="RecipeResult" />
+                </div>
+            </div>
+
+            <div class="col-12">
+                <div>Actions</div>
+                <div class="actions" id="actions">
+                </div>
+            </div>
+        </div>
+    </div>
+</CascadingValue>

ValblazeProject/Components/Crafting.razor.css

@@ -0,0 +1,19 @@
+.css-grid {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 286px;
+}
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}
+
+.actions {
+    border: 1px solid black;
+    height: 250px;
+    overflow: scroll;
+}

ValblazeProject/Components/Crafting.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);
+        });
+    }
+}

ValblazeProject/Components/CraftingAction.cs

@@ -0,0 +1,11 @@
+using ValblazeProject.Models;
+
+namespace ValblazeProject.Components
+{
+    public class CraftingAction
+    {
+        public string Action { get; set; }
+        public int Index { get; set; }
+        public Item Item { get; set; }
+    }
+}

ValblazeProject/Components/CraftingItem.razor

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

ValblazeProject/Components/CraftingItem.razor.cs

@@ -0,0 +1,64 @@
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using ValblazeProject.Models;
+
+namespace ValblazeProject.Components
+{
+    public partial class CraftingItem
+    {
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public Crafting Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Parent.RecipeItems[this.Index] = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
+
+            // Check recipe
+            Parent.CheckRecipe();
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+        }
+    }
+}

ValblazeProject/Components/CraftingItem.razor.css

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

ValblazeProject/Components/CraftingRecipe.cs

@@ -0,0 +1,10 @@
+using ValblazeProject.Models;
+
+namespace ValblazeProject.Components
+{
+    public class CraftingRecipe
+    {
+        public Item Give { get; set; }
+        public List<List<string>> Have { get; set; }
+    }
+}

ValblazeProject/Components/ShowItems.razor

@@ -0,0 +1,12 @@
+@typeparam TItem
+
+<div>
+    @if ((Items?.Count ?? 0) != 0)
+    {
+        @foreach (var item in Items)
+        {
+            @ShowTemplate(item)
+            ;
+        }
+    }
+</div>

ValblazeProject/Components/ShowItems.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace ValblazeProject.Components
+{
+    public partial class ShowItems<TItem>
+    {
+        [Parameter]
+        public List<TItem> Items { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> ShowTemplate { get; set; }
+    }
+}

ValblazeProject/Models/Cake.cs

@@ -0,0 +1,9 @@
+namespace ValblazeProject.Models
+{
+    public class Cake
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public decimal Cost { get; set; }
+    }
+}

ValblazeProject/Pages/Index.razor

@@ -1,4 +1,7 @@
 @using System.Globalization
+@using ValblazeProject.Components
+@using ValblazeProject.Models
+
 
 @page "/"
 
@@ -14,3 +17,90 @@ Welcome to your new app.
 
 
 <SurveyPrompt Title="How is Blazor working for you?" />
+
+<!--
+<Card>
+    <CardHeader>
+        <div class="card-header">
+           My Templated Component
+        </div>
+    </CardHeader>
+    <CardBody>
+        <div class="card-body">
+            <h5>Welcome To Template Component</h5>
+        </div>
+    </CardBody>
+    <CardFooter>
+        <div class="card-footer text-muted">
+            Click Here
+        </div>
+    </CardFooter>
+</Card>
+
+<Card>
+    <CardHeader>
+        <div class="card-header">
+            Templated Component
+        </div>
+    </CardHeader>
+    <CardHeader>
+        <div class="card-header">
+            Hi I'm duplicated header
+        </div>
+    </CardHeader>
+</Card>
+-->
+
+<Card Item="CakeItem">
+    <CardHeader>
+        <div class="card-header">
+            Cake Token Number - @context.Id
+        </div>
+    </CardHeader>
+    <CardBody>
+        <div class="card-body">
+            <div>@context.Name</div>
+            <div>$ @context.Cost</div>
+        </div>
+    </CardBody>
+    <CardFooter>
+        <div class="card-footer text-muted">
+            Click Here
+        </div>
+    </CardFooter>
+</Card>
+
+<Card Item="CakeItem" Context="cakeContext">
+    <CardHeader>
+        <div class="card-header">
+            Cake Token Number - @cakeContext.Id
+        </div>
+    </CardHeader>
+    <CardBody>
+        <div class="card-body">
+            <div>@cakeContext.Name</div>
+            <div>$ @cakeContext.Cost</div>
+        </div>
+    </CardBody>
+</Card>
+
+<ShowItems Items="Cakes" >
+    <ShowTemplate Context="CakeContext">
+        <div class="card text-center">
+            <div class="card-header">
+                Cake Token Id - @CakeContext.Id
+            </div>
+            <div class="card-body">
+                <h5 class="card-title">@CakeContext.Name</h5>
+                <p class="card-text">Price $@CakeContext.Cost</p>
+            </div>
+            <div class="card-footer text-muted">
+                Click Here
+            </div>
+        </div>
+    </ShowTemplate>
+</ShowItems>
+
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>

ValblazeProject/Pages/Index.razor.cs

@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components;
+using ValblazeProject.Components;
+using ValblazeProject.Models;
+using ValblazeProject.Services;
+
+namespace ValblazeProject.Pages
+{
+    public partial class Index
+    {
+        public List<Cake> Cakes { get; set; }
+
+        protected override Task OnAfterRenderAsync(bool firstRender)
+        {
+            LoadCakes();
+            StateHasChanged();
+            return base.OnAfterRenderAsync(firstRender);
+        }
+
+        public void LoadCakes()
+        {
+            Cakes = new List<Cake>
+        {
+            // items hidden for display purpose
+            new Cake
+            {
+                Id = 1,
+                Name = "Red Velvet",
+                Cost = 60
+            },
+        };
+        }
+        private Cake CakeItem = new Cake
+        {
+            Id = 1,
+            Name = "Black Forest",
+            Cost = 50
+        };
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
+    }
+}

ValblazeProject/Pages/_Layout.cshtml

@@ -38,5 +38,7 @@
 
     <script src="_content/Blazored.Modal/blazored.modal.js"></script>
 
+    <script src="Components/Crafting.razor.js"></script>
+
 </body>
 </html>

ValblazeProject/Services/DataLocalService.cs

@@ -1,5 +1,6 @@
 using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
+using ValblazeProject.Components;
 using ValblazeProject.Factories;
 using ValblazeProject.Models;
 
@@ -162,5 +163,23 @@ namespace ValblazeProject.Services
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
+        public Task<List<CraftingRecipe>> GetRecipes()
+        {
+            var items = new List<CraftingRecipe>
+        {
+            new CraftingRecipe
+            {
+                Give = new Item { DisplayName = "Diamond", Name = "diamond" },
+                Have = new List<List<string>>
+                {
+                    new List<string> { "dirt", "dirt", "dirt" },
+                    new List<string> { "dirt", null, "dirt" },
+                    new List<string> { "dirt", "dirt", "dirt" }
+                }
+            }
+        };
+
+            return Task.FromResult(items);
+        }
     }
 }

ValblazeProject/Services/IDataService.cs

@@ -10,5 +10,6 @@ namespace ValblazeProject.Services
         Task<Item> GetById(int id);
         Task Update(int id, ItemModel model);
         Task Delete(int id);
+        Task<List<CraftingRecipe>> GetRecipes();
     }
 }

ValblazeProject/Shared/TableTemplate.razor

@@ -0,0 +1,28 @@
+@typeparam TItem
+@using System.Diagnostics.CodeAnalysis
+
+<table class="table">
+    <thead>
+        <tr>@TableHeader</tr>
+    </thead>
+    <tbody>
+        @foreach (var item in Items)
+        {
+            if (RowTemplate is not null)
+            {
+                <tr>@RowTemplate(item)</tr>
+            }
+        }
+    </tbody>
+</table>
+
+@code {
+    [Parameter]
+    public RenderFragment? TableHeader { get; set; }
+
+    [Parameter]
+    public RenderFragment<TItem>? RowTemplate { get; set; }
+
+    [Parameter, AllowNull]
+    public IReadOnlyList<TItem> Items { get; set; }
+}

ValblazeProject/ValblazeProject.csproj

@@ -6,6 +6,16 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <None Remove="Components\Crafting.razor.css" />
+    <None Remove="Components\Crafting.razor.js" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Include="Components\Crafting.razor.css" />
+    <Content Include="Components\Crafting.razor.js" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Blazored.LocalStorage" Version="4.2.0" />
     <PackageReference Include="Blazored.Modal" Version="7.1.0" />