From 0727706864fc36e0dc0bbac2bde52907f765e35f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Fi=C5=A1era?= <mara@neptuo.com>
Date: Fri, 8 Mar 2019 23:23:32 +0100
Subject: [PATCH] #218 - Integrate loading in Categories and Currencies.

---
 src/Money.UI.Blazor/Pages/Categories.cshtml   | 52 +++++++-------
 .../Pages/Categories.cshtml.cs                |  6 +-
 src/Money.UI.Blazor/Pages/Currencies.cshtml   | 70 ++++++++++---------
 .../Pages/Currencies.cshtml.cs                |  6 +-
 4 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/src/Money.UI.Blazor/Pages/Categories.cshtml b/src/Money.UI.Blazor/Pages/Categories.cshtml
index e72d968a..4be24515 100644
--- a/src/Money.UI.Blazor/Pages/Categories.cshtml
+++ b/src/Money.UI.Blazor/Pages/Categories.cshtml
@@ -7,35 +7,37 @@
 <CategoryName bind-IsVisible="@IsCreateVisible" />
 <Confirm Context="@Delete" />
 
-@if (Models.Count == 0)
-{
-    <Alert Title="No data." Message="Try adding some categories." Mode="@AlertMode.Warning" />
-}
-else
-{
-    @foreach (var item in Models)
+<Loading Context="@Loading">
+    @if (Models.Count == 0)
     {
-        <div class="alert" style="background-color: @item.Color.ToHashCode()">
-            @if (item.Icon != null)
-            {
-                <span>@item.Icon</span>
-            }
-            <strong>
-                @item.Name
-            </strong>
-            <span class="gray">
-                @item.Description
-            </span>
+        <Alert Title="No data." Message="Try adding some categories." Mode="@AlertMode.Warning" />
+    }
+    else
+    {
+        @foreach (var item in Models)
+        {
+            <div class="alert" style="background-color: @item.Color.ToHashCode()">
+                @if (item.Icon != null)
+                {
+                    <span>@item.Icon</span>
+                }
+                <strong>
+                    @item.Name
+                </strong>
+                <span class="gray">
+                    @item.Description
+                </span>
 
-            <div class="nav navbar-nav navbar-right">
-                <IconButton Icon="pencil" ToolTip="Rename" Click="@(() => OnActionClick(item, ref IsNameEditVisible))" />
-                <IconButton Icon="picture" ToolTip="Icon" Click="@(() => OnActionClick(item, ref IsIconEditVisible))" />
-                <IconButton Icon="tint" ToolTip="Color" Click="@(() => OnActionClick(item, ref IsColorEditVisible))" />
-                <IconButton Icon="remove" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
+                <div class="nav navbar-nav navbar-right">
+                    <IconButton Icon="pencil" ToolTip="Rename" Click="@(() => OnActionClick(item, ref IsNameEditVisible))" />
+                    <IconButton Icon="picture" ToolTip="Icon" Click="@(() => OnActionClick(item, ref IsIconEditVisible))" />
+                    <IconButton Icon="tint" ToolTip="Color" Click="@(() => OnActionClick(item, ref IsColorEditVisible))" />
+                    <IconButton Icon="remove" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
+                </div>
             </div>
-        </div>
+        }
     }
-}
+</Loading>
 
 <CategoryName CategoryKey="@Selected?.Key" Name="@Selected?.Name" Description="@Selected?.Description" bind-IsVisible="@IsNameEditVisible" />
 <CategoryIcon CategoryKey="@Selected?.Key" Icon="@Selected?.Icon" bind-IsVisible="@IsIconEditVisible" />
diff --git a/src/Money.UI.Blazor/Pages/Categories.cshtml.cs b/src/Money.UI.Blazor/Pages/Categories.cshtml.cs
index 0f7974a3..05ede2f9 100644
--- a/src/Money.UI.Blazor/Pages/Categories.cshtml.cs
+++ b/src/Money.UI.Blazor/Pages/Categories.cshtml.cs
@@ -3,6 +3,7 @@
 using Money.Events;
 using Money.Models;
 using Money.Models.Confirmation;
+using Money.Models.Loading;
 using Money.Models.Queries;
 using Neptuo.Commands;
 using Neptuo.Events;
@@ -42,13 +43,16 @@ public class CategoriesBase : BlazorComponent,
         protected List<CategoryModel> Models { get; private set; } = new List<CategoryModel>();
         protected CategoryModel Selected { get; set; }
         protected DeleteContext<CategoryModel> Delete { get; } = new DeleteContext<CategoryModel>();
+        protected LoadingContext Loading { get; } = new LoadingContext();
 
         protected override async Task OnInitAsync()
         {
             BindEvents();
             Delete.Confirmed += async model => await Commands.HandleAsync(new DeleteCategory(model.Key));
             Delete.MessageFormatter = model => $"Do you really want to delete category '{model.Name}'?";
-            await LoadDataAsync();
+
+            using (Loading.Start())
+                await LoadDataAsync();
         }
 
         protected async void Reload()
diff --git a/src/Money.UI.Blazor/Pages/Currencies.cshtml b/src/Money.UI.Blazor/Pages/Currencies.cshtml
index dfd948d4..bfa87830 100644
--- a/src/Money.UI.Blazor/Pages/Currencies.cshtml
+++ b/src/Money.UI.Blazor/Pages/Currencies.cshtml
@@ -7,50 +7,52 @@
 <CurrencyEdit bind-IsVisible="@IsCreateVisible" />
 <Confirm Context="@Delete" />
 
-@if (Models.Count == 0)
-{
-    <Alert Title="No data." Message="Try adding some currencies." Mode="@AlertMode.Warning" />
-}
-else
-{
-    @foreach (var item in Models)
+<Loading Context="@Loading">
+    @if (Models.Count == 0)
     {
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>
-                    @item.Symbol
-                </strong>
-            </div>
-            <div class="panel-body">
-                <p>This currency has unique code @item.UniqueCode.</p>
-                @if (item.IsDefault)
-                {
-                    <p>This is a default currency used for displaying outcomes.</p>
-                }
-
-                <div class="nav navbar-nav navbar-right">
-                    @if (!item.IsDefault)
+        <Alert Title="No data." Message="Try adding some currencies." Mode="@AlertMode.Warning" />
+    }
+    else
+    {
+        @foreach (var item in Models)
+        {
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <strong>
+                        @item.Symbol
+                    </strong>
+                </div>
+                <div class="panel-body">
+                    <p>This currency has unique code @item.UniqueCode.</p>
+                    @if (item.IsDefault)
                     {
-                        <IconButton Icon="home" ToolTip="Set as default" Click="@(async () => { await OnChangeDefaultClickAsync(item); StateHasChanged(); })" />
+                        <p>This is a default currency used for displaying outcomes.</p>
                     }
 
-                    @if (Models.Count > 1)
-                    {
-                        <IconButton Icon="transfer" ToolTip="Add exchange rate" Click="@(() => OnActionClick(item, ref IsListExchangeRateVisible))" />
-                    }
+                    <div class="nav navbar-nav navbar-right">
+                        @if (!item.IsDefault)
+                        {
+                            <IconButton Icon="home" ToolTip="Set as default" Click="@(async () => { await OnChangeDefaultClickAsync(item); StateHasChanged(); })" />
+                        }
 
-                    <IconButton Icon="pencil" ToolTip="Rename" Click="@(() => OnActionClick(item, ref IsEditVisible))" />
+                        @if (Models.Count > 1)
+                        {
+                            <IconButton Icon="transfer" ToolTip="Add exchange rate" Click="@(() => OnActionClick(item, ref IsListExchangeRateVisible))" />
+                        }
 
-                    @if (Models.Count > 1 && !item.IsDefault)
-                    {
-                        <IconButton Icon="remove" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
-                    }
+                        <IconButton Icon="pencil" ToolTip="Rename" Click="@(() => OnActionClick(item, ref IsEditVisible))" />
+
+                        @if (Models.Count > 1 && !item.IsDefault)
+                        {
+                            <IconButton Icon="remove" ToolTip="Delete" Click="@(() => OnDeleteClick(item))" />
+                        }
+                    </div>
                 </div>
             </div>
-        </div>
 
+        }
     }
-}
+</Loading>
 
 <CurrencyEdit UniqueCode="@Selected?.UniqueCode" Symbol="@Selected?.Symbol" bind-IsVisible="@IsEditVisible" />
 
diff --git a/src/Money.UI.Blazor/Pages/Currencies.cshtml.cs b/src/Money.UI.Blazor/Pages/Currencies.cshtml.cs
index cd150556..8694562e 100644
--- a/src/Money.UI.Blazor/Pages/Currencies.cshtml.cs
+++ b/src/Money.UI.Blazor/Pages/Currencies.cshtml.cs
@@ -3,6 +3,7 @@
 using Money.Events;
 using Money.Models;
 using Money.Models.Confirmation;
+using Money.Models.Loading;
 using Money.Models.Queries;
 using Neptuo.Commands;
 using Neptuo.Events;
@@ -59,13 +60,16 @@ protected bool IsCreateExchangeRateVisible
         public List<CurrencyModel> Models { get; private set; } = new List<CurrencyModel>();
         public CurrencyModel Selected { get; protected set; }
         protected DeleteContext<CurrencyModel> Delete { get; } = new DeleteContext<CurrencyModel>();
+        protected LoadingContext Loading { get; } = new LoadingContext();
 
         protected override async Task OnInitAsync()
         {
             BindEvents();
             Delete.Confirmed += async model => await Commands.HandleAsync(new DeleteCurrency(model.UniqueCode));
             Delete.MessageFormatter = model => $"Do you really want to delete currency '{model.Symbol}'?";
-            await LoadDataAsync();
+
+            using (Loading.Start())
+                await LoadDataAsync();
         }
 
         protected async void OnEvent()