From 125fa85d6e36c3ea7e6529da9fdd791ab9d05f33 Mon Sep 17 00:00:00 2001 From: markosteger Date: Mon, 13 Mar 2023 15:03:57 +0100 Subject: [PATCH 1/2] ReturnModal - modal that returns values --- .../Pages/Index.razor | 62 ++++++---------- .../Components/ReturnModal.razor | 22 ++++++ .../Components/ReturnModal.razor.cs | 71 +++++++++++++++++++ .../Models/Modal/ModalOptions.cs | 2 - .../Models/Modal/ModalResult.cs | 5 ++ .../Services/ModalDialogService.cs | 3 +- 6 files changed, 122 insertions(+), 43 deletions(-) create mode 100644 src/Connected.Components/Components/ReturnModal.razor create mode 100644 src/Connected.Components/Components/ReturnModal.razor.cs create mode 100644 src/Connected.Components/Models/Modal/ModalResult.cs diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor index 9ed0882..e5de230 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -1,49 +1,33 @@ @page "/" -@using Connected.Models; @using Connected.Components; +@using Connected.Models.Modal; +@using Connected.Services; + +@inject ModalDialogService modalDialog;

Component Sandbox

- - @for (int i = 0; i < 5; i++) - { - int num = i; - - - Fixed content @num.ToString() - - - Collapsable content @num.ToString() - - - } - - -

Izbran datum je: @date

- - - - Step1 - - - Step2 - - - Step3 - - - Step4 - - - - - - -

Selected date is @date.ToString()

+ + + + + + + +

Modal value @value.ToString()

+ @code { DateTime date = DateTime.Today; + + int value = 0; + bool ResultDialogShown = false; + + + private void OpenValueDialog() + { + ResultDialogShown = !ResultDialogShown; + StateHasChanged(); + } } \ No newline at end of file diff --git a/src/Connected.Components/Components/ReturnModal.razor b/src/Connected.Components/Components/ReturnModal.razor new file mode 100644 index 0000000..b9498dc --- /dev/null +++ b/src/Connected.Components/Components/ReturnModal.razor @@ -0,0 +1,22 @@ +@typeparam ReturnType + +@using Connected.Models.Modal; +@if (Visible) +{ +
+
+
+
+

@Title

+
+
+ @ChildContent +
+
+ + +
+
+
+
+} \ No newline at end of file diff --git a/src/Connected.Components/Components/ReturnModal.razor.cs b/src/Connected.Components/Components/ReturnModal.razor.cs new file mode 100644 index 0000000..c0c4f11 --- /dev/null +++ b/src/Connected.Components/Components/ReturnModal.razor.cs @@ -0,0 +1,71 @@ +using Connected.Models.Modal; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; + +namespace Connected.Components; +public partial class ReturnModal +{ + [Parameter] + public bool Visible { get; set; } = false; + + [Parameter] + public EventCallback VisibleChanged { get; set; } + + [Parameter] + public string Title { get; set; } = string.Empty; + + [Parameter] + public RenderFragment? ChildContent { get; set; } + protected bool OverlayClickToClose { get; set; } = true; + + private ReturnType initialValue { get; set; } + + [Parameter] + public ReturnType Value { get; set; } = default; + + [Parameter] + public EventCallback ValueChanged { get; set; } + + protected ModalOptions? ModalOptions { get; set; } + + public async Task CloseModal(bool returnResult = false) + { + Visible = false; + VisibleChanged.InvokeAsync(Visible); + Title = ""; + ChildContent = null; + StateHasChanged(); + if (!returnResult) + await ValueChanged.InvokeAsync(initialValue); + else + initialValue = Value; + } + + + public void CheckEscape(KeyboardEventArgs args) + { + if (!ModalOptions.DisableEscKey) + { + var key = args.Key.ToLower(); + if (key.Equals("escape")) + { + CloseModal(); + } + } + } + + public void CloseIfEnabled(MouseEventArgs args) + { + CloseModal(); + } + + public void PreventClose(MouseEventArgs args) + { + OverlayClickToClose = false; + } + + protected override async Task OnInitializedAsync() + { + initialValue = Value; + } +} \ No newline at end of file diff --git a/src/Connected.Components/Models/Modal/ModalOptions.cs b/src/Connected.Components/Models/Modal/ModalOptions.cs index 4f2443f..50c3ae5 100644 --- a/src/Connected.Components/Models/Modal/ModalOptions.cs +++ b/src/Connected.Components/Models/Modal/ModalOptions.cs @@ -5,6 +5,4 @@ public class ModalOptions public bool DisableBackdropClick { get; set; } = false; public bool NoHeader { get; set; } = false; - - } diff --git a/src/Connected.Components/Models/Modal/ModalResult.cs b/src/Connected.Components/Models/Modal/ModalResult.cs new file mode 100644 index 0000000..20eaec8 --- /dev/null +++ b/src/Connected.Components/Models/Modal/ModalResult.cs @@ -0,0 +1,5 @@ +namespace Connected.Models.Modal; +internal class ModalResult +{ + public object Result { get; set; } +} diff --git a/src/Connected.Components/Services/ModalDialogService.cs b/src/Connected.Components/Services/ModalDialogService.cs index 5b988ef..c07bc8b 100644 --- a/src/Connected.Components/Services/ModalDialogService.cs +++ b/src/Connected.Components/Services/ModalDialogService.cs @@ -1,5 +1,4 @@ -using Connected.Components; -using Connected.Models.Modal; +using Connected.Models.Modal; using Microsoft.AspNetCore.Components; namespace Connected.Services; From eea562dde06ce43a2561369a5d902629267dfb8b Mon Sep 17 00:00:00 2001 From: markosteger Date: Wed, 15 Mar 2023 13:39:46 +0100 Subject: [PATCH 2/2] ModalDialog - with example --- ...onnected.Components.Showcase.Runner.csproj | 2 + .../ComponentsExamples/ButtonExample.razor | 28 ++++++ .../ModalDialogExample.razor | 92 +++++++++++++++++++ .../Pages/Index.razor | 31 ++----- .../Components/Link.razor | 2 +- .../Components/Link.razor.cs | 7 +- .../Components/ModalDialog.razor.cs | 1 + .../Models/Modal/ModalOptions.cs | 17 ++++ .../Models/Modal/ModalResult.cs | 5 - .../Services/ModalDialogService.cs | 18 +++- src/Connected.Components/Utilities/Helper.cs | 16 +++- 11 files changed, 183 insertions(+), 36 deletions(-) create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ButtonExample.razor create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor delete mode 100644 src/Connected.Components/Models/Modal/ModalResult.cs diff --git a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj index f6e0064..3d030ec 100644 --- a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj +++ b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj @@ -24,6 +24,8 @@ + + diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ButtonExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ButtonExample.razor new file mode 100644 index 0000000..ad9c628 --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ButtonExample.razor @@ -0,0 +1,28 @@ +@page "/button" +@using Connected.Components; +@using Connected.Enums; +@using Connected.Models.Modal; +@using Connected.Models; +@using Connected.Services; +@using Connected.Utilities; + +

BUTTON EXAMPLE

+ + + + + +

Text:

@text

+ +@code { + string text = "Some random text"; + + string Hello = "Hello my friend"; + + private void TextChange(string new_text="Some random text.. but new") + { + text = new_text; + StateHasChanged(); + } + +} \ 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 new file mode 100644 index 0000000..5d187f9 --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor @@ -0,0 +1,92 @@ +@page "/modal" +@using Connected.Components; +@using Connected.Enums; +@using Connected.Models.Modal; +@using Connected.Models; +@using Connected.Services; +@using Connected.Utilities; + +@inject ModalDialogService modalDialog; + + +

MODAL DIALOG EXAMPLE

+ + + + +

Modal result: @test_modal_result

+ +

Value: @value.ToString()

+ + +@code { + int value = 0; + + string test_modal_result = string.Empty; + + ModalOptions options = new ModalOptions(); + + + public void OpenModalDialog() + { + modalDialog.ShowDialog( + /* + MODAL TITLE + * + */ + "Title", + + /* + MODAL CONTENT !!!starting with @ + * + */ + @
+
Change the number input aand watch the value variable behind the modal change
+ +
, + + /* + MODAL BUTTONS WITH ACTIONS + * + */ + new List() + { + new ModalButton( + new Event(ChangeText, new object[]{"OK clicked"}), //event triggered on button click + "OK", //button text + ModalButtonType.OkButton, //button type: OK, Cancel, Regular + true //close modal on click + ), + new ModalButton( + new Event(ChangeText, new object[]{"Cancel clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects + "Cancel", //button text + ModalButtonType.CancelButton, //button type: OK, Cancel, Regular + true //close modal on click + ), + new ModalButton( + new Event(ChangeText, new object[]{"Regular clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects + "Click me", //button text + ModalButtonType.RegularButton, //button type: OK, Cancel, Regular + true //close modal on click + ) + }, + + /* + MODAL OPTIONS + * + */ + new ModalOptions(false,true,false)); //modal dialog options - optional + } + + private void ChangeValue(int val) + { + value = val; + StateHasChanged(); + } + + public void ChangeText(string some_parameter) + { + test_modal_result = some_parameter; + StateHasChanged(); + } +} \ 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 e5de230..057b2b3 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -1,33 +1,20 @@ @page "/" @using Connected.Components; +@using Connected.Enums; @using Connected.Models.Modal; +@using Connected.Models; @using Connected.Services; +@using Connected.Utilities; -@inject ModalDialogService modalDialog; +

Component Example page

+
    +
    • +
    • +
-

Component Sandbox

- - - - - - - - -

Modal value @value.ToString()

@code { - DateTime date = DateTime.Today; - - int value = 0; - bool ResultDialogShown = false; - - - private void OpenValueDialog() - { - ResultDialogShown = !ResultDialogShown; - StateHasChanged(); - } + } \ No newline at end of file diff --git a/src/Connected.Components/Components/Link.razor b/src/Connected.Components/Components/Link.razor index b4863c4..f07b8c7 100644 --- a/src/Connected.Components/Components/Link.razor +++ b/src/Connected.Components/Components/Link.razor @@ -3,4 +3,4 @@ href="@Url" target="@_target"> @Text - + \ No newline at end of file diff --git a/src/Connected.Components/Components/Link.razor.cs b/src/Connected.Components/Components/Link.razor.cs index dfdd460..ca0a8d7 100644 --- a/src/Connected.Components/Components/Link.razor.cs +++ b/src/Connected.Components/Components/Link.razor.cs @@ -1,13 +1,14 @@ using Connected.Enums; using Connected.Utilities; using Microsoft.AspNetCore.Components; +using static Connected.Colors; namespace Connected.Components; public partial class Link { /// /// URL of the link - /// Options: Any valid web page adress + /// Options: Any valid URL adress /// Default: string.Empty /// [Parameter, EditorRequired] @@ -49,7 +50,9 @@ public partial class Link { get { - return new CssBuilder() + return new CssBuilder("btn") + .AddClass("btn-sm") + .AddClass("btn-link-core") .AddClass(Class) .Build(); } diff --git a/src/Connected.Components/Components/ModalDialog.razor.cs b/src/Connected.Components/Components/ModalDialog.razor.cs index 9c41215..0bc8114 100644 --- a/src/Connected.Components/Components/ModalDialog.razor.cs +++ b/src/Connected.Components/Components/ModalDialog.razor.cs @@ -44,6 +44,7 @@ public partial class ModalDialog : IDisposable StateHasChanged(); } + public void CloseModal(ModalButton? button) { if (button is not null) diff --git a/src/Connected.Components/Models/Modal/ModalOptions.cs b/src/Connected.Components/Models/Modal/ModalOptions.cs index 50c3ae5..efba56e 100644 --- a/src/Connected.Components/Models/Modal/ModalOptions.cs +++ b/src/Connected.Components/Models/Modal/ModalOptions.cs @@ -5,4 +5,21 @@ public class ModalOptions public bool DisableBackdropClick { get; set; } = false; public bool NoHeader { get; set; } = false; + public ModalOptions() + { + } + + public ModalOptions(ModalOptions options) + { + DisableBackdropClick = options.DisableBackdropClick; + NoHeader = options.NoHeader; + DisableEscKey = options.DisableEscKey; + } + + public ModalOptions(bool disableEscKey, bool disableBackdropClick, bool noHeader) + { + DisableEscKey = disableEscKey; + DisableBackdropClick = disableBackdropClick; + NoHeader = noHeader; + } } diff --git a/src/Connected.Components/Models/Modal/ModalResult.cs b/src/Connected.Components/Models/Modal/ModalResult.cs deleted file mode 100644 index 20eaec8..0000000 --- a/src/Connected.Components/Models/Modal/ModalResult.cs +++ /dev/null @@ -1,5 +0,0 @@ -namespace Connected.Models.Modal; -internal class ModalResult -{ - public object Result { get; set; } -} diff --git a/src/Connected.Components/Services/ModalDialogService.cs b/src/Connected.Components/Services/ModalDialogService.cs index c07bc8b..581050b 100644 --- a/src/Connected.Components/Services/ModalDialogService.cs +++ b/src/Connected.Components/Services/ModalDialogService.cs @@ -1,5 +1,6 @@ using Connected.Models.Modal; using Microsoft.AspNetCore.Components; +using System.ComponentModel; namespace Connected.Services; public class ModalDialogService @@ -7,15 +8,22 @@ public class ModalDialogService public event Action, ModalOptions> OnShow; public event Action OnClose; - public void ShowDialog(string title, RenderFragment content, List buttons, ModalOptions options) + public void ShowDialog(string title, RenderFragment Content, List buttons, ModalOptions options) { - OnShow?.Invoke(title, content, buttons, options); + var body = Content; + OnShow?.Invoke(title, body, buttons, options); } - public void ShowDialog(string title, MarkupString contentMarkup, List buttons, ModalOptions options) + public void ShowDialog(string title, MarkupString content, List buttons, ModalOptions options) { - var content = new RenderFragment(x => x.AddContent(1, contentMarkup)); - OnShow?.Invoke(title, content, buttons, options); + var body = new RenderFragment(x => x.AddContent(1, content)); + OnShow?.Invoke(title, body, buttons, options); + } + + public void ShowDialog(string title, MarkupString content, List buttons) + { + var body = new RenderFragment(x => x.AddContent(1, content)); + OnShow?.Invoke(title, body, buttons, new ModalOptions()); } public void Close() diff --git a/src/Connected.Components/Utilities/Helper.cs b/src/Connected.Components/Utilities/Helper.cs index 4771980..ca038bb 100644 --- a/src/Connected.Components/Utilities/Helper.cs +++ b/src/Connected.Components/Utilities/Helper.cs @@ -1,4 +1,5 @@ -using System; +using Microsoft.AspNetCore.Components; +using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; @@ -159,4 +160,17 @@ public static class Helper return false; } } + + public static RenderFragment HtmlString(string raw) + { + return builder => { + builder.AddContent(0, raw); + }; + } + + public static MarkupString HtmlMarkup(string raw) + { + return (MarkupString)raw; + } + }