Fomr wizzard fix
This commit is contained in:
parent
d6ee4bc164
commit
a9282b9b0a
@ -0,0 +1,29 @@
|
|||||||
|
@page "/formwizard"
|
||||||
|
@using Connected.Classes.FormWizard;
|
||||||
|
@using Connected.Components;
|
||||||
|
@using Connected.Enums;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Models;
|
||||||
|
@using Connected.Services;
|
||||||
|
@using Connected.Utilities;
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">FORM WIZARD EXAMPLE</h1>
|
||||||
|
|
||||||
|
<FormWizard Options="@options">
|
||||||
|
<FormWizardStep>
|
||||||
|
Step 1
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep>
|
||||||
|
Step2
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep>
|
||||||
|
Step3
|
||||||
|
</FormWizardStep>
|
||||||
|
<FormWizardStep>
|
||||||
|
Step4
|
||||||
|
</FormWizardStep>
|
||||||
|
</FormWizard>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
FormWizardOptions options = new(false, "Naslednji", "Prejšnji", "Končaj", "Prekliči");
|
||||||
|
}
|
@ -38,7 +38,7 @@
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
@<div>
|
@<div>
|
||||||
<div>Change the number input aand watch the value variable behind the modal change</div>
|
<div>Change the number input and watch the value variable behind the modal change</div>
|
||||||
<NumberInput @bind-Value=@value></NumberInput>
|
<NumberInput @bind-Value=@value></NumberInput>
|
||||||
</div>,
|
</div>,
|
||||||
|
|
||||||
|
@ -0,0 +1,25 @@
|
|||||||
|
@page "/toggleglyph"
|
||||||
|
@using Connected.Components;
|
||||||
|
@using Connected.Enums;
|
||||||
|
@using Connected.Models.Modal;
|
||||||
|
@using Connected.Models;
|
||||||
|
@using Connected.Services;
|
||||||
|
@using Connected.Utilities;
|
||||||
|
|
||||||
|
@inject ModalDialogService modalDialog;
|
||||||
|
|
||||||
|
|
||||||
|
<h1 style="text-align:center;">DATE PICKER EXAMPLE</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<ToggleGlyphButton Glyph="@Icons.Material.Filled.Close" ToggledGlyph="@Icons.Material.Filled.Check" @bind-Toggled=toggle>
|
||||||
|
TGB
|
||||||
|
</ToggleGlyphButton>
|
||||||
|
|
||||||
|
|
||||||
|
<h4>Toggled: @toggle</h4>
|
||||||
|
|
||||||
|
|
||||||
|
@code {
|
||||||
|
bool toggle = false;
|
||||||
|
}
|
@ -10,10 +10,12 @@
|
|||||||
<h1 style="text-align:center;">Component Example page</h1>
|
<h1 style="text-align:center;">Component Example page</h1>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self" /></li>
|
<li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self" /></li>
|
||||||
<li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
|
<li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
|
||||||
<li><Link Class="m-1" Url="datepicker" Text="Date picker" Target="Target.Self" /></li>
|
<li><Link Class="m-1" Url="datepicker" Text="Date picker" Target="Target.Self" /></li>
|
||||||
<li><Link Class="m-1" Url="datagrid" Text="Data Grid" Target="Target.Self" /></li>
|
<li><Link Class="m-1" Url="datagrid" Text="Data Grid" Target="Target.Self" /></li>
|
||||||
|
<li><Link Class="m-1" Url="toggleglyph" Text="Toggle Glyph Button" Target="Target.Self" /></li>
|
||||||
|
<li><Link Class="m-1" Url="formwizard" Text="Form wizzard" Target="Target.Self" /></li>
|
||||||
</ul>
|
</ul>
|
||||||
} else
|
} else
|
||||||
{
|
{
|
||||||
|
@ -0,0 +1,33 @@
|
|||||||
|
namespace Connected.Classes.FormWizard;
|
||||||
|
public class FormWizardOptions
|
||||||
|
{
|
||||||
|
public bool DisableNavigationOnFinish { get; set; } = false;
|
||||||
|
public string NextButtonText { get; set; } = "Next";
|
||||||
|
public string PreviousButtonText { get; set; } = "Previous";
|
||||||
|
public string FinishButtonText { get; set; } = "Finish";
|
||||||
|
|
||||||
|
public string CancelButtonText { get; set; } = "Cancel";
|
||||||
|
|
||||||
|
public FormWizardOptions(
|
||||||
|
bool DisableNavigationOnFinish=false,
|
||||||
|
string NextButtonText = "Next",
|
||||||
|
string PreviousButtonText = "Previous",
|
||||||
|
string FinishButtonText="Finish",
|
||||||
|
string CancelButtonText="Cancel")
|
||||||
|
{
|
||||||
|
this.DisableNavigationOnFinish = DisableNavigationOnFinish;
|
||||||
|
this.NextButtonText = NextButtonText;
|
||||||
|
this.PreviousButtonText = PreviousButtonText;
|
||||||
|
this.FinishButtonText = FinishButtonText;
|
||||||
|
this.CancelButtonText = CancelButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
public FormWizardOptions(FormWizardOptions options)
|
||||||
|
{
|
||||||
|
DisableNavigationOnFinish = options.DisableNavigationOnFinish;
|
||||||
|
NextButtonText = options.NextButtonText;
|
||||||
|
PreviousButtonText = options.PreviousButtonText;
|
||||||
|
FinishButtonText = options.FinishButtonText;
|
||||||
|
CancelButtonText = options.CancelButtonText;
|
||||||
|
}
|
||||||
|
}
|
@ -10,7 +10,7 @@ public class ModalOptions
|
|||||||
public ModalType Type { get; set; } = ModalType.Default;
|
public ModalType Type { get; set; } = ModalType.Default;
|
||||||
|
|
||||||
public ModalOptions()
|
public ModalOptions()
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|
||||||
public ModalOptions(ModalOptions options)
|
public ModalOptions(ModalOptions options)
|
||||||
@ -21,7 +21,7 @@ public class ModalOptions
|
|||||||
Type = options.Type;
|
Type = options.Type;
|
||||||
}
|
}
|
||||||
|
|
||||||
public ModalOptions(bool disableEscKey=false, bool disableBackdropClick=false, bool noHeader=false, ModalType type=ModalType.Default)
|
public ModalOptions(bool disableEscKey = false, bool disableBackdropClick = false, bool noHeader = false, ModalType type = ModalType.Default)
|
||||||
{
|
{
|
||||||
DisableEscKey = disableEscKey;
|
DisableEscKey = disableEscKey;
|
||||||
DisableBackdropClick = disableBackdropClick;
|
DisableBackdropClick = disableBackdropClick;
|
||||||
|
@ -1,22 +1,27 @@
|
|||||||
<CascadingValue Value="this">
|
@if (loaded)
|
||||||
<section id="@Id" class="@ClassList" style="@StyleList">
|
{
|
||||||
<div class="form-outer ">
|
<CascadingValue Value="this">
|
||||||
@ChildContent
|
<section id="@Id" class="@ClassList" style="@StyleList">
|
||||||
</div>
|
<div class="form-outer ">
|
||||||
|
@ChildContent
|
||||||
<div class="btn-content justify-space-between">
|
|
||||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
|
|
||||||
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dots d-flex justify-center gap-3">
|
<div class="btn-content justify-space-between">
|
||||||
@foreach (var step in Steps)
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@NavigationDisabled" @onclick="CancelClick">@Options.CancelButtonText</button>
|
||||||
{
|
<div class="btn-group">
|
||||||
<div class="dot @step.DotClass"></div>
|
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled"><i class='bx bx-chevron-left'></i>@Options.PreviousButtonText</button>
|
||||||
}
|
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dots d-flex justify-center gap-3">
|
||||||
|
@foreach (var step in Steps)
|
||||||
|
{
|
||||||
|
<div class="dot @step.DotClass"></div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
} else {
|
||||||
|
<p>Loading wizard....</p>
|
||||||
|
}
|
@ -1,6 +1,8 @@
|
|||||||
using Connected.Enums;
|
using Connected.Classes.FormWizard;
|
||||||
|
using Connected.Enums;
|
||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.Extensions.Options;
|
||||||
using System.Reflection.Metadata;
|
using System.Reflection.Metadata;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
@ -21,6 +23,12 @@ public partial class FormWizard
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public List<FormWizardStep> Steps { get; set; } = new();
|
public List<FormWizardStep> Steps { get; set; } = new();
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Steps of type FormWizardStep
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool DisableNavigationOnFinish { get; set; } = false;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// EventCallback for 'Finish' button click
|
/// EventCallback for 'Finish' button click
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -36,13 +44,20 @@ public partial class FormWizard
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public string Id { get; set; } = Guid.NewGuid().ToString();
|
public string Id { get; set; } = Guid.NewGuid().ToString();
|
||||||
|
|
||||||
private string NextBtnText = "Next";
|
/// <summary>
|
||||||
private string PreviousBtnText = "Previous";
|
/// Text shown inside the button
|
||||||
|
/// Options: any string variable
|
||||||
|
/// Default: string.Empty
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public FormWizardOptions Options { get; set; } = new();
|
||||||
|
|
||||||
private bool WizardFinished { get; set; } = false;
|
private bool NavigationDisabled { get; set; } = false;
|
||||||
|
|
||||||
private FinishedState FinishedState { get; set; } = FinishedState.Unfinished;
|
private FinishedState FinishedState { get; set; } = FinishedState.Unfinished;
|
||||||
|
|
||||||
|
private string NextBtnText { get; set; } = "Next";
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int ActiveIndex
|
public int ActiveIndex
|
||||||
{
|
{
|
||||||
@ -101,7 +116,7 @@ public partial class FormWizard
|
|||||||
{
|
{
|
||||||
FinishedState = FinishedState.Finished;
|
FinishedState = FinishedState.Finished;
|
||||||
Steps[ActiveIndex].Completed = true;
|
Steps[ActiveIndex].Completed = true;
|
||||||
WizardFinished = true;
|
if (DisableNavigationOnFinish) NavigationDisabled = true;
|
||||||
await OnFinishedClick.InvokeAsync();
|
await OnFinishedClick.InvokeAsync();
|
||||||
}
|
}
|
||||||
if (FinishedState.Equals(FinishedState.Unfinished))
|
if (FinishedState.Equals(FinishedState.Unfinished))
|
||||||
@ -116,9 +131,9 @@ public partial class FormWizard
|
|||||||
Steps[PreviousIndex].IsPrevious = true;
|
Steps[PreviousIndex].IsPrevious = true;
|
||||||
|
|
||||||
if (ActiveIndex == NextIndex)
|
if (ActiveIndex == NextIndex)
|
||||||
NextBtnText = "Finish";
|
NextBtnText = Options.FinishButtonText;
|
||||||
else
|
else
|
||||||
NextBtnText = "Next";
|
NextBtnText = Options.NextButtonText;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -135,9 +150,9 @@ public partial class FormWizard
|
|||||||
Steps[PreviousIndex].IsPrevious = true;
|
Steps[PreviousIndex].IsPrevious = true;
|
||||||
|
|
||||||
if (ActiveIndex == NextIndex)
|
if (ActiveIndex == NextIndex)
|
||||||
NextBtnText = "Finish";
|
NextBtnText = Options.FinishButtonText;
|
||||||
else
|
else
|
||||||
NextBtnText = "Next";
|
NextBtnText = Options.NextButtonText;
|
||||||
}
|
}
|
||||||
if (ActiveIndex == 0)
|
if (ActiveIndex == 0)
|
||||||
{
|
{
|
||||||
@ -148,6 +163,9 @@ public partial class FormWizard
|
|||||||
|
|
||||||
private async Task CancelClick()
|
private async Task CancelClick()
|
||||||
{
|
{
|
||||||
|
ResetAllChildren(true);
|
||||||
|
ActiveIndex = 0;
|
||||||
|
Steps[0].Active = true;
|
||||||
await OnCancelClick.InvokeAsync();
|
await OnCancelClick.InvokeAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -184,13 +202,14 @@ public partial class FormWizard
|
|||||||
Steps[ChildIndex].IsPrevious = false;
|
Steps[ChildIndex].IsPrevious = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
private void ResetAllChildren()
|
private void ResetAllChildren(bool reset_finished = false)
|
||||||
{
|
{
|
||||||
foreach (var step in Steps)
|
foreach (var step in Steps)
|
||||||
{
|
{
|
||||||
step.Active = false;
|
step.Active = false;
|
||||||
step.IsNext = false;
|
step.IsNext = false;
|
||||||
step.IsPrevious = false;
|
step.IsPrevious = false;
|
||||||
|
if (reset_finished) step.Completed = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -216,11 +235,23 @@ public partial class FormWizard
|
|||||||
await base.OnParametersSetAsync();
|
await base.OnParametersSetAsync();
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
|
private bool loaded = false;
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
loaded = true;
|
||||||
|
await Task.Run(StateHasChanged);
|
||||||
|
}
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
{
|
{
|
||||||
if (firstRender)
|
if (firstRender)
|
||||||
{
|
{
|
||||||
InitializeSteps();
|
InitializeSteps();
|
||||||
|
if (ActiveIndex == NextIndex)
|
||||||
|
NextBtnText = Options.FinishButtonText;
|
||||||
|
else
|
||||||
|
NextBtnText = Options.NextButtonText;
|
||||||
}
|
}
|
||||||
await base.OnAfterRenderAsync(firstRender);
|
await base.OnAfterRenderAsync(firstRender);
|
||||||
}
|
}
|
||||||
|
@ -71,7 +71,6 @@ public partial class FormWizardStep
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Generated class list for button based on user parameters
|
/// Generated class list for button based on user parameters
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
@ -1,21 +1,12 @@
|
|||||||
@inherits Button
|
@inherits GlyphButton
|
||||||
|
|
||||||
<button type="button"
|
<button type="button"
|
||||||
@onclick="@Clicked"
|
@onclick="@Clicked"
|
||||||
disabled=@Disabled
|
disabled=@Disabled
|
||||||
style="@StyleList"
|
style="@StyleList"
|
||||||
class="@ClassList">
|
class="@ClassList">
|
||||||
<div class="@ContentClassList">
|
<div class="@ContentClassList">
|
||||||
<div style="align-items:center">
|
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||||
@if (GlyphPosition == Position.Top)
|
|
||||||
{
|
|
||||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
|
||||||
}
|
|
||||||
@ChildContent
|
@ChildContent
|
||||||
@if (GlyphPosition == Position.Bottom)
|
|
||||||
{
|
|
||||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</button>
|
</button>
|
||||||
|
@ -3,7 +3,7 @@ using Microsoft.AspNetCore.Components;
|
|||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class ToggleGlyphButton: Button
|
public partial class ToggleGlyphButton: GlyphButton
|
||||||
{
|
{
|
||||||
#region Parameters
|
#region Parameters
|
||||||
|
|
||||||
@ -15,13 +15,6 @@ public partial class ToggleGlyphButton: Button
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Toggled { get; set; } = false;
|
public bool Toggled { get; set; } = false;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Glyph (Icon) inside the button.
|
|
||||||
/// Options: SVG string --> Icons
|
|
||||||
/// Default: string.Empty
|
|
||||||
/// </summary>
|
|
||||||
[Parameter, EditorRequired]
|
|
||||||
public string Glyph { get; set; } = string.Empty;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Glyph (Icon) inside the button when tge .
|
/// Glyph (Icon) inside the button when tge .
|
||||||
@ -31,22 +24,6 @@ public partial class ToggleGlyphButton: Button
|
|||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string ToggledGlyph { get; set; } = string.Empty;
|
public string ToggledGlyph { get; set; } = string.Empty;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored
|
|
||||||
/// Options: Position.[left,top,right,bottom]
|
|
||||||
/// Default: Position.left
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Position GlyphPosition { get; set; } = Position.Left;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
|
|
||||||
/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
|
|
||||||
/// Default: Color.Dark
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Color GlyphColor { get; set; } = Color.Dark;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
|
/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
|
||||||
/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
|
/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
|
||||||
@ -55,13 +32,25 @@ public partial class ToggleGlyphButton: Button
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public Color ToggledGlyphColor { get; set; } = Color.Dark;
|
public Color ToggledGlyphColor { get; set; } = Color.Dark;
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public Color ToggledButtonColor { get; set; } = Color.Success;
|
||||||
|
|
||||||
|
private Color _ButtonColor
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
if (Toggled) return ToggledButtonColor;
|
||||||
|
return base.Color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private string _ShownGlyph
|
private string _ShownGlyph
|
||||||
{
|
{
|
||||||
get
|
get
|
||||||
{
|
{
|
||||||
if (Toggled)
|
if (Toggled)
|
||||||
return ToggledGlyph;
|
return ToggledGlyph;
|
||||||
return Glyph;
|
return base.Glyph;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -94,8 +83,9 @@ public partial class ToggleGlyphButton: Button
|
|||||||
{
|
{
|
||||||
return new CssBuilder("btn")
|
return new CssBuilder("btn")
|
||||||
.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
|
.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
|
||||||
.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
|
.AddClass("btn-" + Helper.GetEnumDescription<Color>(_ButtonColor),!base.Outlined)
|
||||||
.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
|
.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(_ButtonColor), base.Outlined)
|
||||||
|
.AddClass("wrap")
|
||||||
.AddClass(base.Class)
|
.AddClass(base.Class)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user