mirror of
https://github.com/alexhopeoconnor/dnsmasq-webui.git
synced 2026-10-03 22:12:00 +10:00
alex
71a8a61cb3
- Toolbar: single expand/collapse toggle; change count after Save/Exit. - Save modal: selective revert per change; modern list styling, empty state; Session + OnReverted; Save disabled when no changes. - Cancel: prevent blur-before-click (mousedown preventDefault on cancel badge); _cancelRequested so cancel never commits. - DeactivateFieldAsync in UiContext + Section; OptionStateBadge cancel clears draft and deactivates.
63 lines
2.9 KiB
Plaintext
63 lines
2.9 KiB
Plaintext
@namespace DnsmasqWebUI.Components.Dnsmasq.EffectiveConfig
|
|
|
|
<div class="ec-toolbar @(IsEditMode ? "ec-edit-toolbar" : "")">
|
|
@if (ShowSearchBox)
|
|
{
|
|
<input type="search" id="ec-search-input" class="form-control form-control-sm ec-toolbar-search" placeholder="Search..." autocomplete="off"
|
|
value="@SearchTerm" @oninput="OnSearchInput" />
|
|
}
|
|
<div class="ec-toolbar-actions">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnToggleExpandCollapse"
|
|
title="@(AllSectionsExpanded ? "Collapse all sections" : "Expand all sections")"
|
|
aria-label="@(AllSectionsExpanded ? "Collapse all sections" : "Expand all sections")">
|
|
<i class="bi @(AllSectionsExpanded ? "bi-arrows-collapse" : "bi-arrows-expand")" aria-hidden="true"></i>
|
|
</button>
|
|
@if (IsEditMode)
|
|
{
|
|
<button type="button" class="btn btn-sm btn-primary" @onclick="OnOpenSaveModal" disabled="@(PendingChangesCount == 0)" title="Save changes to managed config" aria-label="Save">
|
|
<i class="bi bi-floppy-fill" aria-hidden="true"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnExitEditModeWithConfirm" title="Exit edit mode" aria-label="Exit edit mode">
|
|
<i class="bi bi-box-arrow-right" aria-hidden="true"></i>
|
|
</button>
|
|
@if (PendingChangesCount > 0)
|
|
{
|
|
<span class="text-muted small">@PendingChangesCount change(s)</span>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnEnterEditMode" title="Edit effective config" aria-label="Edit">
|
|
<i class="bi bi-pencil" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public bool ShowSearchBox { get; set; } = true;
|
|
[Parameter] public string SearchTerm { get; set; } = "";
|
|
[Parameter] public EventCallback<string> SearchTermChanged { get; set; }
|
|
[Parameter] public bool IsEditMode { get; set; }
|
|
[Parameter] public int PendingChangesCount { get; set; }
|
|
[Parameter] public bool AllSectionsExpanded { get; set; }
|
|
[Parameter] public EventCallback OnExpandAll { get; set; }
|
|
[Parameter] public EventCallback OnCollapseAll { get; set; }
|
|
|
|
private async Task OnToggleExpandCollapse()
|
|
{
|
|
if (AllSectionsExpanded)
|
|
await OnCollapseAll.InvokeAsync();
|
|
else
|
|
await OnExpandAll.InvokeAsync();
|
|
}
|
|
[Parameter] public EventCallback OnEnterEditMode { get; set; }
|
|
[Parameter] public EventCallback OnExitEditModeWithConfirm { get; set; }
|
|
[Parameter] public EventCallback OnOpenSaveModal { get; set; }
|
|
|
|
private async Task OnSearchInput(ChangeEventArgs e)
|
|
{
|
|
await SearchTermChanged.InvokeAsync(e.Value?.ToString() ?? "");
|
|
}
|
|
}
|