update customDialog
This commit is contained in:
Samuele Locatelli
@@ -0,0 +1,75 @@
|
||||
@using Microsoft.JSInterop
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div class="modal 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="Cancel"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>@Message</p>
|
||||
<input @bind="UserInput" class="form-control" placeholder="Type here..." />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" @onclick="Confirm">OK</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick="Cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private TaskCompletionSource<string?>? tcs;
|
||||
private string ModalId { get; } = $"modal_{Guid.NewGuid():N}";
|
||||
|
||||
[Parameter]
|
||||
public string Title { get; set; } = "";
|
||||
|
||||
[Parameter]
|
||||
public string Message { get; set; } = "";
|
||||
|
||||
[Parameter]
|
||||
public string UserInput { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
/// Shows the Bootstrap modal and waits for user input.
|
||||
/// </summary>
|
||||
public async Task<string?> ShowAsync(string message, string defaultValue = "", string title = "Prompt")
|
||||
{
|
||||
Title = title;
|
||||
Message = message;
|
||||
UserInput = defaultValue;
|
||||
tcs = new TaskCompletionSource<string?>();
|
||||
|
||||
await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}");
|
||||
return await tcs.Task;
|
||||
}
|
||||
/// <summary>
|
||||
/// Shows the Bootstrap modal and waits for user input.
|
||||
/// </summary>
|
||||
public async Task<string?> ShowAsync()
|
||||
{
|
||||
// Title = title;
|
||||
// Message = message;
|
||||
// UserInput = defaultValue;
|
||||
tcs = new TaskCompletionSource<string?>();
|
||||
|
||||
await JS.InvokeVoidAsync("bootstrapModalHelper.show", $"#{ModalId}");
|
||||
return await tcs.Task;
|
||||
}
|
||||
|
||||
private async Task Confirm()
|
||||
{
|
||||
await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
|
||||
tcs?.TrySetResult(UserInput);
|
||||
}
|
||||
|
||||
private async Task Cancel()
|
||||
{
|
||||
await JS.InvokeVoidAsync("bootstrapModalHelper.hide", $"#{ModalId}");
|
||||
tcs?.TrySetResult(null);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<div class="modal-overlay" style="@(_isVisible ? "display:flex;" : "display:none;")">
|
||||
<div class="modal-box align-items-top">
|
||||
<p>@Message</p>
|
||||
<input @bind="UserInput" placeholder="Type here..." />
|
||||
|
||||
<div class="modal-buttons">
|
||||
<button class="btn btn-sm btn-success" @onclick="Confirm">OK</button>
|
||||
<button class="btn btn-sm btn-warning" @onclick="Cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool _isVisible;
|
||||
private TaskCompletionSource<string?>? _tcs;
|
||||
|
||||
public string Message { get; set; } = "";
|
||||
public string UserInput { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
/// Shows the prompt and waits for user input.
|
||||
/// </summary>
|
||||
public Task<string?> ShowAsync(string message, string defaultValue = "")
|
||||
{
|
||||
Message = message;
|
||||
UserInput = defaultValue;
|
||||
_isVisible = true;
|
||||
StateHasChanged();
|
||||
|
||||
_tcs = new TaskCompletionSource<string?>();
|
||||
return _tcs.Task;
|
||||
}
|
||||
|
||||
private void Confirm()
|
||||
{
|
||||
_isVisible = false;
|
||||
_tcs?.TrySetResult(UserInput);
|
||||
}
|
||||
|
||||
private void Cancel()
|
||||
{
|
||||
_isVisible = false;
|
||||
_tcs?.TrySetResult(null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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;}
|
||||
@@ -26,6 +26,7 @@
|
||||
|
||||
<ItemGroup>
|
||||
<Content Remove="compilerconfig.json" />
|
||||
<Content Remove="CustomDialog_old.razor" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
@@ -33,6 +34,9 @@
|
||||
<None Remove="ChartHist.razor.js" />
|
||||
<None Remove="ChartTS - Copy.razor.js" />
|
||||
<None Remove="ChartTS.razor.js" />
|
||||
<None Remove="CustomDialog_old.razor.css" />
|
||||
<None Remove="CustomDialog_old.razor.less" />
|
||||
<None Remove="CustomDialog_old.razor.min.css" />
|
||||
<None Remove="Doughnut.razor.js" />
|
||||
<None Remove="PdfViewer.razor.js" />
|
||||
</ItemGroup>
|
||||
|
||||
@@ -64,11 +64,15 @@
|
||||
[Parameter]
|
||||
public bool ShowIcon { get; set; } = false;
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// Valore larghezza calcolata in % corretta
|
||||
/// </summary>
|
||||
/// <param name="currVal"></param>
|
||||
/// <returns></returns>
|
||||
private string CalcPctCss(double currVal)
|
||||
{
|
||||
var dblVal = Total > 0 ? currVal / (double)Total * 100 : 0;
|
||||
return $"{dblVal.ToString("F1", CultureInfo.InvariantCulture)}%";
|
||||
return $"{dblVal.ToString("F2", CultureInfo.InvariantCulture)}%";
|
||||
}
|
||||
|
||||
// Proprietà calcolate con fallback sicuro
|
||||
|
||||
@@ -26,5 +26,9 @@
|
||||
{
|
||||
"outputFile": "LoadingData.razor.css",
|
||||
"inputFile": "LoadingData.razor.less"
|
||||
},
|
||||
{
|
||||
"outputFile": "CustomDialog.razor.css",
|
||||
"inputFile": "CustomDialog.razor.less"
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user