Update componente BlazorDialog

2026-05-05 11:19:03 +02:00
parent b347b975bc
commit 1936d43a04
6 changed files with 119 additions and 25 deletions
@@ -14,7 +14,7 @@ namespace EgwCoreLib.BlazorTest.Data
            {"TestCalendario", "Test Calendario"},
            {"TestProgress", "Test Progress"},
            {"TestParetoProgress", "Test Pareto ProgressBar"},
-            {"TestDialog", "Test CustomDialog"},
+            {"TestDialog", "Test Custom Dialog"},
            {"TestLoading", "Test Loading"},
            {"TestComponenti", "Test Componenti"},
            {"TestSvgDraw", "Test SVG draw"},
@@ -1,19 +1,22 @@
@page "/TestDialog"

-<h3>Pure Blazor Prompt Test</h3>
-<hr />
+<div class="card">
+    <div class="card-header">
+        <h3>Pure Blazor Prompt Test</h3>
+    </div>
+    <div class="card-body">

-<i class="fa-solid fa-spinner fa-3x fa-spin"></i>
-<hr />

-<button class="btn btn-primary" @onclick="ShowMessage">Show Message</button>
-<button class="btn btn-warning" @onclick="ShowConfirm">Show Confirm</button>
-<button class="btn btn-success" @onclick="ShowPrompt">Show Prompt</button>
+        <button class="btn btn-primary" @onclick="ShowMessage">Show Message</button>
+        <button class="btn btn-warning" @onclick="ShowConfirm">Show Confirm</button>
+        <button class="btn btn-success" @onclick="ShowPrompt">Show Prompt</button>

-<hr />
-<p>@resultMessage</p>
+        <hr />
+        <p>@resultMessage</p>
+    </div>
+</div>

-<BootstrapModal @ref="modal" Title="@cTitle" Message="@cMessage" Mode="@cMode" Placeholder="@cPlaceholder" UserInput="@cUserInput" />
+<BootstrapModal @ref="modal" Title=@cTitle Message=@cMessage Mode=@cMode Placeholder=@cPlaceholder UserInput=@cUserInput Size="BootstrapModal.ModalSize.Normal" UserOptions=@cOpt BigButtons=@cBigBtn TitleCss="bg-secondary bg-opacity-25 bg-gradient" />

@code {
    private BootstrapModal? modal;
@@ -31,7 +34,9 @@
    private string cMessage = "";
    private string cPlaceholder = "";
    private string cUserInput = "";
-    private BootstrapModal.ModalMode cMode = BootstrapModal.ModalMode.Message;
+    private bool cBigBtn = false;
+    private Dictionary<bool, string>? cOpt = null;
+    private BootstrapModal.ModalMode cMode = BootstrapModal.ModalMode.ND;


    private async Task ShowMessage()
@@ -39,6 +44,8 @@
        cTitle = "Information";
        cMessage = "This is a standard message.";
        cMode = BootstrapModal.ModalMode.Message;
+        cOpt = null;
+        cBigBtn = false;

        await modal!.ShowAsync<bool>();
        resultMessage = "Message closed.";
@@ -49,6 +56,10 @@
        cTitle = "Confirm Action";
        cMessage = "Are you sure you want to continue?";
        cMode = BootstrapModal.ModalMode.Confirm;
+        cOpt = new();
+        cOpt.Add(true, "Si");
+        cOpt.Add(false, "No");
+        cBigBtn = true;

        bool confirmed = await modal!.ShowAsync<bool>();
        resultMessage = confirmed ? "User confirmed." : "User cancelled.";
@@ -60,6 +71,8 @@
        cPlaceholder = "Type your name...";
        cUserInput = "";
        cMode = BootstrapModal.ModalMode.Prompt;
+        cOpt = null;
+        cBigBtn = false;

        string? name = await modal!.ShowAsync<string?>();
        resultMessage = name is null ? "User cancelled." : $"Hello, {name}!";
@@ -1,36 +1,34 @@
@using Microsoft.JSInterop
@inject IJSRuntime JS

-<div class="modal fade" id="@ModalId" tabindex="-1" aria-hidden="true">
+<div class="modal @modalCss fade" id="@ModalId" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-top">
        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">@Title</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-                        @onclick="OnCancel"></button>
+            <div class="modal-header py-2 @TitleCss">
+                <div class="modal-title fs-5">@Title</div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick="OnCancel"></button>
            </div>
            <div class="modal-body">
                <p>@Message</p>
-
                @if (Mode == ModalMode.Prompt)
                {
                    <input @bind="UserInput" class="form-control" placeholder="@Placeholder" />
                }
            </div>
-            <div class="modal-footer">
+            <div class="modal-footer py-1 d-flex gap-2 @btnCss">
                @if (Mode == ModalMode.Message)
                {
-                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @onclick="OnOk">OK</button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @onclick="OnOk">@(CurrOptions[true])</button>
                }
                else if (Mode == ModalMode.Confirm)
                {
-                    <button type="button" class="btn btn-primary" @onclick="OnConfirm">Yes</button>
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="OnCancel">No</button>
+                    <button type="button" class="btn btn-primary" @onclick="OnConfirm">@(CurrOptions[true])</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="OnCancel">@(CurrOptions[false])</button>
                }
                else if (Mode == ModalMode.Prompt)
                {
-                    <button type="button" class="btn btn-primary" @onclick="OnPromptOk">OK</button>
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="OnCancel">Cancel</button>
+                    <button type="button" class="btn btn-primary" @onclick="OnPromptOk">@(CurrOptions[true])</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="OnCancel">@(CurrOptions[false])</button>
                }
            </div>
        </div>
@@ -53,9 +51,22 @@
    [Parameter]
    public string Placeholder { get; set; } = "";

+    [Parameter]
+    public Dictionary<bool, string> UserOptions { get; set; } = new();
+
+
    [Parameter]
    public ModalMode Mode { get; set; } = ModalMode.Message;

+    [Parameter]
+    public ModalSize Size { get; set; } = ModalSize.Normal;
+
+    [Parameter]
+    public bool BigButtons { get; set; } = false;
+
+    [Parameter]
+    public string TitleCss { get; set; } = "bg-secondary bg-opacity-25 bg-gradient";
+
    /// <summary>
    /// Mostra la modale ed aspetta risultato utente
    /// </summary>
@@ -71,6 +82,43 @@
        return (T)result;
    }

+    protected override void OnParametersSet()
+    {
+        // fix opzioni standard... SE HO MODE...
+        if (!Mode.Equals(lastMode))
+        {
+            lastMode = Mode;
+            if (UserOptions != null && UserOptions.Count > 0)
+            {
+                CurrOptions = UserOptions;
+            }
+            else
+            {
+                CurrOptions = new();
+                switch (Mode)
+                {
+                    case ModalMode.Confirm:
+                        CurrOptions.Add(true, "Yes");
+                        CurrOptions.Add(false, "No");
+                        break;
+                    case ModalMode.Message:
+                        CurrOptions.Add(true, "Ok");
+                        break;
+                    case ModalMode.Prompt:
+                        CurrOptions.Add(true, "Ok");
+                        CurrOptions.Add(false, "Cancel");
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        // base.OnParametersSet();
+    }
+
+    private Dictionary<bool, string> CurrOptions { get; set; } = new();
+    private ModalMode lastMode { get; set; } = ModalMode.ND;
+
    private async Task OnOk()
    {
        await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
@@ -100,13 +148,39 @@
            tcs?.TrySetResult(null);
    }

+    private string modalCss
+    {
+        get
+        {
+            string answ = "";
+            if (Size != ModalSize.Normal)
+            {
+                answ = Size == ModalSize.Small ? "modal-sm" : "modal-lg";
+            }
+            return answ;
+        }
+    }
+
+    private string btnCss => BigButtons ? "equal-buttons" : "";
+
    /// <summary>
    /// Modalità display componente
    /// </summary>
    public enum ModalMode
    {
+        ND,
        Message,
        Confirm,
        Prompt
    }
+
+    /// <summary>
+    /// Dimensione modale
+    /// </summary>
+    public enum ModalSize
+    {
+        Small,
+        Normal,
+        Large
+    }
 }
@@ -1,3 +1,7 @@
 .modal-dialog-top {
  margin-top: 1rem;
+}
+.equal-buttons .btn {
+  flex: 1 1 0;
+  /* Equal width */
 }
@@ -1,3 +1,6 @@
 .modal-dialog-top {
    margin-top: 1rem;
 }
+.equal-buttons .btn {
+    flex: 1 1 0; /* Equal width */
+}
@@ -1 +1 @@
-.modal-dialog-top{margin-top:1rem;}
+.modal-dialog-top{margin-top:1rem;}.equal-buttons .btn{flex:1 1 0;}