Add step 07

rohitnb · Jan 29, 2019 · 66b542f · 66b542f
1 parent 8a212bc
commit 66b542f
Show file tree

Hide file tree

Showing 21 changed files with 890 additions and 234 deletions.
diff --git a/docs/07-templated-components.md b/docs/07-templated-components.md
diff --git a/save-points/07-templated-components/BlazingComponents/BlazingComponents.csproj b/save-points/07-templated-components/BlazingComponents/BlazingComponents.csproj
@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <LangVersion>7.3</LangVersion>
+    <IsPackable>true</IsPackable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <!-- .js/.css files will be referenced via <script>/<link> tags; other content files will just be included in the app's 'dist' directory without any tags referencing them -->
+    <EmbeddedResource Include="content\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
+    <EmbeddedResource Include="content\**\*.css" LogicalName="blazor:css:%(RecursiveDir)%(Filename)%(Extension)" />
+    <EmbeddedResource Include="content\**" Exclude="**\*.js;**\*.css" LogicalName="blazor:file:%(RecursiveDir)%(Filename)%(Extension)" />
+  </ItemGroup>  
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" PrivateAssets="all" />
+  </ItemGroup>
+
+</Project>
diff --git a/save-points/07-templated-components/BlazingComponents/TemplatedDialog.cshtml b/save-points/07-templated-components/BlazingComponents/TemplatedDialog.cshtml
@@ -0,0 +1,13 @@
+@if (Show)
+{
+    <div class="dialog-container">
+        <div class="dialog">
+            @ChildContent
+        </div>
+    </div>
+}
+
+@functions {
+    [Parameter] RenderFragment ChildContent { get; set; }
+    [Parameter] bool Show { get; set; }
+}
diff --git a/save-points/07-templated-components/BlazingComponents/TemplatedList.cshtml b/save-points/07-templated-components/BlazingComponents/TemplatedList.cshtml
@@ -0,0 +1,36 @@
+@typeparam TItem
+
+@if (items == null)
+{
+    @LoadingContent
+}
+else if (items.Count == 0)
+{
+    @EmptyContent
+}
+else
+{
+    <div class="list-group @ListGroupClass">
+        @foreach (var item in items)
+        {
+            <div class="list-group-item">
+                @ItemContent(item)
+            </div>
+        }
+    </div>
+}
+
+@functions {
+    List<TItem> items;
+
+    [Parameter] Func<Task<List<TItem>>> Loader { get; set; }
+    [Parameter] RenderFragment LoadingContent { get; set; }
+    [Parameter] RenderFragment EmptyContent { get; set; }
+    [Parameter] RenderFragment<TItem> ItemContent { get; set; }
+    [Parameter] string ListGroupClass { get; set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        items = await Loader();
+    }
+}
diff --git a/save-points/07-templated-components/BlazingPizza.Client/BlazingPizza.Client.csproj b/save-points/07-templated-components/BlazingPizza.Client/BlazingPizza.Client.csproj
@@ -12,6 +12,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <ProjectReference Include="..\BlazingComponents\BlazingComponents.csproj" />
     <ProjectReference Include="..\BlazingPizza.ComponentsLibrary\BlazingPizza.ComponentsLibrary.csproj" />
     <ProjectReference Include="..\BlazingPizza.Shared\BlazingPizza.Shared.csproj" />
   </ItemGroup>

diff --git a/save-points/07-templated-components/BlazingPizza.Client/OrderState.cs b/save-points/07-templated-components/BlazingPizza.Client/OrderState.cs
@@ -44,21 +44,6 @@ public void ConfirmConfigurePizzaDialog()
             StateHasChanged();
         }
 
-        public void AddTopping(Topping topping)
-        {
-            if (ConfiguringPizza.Toppings.Find(pt => pt.Topping == topping) == null)
-            {
-                ConfiguringPizza.Toppings.Add(new PizzaTopping() { Topping = topping });
-            }
-            StateHasChanged();
-        }
-
-        public void RemoveTopping(Topping topping)
-        {
-            ConfiguringPizza.Toppings.RemoveAll(pt => pt.Topping == topping);
-            StateHasChanged();
-        }
-
         public void RemoveConfiguredPizza(Pizza pizza)
         {
             Order.Pizzas.Remove(pizza);

diff --git a/save-points/07-templated-components/BlazingPizza.Client/Pages/Index.cshtml b/save-points/07-templated-components/BlazingPizza.Client/Pages/Index.cshtml
@@ -48,10 +48,12 @@
     </div>
 </div>
 
-@if (OrderState.ShowingConfigureDialog)
-{
-    <ConfigurePizzaDialog />
-}
+<TemplatedDialog Show="OrderState.ShowingConfigureDialog">
+    <ConfigurePizzaDialog 
+        Pizza="OrderState.ConfiguringPizza" 
+        OnCancel="OrderState.CancelConfigurePizzaDialog" 
+        OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />
+</TemplatedDialog>
 
 @functions {
     [CascadingParameter] UserStateProvider UserState { get; set; }

diff --git a/save-points/07-templated-components/BlazingPizza.Client/Pages/MyOrders.cshtml b/save-points/07-templated-components/BlazingPizza.Client/Pages/MyOrders.cshtml
@@ -3,47 +3,35 @@
 @inject HttpClient HttpClient
 
 <div class="main">
-    @if (ordersWithStatus == null)
-    {
-        <text>Loading...</text>
-    }
-    else if (ordersWithStatus.Count == 0)
-    {
-        <h2>No orders placed</h2>
-        <a class="btn btn-success" href="">Order some pizza</a>
-    }
-    else
-    {
-        <div class="list-group orders-list">
-            @foreach (var item in ordersWithStatus)
-            {
-                <div class="list-group-item">
-                    <div class="col">
-                        <h5>@item.Order.CreatedTime.ToLongDateString()</h5>
-                        Items:
-                        <strong>@item.Order.Pizzas.Count()</strong>;
-                        Total price:
-                        <strong>£@item.Order.GetFormattedTotalPrice()</strong>
-                    </div>
-                    <div class="col">
-                        Status: <strong>@item.StatusText</strong>
-                    </div>
-                    <div class="col flex-grow-0">
-                        <a href="myorders/@item.Order.OrderId" class="btn btn-success">
-                            Track &gt;
-                        </a>
-                    </div>
-                </div>
-            }
-        </div>
-    }
+    <TemplatedList Loader="@LoadOrders" ListGroupClass="orders-list">
+        <LoadingContent><text>Loading...</text></LoadingContent>
+        <EmptyContent>
+            <h2>No orders placed</h2>
+            <a class="btn btn-success" href="">Order some pizza</a>
+        </EmptyContent>
+        <ItemContent Context="item">
+            <div class="col">
+                <h5>@item.Order.CreatedTime.ToLongDateString()</h5>
+                Items:
+                <strong>@item.Order.Pizzas.Count()</strong>;
+                Total price:
+                <strong>£@item.Order.GetFormattedTotalPrice()</strong>
+            </div>
+            <div class="col">
+                Status: <strong>@item.StatusText</strong>
+            </div>
+            <div class="col flex-grow-0">
+                <a href="myorders/@item.Order.OrderId" class="btn btn-success">
+                    Track &gt;
+                </a>
+            </div>
+        </ItemContent>
+    </TemplatedList>
 </div>
 
 @functions {
-    List<OrderWithStatus> ordersWithStatus;
-
-    protected override async Task OnParametersSetAsync()
+    Task<List<OrderWithStatus>> LoadOrders()
     {
-        ordersWithStatus = await HttpClient.GetJsonAsync<List<OrderWithStatus>>("/orders");
+        return HttpClient.GetJsonAsync<List<OrderWithStatus>>("/orders");
     }
 }
diff --git a/save-points/07-templated-components/BlazingPizza.Client/Shared/ConfigurePizzaDialog.cshtml b/save-points/07-templated-components/BlazingPizza.Client/Shared/ConfigurePizzaDialog.cshtml
@@ -1,69 +1,67 @@
 @inject HttpClient HttpClient
-@inject OrderState OrderState
 
-<div class="dialog-container">
-    <div class="dialog">
-        <div class="dialog-title">
-            <h2>@Pizza.Special.Name</h2>
-            @Pizza.Special.Description
-        </div>
-        <form class="dialog-body">
-            <div>
-                <label>Size:</label>
-                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" bind-value-oninput="Pizza.Size" />
-                <span class="size-label">
-                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
-                </span>
-            </div>
-            <div>
-                <label>Extra Toppings:</label>
-                @if (toppings == null)
-                {
-                    <select class="custom-select" disabled>
-                        <option>(loading...)</option>
-                    </select>
-                }
-                else if (Pizza.Toppings.Count >= 6)
-                {
-                    <div>(maximum reached)</div>
-                }
-                else
+<div class="dialog-title">
+    <h2>@Pizza.Special.Name</h2>
+    @Pizza.Special.Description
+</div>
+<form class="dialog-body">
+    <div>
+        <label>Size:</label>
+        <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" bind-value-oninput="Pizza.Size" />
+        <span class="size-label">
+            @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
+        </span>
+    </div>
+    <div>
+        <label>Extra Toppings:</label>
+        @if (toppings == null)
+        {
+            <select class="custom-select" disabled>
+                <option>(loading...)</option>
+            </select>
+        }
+        else if (Pizza.Toppings.Count >= 6)
+        {
+            <div>(maximum reached)</div>
+        }
+        else
+        {
+            <select class="custom-select" onchange="@ToppingSelected">
+                <option value="-1" disabled selected>(select)</option>
+                @for (var i = 0; i < toppings.Count; i++)
                 {
-                    <select class="custom-select" onchange="@ToppingSelected">
-                        <option value="-1" disabled selected>(select)</option>
-                        @for (var i = 0; i < toppings.Count; i++)
-                        {
-                            <option value="@i">@toppings[i].Name - (£@(toppings[i].GetFormattedPrice()))</option>
-                        }
-                    </select>
+                    <option value="@i">@toppings[i].Name - (£@(toppings[i].GetFormattedPrice()))</option>
                 }
-            </div>
+            </select>
+        }
+    </div>
 
-            <div class="toppings">
-                @foreach (var topping in Pizza.Toppings)
-                {
-                    <div class="topping">
-                        @topping.Topping.Name
-                        <span class="topping-price">@topping.Topping.GetFormattedPrice()</span>
-                        <button type="button" class="delete-topping" onclick="@(() => OrderState.RemoveTopping(topping.Topping))">x</button>
-                    </div>
-                }
+    <div class="toppings">
+        @foreach (var topping in Pizza.Toppings)
+        {
+            <div class="topping">
+                @topping.Topping.Name
+                <span class="topping-price">@topping.Topping.GetFormattedPrice()</span>
+                <button type="button" class="delete-topping" onclick="@(() => RemoveTopping(topping.Topping))">x</button>
             </div>
-        </form>
-
-        <div class="dialog-buttons">
-            <button class="btn btn-secondary mr-auto" onclick="@OrderState.CancelConfigurePizzaDialog">Cancel</button>
-            <span class="mr-center">
-                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
-            </span>
-            <button class="btn btn-success ml-auto" onclick="@OrderState.ConfirmConfigurePizzaDialog">Order ></button>
-        </div>
+        }
     </div>
+</form>
+
+<div class="dialog-buttons">
+    <button class="btn btn-secondary mr-auto" onclick="@OnCancel">Cancel</button>
+    <span class="mr-center">
+        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
+    </span>
+    <button class="btn btn-success ml-auto" onclick="@OnConfirm">Order ></button>
 </div>
 
 @functions {
     List<Topping> toppings { get; set; }
-    Pizza Pizza => OrderState.ConfiguringPizza;
+
+    [Parameter] Pizza Pizza { get; set; }
+    [Parameter] Action OnCancel { get; set; }
+    [Parameter] Action OnConfirm { get; set; }
 
     protected async override Task OnInitAsync()
     {
@@ -74,7 +72,21 @@
     {
         if (int.TryParse((string)e.Value, out var index) && index >= 0)
         {
-            OrderState.AddTopping(toppings[index]);
+            AddTopping(toppings[index]);
         }
     }
+
+    void AddTopping(Topping topping)
+    {
+        if (Pizza.Toppings.Find(pt => pt.Topping == topping) == null)
+        {
+            Pizza.Toppings.Add(new PizzaTopping() { Topping = topping });
+        }
+    }
+
+    void RemoveTopping(Topping topping)
+    {
+        Pizza.Toppings.RemoveAll(pt => pt.Topping == topping);
+        StateHasChanged();
+    }
 }
diff --git a/save-points/07-templated-components/BlazingPizza.Client/_ViewImports.cshtml b/save-points/07-templated-components/BlazingPizza.Client/_ViewImports.cshtml
@@ -7,3 +7,4 @@
 @using BlazingPizza.Client.Shared
 @using BlazingPizza.ComponentsLibrary.Authentication
 @addTagHelper "*, BlazingPizza.ComponentsLibrary"
+@addTagHelper "*, BlazingComponents"
diff --git a/save-points/07-templated-components/BlazingPizza.sln b/save-points/07-templated-components/BlazingPizza.sln
@@ -10,6 +10,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazingPizza.Shared", "Blaz
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazingPizza.ComponentsLibrary", "BlazingPizza.ComponentsLibrary\BlazingPizza.ComponentsLibrary.csproj", "{77601C05-0A91-4895-A1A1-B5F90422DAB8}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazingComponents", "BlazingComponents\BlazingComponents.csproj", "{659BA43E-C36D-4F2D-A715-22465BE90792}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -68,6 +70,18 @@ Global
 		{77601C05-0A91-4895-A1A1-B5F90422DAB8}.Release|x64.Build.0 = Release|Any CPU
 		{77601C05-0A91-4895-A1A1-B5F90422DAB8}.Release|x86.ActiveCfg = Release|Any CPU
 		{77601C05-0A91-4895-A1A1-B5F90422DAB8}.Release|x86.Build.0 = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|x64.Build.0 = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Debug|x86.Build.0 = Debug|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|Any CPU.Build.0 = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|x64.ActiveCfg = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|x64.Build.0 = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|x86.ActiveCfg = Release|Any CPU
+		{659BA43E-C36D-4F2D-A715-22465BE90792}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

diff --git a/src/BlazingComponents/BlazingComponents.csproj b/src/BlazingComponents/BlazingComponents.csproj
@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <LangVersion>7.3</LangVersion>
+    <IsPackable>true</IsPackable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <!-- .js/.css files will be referenced via <script>/<link> tags; other content files will just be included in the app's 'dist' directory without any tags referencing them -->
+    <EmbeddedResource Include="content\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
+    <EmbeddedResource Include="content\**\*.css" LogicalName="blazor:css:%(RecursiveDir)%(Filename)%(Extension)" />
+    <EmbeddedResource Include="content\**" Exclude="**\*.js;**\*.css" LogicalName="blazor:file:%(RecursiveDir)%(Filename)%(Extension)" />
+  </ItemGroup>  
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" PrivateAssets="all" />
+  </ItemGroup>
+
+</Project>