diff --git a/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor new file mode 100644 index 0000000..1032058 --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor @@ -0,0 +1,111 @@ +@inject IJSRuntime JS + + + +@code { + private TaskCompletionSource? 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 ModalMode Mode { get; set; } = ModalMode.Message; + + /// + /// Mostra la modale ed aspetta risultato utente + /// + public async Task ShowAsync() + { + tcs = new TaskCompletionSource(); + 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; + } + + 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); + } + + /// + /// Modalità display componente + /// + public enum ModalMode + { + Message, + Confirm, + Prompt + } +} diff --git a/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.css b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.css new file mode 100644 index 0000000..f76bcf0 --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.css @@ -0,0 +1,3 @@ +.modal-dialog-top { + margin-top: 1rem; +} \ No newline at end of file diff --git a/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.less b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.less new file mode 100644 index 0000000..68aa280 --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.less @@ -0,0 +1,3 @@ +.modal-dialog-top { + margin-top: 1rem; +} diff --git a/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.min.css b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.min.css new file mode 100644 index 0000000..f4228b2 --- /dev/null +++ b/EgwCoreLib.BlazorTest/Pages/BootstrapModal.razor.min.css @@ -0,0 +1 @@ +.modal-dialog-top{margin-top:1rem;} \ No newline at end of file diff --git a/EgwCoreLib.BlazorTest/Pages/TestDialog.razor b/EgwCoreLib.BlazorTest/Pages/TestDialog.razor index 41f4642..26075c2 100644 --- a/EgwCoreLib.BlazorTest/Pages/TestDialog.razor +++ b/EgwCoreLib.BlazorTest/Pages/TestDialog.razor @@ -2,15 +2,26 @@

Pure Blazor Prompt Test

+ -

@resultMessage

+
+ + + + + +
+

@resultMessage

+ + @code { + private BootstrapModal? modal; private CustomDialog? promptDialog; private string resultMessage = ""; @@ -20,4 +31,42 @@ // var name = await promptDialog!.ShowAsync("Come ti chiami?", "(Super) Mario Rossi"); resultMessage = name is null ? "User cancelled." : $"Hello, {name}!"; } + + private string cTitle = ""; + private string cMessage = ""; + private string cPlaceholder = ""; + private string cUserInput = ""; + private BootstrapModal.ModalMode cMode = BootstrapModal.ModalMode.Message; + + + private async Task ShowMessage() + { + cTitle = "Information"; + cMessage = "This is a standard message."; + cMode = BootstrapModal.ModalMode.Message; + + await modal!.ShowAsync(); + resultMessage = "Message closed."; + } + + private async Task ShowConfirm() + { + cTitle = "Confirm Action"; + cMessage = "Are you sure you want to continue?"; + cMode = BootstrapModal.ModalMode.Confirm; + + bool confirmed = await modal!.ShowAsync(); + resultMessage = confirmed ? "User confirmed." : "User cancelled."; + } + private async Task ShowPrompt() + { + cTitle = "Enter Name"; + cMessage = "What is your name?"; + cPlaceholder = "Type your name..."; + cUserInput = ""; + cMode = BootstrapModal.ModalMode.Prompt; + + string? name = await modal!.ShowAsync(); + resultMessage = name is null ? "User cancelled." : $"Hello, {name}!"; + } } diff --git a/EgwCoreLib.BlazorTest/compilerconfig.json b/EgwCoreLib.BlazorTest/compilerconfig.json index fbd7f68..98b7eb9 100644 --- a/EgwCoreLib.BlazorTest/compilerconfig.json +++ b/EgwCoreLib.BlazorTest/compilerconfig.json @@ -18,5 +18,9 @@ { "outputFile": "Pages/TestBarcodeReader.razor.css", "inputFile": "Pages/TestBarcodeReader.razor.less" + }, + { + "outputFile": "Pages/BootstrapModal.razor.css", + "inputFile": "Pages/BootstrapModal.razor.less" } ] \ No newline at end of file diff --git a/EgwCoreLib.Razor/CustomDialog.razor b/EgwCoreLib.Razor/CustomDialog.razor index 704919e..e3813e6 100644 --- a/EgwCoreLib.Razor/CustomDialog.razor +++ b/EgwCoreLib.Razor/CustomDialog.razor @@ -33,20 +33,6 @@ [Parameter] public string UserInput { get; set; } = ""; - - /// - /// Shows the Bootstrap modal and waits for user input. - /// - public async Task ShowAsync(string message, string defaultValue = "", string title = "Prompt") - { - Title = title; - Message = message; - UserInput = defaultValue; - tcs = new TaskCompletionSource(); - - await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}"); - return await tcs.Task; - } /// /// Shows the Bootstrap modal and waits for user input. /// @@ -60,6 +46,20 @@ await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}"); return await tcs.Task; } + /// + /// Shows the Bootstrap modal and waits for user input. + /// + public async Task ShowAsync(string message, string defaultValue = "", string title = "Prompt") + { + Title = title; + Message = message; + UserInput = defaultValue; + tcs = new TaskCompletionSource(); + + await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}"); + return await tcs.Task; + } + private async Task Confirm() { diff --git a/EgwCoreLib.Razor/CustomDialog_old.razor b/EgwCoreLib.Razor/CustomDialog_old.razor deleted file mode 100644 index e82be47..0000000 --- a/EgwCoreLib.Razor/CustomDialog_old.razor +++ /dev/null @@ -1,46 +0,0 @@ -
-
-

@Message

- - -
- - -
-
-
- -@code { - private bool _isVisible; - private TaskCompletionSource? _tcs; - - public string Message { get; set; } = ""; - public string UserInput { get; set; } = ""; - - /// - /// Shows the prompt and waits for user input. - /// - public Task ShowAsync(string message, string defaultValue = "") - { - Message = message; - UserInput = defaultValue; - _isVisible = true; - StateHasChanged(); - - _tcs = new TaskCompletionSource(); - return _tcs.Task; - } - - private void Confirm() - { - _isVisible = false; - _tcs?.TrySetResult(UserInput); - } - - private void Cancel() - { - _isVisible = false; - _tcs?.TrySetResult(null); - } -} - diff --git a/EgwCoreLib.Razor/CustomDialog_old.razor.css b/EgwCoreLib.Razor/CustomDialog_old.razor.css deleted file mode 100644 index 0b3d56a..0000000 --- a/EgwCoreLib.Razor/CustomDialog_old.razor.css +++ /dev/null @@ -1,32 +0,0 @@ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: none; - /* Controlled by inline style in Razor */ - align-items: center; - justify-content: center; - z-index: 1000; -} -.modal-box { - background: white; - padding: 20px; - border-radius: 8px; - min-width: 300px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -} -.modal-buttons { - margin-top: 15px; - display: flex; - justify-content: flex-end; - gap: 10px; -} -.modal-box input { - width: 100%; - padding: 6px; - margin-top: 10px; - box-sizing: border-box; -} \ No newline at end of file diff --git a/EgwCoreLib.Razor/CustomDialog_old.razor.less b/EgwCoreLib.Razor/CustomDialog_old.razor.less deleted file mode 100644 index 8550183..0000000 --- a/EgwCoreLib.Razor/CustomDialog_old.razor.less +++ /dev/null @@ -1,34 +0,0 @@ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: none; /* Controlled by inline style in Razor */ - align-items: center; - justify-content: center; - z-index: 1000; -} - -.modal-box { - background: white; - padding: 20px; - border-radius: 8px; - min-width: 300px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -} - -.modal-buttons { - margin-top: 15px; - display: flex; - justify-content: flex-end; - gap: 10px; -} - -.modal-box input { - width: 100%; - padding: 6px; - margin-top: 10px; - box-sizing: border-box; -} diff --git a/EgwCoreLib.Razor/CustomDialog_old.razor.min.css b/EgwCoreLib.Razor/CustomDialog_old.razor.min.css deleted file mode 100644 index 61ad6bd..0000000 --- a/EgwCoreLib.Razor/CustomDialog_old.razor.min.css +++ /dev/null @@ -1 +0,0 @@ -.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000;}.modal-box{background:#fff;padding:20px;border-radius:8px;min-width:300px;box-shadow:0 2px 10px rgba(0,0,0,.3);}.modal-buttons{margin-top:15px;display:flex;justify-content:flex-end;gap:10px;}.modal-box input{width:100%;padding:6px;margin-top:10px;box-sizing:border-box;} \ No newline at end of file