RackPeek/Shared.Rcl/Firewalls/FirewallCardComponent.razor

@using RackPeek.Domain.Resources.Firewalls
@using Shared.Rcl.Hardware
@inject UpdateFirewallUseCase UpdateUseCase
@inject IGetResourceByNameUseCase<Firewall> GetByNameUseCase
@inject IDeleteResourceUseCase<Firewall> DeleteUseCase
@inject ICloneResourceUseCase<Firewall> CloneUseCase
@inject IRenameResourceUseCase<Firewall> RenameUseCase
@inject NavigationManager Nav

<div class="border border-zinc-800 rounded p-4 bg-zinc-900"
     data-testid=@($"firewall-item-{Firewall.Name.Replace(" ", "-")}")>

    <div class="flex justify-between items-center mb-3">

        <div class="text-zinc-100 hover:text-emerald-300">
            <NavLink href="@($"resources/hardware/{Uri.EscapeDataString(Firewall.Name)}")"
                     class="block"
                     data-testid=@($"firewall-item-{Firewall.Name.Replace(" ", "-")}-link")>
                @Firewall.Name
            </NavLink>
        </div>

        <div class="flex gap-3 text-xs">
            @if (!_isEditing)
            {
                <button data-testid="edit-firewall-button"
                        class="text-zinc-400 hover:text-zinc-200"
                        @onclick="BeginEdit">
                    Edit
                </button>

                <button data-testid="rename-firewall-button"
                        class="text-blue-400 hover:text-blue-300 transition"
                        @onclick="OpenRename">
                    Rename
                </button>

                <button data-testid="clone-firewall-button"
                        class="text-emerald-400 hover:text-emerald-300 transition"
                        @onclick="OpenClone">
                    Clone
                </button>

                <button data-testid="delete-firewall-button"
                        class="text-red-400 hover:text-red-300 transition"
                        @onclick="ConfirmDelete">
                    Delete
                </button>
            }
            else
            {
                <button data-testid="save-firewall-button"
                        class="text-emerald-400 hover:text-emerald-300"
                        @onclick="Save">
                    Save
                </button>

                <button data-testid="cancel-firewall-button"
                        class="text-zinc-500 hover:text-zinc-300"
                        @onclick="Cancel">
                    Cancel
                </button>
            }
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">

        <!-- Model -->
        <div data-testid="firewall-model-section">
            <div class="text-zinc-400 mb-1">Model</div>

            @if (_isEditing)
            {
                <input data-testid="firewall-model-input"
                       class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
                       @bind="_edit.Model"/>
            }
            else if (!string.IsNullOrWhiteSpace(Firewall.Model))
            {
                <div class="text-zinc-300"
                     data-testid="firewall-model-value">
                    @Firewall.Model
                </div>
            }
        </div>

        <!-- Features -->
        <div data-testid="firewall-features-section">
            <div class="text-zinc-400 mb-1">Features</div>

            @if (_isEditing)
            {
                <div class="flex gap-4">
                    <label class="flex items-center gap-2 text-zinc-300">
                        <input type="checkbox"
                               data-testid="firewall-managed-checkbox"
                               @bind="_edit.Managed"/>
                        Managed
                    </label>

                    <label class="flex items-center gap-2 text-zinc-300">
                        <input type="checkbox"
                               data-testid="firewall-poe-checkbox"
                               @bind="_edit.Poe"/>
                        PoE
                    </label>
                </div>
            }
            else
            {
                <div class="flex gap-2 flex-wrap">
                    @if (Firewall.Managed == true)
                    {
                        <span class="text-xs px-2 py-0.5 rounded bg-zinc-800 text-zinc-300"
                              data-testid="firewall-managed-badge">
                            Managed
                        </span>
                    }
                    @if (Firewall.Poe == true)
                    {
                        <span class="text-xs px-2 py-0.5 rounded bg-zinc-800 text-zinc-300"
                              data-testid="firewall-poe-badge">
                            PoE
                        </span>
                    }
                </div>
            }
        </div>

        <!-- Ports -->
        <PortGroupEditor T="Firewall"
                         Resource="Firewall"
                         OnResourceChanged="r => Firewall = r"
                         TestIdPrefix="firewall-ports"/>

        <ResourceTagEditor Resource="Firewall"
                           TestIdPrefix="firewall"/>

        <ResourceLabelEditor Resource="Firewall"
                             TestIdPrefix="firewall"/>


        <div class="md:col-span-2"
             data-testid="firewall-notes-section">

            <div class="text-zinc-400 mb-1">Notes</div>

            @if (_isEditing)
            {
                <MarkdownEditor @bind-Value="_edit.Notes"
                                ShowActionButtons="false"
                                TestIdPrefix="firewall-notes-editor"/>
            }
            else
            {
                <MarkdownViewer Value="@Firewall.Notes"
                                ShowEditButton="false"
                                TestIdPrefix="firewall-notes-viewer"/>
            }
        </div>

    </div>
</div>

<ConfirmModal IsOpen="_confirmDeleteOpen"
              IsOpenChanged="v => _confirmDeleteOpen = v"
              Title="Delete firewall"
              ConfirmText="Delete"
              ConfirmClass="bg-red-600 hover:bg-red-500"
              OnConfirm="DeleteServer"
              TestIdPrefix="Firewall">
    Are you sure you want to delete <strong>@Firewall.Name</strong>?
</ConfirmModal>

<StringValueModal IsOpen="_renameOpen"
                  IsOpenChanged="v => _renameOpen = v"
                  Title="Rename firewall"
                  Description="Enter a new name for this firewall"
                  Label="New firewall name"
                  Value="@Firewall.Name"
                  OnSubmit="HandleRenameSubmit"
                  TestIdPrefix="firewall-rename"/>

<StringValueModal IsOpen="_cloneOpen"
                  IsOpenChanged="v => _cloneOpen = v"
                  Title="Clone resource"
                  Description="Enter a name for the cloned resource"
                  Label="New resource name"
                  Value="@($"{Firewall.Name}-copy")"
                  OnSubmit="HandleCloneSubmit"
                  TestIdPrefix="firewall-clone"/>

@code {
    [Parameter] [EditorRequired] public Firewall Firewall { get; set; } = default!;

    bool _isEditing;
    FirewallEditModel _edit = new();

    void BeginEdit()
    {
        _edit = FirewallEditModel.From(Firewall);
        _isEditing = true;
    }

    async Task Save()
    {
        _isEditing = false;

        await UpdateUseCase.ExecuteAsync(
            Firewall.Name,
            _edit.Model,
            _edit.Managed,
            _edit.Poe,
            _edit.Notes);

        Firewall = await GetByNameUseCase.ExecuteAsync(Firewall.Name);
    }

    void Cancel()
    {
        _isEditing = false;
    }

    public class FirewallEditModel
    {
        public string? Model { get; set; }
        public bool? Managed { get; set; }
        public bool? Poe { get; set; }
        public string? Notes { get; set; }

        public static FirewallEditModel From(Firewall firewall)
        {
            return new FirewallEditModel
            {
                Model = firewall.Model,
                Managed = firewall.Managed,
                Poe = firewall.Poe,
                Notes = firewall.Notes
            };
        }
    }


}

@code {
    private bool _confirmDeleteOpen;
    [Parameter] public EventCallback<string> OnDeleted { get; set; }

    void ConfirmDelete()
    {
        _confirmDeleteOpen = true;
    }

    async Task DeleteServer()
    {
        _confirmDeleteOpen = false;

        await DeleteUseCase.ExecuteAsync(Firewall.Name);

        if (OnDeleted.HasDelegate)
            await OnDeleted.InvokeAsync(Firewall.Name);
    }

}

@code
{
    bool _renameOpen;

    void OpenRename()
    {
        _renameOpen = true;
    }

    async Task HandleRenameSubmit(string newName)
    {
        await RenameUseCase.ExecuteAsync(Firewall.Name, newName);
        Nav.NavigateTo($"resources/hardware/{Uri.EscapeDataString(newName)}");
    }

}

@code
{
    bool _cloneOpen;

    void OpenClone()
    {
        _cloneOpen = true;
    }

    async Task HandleCloneSubmit(string newName)
    {
        await CloneUseCase.ExecuteAsync(Firewall.Name, newName);

        Nav.NavigateTo($"resources/hardware/{Uri.EscapeDataString(newName)}");
    }

}