#417 - Add no data message.

maraf · Nov 23, 2022 · 98cac19 · 98cac19
1 parent c3db305
commit 98cac19
Showing 1 changed file with 37 additions and 30 deletions.
diff --git a/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor b/src/Money.Blazor.Host/Pages/ExpenseTemplates.razor
@@ -6,41 +6,48 @@
 
 <ExpenseTemplateCreate @ref="CreateModal" />
 
-<div class="row">
-    @foreach (var model in Models)
-    {
-        <div class="col-12 col-sm-6 col-md-4 col-xl-3">
-            <div class="card card-hover">
-                <div class="card-body">
-                    @if (model.Amount != null)
-                    {
-                        <h3 class="m-0">
-                            @CurrencyFormatter.Format(model.Amount)
-                        </h3>
-                    }
+@if (Models.Count == 0)
+{
+    <Alert Title="No data." Message="Let's add some templates." Mode="@AlertMode.Warning" />
+}
+else
+{
+    <div class="row">
+        @foreach (var model in Models)
+        {
+            <div class="col-12 col-sm-6 col-md-4 col-xl-3">
+                <div class="card card-hover">
+                    <div class="card-body">
+                        @if (model.Amount != null)
+                        {
+                            <h3 class="m-0">
+                                @CurrencyFormatter.Format(model.Amount)
+                            </h3>
+                        }
 
-                    @if (!model.CategoryKey.IsEmpty)
-                    {
-                        <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>
-                    }
+                        @if (!model.CategoryKey.IsEmpty)
+                        {
+                            <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>
+                        }
 
-                    @if (!String.IsNullOrEmpty(model.Description))
-                    {
-                        <p>
-                            @model.Description
-                        </p>
-                    }
+                        @if (!String.IsNullOrEmpty(model.Description))
+                        {
+                            <p>
+                                @model.Description
+                            </p>
+                        }
 
-                    <div class="controls text-right">
-                        <IconButton Icon="minus" ToolTip="Create expense" Click="@(() => { Navigator.OpenExpenseCreate(model.Amount?.Value, model.Amount?.Currency, model.Description, model.CategoryKey); })" />
-                        <IconButton Icon="trash-alt" ToolTip="Delete" Click="@(() => { ToDeleteKey = model.Key; DeleteMessage = $"Do you really want to delete expense template {(model.Amount != null ? CurrencyFormatter.Format(model.Amount) : null)} '{model.Description}'?"; DeleteConfirm.Show(); StateHasChanged(); })" />
+                        <div class="controls text-right">
+                            <IconButton Icon="minus" ToolTip="Create expense" Click="@(() => { Navigator.OpenExpenseCreate(model.Amount?.Value, model.Amount?.Currency, model.Description, model.CategoryKey); })" />
+                            <IconButton Icon="trash-alt" ToolTip="Delete" Click="@(() => { ToDeleteKey = model.Key; DeleteMessage = $"Do you really want to delete expense template {(model.Amount != null ? CurrencyFormatter.Format(model.Amount) : null)} '{model.Description}'?"; DeleteConfirm.Show(); StateHasChanged(); })" />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    }
-</div>
+        }
+    </div>
+}
 
 <Confirm @ref="DeleteConfirm" Message="@DeleteMessage" OnConfirmed="@Delete" />