SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Improve pagination + icons

Browse source
This commit is contained in:
Sipke Schoorstra 2020-12-11 15:06:03 +01:00
parent 80d33b0ab2
commit 7fad97a952
12 changed files with 80 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/dashboards/blazor/ElsaDashboard.Application/Icons/Activity.razor Normal file
View file

@ -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>

4
src/dashboards/blazor/ElsaDashboard.Application/Icons/Database.razor Normal file
View file

@ -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>

4
src/dashboards/blazor/ElsaDashboard.Application/Icons/Document.razor Normal file
View file

@ -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>

4
src/dashboards/blazor/ElsaDashboard.Application/Icons/Home.razor Normal file
View file

@ -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>

17
src/dashboards/blazor/ElsaDashboard.Application/Icons/Icon.cs Normal file
View file

@ -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();
};
}
}

4
src/dashboards/blazor/ElsaDashboard.Application/Icons/PlayCircle.razor Normal file
View file

@ -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>

8
src/dashboards/blazor/ElsaDashboard.Application/Icons/Squares.razor Normal file
View file

@ -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>

7
src/dashboards/blazor/ElsaDashboard.Application/Models/MenuItem.cs
View file

@ -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;
}

8
src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor
View file

@ -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>
}

14
src/dashboards/blazor/ElsaDashboard.Application/Shared/NavMenu.razor.cs
View file

@ -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");
}
}

8
src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor
View file

@ -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>
}

15
src/dashboards/blazor/ElsaDashboard.Application/Shared/Pager.razor.cs
View file

@ -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;
// }
// }
}
}