Add ModalService to Boilerplate (#9323)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor

@@ -1,32 +1,13 @@
 @inherits AppComponentBase
 
-<div>
-    <BitModal @bind-IsOpen="isOpen" Blocking Class="root" Classes="@(new() { Content = "content" })">
-        <section>
-            <BitStack Class="stack">
-                <BitStack Horizontal AutoHeight>
-                    <BitText Typography="BitTypography.H5" Color="BitColor.Tertiary">
-                        @title
-                    </BitText>
-
-                    <BitSpacer />
-
-                    <BitButton OnClick="OnCloseClick"
-                               Color="BitColor.Tertiary"
-                               Variant="BitVariant.Text"
-                               IconName="@BitIconName.ChromeClose" />
-                </BitStack>
-
-                <BitText Color="BitColor.Tertiary" Class="body">
-                    @body
-                </BitText>
-
-                <BitStack Alignment="BitAlignment.Center" AutoHeight>
-                    <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
-                        @Localizer[AppStrings.Ok]
-                    </BitButton>
-                </BitStack>
-            </BitStack>
-        </section>
-    </BitModal>
-</div>
+<div class="body">
+    <BitText Color="BitColor.Tertiary">
+        @Body
+    </BitText>
+</div>
+
+<BitStack Alignment="BitAlignment.Center" AutoHeight>
+    <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
+        @Localizer[AppStrings.Ok]
+    </BitButton>
+</BitStack>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor.cs

@@ -2,63 +2,12 @@
 
 public partial class MessageBox
 {
-    private bool isOpen;
-    private string? body;
-    private string? title;
-    private Action? unsubscribe;
-    private bool disposed = false;
+    [Parameter] public string? Body { get; set; }
+    [Parameter] public Action? OnOk { get; set; }
 
-    private TaskCompletionSource<bool>? tcs;
 
-    protected override Task OnInitAsync()
+    private void OnOkClick()
     {
-        unsubscribe = PubSubService.Subscribe(ClientPubSubMessages.SHOW_MESSAGE, async args =>
-        {
-            var data = (MessageBoxData)args!;
-
-            tcs = data.TaskCompletionSource;
-
-            await ShowMessageBox(data.Message, data.Title);
-        });
-
-        return base.OnInitAsync();
-    }
-
-    private async Task ShowMessageBox(string message, string title = "")
-    {
-        await InvokeAsync(() =>
-        {
-            isOpen = true;
-            this.title = title;
-            body = message;
-
-            StateHasChanged();
-        });
-    }
-
-    private async Task OnCloseClick()
-    {
-        isOpen = false;
-        tcs?.SetResult(false);
-    }
-
-    private async Task OnOkClick()
-    {
-        isOpen = false;
-        tcs?.SetResult(true);
-    }
-
-    protected override async ValueTask DisposeAsync(bool disposing)
-    {
-        await base.DisposeAsync(true);
-
-        if (disposed || disposing is false) return;
-
-        tcs?.TrySetResult(false);
-        tcs = null;
-
-        unsubscribe?.Invoke();
-
-        disposed = true;
+        OnOk?.Invoke();
     }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor.scss

@@ -1,41 +1,7 @@
-@import '../../Styles/abstracts/_media-queries.scss';
-
-section {
-    padding: 1rem;
-    min-width: 20rem;
-    max-height: var(--app-height);
-
-    @include lt-md {
-        min-width: unset;
-    }
-}
-
-::deep {
-    .root {
-        width: var(--app-width);
-        height: var(--app-height);
-        top: var(--app-inset-top);
-        left: var(--app-inset-left);
-        right: var(--app-inset-right);
-        bottom: var(--app-inset-bottom);
-    }
-
-    .content {
-        @include lt-md {
-            min-width: 95%;
-            max-width: 95%;
-        }
-    }
-
-    .stack {
-        max-height: calc(var(--app-height) - 3rem);
-    }
-
-    .body {
-        width: 100%;
-        flex-grow: 1;
-        display: flex;
-        overflow: auto;
-        white-space: pre;
-    }
+.body {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    overflow: auto;
+    white-space: pre;
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Modal.razor

@@ -0,0 +1,27 @@
+@inherits AppComponentBase
+
+<div>
+    <BitModal @bind-IsOpen="isOpen" Blocking Class="root">
+        <section>
+            <BitStack Class="stack">
+                <BitStack Horizontal AutoHeight>
+                    <BitText Typography="BitTypography.H5" Color="BitColor.Tertiary">
+                        @title
+                    </BitText>
+
+                    <BitSpacer />
+
+                    <BitButton OnClick="CloseModal"
+                               Color="BitColor.Tertiary"
+                               Variant="BitVariant.Text"
+                               IconName="@BitIconName.ChromeClose" />
+                </BitStack>
+
+                @if (componentType is not null)
+                {
+                    <DynamicComponent Type="componentType" Parameters="componentParameters" />
+                }
+            </BitStack>
+        </section>
+    </BitModal>
+</div>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Modal.razor.cs

@@ -0,0 +1,63 @@
+namespace Boilerplate.Client.Core.Components.Layout;
+
+public partial class Modal
+{
+    private bool isOpen;
+    private string? title;
+    private Type? componentType;
+    private bool disposed = false;
+    private Action? unsubscribeShow;
+    private Action? unsubscribeClose;
+    private IDictionary<string, object>? componentParameters;
+
+    private TaskCompletionSource? tcs;
+
+    protected override Task OnInitAsync()
+    {
+        unsubscribeShow = PubSubService.Subscribe(ClientPubSubMessages.SHOW_MODAL, async args =>
+        {
+            var data = (ModalData)args!;
+
+            tcs = data.TaskCompletionSource;
+
+            await InvokeAsync(() =>
+            {
+                isOpen = true;
+                title = data.Title;
+                componentType = data.ComponentType;
+                componentParameters = data.Parameters;
+
+                StateHasChanged();
+            });
+        });
+
+        unsubscribeClose = PubSubService.Subscribe(ClientPubSubMessages.CLOSE_MODAL, async _ =>
+        {
+            await CloseModal();
+            await InvokeAsync(StateHasChanged);
+        });
+
+        return base.OnInitAsync();
+    }
+
+    private async Task CloseModal()
+    {
+        isOpen = false;
+        tcs?.SetResult();
+    }
+
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        await base.DisposeAsync(disposing);
+
+        if (disposed || disposing is false) return;
+
+        tcs?.TrySetResult();
+        tcs = null;
+
+        unsubscribeShow?.Invoke();
+        unsubscribeClose?.Invoke();
+
+        disposed = true;
+    }
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Modal.razor.scss

@@ -0,0 +1,26 @@
+@import '../../Styles/abstracts/_media-queries.scss';
+
+section {
+    padding: 1rem;
+    min-width: 20rem;
+    max-height: var(--app-height);
+
+    @include lt-md {
+        min-width: unset;
+    }
+}
+
+::deep {
+    .root {
+        width: var(--app-width);
+        height: var(--app-height);
+        top: var(--app-inset-top);
+        left: var(--app-inset-left);
+        right: var(--app-inset-right);
+        bottom: var(--app-inset-bottom);
+    }
+
+    .stack {
+        max-height: calc(var(--app-height) - 3rem);
+    }
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Prompt.razor

@@ -0,0 +1,16 @@
+@inherits AppComponentBase
+
+<div class="body">
+    <BitStack Horizontal=false>
+        <BitText Color="BitColor.Tertiary">
+            @Body
+        </BitText>
+        <BitTextField @bind-Value="value" />
+    </BitStack>
+</div>
+
+<BitStack Alignment="BitAlignment.Center" AutoHeight>
+    <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
+        @Localizer[AppStrings.Ok]
+    </BitButton>
+</BitStack>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Prompt.razor.cs

@@ -0,0 +1,16 @@
+using System.Threading.Tasks;
+
+namespace Boilerplate.Client.Core.Components.Layout;
+
+public partial class Prompt
+{
+    private string? value;
+
+    [Parameter] public string? Body { get; set; }
+    [Parameter] public Action<string?>? OnOk { get; set; }
+
+    private void OnOkClick()
+    {
+        OnOk?.Invoke(value);
+    }
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Prompt.razor.scss

@@ -0,0 +1,7 @@
+.body {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    overflow: auto;
+    white-space: pre;
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor

@@ -44,8 +44,8 @@
     </main>
 </RootContainer>
 
+<Modal />
 <SnackBar />
-<MessageBox />
 <DiagnosticModal />
 
 <JsBridge />

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Extensions/IClientCoreServiceCollectionExtensions.cs

@@ -39,7 +39,9 @@ public static IServiceCollection AddClientCoreProjectServices(this IServiceColle
         // Defining them as singletons would result in them being shared across all users in Blazor Server and during pre-rendering.
         // To address this, we use the AddSessioned extension method.
         // AddSessioned applies AddSingleton in BlazorHybrid and AddScoped in Blazor WebAssembly and Blazor Server, ensuring correct service lifetimes for each environment.
+        services.AddSessioned<ModalService>();
         services.AddSessioned<PubSubService>();
+        services.AddSessioned<PromptService>();
         services.AddSessioned<SnackBarService>();
         services.AddSessioned<MessageBoxService>();
         services.AddSessioned<ILocalHttpServer, NoopLocalHttpServer>();

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/ClientPubSubMessages.cs

@@ -6,7 +6,8 @@ namespace Boilerplate.Client.Core.Services;
 public static partial class ClientPubSubMessages
 {
     public const string SHOW_SNACK = nameof(SHOW_SNACK);
-    public const string SHOW_MESSAGE = nameof(SHOW_MESSAGE);
+    public const string SHOW_MODAL = nameof(SHOW_MODAL);
+    public const string CLOSE_MODAL = nameof(CLOSE_MODAL);
 
     public const string THEME_CHANGED = nameof(THEME_CHANGED);
     public const string OPEN_NAV_PANEL = nameof(OPEN_NAV_PANEL);