From 550d6081045983ab7bd13649f23a94bab284e152 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 6 Mar 2023 10:49:00 +0100 Subject: [PATCH] FormWizard - working example --- .../Pages/Index.razor | 57 ++--- .../Components/Chip.razor | 5 + .../Components/Chip.razor.cs | 4 + .../Components/FormWizard.razor | 23 ++ .../Components/FormWizard.razor.cs | 229 ++++++++++++++++++ .../Components/FormWizardStep.razor | 3 + .../Components/FormWizardStep.razor.cs | 99 ++++++++ .../Components/ToggleGlyphButton.razor.cs | 25 +- .../Enums/FinishedState.cs | 10 + 9 files changed, 393 insertions(+), 62 deletions(-) create mode 100644 src/Connected.Components/Components/Chip.razor create mode 100644 src/Connected.Components/Components/Chip.razor.cs create mode 100644 src/Connected.Components/Components/FormWizard.razor create mode 100644 src/Connected.Components/Components/FormWizard.razor.cs create mode 100644 src/Connected.Components/Components/FormWizardStep.razor create mode 100644 src/Connected.Components/Components/FormWizardStep.razor.cs create mode 100644 src/Connected.Components/Enums/FinishedState.cs diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor index 7df32d4..8522ce8 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -1,49 +1,30 @@ @page "/" @using Connected.Models; -

Component Sandbox

- - -

SelectedValue: @SelectedValue.ToString()

- - - - - - - - - - - - - - - -@code { - - int SelectedValue; +

Component Sandbox

- List items; + + + Step1 + + + Step2 + + + Step3 + + + Step4 + + - private void FillItemsList() - { - if (items is null) items = new(); - Random random = new Random(DateTime.Now.Millisecond); + - for (int i = 0; i < 10; i++) - { - int item = random.Next(); - items.Add(item); - } - StateHasChanged(); - } +@value - protected override async Task OnInitializedAsync() - { - FillItemsList(); - } +@code { + public string value = string.Empty; } \ No newline at end of file diff --git a/src/Connected.Components/Components/Chip.razor b/src/Connected.Components/Components/Chip.razor new file mode 100644 index 0000000..6e208e2 --- /dev/null +++ b/src/Connected.Components/Components/Chip.razor @@ -0,0 +1,5 @@ +

Chip

+ +@code { + +} diff --git a/src/Connected.Components/Components/Chip.razor.cs b/src/Connected.Components/Components/Chip.razor.cs new file mode 100644 index 0000000..ff1297f --- /dev/null +++ b/src/Connected.Components/Components/Chip.razor.cs @@ -0,0 +1,4 @@ +namespace Connected.Components; +public partial class Chip +{ +} diff --git a/src/Connected.Components/Components/FormWizard.razor b/src/Connected.Components/Components/FormWizard.razor new file mode 100644 index 0000000..b0ef625 --- /dev/null +++ b/src/Connected.Components/Components/FormWizard.razor @@ -0,0 +1,23 @@ + + +
+
+ @ChildContent +
+ +
+ +
+ + +
+
+ +
+ @foreach (var step in Steps) + { +
+ } +
+
+ \ No newline at end of file diff --git a/src/Connected.Components/Components/FormWizard.razor.cs b/src/Connected.Components/Components/FormWizard.razor.cs new file mode 100644 index 0000000..84e95fc --- /dev/null +++ b/src/Connected.Components/Components/FormWizard.razor.cs @@ -0,0 +1,229 @@ +using Connected.Enums; +using Connected.Utilities; +using Microsoft.AspNetCore.Components; +using System.ComponentModel.DataAnnotations; +using System.Text; + +namespace Connected.Components; +public partial class FormWizard +{ + + /// + /// Text shown inside the button + /// Options: any string variable + /// Default: string.Empty + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + [Parameter] + public List Steps { get; set; } = new(); + + [Parameter, EditorRequired] + public string Id { get; set; } + + private string NextBtnText = "Next"; + private string PreviousBtnText = "Previous"; + + private bool WizardFinished { get; set; } = false; + + private FinishedState FinishedState { get; set; } = FinishedState.Unfinished; + + [Parameter] + public int ActiveIndex + { + get + { + return _activeStepIndex; + } + set + { + if (value <= StepCount || value >= 0) //if value is greater than total StepCount or less than 0 first element becomes the active alament + { + _activeStepIndex = value; + } + } + } + private int _activeStepIndex = 0; + + private int PreviousIndex + { + get + { + if (ActiveIndex>0) + return ActiveIndex - 1; + return ActiveIndex; + } + } + + private int NextIndex + { + get + { + try + { + if (ActiveIndex < StepCount-1) + return ActiveIndex + 1; + return ActiveIndex; + } catch + { + return ActiveIndex; + } + } + } + + private int StepCount + { + get + { + return Steps.Count; + } + } + + private void NextSlide() + { + if (NextBtnText.ToLower().Equals("finish")) + { + FinishedState = FinishedState.Finished; + Steps[ActiveIndex].Completed = true; + WizardFinished = true; + } + if (FinishedState.Equals(FinishedState.Unfinished)) + { + /*if (ActiveIndex < StepCount) + { + Steps[ActiveIndex].Completed = true; + ResetValuesForChild(ActiveIndex); + if (ActiveIndex < StepCount) + ResetValuesForChild(NextIndex); + if (ActiveIndex > 0) + ResetValuesForChild(PreviousIndex); + + ActiveIndex = NextIndex; + Steps[ActiveIndex].Active = true; + Steps[PreviousIndex].IsPrevious = true; + if (ActiveIndex != NextIndex) + Steps[NextIndex].IsNext = true; + else Steps[NextIndex].IsNext = false; + + if (ActiveIndex == NextIndex) + NextBtnText = "Finish"; + else + NextBtnText = "Next"; + StateHasChanged(); + }*/ + Steps[ActiveIndex].Completed = true; + Steps[ActiveIndex].Active = false; + Steps[PreviousIndex].IsPrevious = false; + Steps[ActiveIndex].IsNext = false; + ActiveIndex = NextIndex; + Steps[ActiveIndex].IsNext = true; + Steps[ActiveIndex].Active = true; + Steps[PreviousIndex].IsPrevious = true; + + if (ActiveIndex == NextIndex) + NextBtnText = "Finish"; + else + NextBtnText = "Next"; + } + } + + private void PreviousSlide() + { + if (ActiveIndex > 0) + { + //Steps[ActiveIndex].Completed = true; + Steps[ActiveIndex].Active = false; + Steps[PreviousIndex].IsPrevious = false; + Steps[ActiveIndex].IsNext = false; + ActiveIndex = PreviousIndex; + Steps[ActiveIndex].IsNext = true; + Steps[ActiveIndex].Active = true; + Steps[PreviousIndex].IsPrevious = true; + + if (ActiveIndex == NextIndex) + NextBtnText = "Finish"; + else + NextBtnText = "Next"; + } + if (ActiveIndex==0) + { + ResetAllChildren(); + Steps[ActiveIndex].Active = true; + } + } + + [Parameter] + public string Class { get; set; } = string.Empty; + + private string ClassList + { + get + { + return new CssBuilder("form-wizard") + .AddClass(Class) + .Build(); + } + } + + [Parameter] + public string Style { get; set; } = string.Empty; + + private string StyleList + { + get + { + return new StyleBuilder() + .AddStyle(Style) + .Build(); + } + } + + private void ResetValuesForChild(int ChildIndex) + { + Steps[ChildIndex].Active = false; + Steps[ChildIndex].IsNext = false; + Steps[ChildIndex].IsPrevious = false; + } + + private void ResetAllChildren() + { + foreach (var step in Steps) + { + step.Active = false; + step.IsNext = false; + step.IsPrevious = false; + } + } + + private void InitializeSteps() + { + ResetAllChildren(); + Steps[ActiveIndex].Active = true; + + if (ActiveIndex!=0) + { + Steps[ActiveIndex].IsNext = true; + Steps[PreviousIndex].IsPrevious= true; + } + StateHasChanged(); + } + + protected override async Task OnParametersSetAsync() + { + if (Steps is not null) + Steps.Clear(); + + await base.OnParametersSetAsync(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + InitializeSteps(); + } + await base.OnAfterRenderAsync(firstRender); + } + +} diff --git a/src/Connected.Components/Components/FormWizardStep.razor b/src/Connected.Components/Components/FormWizardStep.razor new file mode 100644 index 0000000..cb57eec --- /dev/null +++ b/src/Connected.Components/Components/FormWizardStep.razor @@ -0,0 +1,3 @@ +
+ @ChildContent +
diff --git a/src/Connected.Components/Components/FormWizardStep.razor.cs b/src/Connected.Components/Components/FormWizardStep.razor.cs new file mode 100644 index 0000000..2c64912 --- /dev/null +++ b/src/Connected.Components/Components/FormWizardStep.razor.cs @@ -0,0 +1,99 @@ +using Connected.Utilities; +using Microsoft.AspNetCore.Components; + +namespace Connected.Components; +public partial class FormWizardStep +{ + #region Parameters + + [CascadingParameter] + public FormWizard Parent { get; set; } + + [Parameter, EditorRequired] + public string Name { get; set; } + + /// + /// Text shown inside the button + /// Options: any string variable + /// Default: string.Empty + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// User defined custom class added on top of default generated classes + /// Options: any user defined string with class names divided by space + /// Default: string.Empty + /// + [Parameter] + public string Class { get; set; } = string.Empty; + + /// + /// User defined custom style + /// Options: any valid CSS style + /// Default: string.Empty + /// + [Parameter] + public string Style { get; set; } = string.Empty; + + public bool Active { get; set; } = false; + public bool IsNext { get; set; } = false; + public bool IsPrevious { get; set; } = false; + public bool Completed { get; set; } = false; + + public string DotClass + { + get + { + return new CssBuilder("dot") + .AddClass("completed",Completed) + .AddClass("next", Active) + .Build(); + } + } + + #endregion + + + #region Styling + + public string StyleList + { + get + { + return new StyleBuilder() + .AddStyle("display","none", (!Active && !IsNext && !IsPrevious)) //Workarround for more than 2 steps where steps didnt hide after + .AddStyle(Style) + .Build(); + } + } + + + /// + /// Generated class list for button based on user parameters + /// + public string ClassList + { + get + { + return new CssBuilder("form-step") + .AddClass("next", IsNext) + .AddClass("previous", IsPrevious) + .AddClass(Class) + .Build(); + } + } + + #endregion + + #region Lifecycle + + + protected override async Task OnInitializedAsync() + { + Parent.Steps.Add(this); + await base.OnInitializedAsync(); + } + + #endregion +} \ No newline at end of file diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs index e8349b0..af86160 100644 --- a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs @@ -75,21 +75,11 @@ public partial class ToggleGlyphButton: Button #region Styling - public string StyleList - { - get - { - return new StyleBuilder() - .AddStyle(base.Style) - .Build(); - } - } - /// /// Generated class list for button based on user parameters /// - public string ClassList + public new string ClassList { get { @@ -102,19 +92,6 @@ public partial class ToggleGlyphButton: Button } } - /// - /// Generated class list for button based on user parameters - /// - public string ContentClassList - { - get - { - return new CssBuilder("") - .AddClass(base.ContentClass) - .Build(); - } - } - #endregion } diff --git a/src/Connected.Components/Enums/FinishedState.cs b/src/Connected.Components/Enums/FinishedState.cs new file mode 100644 index 0000000..5a4b44e --- /dev/null +++ b/src/Connected.Components/Enums/FinishedState.cs @@ -0,0 +1,10 @@ +using System.ComponentModel; + +namespace Connected.Enums; +public enum FinishedState +{ + [Description("unfinished")] + Unfinished, + [Description("finished")] + Finished +}