RackPeek/Shared.Rcl/AccessPoints/AccessPointCardComponent.razor

@using RackPeek.Domain.Resources.AccessPoints
@inject UpdateAccessPointUseCase UpdateUseCase
@inject IDeleteResourceUseCase<AccessPoint> DeleteUseCase
@inject IRenameResourceUseCase<AccessPoint> RenameUseCase
@inject ICloneResourceUseCase<AccessPoint> CloneUseCase
@inject NavigationManager Nav

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

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

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

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

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

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

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

                <button data-testid="cancel-accesspoint-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="accesspoint-model-section">
            <div class="text-zinc-400 mb-1">Model</div>

            @if (_isEditing)
            {
                <input data-testid="accesspoint-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(AccessPoint.Model))
            {
                <div class="text-zinc-300"
                     data-testid="accesspoint-model-value">
                    @AccessPoint.Model
                </div>
            }
        </div>

        <!-- Speed -->
        <div data-testid="accesspoint-speed-section">
            <div class="text-zinc-400 mb-1">Speed (Gbps)</div>

            @if (_isEditing)
            {
                <input type="number"
                       step="0.1"
                       data-testid="accesspoint-speed-input"
                       class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
                       @bind="_edit.Speed" />
            }
            else if (AccessPoint.Speed is not null)
            {
                <div class="text-zinc-300"
                     data-testid="accesspoint-speed-value">
                    @AccessPoint.Speed Gbps
                </div>
            }
        </div>

        <ResourceTagEditor Resource="AccessPoint"/>

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

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

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

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

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

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

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

    [Parameter] public EventCallback<string> OnDeleted { get; set; }

    bool _isEditing;
    bool _confirmDeleteOpen;
    bool _renameOpen;
    bool _cloneOpen;

    AccessPointEditModel _edit = new();

    void BeginEdit()
    {
        _edit = AccessPointEditModel.From(AccessPoint);
        _isEditing = true;
    }

    async Task Save()
    {
        _isEditing = false;

        await UpdateUseCase.ExecuteAsync(
            AccessPoint.Name,
            _edit.Model,
            _edit.Speed,
            _edit.Notes);

        AccessPoint.Model = _edit.Model;
        AccessPoint.Speed = _edit.Speed;
        AccessPoint.Notes = _edit.Notes;
    }

    void Cancel()
    {
        _isEditing = false;
    }

    void ConfirmDelete()
    {
        _confirmDeleteOpen = true;
    }

    async Task DeleteServer()
    {
        _confirmDeleteOpen = false;

        await DeleteUseCase.ExecuteAsync(AccessPoint.Name);

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

    void OpenRename()
    {
        _renameOpen = true;
    }

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

    void OpenClone()
    {
        _cloneOpen = true;
    }

    async Task HandleCloneSubmit(string newName)
    {
        await CloneUseCase.ExecuteAsync(AccessPoint.Name, newName);
        Nav.NavigateTo($"resources/hardware/{newName}");
    }

    public class AccessPointEditModel
    {
        public string? Model { get; set; }
        public double? Speed { get; set; }
        public string? Notes { get; set; }

        public static AccessPointEditModel From(AccessPoint ap)
        {
            return new AccessPointEditModel
            {
                Model = ap.Model,
                Speed = ap.Speed,
                Notes = ap.Notes
            };
        }
    }

}