From a9282b9b0af8c110099272406646871f2f39fe51 Mon Sep 17 00:00:00 2001 From: markosteger Date: Thu, 23 Mar 2023 08:58:29 +0100 Subject: [PATCH] Fomr wizzard fix --- .../FormWizardStepExample.razor | 29 +++++++++++ .../ModalDialogExample.razor | 2 +- .../ToggleGlyphButtonExample.razor | 25 +++++++++ .../Pages/Index.razor | 8 +-- .../Classes/FormWizard/FormWizardOptions.cs | 33 ++++++++++++ .../Classes/Modal/ModalOptions.cs | 4 +- .../Components/FormWizard.razor | 41 ++++++++------- .../Components/FormWizard.razor.cs | 51 +++++++++++++++---- .../Components/FormWizardStep.razor.cs | 1 - .../Components/ToggleGlyphButton.razor | 15 ++---- .../Components/ToggleGlyphButton.razor.cs | 42 ++++++--------- 11 files changed, 178 insertions(+), 73 deletions(-) create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor create mode 100644 src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor new file mode 100644 index 0000000..6c7ef7c --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/FormWizardStepExample.razor @@ -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; + +

FORM WIZARD EXAMPLE

+ + + + Step 1 + + + Step2 + + + Step3 + + + Step4 + + + +@code { + FormWizardOptions options = new(false, "Naslednji", "Prejšnji", "Končaj", "Prekliči"); +} \ No newline at end of file diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor index 2263fe3..826f3ed 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor @@ -38,7 +38,7 @@ * */ @
-
Change the number input aand watch the value variable behind the modal change
+
Change the number input and watch the value variable behind the modal change
, diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor new file mode 100644 index 0000000..160a48f --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ToggleGlyphButtonExample.razor @@ -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; + + +

DATE PICKER EXAMPLE

+ + + + TGB + + + +

Toggled: @toggle

+ + +@code { + bool toggle = false; +} \ No newline at end of file diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor index 237f31a..13b2fb3 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -10,10 +10,12 @@

Component Example page

} else { diff --git a/src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs b/src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs new file mode 100644 index 0000000..aa3494b --- /dev/null +++ b/src/Connected.Components/Classes/FormWizard/FormWizardOptions.cs @@ -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; + } +} diff --git a/src/Connected.Components/Classes/Modal/ModalOptions.cs b/src/Connected.Components/Classes/Modal/ModalOptions.cs index 405072d..19fc0bb 100644 --- a/src/Connected.Components/Classes/Modal/ModalOptions.cs +++ b/src/Connected.Components/Classes/Modal/ModalOptions.cs @@ -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; diff --git a/src/Connected.Components/Components/FormWizard.razor b/src/Connected.Components/Components/FormWizard.razor index 7a9ccd8..1e5fbd8 100644 --- a/src/Connected.Components/Components/FormWizard.razor +++ b/src/Connected.Components/Components/FormWizard.razor @@ -1,22 +1,27 @@ - -
-
- @ChildContent -
+@if (loaded) +{ + +
+
+ @ChildContent +
-
- -
- - +
+ +
+ + +
-
-
- @foreach (var step in Steps) - { -
- } -
+
+ @foreach (var step in Steps) + { +
+ } +
- \ No newline at end of file + +} else { +

Loading wizard....

+} \ No newline at end of file diff --git a/src/Connected.Components/Components/FormWizard.razor.cs b/src/Connected.Components/Components/FormWizard.razor.cs index ba28428..aa22eb3 100644 --- a/src/Connected.Components/Components/FormWizard.razor.cs +++ b/src/Connected.Components/Components/FormWizard.razor.cs @@ -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 Steps { get; set; } = new(); + /// + /// Steps of type FormWizardStep + /// + [Parameter] + public bool DisableNavigationOnFinish { get; set; } = false; + /// /// EventCallback for 'Finish' button click /// @@ -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"; + /// + /// Text shown inside the button + /// Options: any string variable + /// Default: string.Empty + /// + [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); } diff --git a/src/Connected.Components/Components/FormWizardStep.razor.cs b/src/Connected.Components/Components/FormWizardStep.razor.cs index f3defdd..af26bf5 100644 --- a/src/Connected.Components/Components/FormWizardStep.razor.cs +++ b/src/Connected.Components/Components/FormWizardStep.razor.cs @@ -71,7 +71,6 @@ public partial class FormWizardStep } } - /// /// Generated class list for button based on user parameters /// diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor b/src/Connected.Components/Components/ToggleGlyphButton.razor index 73de04a..f2e8911 100644 --- a/src/Connected.Components/Components/ToggleGlyphButton.razor +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor @@ -1,21 +1,12 @@ -@inherits Button +@inherits GlyphButton diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs index eceac3e..1174e03 100644 --- a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs @@ -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; - /// - /// Glyph (Icon) inside the button. - /// Options: SVG string --> Icons - /// Default: string.Empty - /// - [Parameter, EditorRequired] - public string Glyph { get; set; } = string.Empty; /// /// Glyph (Icon) inside the button when tge . @@ -31,29 +24,25 @@ public partial class ToggleGlyphButton: Button [Parameter, EditorRequired] public string ToggledGlyph { get; set; } = string.Empty; - /// - /// 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 - /// - [Parameter] - public Position GlyphPosition { get; set; } = Position.Left; - /// /// 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 /// [Parameter] - public Color GlyphColor { get; set; } = Color.Dark; + public Color ToggledGlyphColor { get; set; } = Color.Dark; - /// - /// 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 - /// [Parameter] - public Color ToggledGlyphColor { get; set; } = Color.Dark; + public Color ToggledButtonColor { get; set; } = Color.Success; + + private Color _ButtonColor + { + get + { + if (Toggled) return ToggledButtonColor; + return base.Color; + } + } private string _ShownGlyph { @@ -61,7 +50,7 @@ public partial class ToggleGlyphButton: Button { 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(base.Size)) - .AddClass("btn-" + Helper.GetEnumDescription(base.Color),!base.Outlined) - .AddClass("btn-outline-" + Helper.GetEnumDescription(base.Color), base.Outlined) + .AddClass("btn-" + Helper.GetEnumDescription(_ButtonColor),!base.Outlined) + .AddClass("btn-outline-" + Helper.GetEnumDescription(_ButtonColor), base.Outlined) + .AddClass("wrap") .AddClass(base.Class) .Build(); }