From 69b97da69ffd2f9516ff05ee4a80136e73f98135 Mon Sep 17 00:00:00 2001
From: "Johnny.Ratton" <Johnny.RATTON@etu.uca.fr>
Date: Sun, 31 Dec 2023 14:29:32 +0100
Subject: [PATCH] =?UTF-8?q?D=C3=A9but=20de=20l'impl=C3=A9mentation=20des?=
 =?UTF-8?q?=20composants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BlazorProject/Components/Card.razor         |  6 ++++
 BlazorProject/Components/Card.razor.cs      | 18 +++++++++++
 BlazorProject/Components/ShowItems.razor    | 11 +++++++
 BlazorProject/Components/ShowItems.razor.cs | 12 +++++++
 BlazorProject/Layout/MainLayout.razor       | 36 ++++++++++++++++++++-
 BlazorProject/Layout/MainLayout.razor.cs    | 36 +++++++++++++++++++++
 BlazorProject/Layout/TableTemplate.razor    | 28 ++++++++++++++++
 BlazorProject/Models/Cake.cs                |  8 +++++
 BlazorProject/Pages/Pets1.razor             | 29 +++++++++++++++++
 BlazorProject/Pages/Pets2.razor             | 29 +++++++++++++++++
 10 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 BlazorProject/Components/Card.razor
 create mode 100644 BlazorProject/Components/Card.razor.cs
 create mode 100644 BlazorProject/Components/ShowItems.razor
 create mode 100644 BlazorProject/Components/ShowItems.razor.cs
 create mode 100644 BlazorProject/Layout/MainLayout.razor.cs
 create mode 100644 BlazorProject/Layout/TableTemplate.razor
 create mode 100644 BlazorProject/Models/Cake.cs
 create mode 100644 BlazorProject/Pages/Pets1.razor
 create mode 100644 BlazorProject/Pages/Pets2.razor

diff --git a/BlazorProject/Components/Card.razor b/BlazorProject/Components/Card.razor
new file mode 100644
index 0000000..b474fdc
--- /dev/null
+++ b/BlazorProject/Components/Card.razor
@@ -0,0 +1,6 @@
+@typeparam TItem
+<div class="card text-center">
+    @CardHeader(Item)
+    @CardBody(Item)
+    @CardFooter
+</div>
\ No newline at end of file
diff --git a/BlazorProject/Components/Card.razor.cs b/BlazorProject/Components/Card.razor.cs
new file mode 100644
index 0000000..10798ef
--- /dev/null
+++ b/BlazorProject/Components/Card.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorProject.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; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Components/ShowItems.razor b/BlazorProject/Components/ShowItems.razor
new file mode 100644
index 0000000..c1820e4
--- /dev/null
+++ b/BlazorProject/Components/ShowItems.razor
@@ -0,0 +1,11 @@
+@typeparam TItem
+
+<div>
+    @if ((Items?.Count ?? 0) != 0)
+    {
+        @foreach (var item in Items)
+        {
+            @ShowTemplate(item);
+        }
+    }
+</div>
\ No newline at end of file
diff --git a/BlazorProject/Components/ShowItems.razor.cs b/BlazorProject/Components/ShowItems.razor.cs
new file mode 100644
index 0000000..9e0e0e2
--- /dev/null
+++ b/BlazorProject/Components/ShowItems.razor.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorProject.Components;
+
+public partial class ShowItems<TItem>
+{
+    [Parameter]
+    public List<TItem> Items { get; set; }
+
+    [Parameter]
+    public RenderFragment<TItem> ShowTemplate { get; set; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Layout/MainLayout.razor b/BlazorProject/Layout/MainLayout.razor
index ab1a579..2020ed2 100644
--- a/BlazorProject/Layout/MainLayout.razor
+++ b/BlazorProject/Layout/MainLayout.razor
@@ -1,5 +1,6 @@
 @using System.Globalization
 @using BlazorProject.Pages
+@using BlazorProject.Components
 @inherits LayoutComponentBase
 <div class="page">
     <div class="sidebar">
@@ -14,9 +15,42 @@
                 <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
             </p>
         </div>
-
         <article class="content px-4">
             @Body
         </article>
     </main>
+    <!--<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>-->
+    <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>
diff --git a/BlazorProject/Layout/MainLayout.razor.cs b/BlazorProject/Layout/MainLayout.razor.cs
new file mode 100644
index 0000000..35ee323
--- /dev/null
+++ b/BlazorProject/Layout/MainLayout.razor.cs
@@ -0,0 +1,36 @@
+using BlazorProject.Models;
+
+namespace BlazorProject.Layout;
+
+public partial class MainLayout
+{
+    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
+            },
+            new Cake
+            {
+                Id = 2,
+                Name = "Black Forest",
+                Cost = 50
+            },
+        };
+    }
+
+}
\ No newline at end of file
diff --git a/BlazorProject/Layout/TableTemplate.razor b/BlazorProject/Layout/TableTemplate.razor
new file mode 100644
index 0000000..39ee6ed
--- /dev/null
+++ b/BlazorProject/Layout/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; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Models/Cake.cs b/BlazorProject/Models/Cake.cs
new file mode 100644
index 0000000..987227d
--- /dev/null
+++ b/BlazorProject/Models/Cake.cs
@@ -0,0 +1,8 @@
+namespace BlazorProject.Models;
+
+public class Cake
+{
+    public int Id { get; set; }
+    public string Name { get; set; }
+    public decimal Cost { get; set; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Pages/Pets1.razor b/BlazorProject/Pages/Pets1.razor
new file mode 100644
index 0000000..89d973a
--- /dev/null
+++ b/BlazorProject/Pages/Pets1.razor
@@ -0,0 +1,29 @@
+@page "/pets1"
+
+<h1>Pets</h1>
+
+<TableTemplate Items="pets" Context="pet">
+    <TableHeader>
+        <th>ID</th>
+        <th>Name</th>
+    </TableHeader>
+    <RowTemplate>
+        <td>@pet.PetId</td>
+        <td>@pet.Name</td>
+    </RowTemplate>
+</TableTemplate>
+
+@code {
+    private List<Pet> pets = new()
+    {
+        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
+        new Pet { PetId = 4, Name = "Salem Saberhagen" },
+        new Pet { PetId = 7, Name = "K-9" }
+    };
+
+    private class Pet
+    {
+        public int PetId { get; set; }
+        public string? Name { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/BlazorProject/Pages/Pets2.razor b/BlazorProject/Pages/Pets2.razor
new file mode 100644
index 0000000..7dd51c4
--- /dev/null
+++ b/BlazorProject/Pages/Pets2.razor
@@ -0,0 +1,29 @@
+@page "/pets2"
+
+<h1>Pets</h1>
+
+<TableTemplate Items="pets">
+    <TableHeader>
+        <th>ID</th>
+        <th>Name</th>
+    </TableHeader>
+    <RowTemplate Context="pet">
+        <td>@pet.PetId</td>
+        <td>@pet.Name</td>
+    </RowTemplate>
+</TableTemplate>
+
+@code {
+    private List<Pet> pets = new()
+    {
+        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
+        new Pet { PetId = 4, Name = "Salem Saberhagen" },
+        new Pet { PetId = 7, Name = "K-9" }
+    };
+
+    private class Pet
+    {
+        public int PetId { get; set; }
+        public string? Name { get; set; }
+    }
+}
\ No newline at end of file