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>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>
|
||||
</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>
|
||||
|
||||
<ul>
|
||||
<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="datepicker" Text="Date picker" 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="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="toggleglyph" Text="Toggle Glyph Button" Target="Target.Self" /></li>
|
||||
<li><Link Class="m-1" Url="formwizard" Text="Form wizzard" Target="Target.Self" /></li>
|
||||
</ul>
|
||||
} 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 ModalOptions()
|
||||
{
|
||||
{
|
||||
}
|
||||
|
||||
public ModalOptions(ModalOptions options)
|
||||
@ -21,7 +21,7 @@ public class ModalOptions
|
||||
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;
|
||||
DisableBackdropClick = disableBackdropClick;
|
||||
|
@ -1,22 +1,27 @@
|
||||
<CascadingValue Value="this">
|
||||
<section id="@Id" class="@ClassList" style="@StyleList">
|
||||
<div class="form-outer ">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@if (loaded)
|
||||
{
|
||||
<CascadingValue Value="this">
|
||||
<section id="@Id" class="@ClassList" style="@StyleList">
|
||||
<div class="form-outer ">
|
||||
@ChildContent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dots d-flex justify-center gap-3">
|
||||
@foreach (var step in Steps)
|
||||
{
|
||||
<div class="dot @step.DotClass"></div>
|
||||
}
|
||||
</div>
|
||||
<div class="btn-content justify-space-between">
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@NavigationDisabled" @onclick="CancelClick">@Options.CancelButtonText</button>
|
||||
<div class="btn-group">
|
||||
<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 class="dots d-flex justify-center gap-3">
|
||||
@foreach (var step in Steps)
|
||||
{
|
||||
<div class="dot @step.DotClass"></div>
|
||||
}
|
||||
</div>
|
||||
</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 Microsoft.AspNetCore.Components;
|
||||
using Microsoft.Extensions.Options;
|
||||
using System.Reflection.Metadata;
|
||||
|
||||
namespace Connected.Components;
|
||||
@ -21,6 +23,12 @@ public partial class FormWizard
|
||||
[Parameter]
|
||||
public List<FormWizardStep> Steps { get; set; } = new();
|
||||
|
||||
/// <summary>
|
||||
/// Steps of type FormWizardStep
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool DisableNavigationOnFinish { get; set; } = false;
|
||||
|
||||
/// <summary>
|
||||
/// EventCallback for 'Finish' button click
|
||||
/// </summary>
|
||||
@ -36,13 +44,20 @@ public partial class FormWizard
|
||||
[Parameter]
|
||||
public string Id { get; set; } = Guid.NewGuid().ToString();
|
||||
|
||||
private string NextBtnText = "Next";
|
||||
private string PreviousBtnText = "Previous";
|
||||
/// <summary>
|
||||
/// 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 string NextBtnText { get; set; } = "Next";
|
||||
|
||||
[Parameter]
|
||||
public int ActiveIndex
|
||||
{
|
||||
@ -101,7 +116,7 @@ public partial class FormWizard
|
||||
{
|
||||
FinishedState = FinishedState.Finished;
|
||||
Steps[ActiveIndex].Completed = true;
|
||||
WizardFinished = true;
|
||||
if (DisableNavigationOnFinish) NavigationDisabled = true;
|
||||
await OnFinishedClick.InvokeAsync();
|
||||
}
|
||||
if (FinishedState.Equals(FinishedState.Unfinished))
|
||||
@ -116,9 +131,9 @@ public partial class FormWizard
|
||||
Steps[PreviousIndex].IsPrevious = true;
|
||||
|
||||
if (ActiveIndex == NextIndex)
|
||||
NextBtnText = "Finish";
|
||||
NextBtnText = Options.FinishButtonText;
|
||||
else
|
||||
NextBtnText = "Next";
|
||||
NextBtnText = Options.NextButtonText;
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,9 +150,9 @@ public partial class FormWizard
|
||||
Steps[PreviousIndex].IsPrevious = true;
|
||||
|
||||
if (ActiveIndex == NextIndex)
|
||||
NextBtnText = "Finish";
|
||||
NextBtnText = Options.FinishButtonText;
|
||||
else
|
||||
NextBtnText = "Next";
|
||||
NextBtnText = Options.NextButtonText;
|
||||
}
|
||||
if (ActiveIndex == 0)
|
||||
{
|
||||
@ -148,6 +163,9 @@ public partial class FormWizard
|
||||
|
||||
private async Task CancelClick()
|
||||
{
|
||||
ResetAllChildren(true);
|
||||
ActiveIndex = 0;
|
||||
Steps[0].Active = true;
|
||||
await OnCancelClick.InvokeAsync();
|
||||
}
|
||||
|
||||
@ -184,13 +202,14 @@ public partial class FormWizard
|
||||
Steps[ChildIndex].IsPrevious = false;
|
||||
}
|
||||
|
||||
private void ResetAllChildren()
|
||||
private void ResetAllChildren(bool reset_finished = false)
|
||||
{
|
||||
foreach (var step in Steps)
|
||||
{
|
||||
step.Active = false;
|
||||
step.IsNext = false;
|
||||
step.IsPrevious = false;
|
||||
if (reset_finished) step.Completed = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -216,11 +235,23 @@ public partial class FormWizard
|
||||
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)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
InitializeSteps();
|
||||
if (ActiveIndex == NextIndex)
|
||||
NextBtnText = Options.FinishButtonText;
|
||||
else
|
||||
NextBtnText = Options.NextButtonText;
|
||||
}
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
}
|
||||
|
@ -71,7 +71,6 @@ public partial class FormWizardStep
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// Generated class list for button based on user parameters
|
||||
/// </summary>
|
||||
|
@ -1,21 +1,12 @@
|
||||
@inherits Button
|
||||
@inherits GlyphButton
|
||||
|
||||
<button type="button"
|
||||
@onclick="@Clicked"
|
||||
disabled=@Disabled
|
||||
style="@StyleList"
|
||||
class="@ClassList">
|
||||
<div class="@ContentClassList">
|
||||
<div style="align-items:center">
|
||||
@if (GlyphPosition == Position.Top)
|
||||
{
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
}
|
||||
<div class="@ContentClassList">
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
@ChildContent
|
||||
@if (GlyphPosition == Position.Bottom)
|
||||
{
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
@ -3,7 +3,7 @@ using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class ToggleGlyphButton: Button
|
||||
public partial class ToggleGlyphButton: GlyphButton
|
||||
{
|
||||
#region Parameters
|
||||
|
||||
@ -15,13 +15,6 @@ public partial class ToggleGlyphButton: Button
|
||||
[Parameter]
|
||||
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>
|
||||
/// Glyph (Icon) inside the button when tge .
|
||||
@ -31,22 +24,6 @@ public partial class ToggleGlyphButton: Button
|
||||
[Parameter, EditorRequired]
|
||||
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>
|
||||
/// 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]
|
||||
@ -55,13 +32,25 @@ public partial class ToggleGlyphButton: Button
|
||||
[Parameter]
|
||||
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
|
||||
{
|
||||
get
|
||||
{
|
||||
if (Toggled)
|
||||
return ToggledGlyph;
|
||||
return Glyph;
|
||||
return base.Glyph;
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,8 +83,9 @@ public partial class ToggleGlyphButton: Button
|
||||
{
|
||||
return new CssBuilder("btn")
|
||||
.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
|
||||
.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
|
||||
.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
|
||||
.AddClass("btn-" + Helper.GetEnumDescription<Color>(_ButtonColor),!base.Outlined)
|
||||
.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(_ButtonColor), base.Outlined)
|
||||
.AddClass("wrap")
|
||||
.AddClass(base.Class)
|
||||
.Build();
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user