dnsmasq-webui/src/DnsmasqWebUI/Components/EffectiveConfig/Composition/EffectiveConfigToolbar.razor

@namespace DnsmasqWebUI.Components.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 ec-toolbar-changes-link" role="button" tabindex="0"
                      @onclick="OnOpenSaveModal"
                      @onkeydown="OnChangesLinkKeyDown"
                      title="Open save dialog"
                      aria-label="Open save dialog">
                    @PendingChangesCount change(s)
                </span>
            }
            @if (ValidationErrorCount > 0 || ValidationWarningCount > 0)
            {
                <span class="small ec-toolbar-validation-count" aria-live="polite">
                    @if (ValidationErrorCount > 0)
                    {
                        <span class="text-danger fw-medium ec-toolbar-changes-link" role="button" tabindex="0"
                              title="@ValidationErrorTooltip"
                              aria-label="Open save dialog"
                              @onclick="OnOpenSaveModal"
                              @onkeydown="OnValidationLinkKeyDown">
                            @ValidationErrorCount error(s)
                        </span>
                    }
                    @if (ValidationErrorCount > 0 && ValidationWarningCount > 0) { <span class="text-muted">·</span> }
                    @if (ValidationWarningCount > 0)
                    {
                        <span class="text-warning ec-toolbar-changes-link" role="button" tabindex="0"
                              title="@ValidationWarningTooltip"
                              aria-label="Open save dialog"
                              @onclick="OnOpenSaveModal"
                              @onkeydown="OnValidationLinkKeyDown">
                            @ValidationWarningCount warning(s)
                        </span>
                    }
                </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 IReadOnlyList<FieldIssue>? ValidationSummary { get; set; }
    private int ValidationErrorCount => ValidationSummary?.Count(i => i.Severity == FieldIssueSeverity.Error) ?? 0;
    private int ValidationWarningCount => ValidationSummary?.Count(i => i.Severity == FieldIssueSeverity.Warning) ?? 0;
    private string ValidationErrorTooltip => ValidationSummary == null ? "" : string.Join("\n", ValidationSummary.Where(i => i.Severity == FieldIssueSeverity.Error).Select(i => i.Message));
    private string ValidationWarningTooltip => ValidationSummary == null ? "" : string.Join("\n", ValidationSummary.Where(i => i.Severity == FieldIssueSeverity.Warning).Select(i => i.Message));
    [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() ?? "");
    }

    private async Task OnChangesLinkKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" || e.Key == " ")
            await OnOpenSaveModal.InvokeAsync();
    }

    private async Task OnValidationLinkKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" || e.Key == " ")
            await OnOpenSaveModal.InvokeAsync();
    }
}