Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fomr wizzard fix

Browse Source
This commit is contained in:
markosteger 2023-03-23 08:58:29 +01:00
parent d6ee4bc164
commit a9282b9b0a
11 changed files with 180 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor Normal file
View File

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

2
src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor
View File

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

25
src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor Normal file
View File

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

8
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

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

33
src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs Normal file
View File

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

4
src/Connected.Components/Classes/Modal/ModalOptions.cs
View File

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

43
src/Connected.Components/Components/FormWizard.razor
View File

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

51
src/Connected.Components/Components/FormWizard.razor.cs
View File

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

1
src/Connected.Components/Components/FormWizardStep.razor.cs
View File

@ -71,7 +71,6 @@ public partial class FormWizardStep
}
}
/// <summary>
/// Generated class list for button based on user parameters
/// </summary>

15
src/Connected.Components/Components/ToggleGlyphButton.razor
View File

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

44
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
View File

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