Egalware/egwcorelib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/AddBlazorModalSelectOpts'

Browse Source
This commit is contained in:
Samuele Locatelli
2026-06-24 16:43:09 +02:00
parent 5e48c9b94f 512c9cb5eb
commit a45ffa2274
3 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EgwCoreLib.BlazorTest/Pages/TestComponenti.razor
+6 -2
View File
@@ -201,10 +201,14 @@
<div class="card">
<div class="card-header"><h4>Test Periodo</h4></div>
<div class="card-body small">
<h5>standard</h5>
<h5>Default</h5>
<PeriodoSel></PeriodoSel>
<h5>custom</h5>
<hr />
<h5>Custom labels</h5>
<PeriodoSel DictSelect="@CustomSelDict"></PeriodoSel>
<hr />
<hr />
<h5>Condensed</h5>
<div class="condensed">
<PeriodoSel DictSelect="@CustomSelDict"></PeriodoSel>
</div>
EgwCoreLib.BlazorTest/Pages/TestDialog.razor
+27 -1
View File
@@ -10,13 +10,14 @@
<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-info" @onclick="ShowMulti">Show Multi</button>
<hr />
<p>@resultMessage</p>
</div>
</div>
<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" />
<BootstrapModal @ref="modal" Title=@cTitle Message=@cMessage Mode=@cMode Placeholder=@cPlaceholder UserInput=@cUserInput Size="BootstrapModal.ModalSize.Normal" UserOptions=@cOpt SelectOptions=@sOpt BigButtons=@cBigBtn TitleCss="bg-secondary bg-opacity-25 bg-gradient" />
@code {
private BootstrapModal? modal;
@@ -28,6 +29,7 @@
private string cUserInput = "";
private bool cBigBtn = false;
private Dictionary<bool, string>? cOpt = null;
private Dictionary<string, string>? sOpt = null;
private BootstrapModal.ModalMode cMode = BootstrapModal.ModalMode.ND;
@@ -37,6 +39,7 @@
cMessage = "This is a standard message.";
cMode = BootstrapModal.ModalMode.Message;
cOpt = null;
sOpt = null;
cBigBtn = false;
await modal!.ShowAsync<bool>();
@@ -51,11 +54,13 @@
cOpt = new();
cOpt.Add(true, "Si");
cOpt.Add(false, "No");
sOpt = null;
cBigBtn = true;
bool confirmed = await modal!.ShowAsync<bool>();
resultMessage = confirmed ? "User confirmed." : "User cancelled.";
}
private async Task ShowPrompt()
{
cTitle = "Enter Name";
@@ -64,9 +69,30 @@
cUserInput = "";
cMode = BootstrapModal.ModalMode.Prompt;
cOpt = null;
sOpt = null;
cBigBtn = false;
string? name = await modal!.ShowAsync<string?>();
resultMessage = name is null ? "User cancelled." : $"Hello, {name}!";
}
private async Task ShowMulti()
{
cTitle = "Environment";
cOpt = null;
sOpt = new();
sOpt.Add("Window", "Finestre");
sOpt.Add("Beam", "Travi");
sOpt.Add("Wall", "Pareti");
cMessage = "";
// cMessage = "Selezionare Envir desiderato (LUX)";
// cPlaceholder = "Type your name...";
// cUserInput = "";
cMode = BootstrapModal.ModalMode.Select;
cBigBtn = false;
string? name = await modal!.ShowAsync<string?>();
resultMessage = name == null ? "User Canceled" : $"Selection: {name}";
}
}
EgwCoreLib.Razor/BootstrapModal.razor
+46 -16
View File
@@ -9,28 +9,45 @@
<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 (!string.IsNullOrEmpty(Message))
{
<div class="row w-100">
<div class="col">@Message</div>
</div>
}
@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)
else if (Mode == ModalMode.Select)
{
<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 class="d-flex gap-2">
@foreach (var optItem in SelectOptions)
{
<button type="button" class="btn @ClassSelBtn col" @onclick="() => OnSelectOpt(optItem.Key)">@optItem.Value</button>
}
</div>
}
</div>
@if (Mode != ModalMode.Select)
{
<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>
@@ -51,9 +68,15 @@
[Parameter]
public string Placeholder { get; set; } = "";
[Parameter]
public string ClassSelBtn { get; set; } = "btn-dark";
[Parameter]
public Dictionary<bool, string> UserOptions { get; set; } = new();
[Parameter]
public Dictionary<string, string> SelectOptions { get; set; } = new();
[Parameter]
public ModalMode Mode { get; set; } = ModalMode.Message;
@@ -137,6 +160,12 @@
tcs?.TrySetResult(UserInput);
}
private async Task OnSelectOpt(string selValue)
{
await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
tcs?.TrySetResult(selValue);
}
private async Task OnCancel()
{
await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
@@ -171,7 +200,8 @@
ND,
Message,
Confirm,
Prompt
Prompt,
Select
}
/// <summary>