egwcorelib/EgwCoreLib.Razor/BootstrapModal.razor

@using Microsoft.JSInterop
@inject IJSRuntime JS

<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 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 py-1 d-flex gap-2 @btnCss">
                @if (Mode == ModalMode.Message)
                {
                    <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">@(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">@(CurrOptions[true])</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="OnCancel">@(CurrOptions[false])</button>
                }
            </div>
        </div>
    </div>
</div>

@code {
    private TaskCompletionSource<object?>? tcs;
    private string ModalId { get; } = $"modal_{Guid.NewGuid():N}";

    [Parameter]
    public string Title { get; set; } = "Modal";

    [Parameter]
    public string Message { get; set; } = "";

    [Parameter]
    public string UserInput { get; set; } = "";

    [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>
    public async Task<T?> ShowAsync<T>()
    {
        tcs = new TaskCompletionSource<object?>();
        await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}");
        var result = await tcs.Task;

        // Convert result to requested type
        if (result is null)
            return default;
        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}");
        tcs?.TrySetResult(true);
    }

    private async Task OnConfirm()
    {
        await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
        tcs?.TrySetResult(true);
    }

    private async Task OnPromptOk()
    {
        await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
        tcs?.TrySetResult(UserInput);
    }

    private async Task OnCancel()
    {
        await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
        if (Mode == ModalMode.Prompt)
            tcs?.TrySetResult(null);
        else if (Mode == ModalMode.Confirm)
            tcs?.TrySetResult(false);
        else
            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
    }
}