Plan
Description
A component to display a plan
The Plan component displays a complex task with its sub-tasks and overall progress.
Samples
Running plan with partial progress
plan-running-sample.js
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var component = Plan("SCIM user provisioning deep dive")
.HeaderCommands(Button("Update").NoBorder().Rounded())
.AddTask("Collect official SCIM RFCs and specifications from IETF and RFC repositories.", true)
.AddTask("Survey major identity providers' SCIM documentation and authentication methods.", false)
.AddTask("Gather sample SCIM request and response payloads and endpoint patterns.", false)
.AddTask("Identify open-source SCIM implementations and C# libraries with examples.", false)
.AddTask("Compile technical explanation covering endpoints, auth, schemas, and examples.", false)
.FooterMessage("Finalizing details for licenses and attribution...")
.FooterCommands(TextBlock("117 searches").Small().SemiBold())
.Progress(1, 5)
.Stop()
.MaxWidth(800.px());
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}
Completed plan with stop button hidden
plan-completed-sample.js
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var component = Plan("Database Migration Plan")
.AddTask("Backup database", true)
.AddTask("Run schema update", true)
.AddTask("Migrate data", true)
.FooterMessage("Migration complete")
.Progress(100)
.HideStartStopButton()
.MaxWidth(800.px());
component.Render().style.maxWidth = "800px";
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}
Plan with indeterminate progress
plan-indeterminate-sample.js
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var component = Plan("Analyzing Log Files")
.AddTask("Download logs from S3", true)
.AddTask("Parse JSON structure", true)
.AddTask("Find error patterns", false)
.FooterMessage("Scanning file 45 of 200...")
.Indeterminate()
.Start()
.MaxWidth(800.px());
component.Render().style.maxWidth = "800px";
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}