diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Activity.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Activity.razor new file mode 100644 index 000000000..e0ded0093 --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Activity.razor @@ -0,0 +1,4 @@ +@inherits Icon + + + \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Database.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Database.razor new file mode 100644 index 000000000..c00d5885f --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Database.razor @@ -0,0 +1,4 @@ +@inherits Icon + + + \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Document.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Document.razor new file mode 100644 index 000000000..76b73eea1 --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Document.razor @@ -0,0 +1,4 @@ +@inherits Icon + + + diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Home.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Home.razor new file mode 100644 index 000000000..9c5c0b4c0 --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Home.razor @@ -0,0 +1,4 @@ +@inherits Icon + + + diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Icon.cs b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Icon.cs new file mode 100644 index 000000000..93079e7ad --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Icon.cs @@ -0,0 +1,17 @@ +using Microsoft.AspNetCore.Components; + +namespace ElsaDashboard.Application.Icons +{ + public abstract class Icon : ComponentBase + { + [Parameter] public string CssClass { get; set; } = "mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150"; + + public static RenderFragment Render(string cssClass) where T : Icon => + builder => + { + builder.OpenComponent(0); + builder.AddAttribute(1,"CssClass", cssClass); + builder.CloseComponent(); + }; + } +} \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/PlayCircle.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/PlayCircle.razor new file mode 100644 index 000000000..98cc51e15 --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/PlayCircle.razor @@ -0,0 +1,4 @@ +@inherits Icon + + + \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Icons/Squares.razor b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Squares.razor new file mode 100644 index 000000000..e9180936b --- /dev/null +++ b/src/dashboards/blazor/ElsaDashboard.Application/Icons/Squares.razor @@ -0,0 +1,8 @@ +@inherits Icon + + + + + + + \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Models/MenuItem.cs b/src/dashboards/blazor/ElsaDashboard.Application/Models/MenuItem.cs index 8ef7f8652..c0ac48938 100644 --- a/src/dashboards/blazor/ElsaDashboard.Application/Models/MenuItem.cs +++ b/src/dashboards/blazor/ElsaDashboard.Application/Models/MenuItem.cs @@ -1,10 +1,11 @@ -using Microsoft.AspNetCore.Components.Routing; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Routing; namespace ElsaDashboard.Application.Models { public class MenuItem { - public MenuItem(string text, string url, string icon, NavLinkMatch match = NavLinkMatch.Prefix) + public MenuItem(string text, string url, RenderFragment icon, NavLinkMatch match = NavLinkMatch.Prefix) { Text = text; Url = url; @@ -12,7 +13,7 @@ namespace ElsaDashboard.Application.Models } public string Text { get; init; } - public string Icon { get; init; } + public RenderFragment Icon { get; init; } public string Url { get; init; } public NavLinkMatch Match { get; init; } = NavLinkMatch.Prefix; } diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor b/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor index 3d42552f0..862317667 100644 --- a/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor +++ b/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor @@ -21,9 +21,7 @@ { const string activeClass = "text-gray-900 bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-200"; - - - + @menuItem.Icon @menuItem.Text } @@ -63,9 +61,7 @@ { const string activeClass = "text-gray-900 bg-gray-200 focus:bg-gray-50"; - - - + @menuItem.Icon @menuItem.Text } diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor.cs b/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor.cs index c99aeaab7..905d255d2 100644 --- a/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor.cs +++ b/src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor.cs @@ -1,5 +1,7 @@ using System.Collections.Generic; +using ElsaDashboard.Application.Icons; using ElsaDashboard.Application.Models; +using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Routing; namespace ElsaDashboard.Application.Shared @@ -10,14 +12,16 @@ namespace ElsaDashboard.Application.Shared { MenuItems = new[] { - new MenuItem("Home", "", "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6", NavLinkMatch.All), - new MenuItem("Workflow Registry", "workflow-registry", "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z", NavLinkMatch.Prefix), - new MenuItem("Workflow Instances", "workflow-instances", "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z", NavLinkMatch.Prefix), - new MenuItem("Workflow Sources", "workflow-definitions", "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z", NavLinkMatch.Prefix), - new MenuItem("Composite Activities", "composite-activities", "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z", NavLinkMatch.Prefix), + new MenuItem("Home", "", GetIcon(), NavLinkMatch.All), + new MenuItem("Workflow Registry", "workflow-registry", GetIcon(), NavLinkMatch.Prefix), + new MenuItem("Workflow Instances", "workflow-instances", GetIcon(), NavLinkMatch.Prefix), + new MenuItem("Workflow Definitions", "workflow-definitions", GetIcon(), NavLinkMatch.Prefix), + new MenuItem("Composite Activities", "composite-activities", GetIcon(), NavLinkMatch.Prefix), }; } public IEnumerable MenuItems { get; set; } + + private RenderFragment GetIcon() where T : Icon => Icon.Render("mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150"); } } \ No newline at end of file diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor b/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor index 37d20c487..da53278a8 100644 --- a/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor +++ b/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor @@ -66,15 +66,19 @@ @for (var i = start; i < end; i++) { var isCurrent = Page == i; + var isFirst = i == start; + var isLast = i == end - 1; + var leftRoundedClass = isFirst && isCurrent ? "rounded-l-md" : ""; + var rightRoundedClass = isLast && isCurrent ? "rounded-r-md" : ""; if (isCurrent) { - + @(i + 1) } else { - + @(i + 1) } diff --git a/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor.cs b/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor.cs index 68191975b..f9b2b0e1b 100644 --- a/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor.cs +++ b/src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor.cs @@ -11,6 +11,19 @@ namespace ElsaDashboard.Application.Shared private int From => Page!.Value * PageSize!.Value + 1; private int To => Math.Min(From + PageSize!.Value, TotalCount); - private int PageCount => (TotalCount / PageSize!.Value) + 1; + + private int PageCount => (int) (((float) TotalCount - 1) / PageSize!.Value) + 1; + + // private int PageCount + // { + // get + // { + // var count = TotalCount / PageSize!.Value; + // var hasLeftOver = TotalCount % (float) PageSize!.Value == 0; + // var extra = hasLeftOver ? 1 : 0; + // + // return count + extra; + // } + // } } } \ No newline at end of file