#417 - Progress on template list design.

maraf · Jun 14, 2022 · 9f2f0a2 · 9f2f0a2
1 parent e64c498
commit 9f2f0a2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor b/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor
@@ -12,15 +12,15 @@
         <div class="card-body">
             @if (model.Amount != null)
             {
-                <p>
-                    @model.Amount
-                </p>
+                <h3 class="m-0">
+                    @CurrencyFormatter.Format(model.Amount)
+                </h3>
             }
 
             @if (!model.CategoryKey.IsEmpty)
             {
-                <p>
-                    @model.CategoryKey
+                <p class="m-0 @FindCategoryColor(model.CategoryKey)?.SelectAccent("back-dark", "back-light")">
+                    <span class="badge" style="background-color: @FindCategoryColor(model.CategoryKey)?.ToHashCode()">@FindCategoryName(model.CategoryKey)</span>
                 </p>
             }
 

diff --git a/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor.cs b/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor.cs
@@ -9,6 +9,7 @@
 using Neptuo.Events;
 using Neptuo.Events.Handlers;
 using Neptuo.Logging;
+using Neptuo.Models.Keys;
 using Neptuo.Queries;
 using Neptuo.Queries.Handlers;
 using System;
@@ -28,8 +29,13 @@ public partial class ExpenseTemplates : IDisposable, IEventHandler<ExpenseTempla
         [Inject]
         protected IQueryDispatcher Queries { get; set; }
 
+        [Inject]
+        protected CurrencyFormatterFactory CurrencyFormatterFactory { get; set; }
+
+        protected CurrencyFormatter CurrencyFormatter { get; private set; }
         protected ExpenseTemplateCreate Modal { get; set; }
         protected List<ExpenseTemplateModel> Models { get; } = new List<ExpenseTemplateModel>();
+        protected List<CategoryModel> Categories { get; private set; }
 
         protected async override Task OnInitializedAsync()
         {
@@ -39,9 +45,24 @@ protected async override Task OnInitializedAsync()
 
             await base.OnInitializedAsync();
 
+            Categories = await Queries.QueryAsync(new ListAllCategory(true));
+            CurrencyFormatter = await CurrencyFormatterFactory.CreateAsync();
+
             await ReloadAsync();
         }
 
+        protected string FindCategoryName(IKey categoryKey)
+        {
+            var category = Categories.FirstOrDefault(c => c.Key.Equals(categoryKey));
+            return category?.Name;
+        }
+
+        protected Color? FindCategoryColor(IKey categoryKey)
+        {
+            var category = Categories.FirstOrDefault(c => c.Key.Equals(categoryKey));
+            return category?.Color;
+        }
+
         private async Task ReloadAsync()
         {
             Models.Clear();

diff --git a/src/Money.Blazor.Host/wwwroot/css/site.css b/src/Money.Blazor.Host/wwwroot/css/site.css
@@ -306,8 +306,7 @@ h4 {
   max-width: 900px;
   margin: 0 auto; }
   .overview .sort {
-    float: right;
-    margin-right: 35px; }
+    float: right; }
 
 .search {
   max-width: 900px;

diff --git a/src/Money.Blazor.Host/wwwroot/css/site.min.css b/src/Money.Blazor.Host/wwwroot/css/site.min.css