Merge pull request 'features/rewrite/modaldialog' (#15) from features/rewrite/modaldialog into features/rewrite/main

Reviewed-on: #15

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;
+
+<h1 style="text-align:center;">BUTTON EXAMPLE</h1>
+
+<Button OnClick="(()=>TextChange())">Change text default</Button>
+
+<Button OnClick="(()=>TextChange(Hello))">Change text to - Hello my friend</Button>
+
+<p>Text: <h4>@text</h4></p>
+
+@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();
+    }
+
+}

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;
+
+
+<h1 style="text-align:center;">MODAL DIALOG EXAMPLE</h1>
+
+
+<Button OnClick="OpenModalDialog">Open dialog</Button>
+
+<p>Modal result: @test_modal_result</p>
+
+<h4>Value: @value.ToString()</h4>
+
+
+@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 @
+         * 
+         */
+        @<div>
+            <div>Change the number input aand watch the value variable behind the modal change</div>
+            <NumberInput @bind-Value=@value></NumberInput>
+        </div>,
+
+        /*
+         MODAL BUTTONS WITH ACTIONS
+         * 
+         */
+        new List<ModalButton>()
+                {
+                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();
+    }
+}

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -1,49 +1,20 @@
 @page "/"
-@using Connected.Models;
 @using Connected.Components;
+@using Connected.Enums;
+@using Connected.Models.Modal;
+@using Connected.Models;
+@using Connected.Services;
+@using Connected.Utilities;
 
+<h1 style="text-align:center;">Component Example page</h1>
 
-<h1 style="text-align:center;">Component Sandbox</h1>
-
-<Grid>
-    @for (int i = 0; i < 5; i++)
-    {
-        int num = i;
-        <GridRow>
-            <GridRowContent>
-                Fixed content @num.ToString()
-            </GridRowContent>
-            <GridRowContent Collapsable=true>
-                Collapsable content @num.ToString()
-            </GridRowContent>
-        </GridRow>
-    }
-</Grid>
-
-<p>Izbran datum je: @date</p>
-
-<FormWizard Id="Wizard1">
-    <FormWizardStep Name="Step1">
-        Step1
-    </FormWizardStep>
-    <FormWizardStep Name="Step2">
-        Step2
-    </FormWizardStep>
-    <FormWizardStep Name="Step3">
-        Step3
-    </FormWizardStep>
-    <FormWizardStep Name="Step4">
-        Step4
-    </FormWizardStep>
-</FormWizard>
-<DatePicker 
-CloseOnDateSelect=true
-@bind-SelectedDate=@date>
+<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>
+</ul>
 
-</DatePicker>
 
-<p>Selected date is @date.ToString()</p>
 
 @code {
-    DateTime date = DateTime.Today;
+    
 }

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
 {
 	/// <summary>
 	/// URL of the link
-	/// Options: Any valid web page adress
+	/// Options: Any valid URL adress
 	/// Default: string.Empty
 	/// </summary>
 	[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();
 		}

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)

src/Connected.Components/Components/ReturnModal.razor

@@ -0,0 +1,22 @@
+@typeparam ReturnType
+
+@using Connected.Models.Modal;
+@if (Visible)
+{
+    <div class="modal fade show" tabindex="-1">
+        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                        <h3 class="modal-title">@Title</h3>
+                </div>
+                <div class="modal-body">
+                    @ChildContent
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-sm btn-core" @onclick="@(()=>CloseModal())">Zapri</button>
+                    <button type="button" class="btn btn-sm btn-info" @onclick="@(()=>CloseModal(true))">Ok</button>
+                </div>
+            </div>
+        </div>
+    </div>
+}

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<ReturnType>
+{
+	[Parameter]
+	public bool Visible { get; set; } = false;
+
+	[Parameter]
+	public EventCallback<bool> 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<ReturnType> 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;
+	}
+}

src/Connected.Components/Models/Modal/ModalOptions.cs

@@ -5,6 +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;
+	}
 }

src/Connected.Components/Services/ModalDialogService.cs

@@ -1,6 +1,6 @@
-using Connected.Components;
-using Connected.Models.Modal;
+using Connected.Models.Modal;
 using Microsoft.AspNetCore.Components;
+using System.ComponentModel;
 
 namespace Connected.Services;
 public class ModalDialogService
@@ -8,15 +8,22 @@ public class ModalDialogService
 	public event Action<string, RenderFragment, List<ModalButton>, ModalOptions> OnShow;
 	public event Action OnClose;
 
-	public void ShowDialog(string title, RenderFragment content, List<ModalButton> buttons, ModalOptions options)
+	public void ShowDialog(string title, RenderFragment Content, List<ModalButton> 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<ModalButton> buttons, ModalOptions options)
+	public void ShowDialog(string title, MarkupString content, List<ModalButton> 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<ModalButton> buttons)
+	{
+		var body = new RenderFragment(x => x.AddContent(1, content));
+		OnShow?.Invoke(title, body, buttons, new ModalOptions());
 	}
 
 	public void Close()

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