RackPeek/Shared.Rcl/Services/ServiceCardComponent.razor

@inject UpdateServiceUseCase UpdateUseCase
@inject IGetResourceByNameUseCase<Service> GetByNameUseCase
@inject IDeleteResourceUseCase<Service> DeleteUseCase
@inject ICloneResourceUseCase<Service> CloneUseCase
@inject IRenameResourceUseCase<Service> RenameUseCase
@inject NavigationManager Nav

<div class="border border-zinc-800 rounded p-4 bg-zinc-900"
     data-testid=@($"service-item-{Service.Name.Replace(" ", "-")}")>
    <div class="flex justify-between items-center mb-3">
        <NavLink href="@($"resources/services/{Uri.EscapeDataString(Service.Name)}")" class="block"
                 data-testid=@($"service-item-{Service.Name.Replace(" ", "-")}-link")>

            <div class="text-zinc-100 hover:text-emerald-300">
                @Service.Name
            </div>
        </NavLink>

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

                <button class="text-xs text-blue-400 hover:text-blue-300 transition"
                        title="Rename service"
                        data-testid="rename-service-button"

                        @onclick="OpenRename">
                    Rename
                </button>

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


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

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

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

        <!-- IP -->
        <div data-testid="service-ip-section">
            <div class="text-zinc-400 mb-1">IP</div>

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


        <!-- Port -->
        <div data-testid="service-port-section">
            <div class="text-zinc-400 mb-1">Port</div>

            @if (_isEditing)
            {
                <input type="number"
                       data-testid="service-port-input"
                       @bind="_edit.Port"/>
            }
            else if (Service.Network?.Port.HasValue == true)
            {
                <div class="text-zinc-300"
                     data-testid="service-port-value">
                    @Service.Network.Port
                </div>
            }
        </div>


        <!-- Protocol -->
        <div data-testid="service-protocol-section">
            <div class="text-zinc-400 mb-1">Protocol</div>

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


        <!-- URL -->
        <div data-testid="service-url-section">
            <div class="text-zinc-400 mb-1">URL</div>

            @if (_isEditing)
            {
                <input
                    data-testid="service-url-input"
                    class="w-full px-3 py-2 rounded-md bg-zinc-800 text-zinc-100 border border-zinc-600"
                    @bind="_edit.Url"/>
            }
            else if (!string.IsNullOrWhiteSpace(Service.Network?.Url))
            {
                <a href="@Service.Network!.Url"
                   data-testid="service-url-value"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="text-emerald-400 hover:underline break-all">
                    @Service.Network.Url
                </a>
            }
        </div>


        <!-- Runs On -->
        <div data-testid="service-runson-section">
            <div class="text-zinc-400 mb-1">
              Runs On

              <button
                  data-testid="service-runson-button"
                  class="hover:text-emerald-400 pr-4"
                  title="Add Runs On"
                  @onclick="() => _selectParentOpen = true">
                      @("+")
              </button>
            </div>

            @if (_isEditing)
            {
                    @if (Service.RunsOn?.Count > 0)
                    {
                      @foreach(var parent in Service.RunsOn)
                      {
                        <button
                          class="hover:text-emerald-400"
                          title="Edit Runs On"
                          @onclick="() => _selectParentOpen = true">
                            @($"{parent}")
                        </button>
                        <button
                          class="text-red-400 hover:text-red-300 pr-4"
                          title="Remove"
                          @onclick="() => HandleParentDeleted(parent)">
                            @($"✕")
                        </button>
                      }
                    }
            }
            else if (Service.RunsOn?.Count > 0)
            {
                @foreach(var parent in Service.RunsOn)
                {
                  <NavLink href="@($"resources/systems/{Uri.EscapeDataString(parent)}")"
                           data-testid="service-runson-link"
                           class="text-emerald-400 pr-4">
                      @parent
                  </NavLink>
                }
            }
        </div>


        <ResourceTagEditor Resource="Service"
                           TestIdPrefix="service" />

        <ResourceLabelEditor Resource="Service"
                             TestIdPrefix="service" />


        <div class="md:col-span-2">
            <div class="text-zinc-400 mb-1">Notes</div>

            @if (_isEditing)
            {
                <MarkdownEditor
                    @bind-Value="_edit.Notes"
                    ShowActionButtons="false"
                    TestIdPrefix="service-notes-editor" />

            }
            else
            {
                <MarkdownViewer
                    Value="@Service.Notes"
                    ShowEditButton="false"
                    TestIdPrefix="service-notes-viewer" />

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

<SystemSelectionModal
    IsOpen="@_selectParentOpen"
    IsOpenChanged="v => _selectParentOpen = v"
    Title="Select a parent"
    Value="@SelectedParentName"
    OnAccept="HandleParentSelected"/>

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

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

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



@code
{
    bool _cloneOpen;

    void OpenClone()
    {
        _cloneOpen = true;
    }

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

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

}

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

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

    private bool _isEditing;
    private ServiceEditModel _edit = new();

    void BeginEdit()
    {
        _edit = ServiceEditModel.From(Service);
        _isEditing = true;
    }

    async Task Save()
    {
        _isEditing = false;
        await UpdateUseCase.ExecuteAsync(
            _edit.Name,
            _edit.Ip,
            _edit.Port,
            _edit.Protocol,
            _edit.Url,
            _edit.RunsOn,
            _edit.Notes
        );

        await OnSave.InvokeAsync(Service.Name);
    }

    void Cancel()
    {
        _isEditing = false;
    }

    bool _selectParentOpen;
    string? SelectedParentName;

    async Task HandleParentSelected(string? name)
    {
        SelectedParentName = name;
        await UpdateUseCase.ExecuteAsync(
            Service.Name,
            Service.Network?.Ip,
            Service.Network?.Port,
            Service.Network?.Protocol,
            Service.Network?.Url,
            new List<string>{name},
            Service.Notes);
        Service = await GetByNameUseCase.ExecuteAsync(Service.Name);
        _edit = ServiceEditModel.From(Service);
    }

    async Task HandleParentDeleted(string? name)
    {
        SelectedParentName = name;
        Service.RunsOn.Remove(SelectedParentName);
        await UpdateUseCase.ExecuteAsync(
            Service.Name,
            Service.Network?.Ip,
            Service.Network?.Port,
            Service.Network?.Protocol,
            Service.Network?.Url,
            Service.RunsOn,
            Service.Notes);
        Service = await GetByNameUseCase.ExecuteAsync(Service.Name);
        _edit = ServiceEditModel.From(Service);
    }

}


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

    void ConfirmDelete()
    {
        _confirmDeleteOpen = true;
    }

    async Task DeleteServer()
    {
        _confirmDeleteOpen = false;

        await DeleteUseCase.ExecuteAsync(Service.Name);

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

}

@code
{
    bool _renameOpen;

    void OpenRename()
    {
        _renameOpen = true;
    }

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

}