RackPeek/Shared.Rcl/Modals/CpuModal.razor

@using System.ComponentModel.DataAnnotations
@using RackPeek.Domain.Resources.SubResources

@if (IsOpen)
{
    <div class="fixed inset-0 z-50 flex items-center justify-center"
         data-testid="@BaseTestId">

        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/70"
             data-testid="@($"{BaseTestId}-backdrop")"
             @onclick="Cancel">
        </div>

        <!-- Modal -->
        <div class="relative bg-zinc-900 border border-zinc-800 rounded w-full max-w-md p-4"
             data-testid="@($"{BaseTestId}-container")">

            <!-- Header -->
            <div class="flex justify-between items-center mb-4"
                 data-testid="@($"{BaseTestId}-header")">

                <div class="text-zinc-100 text-sm font-medium"
                     data-testid="@($"{BaseTestId}-title")">
                    @(IsEdit ? "Modify CPU" : "Add CPU")
                </div>

                <button class="text-zinc-400 hover:text-zinc-200"
                        data-testid="@($"{BaseTestId}-close")"
                        @onclick="Cancel">
                    ✕
                </button>
            </div>

            <!-- Form -->
            <EditForm Model="_model"
                      OnValidSubmit="HandleValidSubmit"
                      data-testid="@($"{BaseTestId}-form")">

                <DataAnnotationsValidator />
                <ValidationSummary class="text-xs text-red-400 mb-3"
                                   data-testid="@($"{BaseTestId}-validation-summary")" />

                <div class="space-y-3 text-sm">

                    <div data-testid="@($"{BaseTestId}-model-field")">
                        <label class="block text-zinc-400 mb-1">Model</label>
                        <InputText class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                   data-testid="@($"{BaseTestId}-model-input")"
                                   @bind-Value="_model.Model" />
                    </div>

                    <div class="grid grid-cols-2 gap-3">

                        <div data-testid="@($"{BaseTestId}-cores-field")">
                            <label class="block text-zinc-400 mb-1">Cores</label>
                            <InputNumber class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                         data-testid="@($"{BaseTestId}-cores-input")"
                                         @bind-Value="_model.Cores" />
                        </div>

                        <div data-testid="@($"{BaseTestId}-threads-field")">
                            <label class="block text-zinc-400 mb-1">Threads</label>
                            <InputNumber class="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-100"
                                         data-testid="@($"{BaseTestId}-threads-input")"
                                         @bind-Value="_model.Threads" />
                        </div>

                    </div>
                </div>

                <!-- Actions -->
                <div class="flex justify-between items-center mt-5"
                     data-testid="@($"{BaseTestId}-actions")">

                    @if (IsEdit)
                    {
                        <button type="button"
                                class="text-red-400 hover:text-red-300 text-sm"
                                data-testid="@($"{BaseTestId}-delete")"
                                @onclick="HandleDelete">
                            Delete CPU
                        </button>
                    }
                    else
                    {
                        <span></span>
                    }

                    <div class="flex gap-2">

                        <button type="button"
                                class="px-3 py-1 rounded border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
                                data-testid="@($"{BaseTestId}-cancel")"
                                @onclick="Cancel">
                            Cancel
                        </button>

                        <button type="submit"
                                class="px-3 py-1 rounded bg-emerald-600 text-black hover:bg-emerald-500"
                                data-testid="@($"{BaseTestId}-submit")">
                            @(IsEdit ? "Update" : "Add")
                        </button>

                    </div>
                </div>

            </EditForm>
        </div>
    </div>
}

@code {
    [Parameter] public bool IsOpen { get; set; }
    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }

    [Parameter] public Cpu? Value { get; set; }

    [Parameter] public EventCallback<Cpu> OnSubmit { get; set; }

    [Parameter] public EventCallback<Cpu> OnDelete { get; set; }

    [Parameter] public string? TestIdPrefix { get; set; }

    private string BaseTestId =>
        string.IsNullOrWhiteSpace(TestIdPrefix)
            ? "cpu-modal"
            : $"{TestIdPrefix}-cpu-modal";

    private CpuFormModel _model = new();

    private bool IsEdit => Value is not null;

    protected override void OnParametersSet()
    {
        if (IsOpen)
        {
            _model = Value is null
                ? new CpuFormModel()
                : new CpuFormModel
                {
                    Model = Value.Model,
                    Cores = Value.Cores,
                    Threads = Value.Threads
                };
        }
    }

    private async Task HandleValidSubmit()
    {
        var cpu = new Cpu
        {
            Model = _model.Model,
            Cores = _model.Cores,
            Threads = _model.Threads
        };

        await OnSubmit.InvokeAsync(cpu);
        await Close();
    }

    private async Task HandleDelete()
    {
        if (Value is not null)
        {
            await OnDelete.InvokeAsync(Value);
            await Close();
        }
    }

    private async Task Cancel()
    {
        await Close();
    }

    private async Task Close()
    {
        _model = new CpuFormModel();
        await IsOpenChanged.InvokeAsync(false);
    }

    private class CpuFormModel
    {
        [Required] public string? Model { get; set; }

        [Range(1, 1024)] public int? Cores { get; set; }

        [Range(1, 2048)] public int? Threads { get; set; }
    }
}