From 7fad97a9522d6def452cf4dd28f95a716f2db14e Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Fri, 11 Dec 2020 15:06:03 +0100
Subject: [PATCH] Improve pagination + icons

---
 .../Icons/Activity.razor                        |  4 ++++
 .../Icons/Database.razor                        |  4 ++++
 .../Icons/Document.razor                        |  4 ++++
 .../ElsaDashboard.Application/Icons/Home.razor  |  4 ++++
 .../ElsaDashboard.Application/Icons/Icon.cs     | 17 +++++++++++++++++
 .../Icons/PlayCircle.razor                      |  4 ++++
 .../Icons/Squares.razor                         |  8 ++++++++
 .../Models/MenuItem.cs                          |  7 ++++---
 .../Shared/NavMenu.razor                        |  8 ++------
 .../Shared/NavMenu.razor.cs                     | 14 +++++++++-----
 .../Shared/Pager.razor                          |  8 ++++++--
 .../Shared/Pager.razor.cs                       | 15 ++++++++++++++-
 12 files changed, 80 insertions(+), 17 deletions(-)
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Activity.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Database.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Document.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Home.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Icon.cs
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/PlayCircle.razor
 create mode 100644 src/dashboards/blazor/ElsaDashboard.Application/Icons/Squares.razor

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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke="none" d="M0 0h24v24H0z"/> <polyline points="21 12 17 12 14 20 10 4 7 12 3 12"/>
+</svg>
\ 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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <ellipse cx="12" cy="5" rx="9" ry="3"/> <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/> <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+</svg>
\ 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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+</svg>
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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
+</svg>
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<T>(string cssClass) where T : Icon =>
+            builder =>
+            {
+                builder.OpenComponent<T>(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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <circle cx="12" cy="12" r="10"/> <polygon points="10 8 16 12 10 16 10 8"/>
+</svg>
\ 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
+<svg class="@CssClass" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke="none" d="M0 0h24v24H0z"/>
+    <rect x="4" y="4" width="6" height="6" rx="1"/>
+    <rect x="14" y="4" width="6" height="6" rx="1"/>
+    <rect x="4" y="14" width="6" height="6" rx="1"/>
+    <rect x="14" y="14" width="6" height="6" rx="1"/>
+</svg>
\ 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";
                             <NavLink Match="@menuItem.Match" href="@menuItem.Url" class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition ease-in-out duration-150" ActiveClass="@activeClass">
-                                <svg class="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" x-description="Heroicon name: home" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
-                                </svg>
+                                @menuItem.Icon
                                 @menuItem.Text
                             </NavLink>                        }
                     </div>
@@ -63,9 +61,7 @@
                     {
                         const string activeClass = "text-gray-900 bg-gray-200 focus:bg-gray-50";
                         <NavLink Match="@menuItem.Match" href="@menuItem.Url" class="group flex items-center px-2 py-2 text-sm leading-5 font-medium rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition ease-in-out duration-150" ActiveClass="@activeClass">
-                            <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-600 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="@menuItem.Icon"></path>
-                            </svg>
+                            @menuItem.Icon
                             @menuItem.Text
                         </NavLink>
                     }
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<Home>(), NavLinkMatch.All),
+                new MenuItem("Workflow Registry", "workflow-registry", GetIcon<Squares>(), NavLinkMatch.Prefix),
+                new MenuItem("Workflow Instances", "workflow-instances", GetIcon<PlayCircle>(), NavLinkMatch.Prefix),
+                new MenuItem("Workflow Definitions", "workflow-definitions", GetIcon<Database>(), NavLinkMatch.Prefix),
+                new MenuItem("Composite Activities", "composite-activities", GetIcon<Icons.Activity>(), NavLinkMatch.Prefix),
             };
         }
 
         public IEnumerable<MenuItem> MenuItems { get; set; }
+
+        private RenderFragment GetIcon<T>() where T : Icon => Icon.Render<T>("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)
                     {
-                        <span class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium bg-blue-600 text-white">
+                        <span class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium bg-blue-600 text-white @leftRoundedClass @rightRoundedClass">
                             @(i + 1)
                         </span>
                     }
                     else
                     {
-                        <a href="workflow-instances?page=@(i)&pageSize=@PageSize" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        <a href="workflow-instances?page=@(i)&pageSize=@PageSize" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 @leftRoundedClass">
                             @(i + 1)
                         </a>
                     }
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